hn-map 1.1.2 → 1.1.4

package/dist/index.js

@@ -463,7 +463,7 @@
       // 思极key
       sj_app_key: "",
       sj_app_secret: "",
-      style: "aegis://styles/aegis/Streets-Raster512"
+      sj_style: "aegis://styles/aegis/Streets-Raster512"
     };
     var mars3d_map = /*#__PURE__*/function () {
       function mars3d_map(id, option) {
@@ -477,7 +477,7 @@
         this.event = {};
         this.level = null;
         this.layerList = [];
-        this.level = this.option.level;
+        this.level = 10;
         deepMerge(this.option, option);
         this.config = this.formatConfig(this.option);
         this.map = new mars3d.Map(id, this.config);
@@ -744,6 +744,7 @@
         _classCallCheck(this, siji_map);
         this.id = null;
         this.map = null;
+        this.geocodingTask = null;
         this.option = JSON.parse(JSON.stringify(defaultOption));
         this.config = null;
         // 图层集合
@@ -756,6 +757,7 @@
         deepMerge(this.option, option);
         this.config = this.formatConfig(this.option);
         this.map = new SGMap.Map(this.config);
+        this.geocodingTask = new SGMap.GeocodingTask();
         this.map.on("moveend", function (e) {
           return _this2.updateMapParams(e);
         }); // 地图移动完成
@@ -765,13 +767,20 @@
         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",
         value: function formatConfig(option) {
           return {
             container: this.id,
-            style: "aegis://styles/aegis/Streets-v2",
+            style: option.sj_style || "aegis://styles/aegis/StreetsDark-v2",
             // 默认缩放层级
             zoom: option.level,
             // 地图中心点
@@ -841,7 +850,11 @@
           switch (eventType) {
             case "click":
               this.event[eventType] = function (event) {
-                callback(event.lngLat);
+                callback({
+                  lng: event.lngLat.lng,
+                  lat: event.lngLat.lat,
+                  alt: event.lngLat.alt || 0
+                });
               };
               break;
             case "dblclick":
@@ -1160,6 +1173,7 @@
           })) {
             console.error("已存在同名图形" + entity.id);
           } else {
+            alert(entity.id);
             this.children.push(entity);
             this.layerEntity.addOverlay(entity.graphic); // 添加图形
             // 图层添加新图形后，需要重新调用绑定点击弹窗方法
@@ -1325,6 +1339,7 @@
         value: function addLevelEntity(entity) {
           if (entity.type == "imagePoint") {
             hnMap.map.map.loadImage(entity.option.image, function (error, image) {
+              entity.config.layout["icon-size"] = entity.option.width / image.width;
               hnMap.map.map.addImage(entity.id + "_image", image);
               hnMap.map.map.addLayer(entity.config);
             });
@@ -1385,6 +1400,14 @@
             entity.show = false;
           }
         }
+        // 控制图层层高
+      }, {
+        key: "moveEntity",
+        value: function moveEntity(layerIds) {
+          // 数组转字符串
+          var s = layerIds.join(",");
+          hnMap.map.map.moveLayer(s);
+        }
       }, {
         key: "clearEntity",
         value: function clearEntity() {
@@ -1641,9 +1664,6 @@
       key: "addPopupByAttr",
       value: function addPopupByAttr() {
         var _this = this;
-        alert("添加属性弹窗");
-        console.log(this.config);
-        console.log(this.graphic);
         // 如果已有弹窗，先关闭
         this.removePopup();
         this.infoWindow = new SGMap.Popup({
@@ -1653,7 +1673,6 @@
           className: "my-popupAttr-class"
         });
         var handleClick = function handleClick(e) {
-          alert("添加属性弹窗111");
           // const data = e.features[0].properties;
           var data = _this.option.data;
           // 创建弹窗内容
@@ -1681,8 +1700,8 @@
         var handleClick = function handleClick(e) {
           var data = _this2.option.data;
           // const data = e.features[0].properties;
-          var dom = getCustomDom(data);
-          _this2.infoWindow.setHTML(dom);
+          getCustomDom(data);
+          _this2.infoWindow.setHTML("<image-preview>");
           _this2.infoWindow.setLngLat(e.lngLat).addTo(_this2.hnMap.map.map);
         };
         this.hnMap.map.map.on("click", this.config.id, handleClick);
@@ -1698,12 +1717,27 @@
     }, {
       key: "flyTo",
       value: function flyTo() {
+        var option = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+        deepMerge(this.option, option);
+        console.log(this.option, "=====flyTo");
         var zoom = this.hnMap.map.map.getZoom();
+        var center;
+        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") {
+            center = this.option.position[0];
+          } else if (this.type == "route") {
+            center = [this.option.position[0][0], this.option.position[0][1]];
+          } else {
+            center = this.option.position;
+          }
+        }
         this.hnMap.map.map.flyTo({
           duration: 1000,
           // 持续时间
-          zoom: zoom,
-          center: this.type == "line" || this.type == "dash" || this.type == "flicker" || this.type == "flow" || this.type == "arrow" || this.type == "mapLabel" || this.type == "polygon" || this.type == "rectangle" ? this.option.position[0] : this.type == "route" ? [this.option.position[0][0], this.option.position[0][1]] : this.option.position
+          zoom: this.option.zoom || zoom,
+          center: center
         });
       }
     }, {
@@ -1908,7 +1942,9 @@
                   type: "Feature",
                   geometry: {
                     type: "Point",
-                    coordinates: option.position
+                    coordinates: option.position.map(function (num) {
+                      return Number(num);
+                    })
                   },
                   properties: Object.assign({
                     id: option.id
@@ -1943,7 +1979,9 @@
               },
               geometry: {
                 type: "Point",
-                coordinates: this.option.position
+                coordinates: this.option.position.map(function (num) {
+                  return Number(num);
+                })
               }
             }]
           });
@@ -2111,7 +2149,9 @@
                   type: "Feature",
                   geometry: {
                     type: "Point",
-                    coordinates: option.position
+                    coordinates: option.position.map(function (num) {
+                      return Number(num);
+                    })
                   },
                   properties: {
                     name: option.text
@@ -2142,7 +2182,9 @@
                   type: "Feature",
                   geometry: {
                     type: "Point",
-                    coordinates: option.position
+                    coordinates: option.position.map(function (num) {
+                      return Number(num);
+                    })
                   },
                   properties: {
                     name: option.num
@@ -2153,6 +2195,7 @@
             layout: {
               "icon-anchor": "center",
               "text-field": "{name}",
+              // 文本
               "text-size": Number(option.size),
               "text-anchor": "center" // 顶部对齐
             },
@@ -2179,7 +2222,9 @@
               },
               geometry: {
                 type: "Point",
-                coordinates: this.option.position
+                coordinates: this.option.position.map(function (num) {
+                  return Number(num);
+                })
               }
             }]
           });
