hn-map 1.1.4 → 1.1.6

package/dist/index.js

@@ -442,6 +442,25 @@
     // 限制在 1~18
     return Math.max(1, Math.min(18, level));
   }
+  // 將坐标数组中的元素字符串类型统一处理为number类型
+  function convertPosition(position) {
+    return position.map(function (item) {
+      if (Array.isArray(item)) {
+        return item.map(function (innerItem) {
+          if (Array.isArray(innerItem)) {
+            // 第三层，将每个字符串转数字
+            return innerItem.map(function (str) {
+              return Number(str);
+            });
+          } else {
+            return Number(innerItem);
+          }
+        });
+      } else {
+        return Number(item);
+      }
+    });
+  }
 
   var map = (function (hnMap) {
     var defaultOption = {
@@ -767,13 +786,6 @@
         this.map.on("pitchend", function (e) {
           return _this2.updateMapParams(e);
         }); // 地图俯仰角度完成
-        this.map.on("load", function (e) {
-          // 路况展示
-          var roadNetLayer = new SGMap.RoadNetLayer({
-            map: _this2.map
-          });
-          roadNetLayer.render();
-        });
       }
       return _createClass(siji_map, [{
         key: "formatConfig",
@@ -943,6 +955,32 @@
                   _context3.n = 1;
                   return new Promise(function (resolve) {
                     instance.map.on("load", function (e) {
+                      // 路况展示
+                      var roadNetLayer = new SGMap.RoadNetLayer({
+                        map: instance.map
+                      });
+                      roadNetLayer.render();
+                      //添加天空图层
+                      instance.map.addLayer({
+                        "id": "sky",
+                        "type": "sky",
+                        "paint": {
+                          "sky-type": "atmosphere",
+                          "sky-atmosphere-sun": [0, 0],
+                          "sky-atmosphere-sun-intensity": 15
+                        }
+                      });
+                      // 加载地形（需要v3.1.0，且需要新的key和secret）
+                      // !instance.map.getSource('terrain') && instance.map.addSource('terrain',{
+                      //   type:'raster-dem',
+                      //   url:"aegis://aegis.Terrain3D",//地形高程数据源名称
+                      //   tileSize:512,
+                      //
+                      // })
+                      // instance.map.setTerrain({
+                      //   source:'terrain',
+                      //   exaggeration:1,//地形夸张比例
+                      // })
                       resolve(e);
                     });
                   });
@@ -1010,7 +1048,12 @@
         key: "removeEntity",
         value: function removeEntity(entityParam) {
           var entity = this.getEntity(entityParam);
+          console.log("removeEntity", entity);
           if (entity) {
+            this.children = this.children.filter(function (v) {
+              return v.id !== entity.id;
+            });
+            console.log("layerEntity", this.layerEntity);
             this.layerEntity.removeGraphic(entity.graphic);
           }
         }
@@ -1284,6 +1327,7 @@
       }, {
         key: "updateEntity",
         value: function updateEntity(entity, viewPos) {
+          console.log("updateEntity", entity, viewPos);
           var isUpdateEntity = hnMap.map.level >= Number(entity.option.distanceDisplayCondition_far) && hnMap.map.level <= Number(entity.option.distanceDisplayCondition_near);
           if (isUpdateEntity) {
             if (!entity.show && this.isIncludesLabel(entity.option.position, viewPos)) {
@@ -1338,8 +1382,10 @@
         key: "addLevelEntity",
         value: function addLevelEntity(entity) {
           if (entity.type == "imagePoint") {
+            console.log("addLevelEntity=====", entity);
             hnMap.map.map.loadImage(entity.option.image, function (error, image) {
               entity.config.layout["icon-size"] = entity.option.width / image.width;
+              entity.config.layout["icon-offset"] = [entity.option.offset[0] / entity.config.layout["icon-size"], entity.option.offset[1] / entity.config.layout["icon-size"]];
               hnMap.map.map.addImage(entity.id + "_image", image);
               hnMap.map.map.addLayer(entity.config);
             });
@@ -1352,7 +1398,7 @@
             var featureArr = {
               type: "Feature",
               properties: {
-                centerPoint: entity.option.position,
+                centerPoint: convertPosition(entity.option.position),
                 radius: entity.option.radius
               },
               geometry: {
@@ -1393,6 +1439,10 @@
               hnMap.map.map.removeLayer(entity.config_routeplay.id);
               hnMap.map.map.removeSource(entity.config_routeplay.id);
               entity.imgMarker.remove();
+            } else if (entity.type == "imagePoint") {
+              hnMap.map.map.removeImage(entity.id + "_image");
+              hnMap.map.map.removeLayer(entity.id);
+              hnMap.map.map.removeSource(entity.id);
             } else {
               hnMap.map.map.removeLayer(entity.id);
               hnMap.map.map.removeSource(entity.id);
@@ -1406,6 +1456,7 @@
         value: function moveEntity(layerIds) {
           // 数组转字符串
           var s = layerIds.join(",");
+          console.log("s===", s);
           hnMap.map.map.moveLayer(s);
         }
       }, {
@@ -1700,8 +1751,8 @@
         var handleClick = function handleClick(e) {
           var data = _this2.option.data;
           // const data = e.features[0].properties;
-          getCustomDom(data);
-          _this2.infoWindow.setHTML("<image-preview>");
+          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);
@@ -1725,10 +1776,12 @@
         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 == "polygon" || this.type == "rectangle") {
+          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;
           }
@@ -1942,13 +1995,11 @@
                   type: "Feature",
                   geometry: {
                     type: "Point",
-                    coordinates: option.position.map(function (num) {
-                      return Number(num);
-                    })
+                    coordinates: convertPosition(option.position)
                   },
-                  properties: Object.assign({
-                    id: option.id
-                  }, option.data)
+                  properties: {
+                    name: option.text
+                  }
                 }]
               }
             },
@@ -1956,13 +2007,24 @@
               "circle-opacity": Number(option.opacity),
               "circle-radius": Number(option.size),
               "circle-color": option.color,
-              "circle-stroke-color": option.outlineColor,
-              "circle-stroke-width": option.outlineWidth,
-              "circle-stroke-opacity": Number(option.outlineOpacity) // 边框样式
+              "circle-stroke-color": option.outline ? option.outlineColor : "transparent",
+              "circle-stroke-width": option.outline ? Number(option.outlineWidth) : 0,
+              "circle-stroke-opacity": option.outline ? Number(option.outlineOpacity) : 1 // 边框样式
             } // 填充样式
           };
           return config;
         }
+        /**
+         * 将 pixelOffset 转换为 text-offset (ems)
+         * @param {Array<number>} pixelOffset - [x, y] 像素偏移
+         * @param {number} textSizePx - 字体大小（px）
+         * @returns {Array<number>} text-offset in ems
+         */
+      }, {
+        key: "pixelOffsetToTextOffset",
+        value: function pixelOffsetToTextOffset(pixelOffset, textSizePx) {
+          return [pixelOffset[0] / textSizePx, pixelOffset[1] / textSizePx];
+        }
       }, {
         key: "set",
         value: function set(option) {
@@ -1979,9 +2041,7 @@
               },
               geometry: {
                 type: "Point",
-                coordinates: this.option.position.map(function (num) {
-                  return Number(num);
-                })
+                coordinates: convertPosition(this.option.position)
               }
             }]
           });
