hn-map 1.1.4 → 1.1.6

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: {
@@ -394,6 +406,10 @@ export default (hnMap: any) => {
           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);
@@ -405,6 +421,7 @@ export default (hnMap: any) => {
     moveEntity(layerIds: Array<string>) {
       // 数组转字符串
       let s = layerIds.join(",");
+      console.log("s===", s);
       hnMap.map.map.moveLayer(s);
     }
     clearEntity() {

package/src/map.ts

@@ -277,11 +277,6 @@ export default (hnMap: any) => {
       this.map.on("moveend", (e: any) => this.updateMapParams(e)); // 地图移动完成
       this.map.on("zoomend", (e: any) => this.updateMapParams(e)); // 地图缩放完成
       this.map.on("pitchend", (e: any) => this.updateMapParams(e)); // 地图俯仰角度完成
-      this.map.on("load", (e: any) => {
-        // 路况展示
-        let roadNetLayer = new SGMap.RoadNetLayer({ map: this.map });
-        roadNetLayer.render();
-      });
     }
 
     static async create(id: string, option: any) {
@@ -290,6 +285,34 @@ export default (hnMap: any) => {
       // 返回一个 Promise，等待地图的 'load' 事件
       await new Promise((resolve) => {
         instance.map.on("load", (e: any) => {
+          // 路况展示
+          let 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);
         });
       });
@@ -362,7 +385,7 @@ export default (hnMap: any) => {
             callback({
               lng: event.lngLat.lng,
               lat: event.lngLat.lat,
-              alt: event.lngLat.alt||0,
+              alt: event.lngLat.alt || 0,
             });
           };
           break;