map-ol-utils 0.1.10 → 0.1.12

package/dist/index.cjs

@@ -144,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;
@@ -428,6 +426,37 @@ var buildMassMarksStyles = (getImgUrlFn) => {
     return massMarksStyles;
   };
 };
+var selectEventHandle = (vectorLayer, feature) => {
+  const data = feature.getProperties();
+  const { activeStyle } = data;
+  feature.setStyle(activeStyle);
+  emitter_default.emit("selected-feature", data);
+  vectorLayer.set("_hasActive", true);
+  if (vectorLayer.get("_isDynamic")) {
+    const activeImage = activeStyle.getImage();
+    setTimeout(() => {
+      emitter_default.emit(
+        "dynamic-marker",
+        Object.assign({}, data.rawData || {}, {
+          lnglat: data.lnglat,
+          style: data.style,
+          crsForm: data.crsForm,
+          width: activeImage.getWidth(),
+          height: activeImage.getHeight()
+        })
+      );
+    }, 1e3);
+  }
+  const isAutoFit = vectorLayer.get("_isAutoFit");
+  if (isAutoFit) {
+    const view = instance.getView();
+    view.animate({
+      duration: 1e3,
+      zoom: view.getZoom(),
+      center: (0, import_extent.getCenter)(feature.getGeometry().getExtent())
+    });
+  }
+};
 var createSelectByLayer = (vectorLayer) => {
   const interaction = new import_interaction.Select({
     style: null,
@@ -452,34 +481,14 @@ var createSelectByLayer = (vectorLayer) => {
     const { selected, deselected } = evt;
     if (selected.length) {
       const feature = selected[0];
-      const data = feature.getProperties();
-      const { activeStyle } = data;
-      feature.setStyle(activeStyle);
-      emitter_default.emit("selected-feature", data);
-      vectorLayer.set("_hasActive", true);
-      if (vectorLayer.get("_isDynamic")) {
-        const activeImage = activeStyle.getImage();
-        setTimeout(() => {
-          emitter_default.emit(
-            "dynamic-marker",
-            Object.assign({}, data.rawData || {}, {
-              lnglat: data.lnglat,
-              style: data.style,
-              crsForm: data.crsForm,
-              width: activeImage.getWidth(),
-              height: activeImage.getHeight()
-            })
-          );
-        }, 1e3);
-      }
-      const isAutoFit = vectorLayer.get("_isAutoFit");
-      if (isAutoFit) {
-        const view = instance.getView();
-        view.animate({
-          duration: 1e3,
-          zoom: view.getZoom(),
-          center: (0, import_extent.getCenter)(feature.getGeometry().getExtent())
-        });
+      const isClusterLayer = vectorLayer.get("_isClusterLayer");
+      if (isClusterLayer) {
+        const features = feature.get("features");
+        if (features.length === 1) {
+          selectEventHandle(vectorLayer, features[0]);
+        }
+      } else {
+        selectEventHandle(vectorLayer, feature);
       }
     }
     if (deselected.length) {
@@ -636,7 +645,7 @@ 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 { distance, minDistance, openClick, buildStyle, singleStyles, computedRadius } = config;
   const innerComputedRadius = (size) => Math.pow(size / count, 1 / 18);
   styleCache[1] = singleStyles;
   const innerBuildStyle = (feature) => {
@@ -668,11 +677,15 @@ var createClusterLayer = (dataList, config) => {
     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;
   };
-  return new import_Vector.default({
+  const vectorLayer = new import_Vector.default({
     zIndex: 200,
     style: (feature) => buildStyle ? buildStyle(feature) : innerBuildStyle(feature),
     source: new import_Cluster.default({
@@ -687,6 +700,15 @@ var createClusterLayer = (dataList, config) => {
       })
     })
   });
+  vectorLayer.setProperties({
+    _isCustom: true,
+    _isVectorLayer: true,
+    _isClusterLayer: true
+  });
+  if (openClick) {
+    createSelectByLayer(vectorLayer);
+  }
+  return vectorLayer;
 };
 
 // src/create-map.ts

package/dist/index.d.cts

@@ -61,6 +61,7 @@ type ClusterData = {
 };
 type ClusterConfig = {
     distance: number;
+    openClick?: boolean;
     minDistance: number;
     singleStyles: Style[];
     computedRadius?: (size: number) => number;

package/dist/index.d.ts

@@ -61,6 +61,7 @@ type ClusterData = {
 };
 type ClusterConfig = {
     distance: number;
+    openClick?: boolean;
     minDistance: number;
     singleStyles: Style[];
     computedRadius?: (size: number) => number;

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;
@@ -361,6 +359,37 @@ var buildMassMarksStyles = (getImgUrlFn) => {
     return massMarksStyles;
   };
 };
+var selectEventHandle = (vectorLayer, feature) => {
+  const data = feature.getProperties();
+  const { activeStyle } = data;
+  feature.setStyle(activeStyle);
+  emitter_default.emit("selected-feature", data);
+  vectorLayer.set("_hasActive", true);
+  if (vectorLayer.get("_isDynamic")) {
+    const activeImage = activeStyle.getImage();
+    setTimeout(() => {
+      emitter_default.emit(
+        "dynamic-marker",
+        Object.assign({}, data.rawData || {}, {
+          lnglat: data.lnglat,
+          style: data.style,
+          crsForm: data.crsForm,
+          width: activeImage.getWidth(),
+          height: activeImage.getHeight()
+        })
+      );
+    }, 1e3);
+  }
+  const isAutoFit = vectorLayer.get("_isAutoFit");
+  if (isAutoFit) {
+    const view = instance.getView();
+    view.animate({
+      duration: 1e3,
+      zoom: view.getZoom(),
+      center: getCenter(feature.getGeometry().getExtent())
+    });
+  }
+};
 var createSelectByLayer = (vectorLayer) => {
   const interaction = new Select({
     style: null,
@@ -385,34 +414,14 @@ var createSelectByLayer = (vectorLayer) => {
     const { selected, deselected } = evt;
     if (selected.length) {
       const feature = selected[0];
-      const data = feature.getProperties();
-      const { activeStyle } = data;
-      feature.setStyle(activeStyle);
-      emitter_default.emit("selected-feature", data);
-      vectorLayer.set("_hasActive", true);
-      if (vectorLayer.get("_isDynamic")) {
-        const activeImage = activeStyle.getImage();
-        setTimeout(() => {
-          emitter_default.emit(
-            "dynamic-marker",
-            Object.assign({}, data.rawData || {}, {
-              lnglat: data.lnglat,
-              style: data.style,
-              crsForm: data.crsForm,
-              width: activeImage.getWidth(),
-              height: activeImage.getHeight()
-            })
-          );
-        }, 1e3);
-      }
-      const isAutoFit = vectorLayer.get("_isAutoFit");
-      if (isAutoFit) {
-        const view = instance.getView();
-        view.animate({
-          duration: 1e3,
-          zoom: view.getZoom(),
-          center: getCenter(feature.getGeometry().getExtent())
-        });
+      const isClusterLayer = vectorLayer.get("_isClusterLayer");
+      if (isClusterLayer) {
+        const features = feature.get("features");
+        if (features.length === 1) {
+          selectEventHandle(vectorLayer, features[0]);
+        }
+      } else {
+        selectEventHandle(vectorLayer, feature);
       }
     }
     if (deselected.length) {
@@ -569,7 +578,7 @@ 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 { distance, minDistance, openClick, buildStyle, singleStyles, computedRadius } = config;
   const innerComputedRadius = (size) => Math.pow(size / count, 1 / 18);
   styleCache[1] = singleStyles;
   const innerBuildStyle = (feature) => {
@@ -601,11 +610,15 @@ var createClusterLayer = (dataList, config) => {
     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;
   };
-  return new VectorLayer({
+  const vectorLayer = new VectorLayer({
     zIndex: 200,
     style: (feature) => buildStyle ? buildStyle(feature) : innerBuildStyle(feature),
     source: new Cluster({
@@ -620,6 +633,15 @@ var createClusterLayer = (dataList, config) => {
       })
     })
   });
+  vectorLayer.setProperties({
+    _isCustom: true,
+    _isVectorLayer: true,
+    _isClusterLayer: true
+  });
+  if (openClick) {
+    createSelectByLayer(vectorLayer);
+  }
+  return vectorLayer;
 };
 
 // src/create-map.ts

package/package.json

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