hn-map 1.1.5 → 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 = {
@@ -1029,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);
           }
         }
@@ -1303,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)) {
@@ -1357,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);
             });
@@ -1371,7 +1398,7 @@
             var featureArr = {
               type: "Feature",
               properties: {
-                centerPoint: entity.option.position,
+                centerPoint: convertPosition(entity.option.position),
                 radius: entity.option.radius
               },
               geometry: {
@@ -1749,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;
           }
@@ -1966,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
+                  }
                 }]
               }
             },
@@ -1980,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) {
@@ -2003,9 +2041,7 @@
               },
               geometry: {
                 type: "Point",
-                coordinates: this.option.position.map(function (num) {
-                  return Number(num);
-                })
+                coordinates: convertPosition(this.option.position)
               }
             }]
           });
@@ -2015,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]);
                   }
                 }
               }
@@ -2173,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
@@ -2206,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
@@ -2492,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
@@ -2504,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
@@ -2525,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
               }
             }]
           });
@@ -2544,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]);
                   }
                 }
               }
@@ -2777,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,
@@ -2920,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") {
@@ -2930,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
@@ -2947,7 +2984,7 @@
                 },
                 geometry: {
                   type: "Point",
-                  coordinates: item
+                  coordinates: convertPosition(option.position)
                 }
               });
             });
@@ -2982,9 +3019,7 @@
                 },
                 geometry: {
                   type: "Point",
-                  coordinates: this.option.position.map(function (num) {
-                    return Number(num);
-                  })
+                  coordinates: convertPosition(option.position)
                 }
               }]
             });
@@ -3014,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]);
                   }
                 }
               }
@@ -3285,7 +3320,7 @@
                   type: "Feature",
                   geometry: {
                     type: "LineString",
-                    coordinates: option.position
+                    coordinates: convertPosition(option.position)
                   },
                   properties: Object.assign({
                     id: option.id
@@ -3295,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;
@@ -3321,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") {
@@ -3548,7 +3599,7 @@
             // 允许调整圆心
             canMove: false,
             // 设置非编辑状态下的图层颜色
-            drawColor: option.outlineColor,
+            // drawColor: option.outlineColor,
             // 设置编辑状态下的图层颜色
             // editColor: "red",
             style: {
@@ -3556,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)
               }
             },
             // 编辑数据
@@ -3575,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",
@@ -3727,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",
@@ -3747,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;
@@ -3931,7 +3989,7 @@
                   type: "Feature",
                   geometry: {
                     type: "Polygon",
-                    coordinates: option.position
+                    coordinates: convertPosition(option.position)
                   }
                 }]
               }
@@ -3939,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;
@@ -3956,7 +4016,7 @@
               type: "Feature",
               geometry: {
                 type: "Polygon",
-                coordinates: [option.position] //三层数组[[[0,0],[0,0]]]
+                coordinates: convertPosition(option.position) //三层数组[[[0,0],[0,0]]]
               }
             }]
           });
@@ -5333,7 +5393,6 @@
               case 0:
                 // 判断是否在子路径下
                 basePath = window.location.pathname.endsWith("/") ? window.location.pathname : window.location.pathname.substring(0, window.location.pathname.lastIndexOf("/") + 1);
-                console.log(basePath);
                 _context.n = 1;
                 return loadResource(basePath + "lib/turf/turf.min.js", "js");
               case 1:

package/package.json

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

package/src/base/siji_entity.ts

@@ -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]
                 );
               }
             }

package/src/graphic/label.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";
@@ -54,8 +59,12 @@ export default (hnMap: any) => {
           option.position[1],
           option.position[2] || 0
         );
-        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: position,
@@ -69,7 +78,7 @@ export default (hnMap: any) => {
             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,
@@ -199,14 +208,21 @@ export default (hnMap: any) => {
           "text-field": "{name}",
           "text-size": Number(option.fontSize),
           "text-anchor": "top", // 顶部对齐
-          "text-offset": this.pixelOffsetToTextOffset(option.offset,option.fontSize),
+          "text-offset": this.pixelOffsetToTextOffset(
+            option.offset,
+            option.fontSize
+          ),
           "text-max-width": 8,
           "text-font": ["Microsoft YaHei Regular"],
         }, // 文本样式
         paint: {
           "text-color": option.color,
-          "text-halo-color": option.outlineColor, // 文字外边线颜色
-          "text-halo-width": option.outlineWidth, // 文字外边线宽度
+          "text-halo-color": option.outline
+            ? option.outlineColor
+            : "transparent", // 文字外边线颜色
+          "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") {
@@ -214,7 +230,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,
@@ -227,7 +243,7 @@ export default (hnMap: any) => {
             properties: { name: option.text },
             geometry: {
               type: "Point",
-              coordinates: item,
+              coordinates: convertPosition(option.position),
             },
           });
         });
