map-ol-utils 0.1.11 → 0.1.13

package/dist/index.cjs

@@ -426,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,
@@ -447,37 +478,21 @@ var createSelectByLayer = (vectorLayer) => {
     }
   });
   interaction.on("select", (evt) => {
+    const isClusterLayer = vectorLayer.get("_isClusterLayer");
     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())
-        });
+      if (isClusterLayer) {
+        const features = feature.get("features");
+        if (features.length === 1) {
+          const cluterFeature = features[0];
+          const data = cluterFeature.getProperties();
+          const { activeStyle } = data;
+          feature.setStyle(activeStyle);
+          selectEventHandle(vectorLayer, cluterFeature);
+        }
+      } else {
+        selectEventHandle(vectorLayer, feature);
       }
     }
     if (deselected.length) {
@@ -691,7 +706,8 @@ var createClusterLayer = (dataList, config) => {
   });
   vectorLayer.setProperties({
     _isCustom: true,
-    _isVectorLayer: true
+    _isVectorLayer: true,
+    _isClusterLayer: true
   });
   if (openClick) {
     createSelectByLayer(vectorLayer);

package/dist/index.js

@@ -359,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,
@@ -380,37 +411,21 @@ var createSelectByLayer = (vectorLayer) => {
     }
   });
   interaction.on("select", (evt) => {
+    const isClusterLayer = vectorLayer.get("_isClusterLayer");
     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())
-        });
+      if (isClusterLayer) {
+        const features = feature.get("features");
+        if (features.length === 1) {
+          const cluterFeature = features[0];
+          const data = cluterFeature.getProperties();
+          const { activeStyle } = data;
+          feature.setStyle(activeStyle);
+          selectEventHandle(vectorLayer, cluterFeature);
+        }
+      } else {
+        selectEventHandle(vectorLayer, feature);
       }
     }
     if (deselected.length) {
@@ -624,7 +639,8 @@ var createClusterLayer = (dataList, config) => {
   });
   vectorLayer.setProperties({
     _isCustom: true,
-    _isVectorLayer: true
+    _isVectorLayer: true,
+    _isClusterLayer: true
   });
   if (openClick) {
     createSelectByLayer(vectorLayer);

package/package.json

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