@@ -1991,7 +2051,7 @@
                 for (var key2 in this.config[key]) {
                   if (this.config[key].hasOwnProperty(key2)) {
                     // 遍历 paint 属性
-                    hnMap.map.map.setPaintProperty(this.config.id, key2, key2 == "circle-opacity" || key2 == "circle-stroke-opacity" ? Number(this.config[key][key2]) : this.config[key][key2]);
+                    hnMap.map.map.setPaintProperty(this.config.id, key2, key2 == "circle-opacity" || key2 == "circle-radius" || key2 == "circle-stroke-opacity" || key2 == "circle-stroke-width" || key2 == "text-opacity" ? Number(this.config[key][key2]) : this.config[key][key2]);
                   }
                 }
               }
@@ -2149,9 +2209,7 @@
                   type: "Feature",
                   geometry: {
                     type: "Point",
-                    coordinates: option.position.map(function (num) {
-                      return Number(num);
-                    })
+                    coordinates: convertPosition(option.position)
                   },
                   properties: {
                     name: option.text
@@ -2182,9 +2240,7 @@
                   type: "Feature",
                   geometry: {
                     type: "Point",
-                    coordinates: option.position.map(function (num) {
-                      return Number(num);
-                    })
+                    coordinates: convertPosition(option.position)
                   },
                   properties: {
                     name: option.num
@@ -2468,9 +2524,7 @@
                   type: "Feature",
                   geometry: {
                     type: "Point",
-                    coordinates: option.position.map(function (num) {
-                      return Number(num);
-                    })
+                    coordinates: convertPosition(option.position)
                   },
                   properties: {
                     name: option.text
@@ -2480,15 +2534,17 @@
             },
             layout: {
               "icon-image": option.id + "_image",
-              "icon-size": 1,
-              "icon-ignore-placement": true,
-              "text-ignore-placement": true,
+              // "icon-size": 1,
+              "icon-ignore-placement": false,
+              // "icon-offset": convertPosition(option.offset),
+              "text-ignore-placement": false,
+              //
               "text-field": "{name}",
               // 文本
-              "text-size": option.fontSize,
-              "text-anchor": "top",
-              "icon-anchor": "center",
-              "text-offset": option.offset
+              "text-size": Number(option.fontSize),
+              "text-anchor": option.verticalOrigin,
+              "icon-anchor": option.verticalOrigin
+              // "text-offset": convertPosition(option.offset),
             },
             paint: {
               "text-color": option.color
@@ -2501,16 +2557,20 @@
         value: function set(option) {
           deepMerge(this.option, option);
           this.config = this.formatConfig(this.option);
+          console.log(this.config, "======CONFIG=====");
+          console.log(this.option, "=========OPTION");
           var mySource = hnMap.map.map.getSource(this.config.id);
+          console.log(mySource, "=========SOURCE");
           mySource.setData({
             type: "FeatureCollection",
             features: [{
               type: "Feature",
               geometry: {
                 type: "Point",
-                coordinates: this.option.position.map(function (num) {
-                  return Number(num);
-                })
+                coordinates: convertPosition(this.option.position)
+              },
+              properties: {
+                name: this.option.text
               }
             }]
           });
@@ -2520,7 +2580,7 @@
                 for (var key2 in this.config[key]) {
                   if (this.config[key].hasOwnProperty(key2)) {
                     // 遍历 layout 属性
-                    hnMap.map.map.setLayoutProperty(this.config.id, key2, this.config[key][key2]);
+                    hnMap.map.map.setLayoutProperty(this.config.id, key2, key2 == "text-size" ? Number(this.config[key][key2]) : this.config[key][key2]);
                   }
                 }
               }
@@ -2753,7 +2813,7 @@
                 outlineColor: option.outlineColor,
                 outlineWidth: option.outlineWidth,
                 outlineOpacity: option.outlineOpacity,
-                pixelOffset: option.offset,
+                pixelOffset: convertPosition(option.offset),
                 scaleByDistance: option.scaleByDistance,
                 clampToGround: !option.position[2],
                 distanceDisplayCondition: option.distanceDisplayCondition,
@@ -2896,9 +2956,12 @@
             // 文本样式
             paint: {
               "text-color": option.color,
-              "text-halo-color": option.outlineColor,
+              "text-halo-color": option.outline ? option.outlineColor : "transparent",
               // 文字外边线颜色
-              "text-halo-width": option.outlineWidth // 文字外边线宽度
+              "text-halo-width": option.outline ? Number(option.outlineWidth) : 0,
+              // 文字外边线宽度
+              "text-opacity": Number(option.opacity)
+              // "text-halo-opacity": option.outline ? option.outlineOpacity : 1,
             } // 填充样式
           };
           if (option.type === "label") {
@@ -2906,9 +2969,7 @@
               type: "Feature",
               geometry: {
                 type: "Point",
-                coordinates: option.position.map(function (num) {
-                  return Number(num);
-                })
+                coordinates: convertPosition(option.position)
               },
               properties: {
                 name: option.text
@@ -2923,7 +2984,7 @@
                 },
                 geometry: {
                   type: "Point",
-                  coordinates: item
+                  coordinates: convertPosition(option.position)
                 }
               });
             });
