hn-map 1.1.13 → 1.1.14

package/dist/index.js

@@ -1775,17 +1775,23 @@
           className: "my-popupAttr-class"
         });
         var handleClick = function handleClick(e) {
-          // const data = e.features[0].properties;
-          var data = _this.option.data;
-          // 创建弹窗内容
-          var content = "";
-          for (var key in data) {
-            content += "<div>".concat(key, ": ").concat(data[key], "</div>");
+          var features = _this.hnMap.map.map.queryRenderedFeatures(e.point);
+          if (features.length > 0) {
+            // 当前点击的第一层图形为当前图形时，才满足点击事件
+            if (features[0].layer.id === _this.id) {
+              // const data = e.features[0].properties;
+              var data = _this.option.data;
+              // 创建弹窗内容
+              var content = "";
+              for (var key in data) {
+                content += "<div>".concat(key, ": ").concat(data[key], "</div>");
+              }
+              _this.infoWindow.setHTML(content);
+              _this.infoWindow.setLngLat(e.lngLat).addTo(_this.hnMap.map.map);
+            }
           }
-          _this.infoWindow.setHTML(content);
-          _this.infoWindow.setLngLat(e.lngLat).addTo(_this.hnMap.map.map);
         };
-        this.hnMap.map.map.on("click", this.config.id, handleClick);
+        this.hnMap.map.map.on("click", this.id, handleClick);
       }
       // 添加自定义dom弹窗
     }, {
@@ -1800,13 +1806,19 @@
           className: "my-customPopup-class"
         });
         var handleClick = function handleClick(e) {
-          var data = _this2.option.data;
-          // const data = e.features[0].properties;
-          var dom = getCustomDom(data);
-          _this2.infoWindow.setHTML(dom);
-          _this2.infoWindow.setLngLat(e.lngLat).addTo(_this2.hnMap.map.map);
+          var features = _this2.hnMap.map.map.queryRenderedFeatures(e.point);
+          if (features.length > 0) {
+            // 当前点击的第一层图形为当前图形时，才满足点击事件
+            if (features[0].layer.id === _this2.id) {
+              var data = _this2.option.data;
+              // const data = e.features[0].properties;
+              var dom = getCustomDom(data);
+              _this2.infoWindow.setHTML(dom);
+              _this2.infoWindow.setLngLat(e.lngLat).addTo(_this2.hnMap.map.map);
+            }
+          }
         };