@@ -2206,7 +2251,9 @@
               },
               geometry: {
                 type: "Point",
-                coordinates: this.option.position
+                coordinates: this.option.position.map(function (num) {
+                  return Number(num);
+                })
               }
             }]
           });
@@ -2426,15 +2473,26 @@
                     })
                   },
                   properties: {
-                    name: ""
+                    name: option.text
                   }
                 }]
               }
             },
             layout: {
               "icon-image": option.id + "_image",
-              "icon-size": Number(option.width) / Number(option.height)
-            }
+              "icon-size": 1,
+              "icon-ignore-placement": true,
+              "text-ignore-placement": true,
+              "text-field": "{name}",
+              // 文本
+              "text-size": option.fontSize,
+              "text-anchor": "top",
+              "icon-anchor": "center",
+              "text-offset": option.offset
+            },
+            paint: {
+              "text-color": option.color
+            } // 填充样式
           };
           return config;
         }
@@ -2468,6 +2526,18 @@
               }
             }
           }
+          for (var _key in this.config) {
+            if (this.config.hasOwnProperty(_key)) {
+              if (_key == "paint") {
+                for (var _key2 in this.config[_key]) {
+                  if (this.config[_key].hasOwnProperty(_key2)) {
+                    // 遍历 paint 属性
+                    hnMap.map.map.setPaintProperty(this.config.id, _key2, this.config[_key][_key2]);
+                  }
+                }
+              }
+            }
+          }
         }
       }]);
     }(siji_entity);
@@ -5197,7 +5267,6 @@
       if (!HnMap.allowConstruction) {
         throw new Error("请使用 HnMap.create() 创建实例");
       }
-      console.log(11111111111);
       this.id = id;
       this.option = option;
       this.mapType = mapType;