@@ -2958,9 +3019,7 @@
                 },
                 geometry: {
                   type: "Point",
-                  coordinates: this.option.position.map(function (num) {
-                    return Number(num);
-                  })
+                  coordinates: convertPosition(option.position)
                 }
               }]
             });
@@ -2990,7 +3049,7 @@
                 for (var key2 in this.config[key]) {
                   if (this.config[key].hasOwnProperty(key2)) {
                     // 遍历 paint 属性
-                    hnMap.map.map.setPaintProperty(this.config.id, key2, key2 == "text-halo-width" ? Number(this.config[key][key2]) : this.config[key][key2]);
+                    hnMap.map.map.setPaintProperty(this.config.id, key2, key2 == "text-halo-width" || key2 == "text-opacity" ? Number(this.config[key][key2]) : this.config[key][key2]);
                   }
                 }
               }
@@ -3261,7 +3320,7 @@
                   type: "Feature",
                   geometry: {
                     type: "LineString",
-                    coordinates: option.position
+                    coordinates: convertPosition(option.position)
                   },
                   properties: Object.assign({
                     id: option.id
@@ -3271,12 +3330,14 @@
             },
             layout: {
               "line-cap": "round",
-              "line-join": "round"
+              // 线端点样式
+              "line-join": "round" // 线连接样式
             },
             paint: {
               "line-color": option.type == "dash" ? option.dashColor : option.color,
               "line-width": Number(option.width),
               "line-opacity": Number(option.opacity)
+              // "line-gap-width": 4,
             }
           };
           var isShow = true;