@@ -242,11 +258,8 @@ export default (hnMap: any) => {
      * @param {number} textSizePx - 字体大小（px）
      * @returns {Array<number>} text-offset in ems
      */
-    pixelOffsetToTextOffset(pixelOffset:any, textSizePx:any): Array<number> {
-      return [
-        pixelOffset[0] / textSizePx,
-        pixelOffset[1] / textSizePx
-      ];
+    pixelOffsetToTextOffset(pixelOffset: any, textSizePx: any): Array<number> {
+      return [pixelOffset[0] / textSizePx, pixelOffset[1] / textSizePx];
     }
 
     set(option: any) {
@@ -262,7 +275,7 @@ export default (hnMap: any) => {
               properties: { name: this.option.text },
               geometry: {
                 type: "Point",
-                coordinates: this.option.position.map((num:any)=>Number(num)),
+                coordinates: convertPosition(option.position),
               },
             },
           ],
@@ -294,7 +307,7 @@ export default (hnMap: any) => {
                 hnMap.map.map.setPaintProperty(
                   this.config.id,
                   key2,
-                  key2 == "text-halo-width"
+                  key2 == "text-halo-width" || key2 == "text-opacity"
                     ? Number(this.config[key][key2])
                     : this.config[key][key2]
                 );

package/src/graphic/line.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";
@@ -50,8 +55,12 @@ export default (hnMap: any) => {
 
     formatConfig(option: any) {
       let config: 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
+      );
       if (option.combine) {
         config = {
           id: option.id,
@@ -233,7 +242,7 @@ export default (hnMap: any) => {
                 type: "Feature",
                 geometry: {
                   type: "LineString",
-                  coordinates: option.position,
+                  coordinates: convertPosition(option.position),
                 },
                 properties: {
                   id: option.id,
@@ -244,13 +253,14 @@ export default (hnMap: any) => {
           },
         },
         layout: {
-          "line-cap": "round",
-          "line-join": "round",
+          "line-cap": "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,
         },
       };
       let isShow: boolean = true;
@@ -279,6 +289,25 @@ export default (hnMap: any) => {
     set(option: any) {
       deepMerge(this.option, option);
       this.config = this.formatConfig(this.option);
+
+      let mySource = hnMap.map.map.getSource(this.config.id);
+      mySource.setData({
+        type: "FeatureCollection",
+        features: [
+          {
+            type: "Feature",
+            properties: {
+              id: option.id,
+              ...option.data,
+            },
+            geometry: {
+              type: "LineString",
+              coordinates: convertPosition(this.option.position),
+            },
+          },
+        ],
+      });
+
       for (let key in this.config) {
         if (this.config.hasOwnProperty(key)) {
           if (key == "paint") {

package/src/graphic/numPoint.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";
@@ -144,7 +149,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,
@@ -153,6 +158,7 @@ export default (hnMap: any) => {
             ],
           },
         },
+
         paint: {
           "circle-opacity": Number(option.opacity),
           "circle-radius": Number(option.size),
@@ -177,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.num,

package/src/graphic/point.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";
@@ -48,8 +53,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,
@@ -162,29 +171,43 @@ export default (hnMap: any) => {
                 type: "Feature",
                 geometry: {
                   type: "Point",
-                  coordinates: option.position.map((num:any)=>Number(num)),
+                  coordinates: convertPosition(option.position),
                 },
                 properties: {
-                  id: option.id,
-                  ...option.data,
+                  name: option.text,
                 },
               },
             ],
           },
         },
+
         paint: {
           "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
+     */
+    pixelOffsetToTextOffset(pixelOffset: any, textSizePx: any): Array<number> {
+      return [pixelOffset[0] / textSizePx, pixelOffset[1] / textSizePx];
+    }
     set(option: any) {
       console.log("=====set point====", option);
       deepMerge(this.option, option);
@@ -198,7 +221,7 @@ export default (hnMap: any) => {
             properties: { name: this.option.text },
             geometry: {
               type: "Point",
-              coordinates: this.option.position.map((num:any)=>Number(num)),
+              coordinates: convertPosition(this.option.position),
             },
           },
         ],
@@ -212,7 +235,11 @@ export default (hnMap: any) => {
                 hnMap.map.map.setPaintProperty(
                   this.config.id,
                   key2,
-                  key2 == "circle-opacity" || key2 == "circle-stroke-opacity"
+                  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]
                 );

package/src/graphic/polygon.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";
@@ -35,8 +40,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,
         positions: option.position,
@@ -129,7 +138,7 @@ export default (hnMap: any) => {
                 type: "Feature",
                 geometry: {
                   type: "Polygon",
-                  coordinates: option.position,
+                  coordinates: convertPosition(option.position),
                 },
               },
             ],
@@ -139,6 +148,8 @@ export default (hnMap: any) => {
         paint: {
           "fill-color": option.color, // 填充颜色覆盖drawColor设置的颜色，呈现绿色
           "fill-opacity": Number(option.opacity),
+          "fill-antialias": true,
+          "fill-outline-color": option.outlineColor,
         },
       };
       return config;
@@ -155,7 +166,7 @@ export default (hnMap: any) => {
             type: "Feature",
             geometry: {
               type: "Polygon",
-              coordinates: [option.position], //三层数组[[[0,0],[0,0]]]
+              coordinates: convertPosition(option.position), //三层数组[[[0,0],[0,0]]]
             },
           },
         ],

package/src/graphic/rectangle.ts

@@ -1,7 +1,8 @@
 import {
   deepMerge,
   wgs84ToGcj02Format,
-  createRectangleCoordinates, getLevelMiddleHeight,
+  createRectangleCoordinates,
+  getLevelMiddleHeight,
 } from "../util";
 import mars3d_entity from "../base/mars3d_entity";
 import gaode_entity from "../base/gaode_entity";
@@ -39,8 +40,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,
         positions: option.position,
@@ -127,7 +132,6 @@ export default (hnMap: any) => {
         option.position[0],
         option.position[1]
       );
-      console.log([RectanglePosition], "========RectanglePosition=======");
       let config = {
         id: option.id,
         type: "fill",
@@ -150,6 +154,8 @@ export default (hnMap: any) => {
         paint: {
           "fill-color": option.color, // 填充颜色覆盖drawColor设置的颜色，呈现绿色
           "fill-opacity": Number(option.opacity),
+          "fill-antialias": true,
+          "fill-outline-color": option.outlineColor,
         },
       };
       return config;

package/src/layer/layer.ts

@@ -1,4 +1,4 @@
-import { deepMerge } from "../util";
+import { deepMerge, convertPosition } from "../util";
 
 export default (hnMap: any) => {
   const defaultOption = {};
@@ -41,7 +41,12 @@ export default (hnMap: any) => {
 
     removeEntity(entityParam: any) {
       const entity = this.getEntity(entityParam);
+      console.log("removeEntity", entity);
       if (entity) {
+        this.children = this.children.filter((v: any) => {
+          return v.id !== entity.id;
+        });
+        console.log("layerEntity", this.layerEntity);
         this.layerEntity.removeGraphic(entity.graphic);
       }
     }
@@ -276,6 +281,7 @@ export default (hnMap: any) => {
     }
 
     updateEntity(entity: any, viewPos: any) {
+      console.log("updateEntity", entity, viewPos);
       const isUpdateEntity =
         hnMap.map.level >= Number(entity.option.distanceDisplayCondition_far) &&
         hnMap.map.level <= Number(entity.option.distanceDisplayCondition_near);
@@ -335,11 +341,17 @@ export default (hnMap: any) => {
 
     addLevelEntity(entity: any) {
       if (entity.type == "imagePoint") {
+        console.log("addLevelEntity=====", entity);
         hnMap.map.map.loadImage(
           entity.option.image,
           function (error: any, image: any) {
             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);
           }
@@ -353,7 +365,7 @@ export default (hnMap: any) => {
         let featureArr = {
           type: "Feature",
           properties: {
-            centerPoint: entity.option.position,
+            centerPoint: convertPosition(entity.option.position),
             radius: entity.option.radius,
           },
           geometry: {

package/src/util.ts

@@ -215,11 +215,20 @@ export function getHeightToLevel(height: number): number {
 }
 // 將坐标数组中的元素字符串类型统一处理为number类型
 export function convertPosition(
-  position: string[] | string[][]
-): number[] | number[][] {
-  return position.map((item) =>
-    Array.isArray(item)
-      ? (item as string[]).map((str) => Number(str))
-      : Number(item)
-  ) as number[] | number[][];
+  position: string[] | string[][] | string[][][]
+): number[] | number[][] | number[][][] {
+  return position.map((item) => {
+    if (Array.isArray(item)) {
+      return item.map((innerItem) => {
+        if (Array.isArray(innerItem)) {
+          // 第三层，将每个字符串转数字
+          return innerItem.map((str) => Number(str));
+        } else {
+          return Number(innerItem);
+        }
+      });
+    } else {
+      return Number(item);
+    }
+  }) as number[] | number[][] | number[][][];
 }