-        this.hnMap.map.map.on("click", this.config.id, handleClick);
+        this.hnMap.map.map.on("click", this.id, handleClick);
       }
       // 弹窗删除
     }, {
@@ -1856,8 +1868,14 @@
         this.off(eventType);
         switch (eventType) {
           case "click":
-            this.event[eventType] = function () {
-              callback(_this3.option.data);
+            this.event[eventType] = function (e) {
+              var features = _this3.hnMap.map.map.queryRenderedFeatures(e.point);
+              if (features.length > 0) {
+                // 当前点击的第一层图形为当前图形时，才满足点击事件
+                if (features[0].layer.id === _this3.id) {
+                  callback(_this3.option.data);
+                }
+              }
             };
             break;
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hn-map",
-  "version": "1.1.13",
+  "version": "1.1.14",
   "description": "hn-map集成mars3d、高德、思极",
   "main": "dist/index.js",
   "author": "庞大仙",

package/src/base/siji_entity.ts

@@ -1,126 +1,147 @@
-import { deepMerge } from "../util";
+import {deepMerge} from "../util";
+
 export default class siji_entity {
-  event: any = {};
-  infoWindow: any = null;
-  hnMap: any = null;
-  config: any = null;
-  graphic: any = null;
-  option: any = null;
-  type: any = null;
-  show: boolean = false;
-  id:any = null
-
-  constructor(hnMap: any) {
-    this.hnMap = hnMap;
-    this.event = {};
-    this.show = false;
-  }
-
-  // 添加属性弹窗
-  addPopupByAttr() {
-    // 如果已有弹窗，先关闭
-    this.removePopup();
-
-    this.infoWindow = new SGMap.Popup({
-      offset: { bottom: [0, 0] },
-      className: "my-popupAttr-class",
-    });
-
-    const handleClick = (e: any) => {
-      // const data = e.features[0].properties;
-      const data = this.option.data;
-      // 创建弹窗内容
-      let content = "";
-      for (const key in data) {
-        content += `<div>${key}: ${data[key]}</div>`;
-      }
-
-      this.infoWindow.setHTML(content);
-      this.infoWindow.setLngLat(e.lngLat).addTo(this.hnMap.map.map);
-    };
-
-    this.hnMap.map.map.on("click", this.config.id, handleClick);
-  }
-
-  // 添加自定义dom弹窗
-  addCustomPopup(getCustomDom: any) {
-    this.removePopup();
-    this.infoWindow = new SGMap.Popup({
-      offset: { bottom: [0, 0] },
-      className: "my-customPopup-class",
-    });
-
-    const handleClick = (e: any) => {
-      const data = this.option.data;
-      // const data = e.features[0].properties;
-      const dom = getCustomDom(data);
-      this.infoWindow.setHTML(dom);
-      this.infoWindow.setLngLat(e.lngLat).addTo(this.hnMap.map.map);
-    };
-
-    this.hnMap.map.map.on("click", this.config.id, handleClick);
-  }
-
-  // 弹窗删除
-  removePopup() {
-    if (this.infoWindow) {
-      this.infoWindow.remove();
+    event: any = {};
+    infoWindow: any = null;
+    hnMap: any = null;
+    config: any = null;
+    graphic: any = null;
+    option: any = null;
+    type: any = null;
+    show: boolean = false;
+    id: any = null
+
+    constructor(hnMap: any) {
+        this.hnMap = hnMap;
+        this.event = {};
+        this.show = false;
     }
-  }
-
-  flyTo(option: any = {}) {
-    deepMerge(this.option, option);
-    let zoom = this.hnMap.map.map.getZoom();
-    let center;
-    if (this.option.center) {
-      center = this.option.center;
-    } else {
-      if (
-        this.type == "line" ||
-        this.type == "dash" ||
-        this.type == "flicker" ||
-        this.type == "flow" ||
-        this.type == "arrow" ||
-        this.type == "mapLabel" ||
-        this.type == "rectangle"
-      ) {
-        center = this.option.position[0];
-      } else if (this.type == "route") {
-        center = [this.option.position[0][0], this.option.position[0][1]];
-      } else if (this.type == "polygon") {
-        center = this.option.position[0][0];
-      } else {
-        center = this.option.position;
-      }
+
+    // 添加属性弹窗
+    addPopupByAttr() {
+        // 如果已有弹窗，先关闭
+        this.removePopup();
+
+        this.infoWindow = new SGMap.Popup({
+            offset: {bottom: [0, 0]},
+            className: "my-popupAttr-class",
+        });
+
+        const handleClick = (e: any) => {
+
+            const features = this.hnMap.map.map.queryRenderedFeatures(e.point);
+            if (features.length > 0) {
+                // 当前点击的第一层图形为当前图形时，才满足点击事件
+                if (features[0].layer.id === this.id) {
+                    // const data = e.features[0].properties;
+                    const data = this.option.data;
+                    // 创建弹窗内容
+                    let content = "";
+                    for (const key in data) {
+                        content += `<div>${key}: ${data[key]}</div>`;
+                    }
+
+                    this.infoWindow.setHTML(content);
+                    this.infoWindow.setLngLat(e.lngLat).addTo(this.hnMap.map.map);
+                }
+
+            }
+        };
+
+        this.hnMap.map.map.on("click", this.id, handleClick);
     }
-    this.hnMap.map.map.flyTo({
-      duration: 1000, // 持续时间
-      zoom: this.option.zoom || zoom,
-      center: center,
-    });
-  }
-
-  destroy() {
-    this.hnMap.map.map.removeLayer(this.config.id);
-    this.hnMap.map.map.removeSource(this.config.id);
-  }
-
-  on(eventType: any, callback: any) {
-    this.off(eventType);
-    switch (eventType) {
-      case "click":
-        this.event[eventType] = () => {
-          callback(this.option.data);
+
+    // 添加自定义dom弹窗
+    addCustomPopup(getCustomDom: any) {
+        this.removePopup();
+        this.infoWindow = new SGMap.Popup({
+            offset: {bottom: [0, 0]},
+            className: "my-customPopup-class",
+        });
+
+        const handleClick = (e: any) => {
+            const features = this.hnMap.map.map.queryRenderedFeatures(e.point);
+            if (features.length > 0) {
+                // 当前点击的第一层图形为当前图形时，才满足点击事件
+                if (features[0].layer.id === this.id) {
+                    const data = this.option.data;
+                    // const data = e.features[0].properties;
+                    const dom = getCustomDom(data);
+                    this.infoWindow.setHTML(dom);
+                    this.infoWindow.setLngLat(e.lngLat).addTo(this.hnMap.map.map);
+                }
+            }
         };
-        break;
+
+        this.hnMap.map.map.on("click", this.id, handleClick);
+    }
+
+    // 弹窗删除
+    removePopup() {
+        if (this.infoWindow) {
+            this.infoWindow.remove();
+        }
     }
-    this.hnMap.map.map.on(eventType, this.id, this.event[eventType]);
-  } // 监听事件
 
-  off(eventType: any) {
-    if (this.event[eventType]) {
-      this.hnMap.map.map.off(eventType, this.id, this.event[eventType]);
-      delete this.event[eventType];
+    flyTo(option: any = {}) {
+        deepMerge(this.option, option);
+        let zoom = this.hnMap.map.map.getZoom();
+        let center;
+        if (this.option.center) {
+            center = this.option.center;
+        } else {
+            if (
+                this.type == "line" ||
+                this.type == "dash" ||
+                this.type == "flicker" ||
+                this.type == "flow" ||
+                this.type == "arrow" ||
+                this.type == "mapLabel" ||
+                this.type == "rectangle"
+            ) {
+                center = this.option.position[0];
+            } else if (this.type == "route") {
+                center = [this.option.position[0][0], this.option.position[0][1]];
+            } else if (this.type == "polygon") {
+                center = this.option.position[0][0];
+            } else {
+                center = this.option.position;
+            }
+        }
+        this.hnMap.map.map.flyTo({
+            duration: 1000, // 持续时间
+            zoom: this.option.zoom || zoom,
+            center: center,
+        });
+    }
+
+    destroy() {
+        this.hnMap.map.map.removeLayer(this.config.id);
+        this.hnMap.map.map.removeSource(this.config.id);
+    }
+
+    on(eventType: any, callback: any) {
+        this.off(eventType);
+        switch (eventType) {
+            case "click":
+                this.event[eventType] = (e:any) => {
+                    const features = this.hnMap.map.map.queryRenderedFeatures(e.point);
+                    if (features.length > 0) {
+                        // 当前点击的第一层图形为当前图形时，才满足点击事件
+                        if (features[0].layer.id === this.id) {
+                            callback(this.option.data);
+                        }
+                    }
+                };
+                break;
+        }
+        this.hnMap.map.map.on(eventType, this.id, this.event[eventType]);
+    } // 监听事件
+
+    off(eventType: any) {
+        if (this.event[eventType]) {
+            this.hnMap.map.map.off(eventType, this.id, this.event[eventType]);
+            delete this.event[eventType];
+        }
     }
-  }
 }