@@ -3297,6 +3358,20 @@
         value: function set(option) {
           deepMerge(this.option, option);
           this.config = this.formatConfig(this.option);
+          var mySource = hnMap.map.map.getSource(this.config.id);
+          mySource.setData({
+            type: "FeatureCollection",
+            features: [{
+              type: "Feature",
+              properties: Object.assign({
+                id: option.id
+              }, option.data),
+              geometry: {
+                type: "LineString",
+                coordinates: convertPosition(this.option.position)
+              }
+            }]
+          });
           for (var key in this.config) {
             if (this.config.hasOwnProperty(key)) {
               if (key == "paint") {
@@ -3524,7 +3599,7 @@
             // 允许调整圆心
             canMove: false,
             // 设置非编辑状态下的图层颜色
-            drawColor: option.outlineColor,
+            // drawColor: option.outlineColor,
             // 设置编辑状态下的图层颜色
             // editColor: "red",
             style: {
@@ -3532,7 +3607,13 @@
               polygon: {
                 "fill-color": option.color,
                 // 填充颜色覆盖drawColor设置的颜色，呈现绿色
-                "fill-opacity": Number(option.opacity)
+                "fill-opacity": Number(option.opacity),
+                "fill-outline-color": option.outlineColor
+              },
+              polyline: {
+                "line-color": option.outlineColor,
+                "line-opacity": Number(option.outlineOpacity),
+                "line-width": Number(option.outlineWidth)
               }
             },
             // 编辑数据
@@ -3551,8 +3632,8 @@
           var featureArr = {
             type: "Feature",
             properties: {
-              centerPoint: option.position,
-              radius: option.radius
+              centerPoint: convertPosition(this.option.position),
+              radius: this.option.radius
             },
             geometry: {
               type: "Polygon",
@@ -3703,7 +3784,6 @@
         key: "formatConfig",
         value: function formatConfig(option) {
           var RectanglePosition = createRectangleCoordinates(option.position[0], option.position[1]);
-          console.log([RectanglePosition], "========RectanglePosition=======");
           var config = {
             id: option.id,
             type: "fill",
@@ -3723,7 +3803,9 @@
             paint: {
               "fill-color": option.color,
               // 填充颜色覆盖drawColor设置的颜色，呈现绿色
-              "fill-opacity": Number(option.opacity)
+              "fill-opacity": Number(option.opacity),
+              "fill-antialias": true,
+              "fill-outline-color": option.outlineColor
             }
           };
           return config;
@@ -3907,7 +3989,7 @@
                   type: "Feature",
                   geometry: {
                     type: "Polygon",
-                    coordinates: option.position
+                    coordinates: convertPosition(option.position)
                   }
                 }]
               }
@@ -3915,7 +3997,9 @@
             paint: {
               "fill-color": option.color,
               // 填充颜色覆盖drawColor设置的颜色，呈现绿色
-              "fill-opacity": Number(option.opacity)
+              "fill-opacity": Number(option.opacity),
+              "fill-antialias": true,
+              "fill-outline-color": option.outlineColor
             }
           };
           return config;
@@ -3932,7 +4016,7 @@
               type: "Feature",
               geometry: {
                 type: "Polygon",
-                coordinates: [option.position] //三层数组[[[0,0],[0,0]]]
+                coordinates: convertPosition(option.position) //三层数组[[[0,0],[0,0]]]
               }
             }]
           });

