map-ol-utils 0.1.8 → 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,
@@ -127,14 +128,16 @@ var import_control = require("ol/control");
 // src/layer-utils.ts
 var import_format = require("ol/format");
 var import_ol = require("ol");
+var import_Cluster = __toESM(require("ol/source/Cluster"), 1);
 var import_interaction = require("ol/interaction");
+var import_Circle = __toESM(require("ol/style/Circle"), 1);
 var import_gcoord = __toESM(require("gcoord"), 1);
 var import_Vector = __toESM(require("ol/layer/Vector"), 1);
 var import_Vector2 = __toESM(require("ol/source/Vector"), 1);
 var import_geom = require("ol/geom");
 var import_condition = require("ol/events/condition");
-var import_style = require("ol/style");
 var import_extent = require("ol/extent");
+var import_style = require("ol/style");
 var removeOverlays = (key = "") => {
   if (instance) {
     const overlays = instance.getOverlays().getArray().filter((overlay) => overlay.get(key || "position"));
@@ -630,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");
@@ -983,6 +1041,7 @@ var createWmtsLayer = (serverUrl) => (config) => __async(null, null, function* (
   createAnimationMarker,
   createBaseLayer,
   createBusinessLayer,
+  createClusterLayer,
   createMap,
   createMapInstance,
   createMapWorldLayer,

package/dist/index.d.cts

@@ -4,17 +4,20 @@ import { CRSTypes } from 'gcoord';
 import * as ol_source from 'ol/source';
 import { Source, XYZ, WMTS } from 'ol/source';
 import { Coordinate } from 'ol/coordinate';
+import { Style } from 'ol/style';
+import { FeatureLike } from 'ol/Feature';
 import { Emitter, EventType } from 'mitt';
 import TileLayer from 'ol/layer/Tile';
 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 { FitOptions, AnimationOptions } from 'ol/View';
+import Cluster from 'ol/source/Cluster';
 import { Select } from 'ol/interaction';
 import VectorLayer from 'ol/layer/Vector';
 import { StyleLike } from 'ol/style/Style';
 import VectorSource from 'ol/source/Vector';
+import { FitOptions, AnimationOptions } from 'ol/View';
 
 interface CustomMap extends Map$1 {
     activeBaseLayer?: string;
@@ -47,6 +50,22 @@ type VectorConfig = {
     activeStrokeWeight?: number;
     colorMap?: Map<string, string>;
 };
+type ClusterData = {
+    _uuid: string;
+    name: string;
+    style: number;
+    lnglat: Array<number>;
+    rawData: {
+        [key: string]: any;
+    };
+};
+type ClusterConfig = {
+    distance: number;
+    minDistance: number;
+    singleStyles: Style[];
+    computedRadius?: (size: number) => number;
+    buildStyle?: (feature: FeatureLike) => Style;
+};
 type IconConfig = {
     baseUrl: string;
     hasLine?: boolean;
@@ -223,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 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

@@ -4,17 +4,20 @@ import { CRSTypes } from 'gcoord';
 import * as ol_source from 'ol/source';
 import { Source, XYZ, WMTS } from 'ol/source';
 import { Coordinate } from 'ol/coordinate';
+import { Style } from 'ol/style';
+import { FeatureLike } from 'ol/Feature';
 import { Emitter, EventType } from 'mitt';
 import TileLayer from 'ol/layer/Tile';
 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 { FitOptions, AnimationOptions } from 'ol/View';
+import Cluster from 'ol/source/Cluster';
 import { Select } from 'ol/interaction';
 import VectorLayer from 'ol/layer/Vector';
 import { StyleLike } from 'ol/style/Style';
 import VectorSource from 'ol/source/Vector';
+import { FitOptions, AnimationOptions } from 'ol/View';
 
 interface CustomMap extends Map$1 {
     activeBaseLayer?: string;
@@ -47,6 +50,22 @@ type VectorConfig = {
     activeStrokeWeight?: number;
     colorMap?: Map<string, string>;
 };
+type ClusterData = {
+    _uuid: string;
+    name: string;
+    style: number;
+    lnglat: Array<number>;
+    rawData: {
+        [key: string]: any;
+    };
+};
+type ClusterConfig = {
+    distance: number;
+    minDistance: number;
+    singleStyles: Style[];
+    computedRadius?: (size: number) => number;
+    buildStyle?: (feature: FeatureLike) => Style;
+};
 type IconConfig = {
     baseUrl: string;
     hasLine?: boolean;
@@ -223,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 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

@@ -61,14 +61,16 @@ import { defaults } from "ol/control";
 // src/layer-utils.ts
 import { GeoJSON } from "ol/format";
 import { Feature, Overlay } from "ol";
+import Cluster from "ol/source/Cluster";
 import { Select } from "ol/interaction";
+import CircleStyle from "ol/style/Circle";
 import gcoord from "gcoord";
 import VectorLayer from "ol/layer/Vector";
 import VectorSource from "ol/source/Vector";
 import { Point } from "ol/geom";
 import { singleClick } from "ol/events/condition";
-import { Fill, Icon, Stroke, Style } from "ol/style";
 import { boundingExtent, getCenter } from "ol/extent";
+import { Icon, Text, Fill, Style, Stroke } from "ol/style";
 var removeOverlays = (key = "") => {
   if (instance) {
     const overlays = instance.getOverlays().getArray().filter((overlay) => overlay.get(key || "position"));
@@ -564,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";
@@ -916,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.8",
+  "version": "0.1.10",
   "type": "module",
   "description": "Openlayers utils library",
   "files": [