map-ol-utils 0.1.9 → 0.1.10

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,
@@ -632,6 +633,61 @@ var createOverlay = (config = { id: "popup-container", positioning: "top-center"
     )
   );
 };
+var createClusterLayer = (dataList, config) => {
+  const count = dataList.length;
+  const styleCache = {};
+  const { distance, minDistance, 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");
+      return style[index];
+    }
+    return style;
+  };
+  return 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;
+        })
+      })
+    })
+  });
+};
 
 // src/create-map.ts
 var import_interaction2 = require("ol/interaction");
@@ -985,6 +1041,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';
@@ -241,5 +242,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';
@@ -241,5 +242,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

@@ -566,6 +566,61 @@ var createOverlay = (config = { id: "popup-container", positioning: "top-center"
     )
   );
 };
+var createClusterLayer = (dataList, config) => {
+  const count = dataList.length;
+  const styleCache = {};
+  const { distance, minDistance, 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");
+      return style[index];
+    }
+    return style;
+  };
+  return 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;
+        })
+      })
+    })
+  });
+};
 
 // src/create-map.ts
 import { defaults as interactionDefaults } from "ol/interaction";
@@ -918,6 +973,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.10",
   "type": "module",
   "description": "Openlayers utils library",
   "files": [