hn-map 1.1.14 → 1.1.16

package/src/layer/cluster.ts

@@ -1,276 +1,536 @@
-import {deepMerge, wgs84ToGcj02Format} from '../util'
+import { deepMerge, wgs84ToGcj02Format, convertPosition } from "../util";
 import Layer from "./layer";
 
 export default (hnMap: any) => {
-
-    const defaultOption = {
-        id: "",
-        position: [],
-        pixelRange: 20,
-        cluster: true,
-        image: '',
-        width: 20,
-        height: 20,
-        data: null
+  const defaultOption = {
+    id: "",
+    position: [],
+    pixelRange: 20,
+    cluster: true,
+    image: "",
+    width: 20,
+    height: 20,
+    data: null,
+  };
+  class mars3d_class extends Layer(hnMap) {
+    type: any = "cluster";
+    id: any = null;
+    option: any = JSON.parse(JSON.stringify(defaultOption));
+    config_layer: any = null;
+    config_label: any = null;
+    children: any = null;
+    layerEntity: any = null;
+
+    constructor(option: any) {
+      super(option);
+      this.id = option.id;
+      this.children = [];
+      deepMerge(this.option, option);
+      this.config_layer = this.formatConfigLayer(this.option);
+      this.config_label = this.formatConfigLabel(this.option);
+      this.layerEntity = new mars3d.layer.GraphicLayer(this.config_layer);
+      // this.graphic = new mars3d.graphic.BillboardEntity(this.config_label);
     }
-    class mars3d_class extends Layer(hnMap) {
-        type: any = 'cluster'
-        id: any = null
-        option: any = JSON.parse(JSON.stringify(defaultOption))
-        config_layer: any = null
-        config_label: any = null
-        children: any = null
-        layerEntity: any = null
-
-        constructor(option: any) {
-            super(option)
-            this.id = option.id
-            this.children = []
-            deepMerge(this.option, option)
-            this.config_layer = this.formatConfigLayer(this.option)
-            this.config_label = this.formatConfigLabel(this.option)
-            this.layerEntity = new mars3d.layer.GraphicLayer(this.config_layer)
-        }
-
-        // 格式化layer配置
-        formatConfigLayer(option: any) {
-            return {
-                id: option.id,
-                cluster: {
-                    enabled: option.cluster,
-                    pixelRange: option.pixelRange
-                }
-            }
-        }
 
-        // 格式化点位配置
-        formatConfigLabel(option: any) {
-            return {
-                id: option.id,
-                image: option.image,
-                width: option.width,
-                height: option.height,
-            }
-        }
-
-        clearEntity() {
-            this.children = []
-            this.layerEntity.clear()
-        }
-
-        addEntity(entity: any) {
-            this.children.push(entity)
-            this.layerEntity.addGraphic(entity.graphic)
-        }
-
-        setPosition(data: any) {
-            this.clearEntity()
-            data.forEach((item: any, index: any) => {
-                let imagePointOption = {
-                    id: this.config_label.id + '_point' + item.id,
-                    position: item.position,
-                    image: this.config_label.image,
-                    height: this.config_label.height,
-                    width: this.config_label.width,
-                    data: item.data
-                }
-                const imagePoint = new hnMap.ImagePoint(imagePointOption);
-                this.addEntity(imagePoint)
-            })
-        }
+    // 格式化layer配置
+    formatConfigLayer(option: any) {
+      return {
+        id: option.id,
+        cluster: {
+          enabled: option.cluster !== false, // 默认开启聚合
+          pixelRange: option.pixelRange || 20,
+          // 添加更多聚合样式配置
+          styles: [
+            {
+              scale: 1,
+              image: "img/marker/mark1.png",
+              label: {
+                text: "{count}",
+                color: "#ffffff",
+                font_size: 16,
+                stroke: true,
+                strokeColor: "#000000",
+              },
+            },
+            {
+              scale: 1.5,
+              image: "img/marker/mark2.png",
+              label: {
+                text: "{count}",
+                color: "#ffffff",
+                font_size: 18,
+              },
+            },
+            {
+              scale: 2,
+              image: "img/marker/mark3.png",
+              label: {
+                text: "{count}",
+                color: "#ffffff",
+                font_size: 20,
+              },
+            },
+          ],
+        },
+      };
+    }
 
-        destroy() {
-            this.clearEntity()
-            this.layerEntity.remove(true)
-            hnMap.map.layerList = hnMap.map.layerList.filter((v: any) => v.id !== this.id)
-        }
+    // 格式化点位配置
+    formatConfigLabel(option: any) {
+      return {
+        id: "label_" + option.id,
+        image: option.image,
+        width: option.width,
+        height: option.height,
+      };
+    }
 
-        // 添加属性弹窗
-        addPopupByAttr() {
-            this.layerEntity.bindPopup((event: any) => {
-                const data = event.graphic.attr
-                return mars3d.Util.getTemplateHtml({title: "详情", template: "all", attr: data})
-            })
-        }
+    clearEntity() {
+      this.children = [];
+      this.layerEntity.clear();
+    }
 
-        // 添加自定义dom弹窗
-        addCustomPopup(getCustomDom: any) {
-            this.layerEntity.bindPopup(async (event: any) => {
-                if (event.graphic.attr) {
-                    const data = event.graphic.attr || {};
-                    return await getCustomDom(data);
-                }
-            }, {offsetY: -20});
-        }
+    addEntity(entity: any) {
+      this.children.push(entity);
+      this.layerEntity.addGraphic(entity.graphic);
+    }
 
-        flyTo() {
-            this.layerEntity.flyTo()
-        }
+    setPosition(data: any) {
+      this.clearEntity();
+      data.forEach((item: any, index: any) => {
+        let imagePointOption = {
+          id: this.config_label.id + "_point" + item.id,
+          position: item.position,
+          image: this.config_label.image,
+          height: this.config_label.height,
+          width: this.config_label.width,
+          data: item.data,
+        };
+        const imagePoint = new hnMap.ImagePoint(imagePointOption);
+        this.addEntity(imagePoint);
+      });
+    }
 
-        getEntity(entityParam: any) {
-            let entity
-            if (typeof entityParam == 'string') {
-                entity = this.children.find((v: any) => v.id === entityParam)
-            } else {
-                entity = entityParam
-            }
-            if (!entity) {
-                return Promise.reject(new Error('未找到此图形'))
-            }
-            return entity
-        }
+    // 修改 cluster.ts 中的 mars3d_class 类
 
-        // 手动打开聚合功能
-        openCluster() {
-            deepMerge(this.option, {cluster: true,})
-            this.config_layer = this.formatConfigLayer(this.option)
-            this.layerEntity.clusterEnabled = true
-        }
+    destroy() {
+      this.clearEntity();
+      this.layerEntity.remove(true);
+      hnMap.map.layerList = hnMap.map.layerList.filter(
+        (v: any) => v.id !== this.id
+      );
+    }
 
-        // 手动关闭聚合功能
-        closeCluster() {
-            deepMerge(this.option, {cluster: false,})
-            this.config_layer = this.formatConfigLayer(this.option)
-            this.layerEntity.clusterEnabled = false
-        }
+    // 添加属性弹窗
+    addPopupByAttr() {
+      this.layerEntity.bindPopup((event: any) => {
+        const data = event.graphic.attr;
+        return mars3d.Util.getTemplateHtml({
+          title: "详情",
+          template: "all",
+          attr: data,
+        });
+      });
+    }
 
+    // 添加自定义dom弹窗
+    addCustomPopup(getCustomDom: any) {
+      this.layerEntity.bindPopup(
+        async (event: any) => {
+          if (event.graphic.attr) {
+            const data = event.graphic.attr || {};
+            return await getCustomDom(data);
+          }
+        },
+        { offsetY: -20 }
+      );
     }
 
-    class gaode_class {
+    flyTo() {
+      this.layerEntity.flyTo();
+    }
 
-        id: any = null
-        option: any = JSON.parse(JSON.stringify(defaultOption))
-        config: any = null
-        layerEntity: any = null
-        // 创建全局信息窗口实例
-        infoWindow: any = null
+    getEntity(entityParam: any) {
+      let entity;
+      if (typeof entityParam == "string") {
+        entity = this.children.find((v: any) => v.id === entityParam);
+      } else {
+        entity = entityParam;
+      }
+      if (!entity) {
+        return Promise.reject(new Error("未找到此图形"));
+      }
+      return entity;
+    }
 
-        constructor(option: any) {
-            this.id = option.id
-            deepMerge(this.option, option)
-            this.config = this.formatConfig(this.option)
-            this.layerEntity = new AMap.MarkerCluster(hnMap.map.map, this.config.position, this.config);
-        }
+    // 手动打开聚合功能
+    openCluster() {
+      deepMerge(this.option, { cluster: true });
+      this.config_layer = this.formatConfigLayer(this.option);
+      this.layerEntity.clusterEnabled = true;
+    }
 
-        formatConfig(option: any) {
-            const position = option.position.map((item: any, index: any) => {
-                return {
-                    lnglat: wgs84ToGcj02Format(item),
-                    // 添加弹窗属性参数
-                    extData: {
-                        id: this.id + '_point' + index
-                    }
-                }
-            })
-            const count = position.length;
-            const _renderClusterMarker = (context: any) => {
-                var factor = Math.pow(context.count / count, 1 / 18);
-                var div = document.createElement('div');
-                var Hue = 180 - factor * 180;
-                var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)';
-                var fontColor = 'hsla(' + Hue + ',100%,90%,1)';
-                var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
-                var shadowColor = 'hsla(' + Hue + ',100%,90%,1)';
-                div.style.backgroundColor = bgColor;
-                var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
-                div.style.width = div.style.height = size + 'px';
-                div.style.border = 'solid 1px ' + borderColor;
-                div.style.borderRadius = size / 2 + 'px';
-                div.style.boxShadow = '0 0 5px ' + shadowColor;
-                div.innerHTML = context.count;
-                div.style.lineHeight = size + 'px';
-                div.style.color = fontColor;
-                div.style.fontSize = '14px';
-                div.style.textAlign = 'center';
-                context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
-                context.marker.setContent(div)
+    // 手动关闭聚合功能
+    closeCluster() {
+      deepMerge(this.option, { cluster: false });
+      this.config_layer = this.formatConfigLayer(this.option);
+      this.layerEntity.clusterEnabled = false;
+    }
+  }
+
+  class gaode_class {
+    id: any = null;
+    option: any = JSON.parse(JSON.stringify(defaultOption));
+    config: any = null;
+    layerEntity: any = null;
+    // 创建全局信息窗口实例
+    infoWindow: any = null;
+
+    constructor(option: any) {
+      this.id = option.id;
+      deepMerge(this.option, option);
+      this.config = this.formatConfig(this.option);
+      this.layerEntity = new AMap.MarkerCluster(
+        hnMap.map.map,
+        this.config.position,
+        this.config
+      );
+    }
 
-            }
+    formatConfig(option: any) {
+      const position = option.position.map((item: any, index: any) => {
+        return {
+          lnglat: wgs84ToGcj02Format(item),
+          // 添加弹窗属性参数
+          extData: {
+            id: this.id + "_point" + index,
+          },
+        };
+      });
+      const count = position.length;
+      const _renderClusterMarker = (context: any) => {
+        var factor = Math.pow(context.count / count, 1 / 18);
+        var div = document.createElement("div");
+        var Hue = 180 - factor * 180;
+        var bgColor = "hsla(" + Hue + ",100%,40%,0.7)";
+        var fontColor = "hsla(" + Hue + ",100%,90%,1)";
+        var borderColor = "hsla(" + Hue + ",100%,40%,1)";
+        var shadowColor = "hsla(" + Hue + ",100%,90%,1)";
+        div.style.backgroundColor = bgColor;
+        var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
+        div.style.width = div.style.height = size + "px";
+        div.style.border = "solid 1px " + borderColor;
+        div.style.borderRadius = size / 2 + "px";
+        div.style.boxShadow = "0 0 5px " + shadowColor;
+        div.innerHTML = context.count;
+        div.style.lineHeight = size + "px";
+        div.style.color = fontColor;
+        div.style.fontSize = "14px";
+        div.style.textAlign = "center";
+        context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
+        context.marker.setContent(div);
+      };
+
+      const _renderMarker = (context: any) => {
+        let icon = new AMap.Icon({
+          image: this.option.style.image,
+          imageSize: new AMap.Size(
+            this.option.style.height,
+            this.option.style.width
+          ),
+          size: new AMap.Size(
+            this.option.style.height,
+            this.option.style.width
+          ),
+        });
+        context.marker.setIcon(icon);
+      };
+      return {
+        id: option.id,
+        position,
+        gridSize: option.pixelRange, // 设置网格像素大小
+        clusterByZoomChange: true,
+        renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
+        renderMarker: _renderMarker, // 自定义非聚合点样式
+      };
+    }
 
-            const _renderMarker = (context: any) => {
-                let icon = new AMap.Icon({
-                    image: this.option.style.image,
-                    imageSize: new AMap.Size(this.option.style.height, this.option.style.width),
-                    size: new AMap.Size(this.option.style.height, this.option.style.width),
-                })
-                context.marker.setIcon(icon)
-            }
-            return {
-                id: option.id,
-                position,
-                gridSize: option.pixelRange, // 设置网格像素大小
-                clusterByZoomChange: true,
-                renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
-                renderMarker: _renderMarker, // 自定义非聚合点样式
-            }
-        }
+    setPosition(position: any) {
+      deepMerge(this.option, { position: position });
+      this.config = this.formatConfig(this.option);
+      this.layerEntity.setData(this.config.position);
+    }
 
-        setPosition(position: any) {
-            deepMerge(this.option, {position: position})
-            this.config = this.formatConfig(this.option)
-            this.layerEntity.setData(this.config.position)
-        }
+    destroy() {
+      this.layerEntity.setMap(null);
+      hnMap.map.layerList = hnMap.map.layerList.filter(
+        (v: any) => v.id !== this.id
+      );
+    }
 
+    flyTo() {
+      let totalLng = 0;
+      let totalLat = 0;
+      this.config.position.map((item: any) => {
+        totalLng += item.lnglat.lng;
+        totalLat += item.lnglat.lat;
+      });
+      const centerLng = totalLng / this.config.position.length;
+      const centerLat = totalLat / this.config.position.length;
+      hnMap.map.map.setCenter([centerLng, centerLat]);
+    }
 
-        destroy() {
-            this.layerEntity.setMap(null)
-            hnMap.map.layerList = hnMap.map.layerList.filter((v: any) => v.id !== this.id)
+    // 添加属性弹窗
+    addPopupByAttr() {
+      if (!this.infoWindow) {
+        this.infoWindow = new AMap.InfoWindow({
+          offset: new AMap.Pixel(0, -30),
+        });
+      }
+
+      this.layerEntity.on("click", (cluster: any) => {
+        if (cluster.clusterData.length === 1) {
+          let content = "";
+          const data = cluster.clusterData[0].extData;
+          for (const key in data) {
+            content += `<div>${key}: ${data[key]}</div>`;
+          }
+          this.infoWindow.setContent(content);
+          this.infoWindow.open(hnMap.map.map, cluster.marker._position);
         }
+      });
+    }
 
-        flyTo() {
-            let totalLng = 0;
-            let totalLat = 0;
-            this.config.position.map((item: any) => {
-                totalLng += item.lnglat.lng;
-                totalLat += item.lnglat.lat;
-            })
-            const centerLng = totalLng / this.config.position.length;
-            const centerLat = totalLat / this.config.position.length;
-            hnMap.map.map.setCenter([centerLng, centerLat])
+    // 添加自定义dom弹窗
+    addCustomPopup(getCustomDom: any) {
+      if (!this.infoWindow) {
+        this.infoWindow = new AMap.InfoWindow({
+          offset: new AMap.Pixel(0, -30),
+        });
+      }
+
+      this.layerEntity.on("click", (cluster: any) => {
+        if (cluster.clusterData.length === 1) {
+          let content = "";
+          const data = cluster.clusterData[0].extData;
+          const dom = getCustomDom(data);
+          this.infoWindow.setContent(dom);
+          this.infoWindow.open(hnMap.map.map, cluster.marker._position);
         }
+      });
+    }
+  }
+
+  class siji_class {
+    type: any = "cluster";
+    id: any = null;
+    option: any = JSON.parse(JSON.stringify(defaultOption));
+    config_layer: any = null;
+    config_label: any = null;
+    config_Image: any = null;
+    layerEntity: any = null;
+    // 创建全局信息窗口实例
+    infoWindow: any = null;
+    event:any = {}
+
+    constructor(option: any) {
+      this.id = option.id;
+      deepMerge(this.option, option);
+      hnMap.map.map.addSource("themeData", {
+        type: "geojson",
+        data: {
+          type: "FeatureCollection",
+          features: this.option.position.map((v: any) => ({
+            type: "Feature",
+            geometry: {
+              type: "Point",
+              coordinates: convertPosition(v.position),
+            },
+            properties: {
+              name: v.data.name,
+            },
+          })),
+        },
+        cluster: true,
+        clusterMaxZoom: 12, // 最大聚类层级
+        clusterRadius: 100, // 聚合点半径，默认50
+      });
+      this.config_layer = this.formatConfigLayer(this.option);
+      this.config_label = this.formatConfigLabel(this.option);
+      this.config_Image = this.formatConfigImage(this.option);
+    }
+    formatConfigLayer(option: any) {
+      return {
+        id: "clusters_" + option.id,
+        type: "circle",
+        source: "themeData",
+        filter: ["has", "point_count"],
+        paint: {
+          // 使用step表达式，用于分段匹配圆点的颜色和半径
+          // 根据当前"point_count"值匹配对应的内容
+          // 默认为"#9faebf"
+          // 当大于10小于30时，返回"#3583de"
+          // 大于30小于55时，返回"#04b71e"
+          "circle-color": [
+            "step",
+            ["get", "point_count"],
+            "#9faebf",
+            10,
+            "#3583de",
+            30,
+            "#04b71e",
+            55,
+            "#ff9800",
+            100,
+            "#f61402",
+            300,
+            "#f61402",
+          ],
+          "circle-radius": [
+            "step",
+            ["get", "point_count"],
+            20,
+            50,
+            30,
+            100,
+            35,
+            500,
+            35,
+            2000,
+            40,
+            5000,
+            40,
+          ],
+          "circle-opacity": 0.7,
+          "circle-stroke-width": 3,
+          "circle-stroke-color": "#ffffff",
+        },
+      };
+    }
+    formatConfigLabel(option: any) {
+      return {
+        id: "clusterCount_" + option.id,
+        type: "symbol",
+        source: "themeData",
+        filter: ["has", "point_count"],
+        layout: {
+          "text-field": "{point_count_abbreviated}",
+          "text-font": ["Microsoft YaHei Regular"],
+          "text-size": 14,
+        },
+        paint: {
+          "text-color": "#ffffff",
+        },
+      };
+    }
 
-        // 添加属性弹窗
-        addPopupByAttr() {
-            if (!this.infoWindow) {
-                this.infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
-            }
-
-            this.layerEntity.on('click', (cluster: any) => {
-                if (cluster.clusterData.length === 1) {
-                    let content = ''
-                    const data = cluster.clusterData[0].extData
-                    for (const key in data) {
-                        content += `<div>${key}: ${data[key]}</div>`
-                    }
-                    this.infoWindow.setContent(content);
-                    this.infoWindow.open(hnMap.map.map, cluster.marker._position);
-                }
-
-            })
-        }
+    formatConfigImage(option: any) {
+      return {
+        id: "choicePoi_" + option.id,
+        type: "symbol",
+        source: "themeData",
+        filter: ["!has", "point_count"],
+        layout: {
+          "icon-image": option.id + "_poiImage",
+        },
+        paint: {
+          "text-color": "#555252",
+          "text-halo-color": "#FFFFFF",
+          "text-halo-width": 1.33333,
+        },
+      };
+    }
 
-        // 添加自定义dom弹窗
-        addCustomPopup(getCustomDom: any) {
-            if (!this.infoWindow) {
-                this.infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
+    /**
+     * 监听事件
+     * @param eventType 事件类型
+     * @param callback 事件回调函数
+     */
+    on(eventType: string, callback: (data: any) => void): void {
+      this.off(eventType);
+      switch (eventType) {
+        case "click":
+          this.event[eventType] = (e: any) => {
+            const features = hnMap.map.map.queryRenderedFeatures(e.point);
+            if (features.length > 0) {
+              callback(features[0].properties);
             }
+          };
+          break;
+      }
 
-            this.layerEntity.on('click', (cluster: any) => {
-                if (cluster.clusterData.length === 1) {
-                    let content = ''
-                    const data = cluster.clusterData[0].extData
-                    const dom = getCustomDom(data);
-                    this.infoWindow.setContent(dom);
-                    this.infoWindow.open(hnMap.map.map, cluster.marker._position);
-                }
-            })
-        }
-
+      hnMap.map.map.on(eventType, this.event[eventType]);
     }
 
-    const fn:any = {
-        mars3d: mars3d_class,
-        gaode: gaode_class
+    /**
+     * 移除事件监听
+     * @param eventType 事件类型
+     */
+    off(eventType: string): void {
+      if (this.event[eventType]) {
+        hnMap.map.map.off(eventType,this.event[eventType]);
+        delete this.event[eventType];
+      }
     }
-    return fn[hnMap.mapType]
-}
+
+    //
+    // // 添加属性弹窗
+    // addPopupByAttr() {
+    //   // 如果已有弹窗，先关闭
+    //   this.removePopup();
+    //   this.infoWindow = new SGMap.Popup({
+    //     offset: { bottom: [0, 0] },
+    //     className: "my-attrPopup-class",
+    //   });
+    //
+    //   const handleClick = (e: any) => {
+    //     let data = e.features[0].properties;
+    //
+    //     // 创建弹窗内容
+    //     let content = "";
+    //     for (const key in data) {
+    //       content += `<div>${key}: ${data[key]}</div>`;
+    //     }
+    //
+    //     this.infoWindow.setHTML(content);
+    //     this.infoWindow.setLngLat(e.lngLat).addTo(hnMap.map.map);
+    //   };
+    //
+    //   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 = e.features[0].properties;
+    //     const dom = getCustomDom(data);
+    //     this.infoWindow.setHTML(dom);
+    //     this.infoWindow.setLngLat(e.lngLat).addTo(hnMap.map.map);
+    //   };
+    //
+    //   hnMap.map.map.on("click", this.config.id, handleClick);
+    // }
+    //
+    // // 弹窗删除
+    // removePopup() {
+    //   if (this.infoWindow) {
+    //     this.infoWindow.remove();
+    //   }
+    // }
+
+  }
+
+  const fn: any = {
+    mars3d: mars3d_class,
+    gaode: gaode_class,
+    siji: siji_class,
+  };
+  return fn[hnMap.mapType];
+};