hn-map 1.1.13 → 1.1.15

package/dist/index.js

@@ -392,24 +392,6 @@
     return [leftTopPoint, rightTopPoint, rightBottomPoint, leftBottomPoint, leftTopPoint // 闭合矩形
     ];
   }
-  function getMapRangeHeightByLevel(level) {
-    // 输入校验：限制在 1~18
-    level = Math.max(1, Math.min(18, Math.floor(level)));
-    // 计算指定 level 对应的高度（level >= 2 时使用指数衰减）
-    function getHeight(lvl) {
-      if (lvl === 1) {
-        return Infinity; // level=1 表示“最大高度”，逻辑上为无穷大
-      } else {
-        return 32000000 / Math.pow(2, lvl - 2);
-      }
-    }
-    var endHeight = getHeight(level); // 当前 level 的“粗略”高度
-    var startHeight = level < 18 ? getHeight(level + 1) : 0; // 下一级更细
-    return {
-      startHeight: startHeight,
-      endHeight: endHeight
-    };
-  }
   /**
    * 根据 level 返回该层级的“中间高度”（几何平均值）
    *
@@ -417,16 +399,19 @@
    * @returns {number} 中间高度（米）
    */
   function getLevelMiddleHeight(level) {
-    var _getMapRangeHeightByL = getMapRangeHeightByLevel(level),
-      startHeight = _getMapRangeHeightByL.startHeight,
-      endHeight = _getMapRangeHeightByL.endHeight;
-    // 如果 startHeight 为 0（如 level=18），几何平均会为 0，不合理
-    // 所以 level=18 特殊处理：返回 (0 + end)/2 或直接返回 end * 0.7 左右
-    if (startHeight === 0) {
-      return endHeight * 0.7; // 经验值，贴近“中间感知”
-    }
-    // 几何平均：√(start × end)
-    return Math.sqrt(startHeight * endHeight);
+    // const { startHeight, endHeight } = getMapRangeHeightByLevel(level);
+    // // 如果 startHeight 为 0（如 level=18），几何平均会为 0，不合理
+    // // 所以 level=18 特殊处理：返回 (0 + end)/2 或直接返回 end * 0.7 左右
+    // if (startHeight === 0) {
+    //   return endHeight * 0.7; // 经验值，贴近“中间感知”
+    // }
+    //
+    // // 几何平均：√(start × end)
+    // return Math.sqrt(startHeight * endHeight);
+    var EARTH_RADIUS = 6378137; // 赤道半径
+    var height = 2 * Math.PI * EARTH_RADIUS / (256 * Math.pow(2, level));
+    console.log(height);
+    return height;
   }
   /**
    * 根据高度反推 level（1~18）
@@ -538,6 +523,7 @@
         deepMerge(this.option, option);
         this.config = this.formatConfig(this.option);
         this.map = new mars3d.Map(id, this.config);
+        console.log(this.config);
         this.map.on("cameraMoveEnd", function (e) {
           var height = _this.map.getCameraView().alt;
           _this.level = getHeightToLevel(height);
@@ -904,7 +890,7 @@
                   lng: event.lngLat.lng,
                   lat: event.lngLat.lat,
                   alt: event.lngLat.alt || 0
-                });
+                }, event);
               };
               break;
             case "dblclick":
@@ -1001,9 +987,9 @@
                       }
                       //添加天空图层
                       instance.map.addLayer({
-                        "id": "sky",
-                        "type": "sky",
-                        "paint": {
+                        id: "sky",
+                        type: "sky",
+                        paint: {
                           "sky-type": "atmosphere",
                           "sky-atmosphere-sun": [0, 0],
                           "sky-atmosphere-sun-intensity": 15
@@ -1082,6 +1068,15 @@
               entity.start();
             } else if (entity.type == "pointCloud" || entity.type == "heatMap") {
               hnMap.map.map.addLayer(entity.layerEntity);
+            } else if (entity.type == "cluster") {
+              // 添加聚合图层到地图
+              hnMap.map.map.addLayer(entity.layerEntity);
+              // 如果已有位置数据，立即设置
+              if (entity.option.position && entity.option.position.length > 0) {
+                setTimeout(function () {
+                  entity.setPosition(entity.option.position);
+                }, 100);
+              }
             } else {
               this.layerEntity.addGraphic(entity.graphic); // 添加图形
             }
@@ -1096,9 +1091,7 @@
               return v.id !== entity.id;
             });
             if (entity.type === "pointCloud" || entity.type === "heatMap") {
-              alert(entity.id);
               hnMap.map.map.removeLayer(entity.id);
-              // entity.id.destroy();
             }
             this.layerEntity.removeGraphic(entity.graphic);
           }
@@ -1467,6 +1460,21 @@
               duration: 2000,
               essential: true
             });
+          } else if (entity.type == "cluster") {
+            console.log("cluster=======", entity);
+            hnMap.map.map.addLayer(entity.config_layer);
+            hnMap.map.map.addLayer(entity.config_label);
+            hnMap.map.map.loadImage(entity.option.image, function (error, image) {
+              console.log("image======", image);
+              entity.config_Image.layout["icon-size"] = entity.option.width / image.width;
+              hnMap.map.map.addImage(entity.id + "_poiImage", image);
+              hnMap.map.map.addLayer(entity.config_Image);
+            });
+            hnMap.map.map.flyTo({
+              center: entity.option.position[0].position,
+              duration: 2000,
+              essential: true
+            });
           } else {
             hnMap.map.map.addLayer(entity.config);
           }
@@ -1775,17 +1783,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 +1814,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 +1876,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;
         }
@@ -4061,7 +4087,7 @@
               type: "Feature",
               geometry: {
                 type: "Polygon",
-                coordinates: convertPosition(option.position) //三层数组[[[0,0],[0,0]]]
+                coordinates: convertPosition(this.option.position) //三层数组[[[0,0],[0,0]]]
               }
             }]
           });
@@ -4754,9 +4780,6 @@
                 geometry: {
                   type: "Point",
                   coordinates: [v.lng, v.lat]
-                },
-                properties: {
-                  value: v.value
                 }
               };
             })
@@ -4861,7 +4884,7 @@
       position: [],
       pixelRange: 20,
       cluster: true,
-      image: '',
+      image: "",
       width: 20,
       height: 20,
       data: null
@@ -4871,7 +4894,7 @@
         var _this;
         _classCallCheck(this, mars3d_class);
         _this = _callSuper(this, mars3d_class, [option]);
-        _this.type = 'cluster';
+        _this.type = "cluster";
         _this.id = null;
         _this.option = JSON.parse(JSON.stringify(defaultOption));
         _this.config_layer = null;
@@ -4881,9 +4904,11 @@
         _this.id = option.id;
         _this.children = [];
         deepMerge(_this.option, option);
+        console.log("option===", _this.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);
         return _this;
       }
       // 格式化layer配置
@@ -4894,8 +4919,37 @@
           return {
             id: option.id,
             cluster: {
-              enabled: option.cluster,
-              pixelRange: option.pixelRange
+              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
+                }
+              }]
             }
           };
         }
@@ -4904,7 +4958,7 @@
         key: "formatConfigLabel",
         value: function formatConfigLabel(option) {
           return {
-            id: option.id,
+            id: "label_" + option.id,
             image: option.image,
             width: option.width,
             height: option.height
@@ -4926,10 +4980,11 @@
         key: "setPosition",
         value: function setPosition(data) {
           var _this2 = this;
+          console.log("setPosition", data);
           this.clearEntity();
           data.forEach(function (item, index) {
             var imagePointOption = {
-              id: _this2.config_label.id + '_point' + item.id,
+              id: _this2.config_label.id + "_point" + item.id,
               position: item.position,
               image: _this2.config_label.image,
               height: _this2.config_label.height,
@@ -4940,6 +4995,7 @@
             _this2.addEntity(imagePoint);
           });
         }
+        // 修改 cluster.ts 中的 mars3d_class 类
       }, {
         key: "destroy",
         value: function destroy() {
@@ -5001,7 +5057,7 @@
         key: "getEntity",
         value: function getEntity(entityParam) {
           var entity;
-          if (typeof entityParam == 'string') {
+          if (typeof entityParam == "string") {
             entity = this.children.find(function (v) {
               return v.id === entityParam;
             });
@@ -5009,7 +5065,7 @@
             entity = entityParam;
           }
           if (!entity) {
-            return Promise.reject(new Error('未找到此图形'));
+            return Promise.reject(new Error("未找到此图形"));
           }
           return entity;
         }
@@ -5058,30 +5114,30 @@
               lnglat: wgs84ToGcj02Format(item),
               // 添加弹窗属性参数
               extData: {
-                id: _this5.id + '_point' + index
+                id: _this5.id + "_point" + index
               }
             };
           });
           var count = position.length;
           var _renderClusterMarker = function _renderClusterMarker(context) {
             var factor = Math.pow(context.count / count, 1 / 18);
-            var div = document.createElement('div');
+            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)';
+            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.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.lineHeight = size + "px";
             div.style.color = fontColor;
-            div.style.fontSize = '14px';
-            div.style.textAlign = 'center';
+            div.style.fontSize = "14px";
+            div.style.textAlign = "center";
             context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
             context.marker.setContent(div);
           };
@@ -5145,9 +5201,9 @@
               offset: new AMap.Pixel(0, -30)
             });
           }
-          this.layerEntity.on('click', function (cluster) {
+          this.layerEntity.on("click", function (cluster) {
             if (cluster.clusterData.length === 1) {
-              var content = '';
+              var content = "";
               var data = cluster.clusterData[0].extData;
               for (var key in data) {
                 content += "<div>".concat(key, ": ").concat(data[key], "</div>");
@@ -5167,7 +5223,7 @@
               offset: new AMap.Pixel(0, -30)
             });
           }
-          this.layerEntity.on('click', function (cluster) {
+          this.layerEntity.on("click", function (cluster) {
             if (cluster.clusterData.length === 1) {
               var data = cluster.clusterData[0].extData;
               var dom = getCustomDom(data);
@@ -5178,9 +5234,111 @@
         }
       }]);
     }();
+    var siji_class = /*#__PURE__*/function () {
+      function siji_class(option) {
+        _classCallCheck(this, siji_class);
+        this.type = "cluster";
+        this.id = null;
+        this.option = JSON.parse(JSON.stringify(defaultOption));
+        this.config_layer = null;
+        this.config_label = null;
+        this.config_Image = null;
+        this.layerEntity = null;
+        // 创建全局信息窗口实例
+        this.infoWindow = null;
+        this.id = option.id;
+        deepMerge(this.option, option);
+        console.log("lalallalalalla======this.option", this.option);
+        hnMap.map.map.addSource("themeData", {
+          type: "geojson",
+          data: {
+            type: "FeatureCollection",
+            features: this.option.position.map(function (v) {
+              return {
+                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);
+      }
+      return _createClass(siji_class, [{
+        key: "formatConfigLayer",
+        value: function formatConfigLayer(option) {
+          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"
+            }
+          };
+        }
+      }, {
+        key: "formatConfigLabel",
+        value: function formatConfigLabel(option) {
+          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"
+            }
+          };
+        }
+      }, {
+        key: "formatConfigImage",
+        value: function formatConfigImage(option) {
+          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
+            }
+          };
+        }
+      }]);
+    }();
     var fn = {
       mars3d: mars3d_class,
-      gaode: gaode_class
+      gaode: gaode_class,
+      siji: siji_class
     };
     return fn[hnMap.mapType];
   });
@@ -5312,6 +5470,7 @@
             type: "custom",
             renderingMode: "3d",
             onAdd: function onAdd(map, gl) {
+              console.log("map====", map);
               this.camera = new THREE.Camera();
               this.scene = new THREE.Scene();
               var directionalLight = new THREE.DirectionalLight(0xffffff);
@@ -5323,8 +5482,7 @@
               // var loader = new THREE.GLTFLoader();
               var loader = new THREE.ObjectLoader();
               var that = this;
-              loader.load(option.url,
-              // 'https://map.sgcc.com.cn/products/js-sdk/v3/assets/model/ZH-SZC3-42.gltf',
+              loader.load('https://map.sgcc.com.cn/products/js-sdk/v3/assets/model/ZH-SZC3-42.gltf',
               // function (gltf: any) {
               function (object) {
                 that.scene.add(object);

package/package.json

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

package/src/base/mars3d_entity.ts

@@ -1,5 +1,3 @@
-import {getMapRangeHeightByLevel} from "../util";
-
 export default class mars3d_entity {
     option: any = null;
     event: any = {};