map-ol-utils 0.1.9 → 0.1.11

package/dist/index.cjs

@@ -75,6 +75,7 @@ __export(index_exports, {
   createAnimationMarker: () => createAnimationMarker,
   createBaseLayer: () => createBaseLayer,
   createBusinessLayer: () => createBusinessLayer,
+  createClusterLayer: () => createClusterLayer,
   createMap: () => createMap,
   createMapInstance: () => createMapInstance,
   createMapWorldLayer: () => createMapWorldLayer,
@@ -143,9 +144,7 @@ var removeOverlays = (key = "") => {
     overlays.forEach((overlay) => instance.removeOverlay(overlay));
   }
 };
-var removeAnimationMarker = () => {
-  removeOverlays("_isAnimationMarker");
-};
+var removeAnimationMarker = () => removeOverlays("_isAnimationMarker");
 var createAnimationMarker = (imgUrl, data) => {
   removeAnimationMarker();
   const { width, height, lnglat, crsForm } = data;
@@ -632,6 +631,73 @@ var createOverlay = (config = { id: "popup-container", positioning: "top-center"
     )
   );
 };
+var createClusterLayer = (dataList, config) => {
+  const count = dataList.length;
+  const styleCache = {};
+  const { distance, minDistance, openClick, buildStyle, singleStyles, computedRadius } = config;
+  const innerComputedRadius = (size) => Math.pow(size / count, 1 / 18);
+  styleCache[1] = singleStyles;
+  const innerBuildStyle = (feature) => {
+    const size = feature.get("features").length;
+    let style = styleCache[size];
+    const tempRadius = computedRadius ? computedRadius(size) : innerComputedRadius(size);
+    if (!style) {
+      style = new import_style.Style({
+        image: new import_Circle.default({
+          radius: tempRadius * 20,
+          stroke: new import_style.Stroke({
+            width: 2,
+            color: `hsla(${180 - tempRadius * 180}, 100%, 40%, 1)`
+          }),
+          fill: new import_style.Fill({
+            color: `hsla(${180 - tempRadius * 180}, 100%, 50%, 1)`
+          })
+        }),
+        text: new import_style.Text({
+          text: size.toString(),
+          fill: new import_style.Fill({
+            color: `hsla(${180 - tempRadius * 180}, 100%, 10%, 1)`
+          }),
+          textBaseline: "middle"
+        })
+      });
+      styleCache[size] = style;
+    }
+    if (Array.isArray(style)) {
+      const tempFeature = feature.get("features")[0];
+      const index = tempFeature.get("styleIndex");
+      tempFeature.setProperties({
+        unActiveStyle: style[index],
+        activeStyle: style[index + style.length / 2]
+      });
+      return style[index];
+    }
+    return style;
+  };
+  const vectorLayer = new import_Vector.default({
+    zIndex: 200,
+    style: (feature) => buildStyle ? buildStyle(feature) : innerBuildStyle(feature),
+    source: new import_Cluster.default({
+      distance: distance || 80,
+      minDistance: minDistance || 0,
+      source: new import_Vector2.default({
+        features: dataList.map((item) => {
+          const feature = new import_ol.Feature(new import_geom.Point(item.lnglat));
+          feature.setProperties(item);
+          return feature;
+        })
+      })
+    })
+  });
+  vectorLayer.setProperties({
+    _isCustom: true,
+    _isVectorLayer: true
+  });
+  if (openClick) {
+    createSelectByLayer(vectorLayer);
+  }
+  return vectorLayer;
+};
 
 // src/create-map.ts
 var import_interaction2 = require("ol/interaction");
@@ -985,6 +1051,7 @@ var createWmtsLayer = (serverUrl) => (config) => __async(null, null, function* (
   createAnimationMarker,
   createBaseLayer,
   createBusinessLayer,
+  createClusterLayer,
   createMap,
   createMapInstance,
   createMapWorldLayer,

package/dist/index.d.cts

@@ -12,6 +12,7 @@ import * as ol_renderer_Layer from 'ol/renderer/Layer';
 import * as ol_geom from 'ol/geom';
 import { SimpleGeometry, Point } from 'ol/geom';
 import { Options } from 'ol/Overlay';
+import Cluster from 'ol/source/Cluster';
 import { Select } from 'ol/interaction';
 import VectorLayer from 'ol/layer/Vector';
 import { StyleLike } from 'ol/style/Style';
@@ -60,6 +61,7 @@ type ClusterData = {
 };
 type ClusterConfig = {
     distance: number;
+    openClick?: boolean;
     minDistance: number;
     singleStyles: Style[];
     computedRadius?: (size: number) => number;
@@ -241,5 +243,11 @@ declare const updateMarksLayersByStatus: (checkedStatusList?: string[]) => MassD
  * @param config
  */
 declare const createOverlay: (config?: Options) => Overlay;
+/**
+ * 创建聚合图层
+ * @param dataList
+ * @param config
+ */
+declare const createClusterLayer: (dataList: ClusterData[], config: ClusterConfig) => VectorLayer<Cluster<Feature<Point>>, Feature<ol_geom.Geometry>>;
 
-export { type ClusterConfig, type ClusterData, type CustomMap, type GeometryCoordinates, GeometryType, type GetImgUrl, type GetImgUrlFn, type IconConfig, type MassData, type VectorConfig, type WmtsSourceOptions, activeFeatureByUid, addMassMarksLayer, appendFeaturesByLayer, buildMassMarksStyles, createAnimationMarker, createBaseLayer, createBusinessLayer, createMap, createMapInstance, createMapWorldLayer, createMassMarksLayer, createOverlay, createSelectByLayer, createVectorFaceLayer, createVectorLineLayer, createWmtsLayer, disposeMap, emitter, getLayerByName, getLayersDataList, getMapInstance, instance, removeAllLayers, removeLayerByName, removeOverlays, resetActiveFeature, resetActiveVector, resetMap, resetZoomAndCenter, setFitViewByCoords, setFitViewByGeom, setFitViewByLayer, updateMarksLayersByStatus };
+export { type ClusterConfig, type ClusterData, type CustomMap, type GeometryCoordinates, GeometryType, type GetImgUrl, type GetImgUrlFn, type IconConfig, type MassData, type VectorConfig, type WmtsSourceOptions, activeFeatureByUid, addMassMarksLayer, appendFeaturesByLayer, buildMassMarksStyles, createAnimationMarker, createBaseLayer, createBusinessLayer, createClusterLayer, createMap, createMapInstance, createMapWorldLayer, createMassMarksLayer, createOverlay, createSelectByLayer, createVectorFaceLayer, createVectorLineLayer, createWmtsLayer, disposeMap, emitter, getLayerByName, getLayersDataList, getMapInstance, instance, removeAllLayers, removeLayerByName, removeOverlays, resetActiveFeature, resetActiveVector, resetMap, resetZoomAndCenter, setFitViewByCoords, setFitViewByGeom, setFitViewByLayer, updateMarksLayersByStatus };

package/dist/index.d.ts

@@ -12,6 +12,7 @@ import * as ol_renderer_Layer from 'ol/renderer/Layer';
 import * as ol_geom from 'ol/geom';
 import { SimpleGeometry, Point } from 'ol/geom';
 import { Options } from 'ol/Overlay';
+import Cluster from 'ol/source/Cluster';
 import { Select } from 'ol/interaction';
 import VectorLayer from 'ol/layer/Vector';
 import { StyleLike } from 'ol/style/Style';
@@ -60,6 +61,7 @@ type ClusterData = {
 };
 type ClusterConfig = {
     distance: number;
+    openClick?: boolean;
     minDistance: number;
     singleStyles: Style[];
     computedRadius?: (size: number) => number;
@@ -241,5 +243,11 @@ declare const updateMarksLayersByStatus: (checkedStatusList?: string[]) => MassD
  * @param config
  */
 declare const createOverlay: (config?: Options) => Overlay;
+/**
+ * 创建聚合图层
+ * @param dataList
+ * @param config
+ */
+declare const createClusterLayer: (dataList: ClusterData[], config: ClusterConfig) => VectorLayer<Cluster<Feature<Point>>, Feature<ol_geom.Geometry>>;
 
-export { type ClusterConfig, type ClusterData, type CustomMap, type GeometryCoordinates, GeometryType, type GetImgUrl, type GetImgUrlFn, type IconConfig, type MassData, type VectorConfig, type WmtsSourceOptions, activeFeatureByUid, addMassMarksLayer, appendFeaturesByLayer, buildMassMarksStyles, createAnimationMarker, createBaseLayer, createBusinessLayer, createMap, createMapInstance, createMapWorldLayer, createMassMarksLayer, createOverlay, createSelectByLayer, createVectorFaceLayer, createVectorLineLayer, createWmtsLayer, disposeMap, emitter, getLayerByName, getLayersDataList, getMapInstance, instance, removeAllLayers, removeLayerByName, removeOverlays, resetActiveFeature, resetActiveVector, resetMap, resetZoomAndCenter, setFitViewByCoords, setFitViewByGeom, setFitViewByLayer, updateMarksLayersByStatus };
+export { type ClusterConfig, type ClusterData, type CustomMap, type GeometryCoordinates, GeometryType, type GetImgUrl, type GetImgUrlFn, type IconConfig, type MassData, type VectorConfig, type WmtsSourceOptions, activeFeatureByUid, addMassMarksLayer, appendFeaturesByLayer, buildMassMarksStyles, createAnimationMarker, createBaseLayer, createBusinessLayer, createClusterLayer, createMap, createMapInstance, createMapWorldLayer, createMassMarksLayer, createOverlay, createSelectByLayer, createVectorFaceLayer, createVectorLineLayer, createWmtsLayer, disposeMap, emitter, getLayerByName, getLayersDataList, getMapInstance, instance, removeAllLayers, removeLayerByName, removeOverlays, resetActiveFeature, resetActiveVector, resetMap, resetZoomAndCenter, setFitViewByCoords, setFitViewByGeom, setFitViewByLayer, updateMarksLayersByStatus };

package/dist/index.js

@@ -77,9 +77,7 @@ var removeOverlays = (key = "") => {
     overlays.forEach((overlay) => instance.removeOverlay(overlay));
   }
 };
-var removeAnimationMarker = () => {
-  removeOverlays("_isAnimationMarker");
-};
+var removeAnimationMarker = () => removeOverlays("_isAnimationMarker");
 var createAnimationMarker = (imgUrl, data) => {
   removeAnimationMarker();
   const { width, height, lnglat, crsForm } = data;
@@ -566,6 +564,73 @@ var createOverlay = (config = { id: "popup-container", positioning: "top-center"
     )
   );
 };
+var createClusterLayer = (dataList, config) => {
+  const count = dataList.length;
+  const styleCache = {};
+  const { distance, minDistance, openClick, buildStyle, singleStyles, computedRadius } = config;
+  const innerComputedRadius = (size) => Math.pow(size / count, 1 / 18);
+  styleCache[1] = singleStyles;
+  const innerBuildStyle = (feature) => {
+    const size = feature.get("features").length;
+    let style = styleCache[size];
+    const tempRadius = computedRadius ? computedRadius(size) : innerComputedRadius(size);
+    if (!style) {
+      style = new Style({
+        image: new CircleStyle({
+          radius: tempRadius * 20,
+          stroke: new Stroke({
+            width: 2,
+            color: `hsla(${180 - tempRadius * 180}, 100%, 40%, 1)`
+          }),
+          fill: new Fill({
+            color: `hsla(${180 - tempRadius * 180}, 100%, 50%, 1)`
+          })
+        }),
+        text: new Text({
+          text: size.toString(),
+          fill: new Fill({
+            color: `hsla(${180 - tempRadius * 180}, 100%, 10%, 1)`
+          }),
+          textBaseline: "middle"
+        })
+      });
+      styleCache[size] = style;
+    }
+    if (Array.isArray(style)) {
+      const tempFeature = feature.get("features")[0];
+      const index = tempFeature.get("styleIndex");
+      tempFeature.setProperties({
+        unActiveStyle: style[index],
+        activeStyle: style[index + style.length / 2]
+      });
+      return style[index];
+    }
+    return style;
+  };
+  const vectorLayer = new VectorLayer({
+    zIndex: 200,
+    style: (feature) => buildStyle ? buildStyle(feature) : innerBuildStyle(feature),
+    source: new Cluster({
+      distance: distance || 80,
+      minDistance: minDistance || 0,
+      source: new VectorSource({
+        features: dataList.map((item) => {
+          const feature = new Feature(new Point(item.lnglat));
+          feature.setProperties(item);
+          return feature;
+        })
+      })
+    })
+  });
+  vectorLayer.setProperties({
+    _isCustom: true,
+    _isVectorLayer: true
+  });
+  if (openClick) {
+    createSelectByLayer(vectorLayer);
+  }
+  return vectorLayer;
+};
 
 // src/create-map.ts
 import { defaults as interactionDefaults } from "ol/interaction";
@@ -918,6 +983,7 @@ export {
   createAnimationMarker,
   createBaseLayer,
   createBusinessLayer,
+  createClusterLayer,
   createMap,
   createMapInstance,
   createMapWorldLayer,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "map-ol-utils",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "type": "module",
   "description": "Openlayers utils library",
   "files": [