@@ -5285,7 +5354,7 @@
                 return SGMap.tokenTask.login(option.sj_app_key, option.sj_app_secret);
               case 15:
                 _context.n = 16;
-                return SGMap.plugin(["SGMap.DrawPolygonHandler", "SGMap.DrawCircleHandler", "SGMap.DrawRectangleHandler", "SGMap.GeocodingTask"]);
+                return SGMap.plugin(["SGMap.DrawPolygonHandler", "SGMap.DrawCircleHandler", "SGMap.DrawRectangleHandler", "SGMap.GeocodingTask", "SGMap.RoadNetLayer"]);
               case 16:
                 return _context.a(3, 17);
               case 17:

package/package.json

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

package/src/base/siji_entity.ts

@@ -1,3 +1,4 @@
+import { deepMerge } from "../util";
 export default class siji_entity {
   event: any = {};
   infoWindow: any = null;
@@ -6,7 +7,7 @@ export default class siji_entity {
   graphic: any = null;
   option: any = null;
   type: any = null;
-  show:boolean = false;
+  show: boolean = false;
 
   constructor(hnMap: any) {
     this.hnMap = hnMap;
@@ -16,9 +17,6 @@ export default class siji_entity {
 
   // 添加属性弹窗
   addPopupByAttr() {
-    alert("添加属性弹窗");
-    console.log(this.config);
-    console.log(this.graphic);
     // 如果已有弹窗，先关闭
     this.removePopup();
 
@@ -28,7 +26,6 @@ export default class siji_entity {
     });
 
     const handleClick = (e: any) => {
-      alert("添加属性弹窗111");
       // const data = e.features[0].properties;
       const data = this.option.data;
       // 创建弹窗内容
@@ -47,7 +44,6 @@ export default class siji_entity {
   // 添加自定义dom弹窗
   addCustomPopup(getCustomDom: any) {
     this.removePopup();
-
     this.infoWindow = new SGMap.Popup({
       offset: { bottom: [0, 0] },
       className: "my-customPopup-class",
@@ -57,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(dom);
+      this.infoWindow.setHTML("<image-preview>");
       this.infoWindow.setLngLat(e.lngLat).addTo(this.hnMap.map.map);
     };
 
@@ -71,12 +67,15 @@ export default class siji_entity {
     }
   }
 
-  flyTo() {
+  flyTo(option: any = {}) {
+    deepMerge(this.option, option);
+    console.log(this.option, "=====flyTo");
     let zoom = this.hnMap.map.map.getZoom();
-    this.hnMap.map.map.flyTo({
-      duration: 1000, // 持续时间
-      zoom: zoom,
-      center:
+    let center;
+    if (this.option.center) {
+      center = this.option.center;
+    } else {
+      if (
         this.type == "line" ||
         this.type == "dash" ||
         this.type == "flicker" ||
@@ -85,10 +84,18 @@ export default class siji_entity {
         this.type == "mapLabel" ||
         this.type == "polygon" ||
         this.type == "rectangle"
-          ? this.option.position[0]
-          : this.type == "route"
-          ? [this.option.position[0][0], this.option.position[0][1]]
-          : this.option.position,
+      ) {
+        center = this.option.position[0];
+      } else if (this.type == "route") {
+        center = [this.option.position[0][0], this.option.position[0][1]];
+      } else {
+        center = this.option.position;
+      }
+    }
+    this.hnMap.map.map.flyTo({
+      duration: 1000, // 持续时间
+      zoom: this.option.zoom || zoom,
+      center: center,
     });
   }
 

package/src/graphic/circle.ts

@@ -1,4 +1,4 @@
-import {deepMerge, getLevelMiddleHeight, wgs84ToGcj02Format} from "../util";
+import { deepMerge, getLevelMiddleHeight, wgs84ToGcj02Format } from "../util";
 import mars3d_entity from "../base/mars3d_entity";
 import gaode_entity from "../base/gaode_entity";
 import siji_entity from "../base/siji_entity";
@@ -42,8 +42,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
+      );
       let config: any = {
         id: option.id,
         position: new mars3d.LngLatPoint(

package/src/graphic/imagePoint.ts

@@ -1,4 +1,4 @@
-import {deepMerge, getLevelMiddleHeight, wgs84ToGcj02Format} from "../util";
+import { deepMerge, getLevelMiddleHeight, wgs84ToGcj02Format } from "../util";
 import mars3d_entity from "../base/mars3d_entity";
 import gaode_entity from "../base/gaode_entity";
 import siji_entity from "../base/siji_entity";
@@ -51,8 +51,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,
@@ -174,10 +178,10 @@ export default (hnMap: any) => {
                 type: "Feature",
                 geometry: {
                   type: "Point",
-                  coordinates: option.position.map((num:any)=>Number(num)),
+                  coordinates: option.position.map((num: any) => Number(num)),
                 },
                 properties: {
-                  name: "",
+                  name: option.text,
                 },
               },
             ],
@@ -185,8 +189,18 @@ export default (hnMap: any) => {
         },
         layout: {
           "icon-image": option.id + "_image",
-          "icon-size": Number(option.width) / Number(option.height),
+          "icon-size": 1,
+          "icon-ignore-placement": true,
+          "text-ignore-placement": true,
+          "text-field": "{name}", // 文本
+          "text-size": option.fontSize,
+          "text-anchor": "top",
+          "icon-anchor": "center",
+          "text-offset": option.offset,
         },
+        paint: {
+          "text-color": option.color,
+        }, // 填充样式
       };
       return config;
     }
@@ -202,7 +216,7 @@ export default (hnMap: any) => {
             type: "Feature",
             geometry: {
               type: "Point",
-              coordinates: this.option.position.map((num:any)=>Number(num)),
+              coordinates: this.option.position.map((num: any) => Number(num)),
             },
           },
         ],
@@ -224,6 +238,23 @@ export default (hnMap: any) => {
           }
         }
       }
+
+      for (let key in this.config) {
+        if (this.config.hasOwnProperty(key)) {
+          if (key == "paint") {
+            for (let key2 in this.config[key]) {
+              if (this.config[key].hasOwnProperty(key2)) {
+                // 遍历 paint 属性
+                hnMap.map.map.setPaintProperty(
+                  this.config.id,
+                  key2,
+                  this.config[key][key2]
+                );
+              }
+            }
+          }
+        }
+      }
     }
   }
 

package/src/graphic/numPoint.ts

@@ -1,4 +1,4 @@
-import {deepMerge, getLevelMiddleHeight, wgs84ToGcj02Format} from "../util";
+import { deepMerge, getLevelMiddleHeight, wgs84ToGcj02Format } 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 +35,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,
@@ -140,7 +144,7 @@ export default (hnMap: any) => {
                 type: "Feature",
                 geometry: {
                   type: "Point",
-                  coordinates: option.position,
+                  coordinates: option.position.map((num: any) => Number(num)),
                 },
                 properties: {
                   name: option.text,
@@ -173,7 +177,7 @@ export default (hnMap: any) => {
                 type: "Feature",
                 geometry: {
                   type: "Point",
-                  coordinates: option.position,
+                  coordinates: option.position.map((num: any) => Number(num)),
                 },
                 properties: {
                   name: option.num,
@@ -184,7 +188,7 @@ export default (hnMap: any) => {
         },
         layout: {
           "icon-anchor": "center",
-          "text-field": "{name}",
+          "text-field": "{name}", // 文本
           "text-size": Number(option.size),
           "text-anchor": "center", // 顶部对齐
         }, // 文本样式
@@ -209,7 +213,7 @@ export default (hnMap: any) => {
             properties: { name: this.option.text },
             geometry: {
               type: "Point",
-              coordinates: this.option.position,
+              coordinates: this.option.position.map((num: any) => Number(num)),
             },
           },
         ],
@@ -242,7 +246,7 @@ export default (hnMap: any) => {
             properties: { name: this.option.num },
             geometry: {
               type: "Point",
-              coordinates: this.option.position,
+              coordinates: this.option.position.map((num: any) => Number(num)),
             },
           },
         ],

package/src/graphic/point.ts

@@ -162,7 +162,7 @@ export default (hnMap: any) => {
                 type: "Feature",
                 geometry: {
                   type: "Point",
-                  coordinates: option.position,
+                  coordinates: option.position.map((num:any)=>Number(num)),
                 },
                 properties: {
                   id: option.id,
@@ -198,7 +198,7 @@ export default (hnMap: any) => {
             properties: { name: this.option.text },
             geometry: {
               type: "Point",
-              coordinates: this.option.position,
+              coordinates: this.option.position.map((num:any)=>Number(num)),
             },
           },
         ],