package/package.json

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

package/src/base/siji_entity.ts

@@ -53,7 +53,7 @@ export default class siji_entity {
       const data = this.option.data;
       // const data = e.features[0].properties;
       const dom = getCustomDom(data);
-      this.infoWindow.setHTML("<image-preview>");
+      this.infoWindow.setHTML(dom);
       this.infoWindow.setLngLat(e.lngLat).addTo(this.hnMap.map.map);
     };
 
@@ -82,12 +82,13 @@ export default class siji_entity {
         this.type == "flow" ||
         this.type == "arrow" ||
         this.type == "mapLabel" ||
-        this.type == "polygon" ||
         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;
       }

package/src/graphic/circle.ts

@@ -1,4 +1,9 @@
-import { deepMerge, getLevelMiddleHeight, wgs84ToGcj02Format } from "../util";
+import {
+  deepMerge,
+  getLevelMiddleHeight,
+  wgs84ToGcj02Format,
+  convertPosition,
+} from "../util";
 import mars3d_entity from "../base/mars3d_entity";
 import gaode_entity from "../base/gaode_entity";
 import siji_entity from "../base/siji_entity";
@@ -177,7 +182,7 @@ export default (hnMap: any) => {
         // 允许调整圆心
         canMove: false,
         // 设置非编辑状态下的图层颜色
-        drawColor: option.outlineColor,
+        // drawColor: option.outlineColor,
         // 设置编辑状态下的图层颜色
         // editColor: "red",
         style: {
@@ -185,6 +190,12 @@ export default (hnMap: any) => {
           polygon: {
             "fill-color": option.color, // 填充颜色覆盖drawColor设置的颜色，呈现绿色
             "fill-opacity": Number(option.opacity),
+            "fill-outline-color": option.outlineColor,
+          },
+          polyline: {
+            "line-color": option.outlineColor,
+            "line-opacity": Number(option.outlineOpacity),
+            "line-width": Number(option.outlineWidth),
           },
         },
         // 编辑数据
@@ -202,8 +213,8 @@ export default (hnMap: any) => {
       let featureArr = {
         type: "Feature",
         properties: {
-          centerPoint: option.position,
-          radius: option.radius,
+          centerPoint: convertPosition(this.option.position),
+          radius: this.option.radius,
         },
         geometry: {
           type: "Polygon",

package/src/graphic/divPoint.ts

@@ -1,4 +1,9 @@
-import {deepMerge, getLevelMiddleHeight, wgs84ToGcj02Format} from "../util";
+import {
+  deepMerge,
+  getLevelMiddleHeight,
+  wgs84ToGcj02Format,
+  convertPosition,
+} from "../util";
 import mars3d_entity from "../base/mars3d_entity";
 import gaode_entity from "../base/gaode_entity";
 import siji_entity from "../base/siji_entity";
@@ -45,8 +50,12 @@ export default (hnMap: any) => {
     }
 
     formatConfig(option: any) {
-      const distanceDisplayCondition_far = getLevelMiddleHeight(option.distanceDisplayCondition_far)
-      const distanceDisplayCondition_near = getLevelMiddleHeight(option.distanceDisplayCondition_near)
+      const distanceDisplayCondition_far = getLevelMiddleHeight(
+        option.distanceDisplayCondition_far
+      );
+      const distanceDisplayCondition_near = getLevelMiddleHeight(
+        option.distanceDisplayCondition_near
+      );
       return {
         id: option.id,
         position: option.position,

package/src/graphic/imagePoint.ts

@@ -1,4 +1,9 @@
-import { deepMerge, getLevelMiddleHeight, wgs84ToGcj02Format } from "../util";
+import {
+  deepMerge,
+  getLevelMiddleHeight,
+  wgs84ToGcj02Format,
+  convertPosition,
+} from "../util";
 import mars3d_entity from "../base/mars3d_entity";
 import gaode_entity from "../base/gaode_entity";
 import siji_entity from "../base/siji_entity";
@@ -178,7 +183,7 @@ export default (hnMap: any) => {
                 type: "Feature",
                 geometry: {
                   type: "Point",
-                  coordinates: option.position.map((num: any) => Number(num)),
+                  coordinates: convertPosition(option.position),
                 },
                 properties: {
                   name: option.text,
@@ -189,14 +194,15 @@ export default (hnMap: any) => {
         },
         layout: {
           "icon-image": option.id + "_image",
-          "icon-size": 1,
-          "icon-ignore-placement": true,
-          "text-ignore-placement": true,
+          // "icon-size": 1,
+          "icon-ignore-placement": false,
+          // "icon-offset": convertPosition(option.offset),
+          "text-ignore-placement": false, //
           "text-field": "{name}", // 文本
-          "text-size": option.fontSize,
-          "text-anchor": "top",
-          "icon-anchor": "center",
-          "text-offset": option.offset,
+          "text-size": Number(option.fontSize),
+          "text-anchor": option.verticalOrigin,
+          "icon-anchor": option.verticalOrigin,
+          // "text-offset": convertPosition(option.offset),
         },
         paint: {
           "text-color": option.color,
@@ -208,7 +214,10 @@ export default (hnMap: any) => {
     set(option: any) {
       deepMerge(this.option, option);
       this.config = this.formatConfig(this.option);
+      console.log(this.config, "======CONFIG=====");
+      console.log(this.option, "=========OPTION");
       let mySource = hnMap.map.map.getSource(this.config.id);
+      console.log(mySource, "=========SOURCE");
       mySource.setData({
         type: "FeatureCollection",
         features: [
@@ -216,7 +225,10 @@ export default (hnMap: any) => {
             type: "Feature",
             geometry: {
               type: "Point",
-              coordinates: this.option.position.map((num: any) => Number(num)),
+              coordinates: convertPosition(this.option.position),
+            },
+            properties: {
+              name: this.option.text,
             },
           },
         ],
@@ -231,7 +243,9 @@ export default (hnMap: any) => {
                 hnMap.map.map.setLayoutProperty(
                   this.config.id,
                   key2,
-                  this.config[key][key2]
+                  key2 == "text-size"
+                    ? Number(this.config[key][key2])
+                    : this.config[key][key2]
                 );
               }
             }