hn-map 1.1.6 → 1.1.9

package/dist/index.js

@@ -482,7 +482,8 @@
       // 思极key
       sj_app_key: "",
       sj_app_secret: "",
-      sj_style: "aegis://styles/aegis/Streets-Raster512"
+      sj_style: "aegis://styles/aegis/Streets-Raster512",
+      sj_route_net: true
     };
     var mars3d_map = /*#__PURE__*/function () {
       function mars3d_map(id, option) {
@@ -956,10 +957,12 @@
                   return new Promise(function (resolve) {
                     instance.map.on("load", function (e) {
                       // 路况展示
-                      var roadNetLayer = new SGMap.RoadNetLayer({
-                        map: instance.map
-                      });
-                      roadNetLayer.render();
+                      if (option.sj_route_net) {
+                        var roadNetLayer = new SGMap.RoadNetLayer({
+                          map: instance.map
+                        });
+                        roadNetLayer.render();
+                      }
                       //添加天空图层
                       instance.map.addLayer({
                         "id": "sky",
@@ -1038,9 +1041,13 @@
             console.error("已存在同名图形" + entity.id);
           } else {
             this.children.push(entity);
-            this.layerEntity.addGraphic(entity.graphic); // 添加图形
             if (entity.type == "route") {
+              this.layerEntity.addGraphic(entity.graphic); // 添加图形
               entity.start();
+            } else if (entity.type == "pointCloud" || entity.type == "heatMap") {
+              hnMap.map.map.addLayer(entity.layerEntity);
+            } else {
+              this.layerEntity.addGraphic(entity.graphic); // 添加图形
             }
           }
         }
@@ -1054,6 +1061,11 @@
               return v.id !== entity.id;
             });
             console.log("layerEntity", this.layerEntity);
+            if (entity.type === "pointCloud" || entity.type === "heatMap") {
+              alert(entity.id);
+              hnMap.map.map.removeLayer(entity.id);
+              // entity.id.destroy();
+            }
             this.layerEntity.removeGraphic(entity.graphic);
           }
         }
@@ -1127,7 +1139,6 @@
         key: "addPopupByAttr",
         value: function addPopupByAttr() {
           this.layerEntity.bindPopup(function (event) {
-            console.log(event.graphic, "====event.graphic==");
             if (event.graphic.attr) {
               var data = event.graphic.attr;
               return mars3d.Util.getTemplateHtml({
@@ -1414,6 +1425,16 @@
             entity.createCar();
             entity.chunkData = entity.joinLinePoint();
             entity.start();
+          } else if (entity.type == "pointCloud") {
+            hnMap.map.map.addLayer(entity.config);
+          } else if (entity.type == "heatMap") {
+            hnMap.map.map.addLayer(entity.config_heatmap);
+            hnMap.map.map.addLayer(entity.config_point);
+            hnMap.map.map.flyTo({
+              center: [entity.option.position[0].lng, entity.option.position[0].lat],
+              duration: 2000,
+              essential: true
+            });
           } else {
             hnMap.map.map.addLayer(entity.config);
           }
@@ -2543,8 +2564,8 @@
               // 文本
               "text-size": Number(option.fontSize),
               "text-anchor": option.verticalOrigin,
-              "icon-anchor": option.verticalOrigin
-              // "text-offset": convertPosition(option.offset),
+              "icon-anchor": option.verticalOrigin,
+              "text-offset": convertPosition(option.offset)
             },
             paint: {
               "text-color": option.color
@@ -4533,7 +4554,7 @@
     var mars3d_class = /*#__PURE__*/function () {
       function mars3d_class(option) {
         _classCallCheck(this, mars3d_class);
-        this.type = 'heatMap';
+        this.type = "heatMap";
         this.id = null;
         this.option = JSON.parse(JSON.stringify(defaultOption));
         this.config = null;
@@ -4565,6 +4586,7 @@
               clampToGround: option.clampToGround
             },
             redrawZoom: true,
+            flyTo: true,
             attr: option.data
           };
         }
@@ -4687,9 +4709,124 @@
         }
       }]);
     }();
+    var siji_class = /*#__PURE__*/function () {
+      function siji_class(option) {
+        _classCallCheck(this, siji_class);
+        this.type = "heatMap";
+        this.id = null;
+        this.option = JSON.parse(JSON.stringify(defaultOption));
+        this.config_heatmap = null;
+        this.config_point = null;
+        this.layerEntity = null;
+        this.id = option.id;
+        deepMerge(this.option, option);
+        hnMap.map.map.addSource("themeData", {
+          type: "geojson",
+          data: {
+            type: "FeatureCollection",
+            features: this.option.position.map(function (v) {
+              return {
+                type: "Feature",
+                geometry: {
+                  type: "Point",
+                  coordinates: [v.lng, v.lat]
+                },
+                properties: {
+                  value: v.value
+                }
+              };
+            })
+          }
+        });
+        this.config_heatmap = this.formatConfig_heatmap(this.option);
+        this.config_point = this.formatConfig_point(this.option);
+      }
+      return _createClass(siji_class, [{
+        key: "formatConfig_heatmap",
+        value: function formatConfig_heatmap(option) {
+          var config = {};
+          config = {
+            id: option.id,
+            type: "heatmap",
+            source: "themeData",
+            maxzoom: 17,
+            paint: {
+              /**
+               * 数据点的影响力，weight=10的点相当于十个weight=1的点
+               * 下述为插值表达式，输入是点geojson的properties的mag，输出随mag线性增大
+               */
+              "heatmap-weight": ["interpolate", ["linear"], ["get", "value"], 0, 0, 150, 1.5],
+              /**
+               * 热力图强度，类似heatmap-weight
+               * 下述为插值表达式，输出随zoom线性变化，zoom为0时值为1，zoom为12时值为3
+               */
+              "heatmap-intensity": ["interpolate", ["linear"], ["zoom"], 0, 1, 17, 1],
+              /**
+               * 像素的颜色，必须以heatmap-density（热力图像素的密度）为输入
+               * 下述为插值表达式，输出随heatmap-density变化而变化
+               */
+              "heatmap-color": ["interpolate", ["linear"], ["heatmap-density"], 0, "rgba(255, 0, 0, 0)", 0.4, option.gradient["0.4"], 0.6, option.gradient["0.6"], 0.8, option.gradient["0.8"], 0.9, option.gradient["0.9"]
+              // 0,
+              // "rgba(255, 0, 0, 0)",
+              // 0.1,
+              // option.gradient["0.4"], // "rgba(0, 30, 255, .6)",
+              // 0.2,
+              // "rgba(7, 208, 255, .6)",
+              // 0.3,
+              // option.gradient["0.6"], //"#2cc946",
+              // 0.4,
+              // "#d5fb0c",
+              // 0.5,
+              // option.gradient["0.8"], //"#e04e4e",
+              // 0.6,
+              // option.gradient["0.9"], //"#f33900",
+              // 0.9,
+              // "rgba(243, 57, 0, .6)",
+              // 1,
+              // "rgba(243, 57, 0, .8)",
+              ],
+              /**
+               * 该值越大，热力图越平滑，信息越不详细。
+               * 下述为插值表达式，输出随zoom线性变化，zoom为0时值为8，zoom为9时值为20
+               */
+              "heatmap-radius": ["interpolate", ["linear"], ["zoom"], 0, 5, 17, 50],
+              /**
+               * 透明度，输出为1则不透明
+               * 下述为插值表达式，输出随zoom线性变化，zoom为5时值为0.8，zoom为12时值为0.4
+               */
+              "heatmap-opacity": ["interpolate", ["linear"], ["zoom"], 5, option.maxOpacity,
+              //0.8,
+              17, option.minOpacity // 0.8
+              ]
+            }
+          };
+          return config;
+        }
+      }, {
+        key: "formatConfig_point",
+        value: function formatConfig_point(option) {
+          var config_point = {};
+          config_point = {
+            id: "earthquakes-point",
+            type: "circle",
+            source: "themeData",
+            minzoom: 17,
+            paint: {
+              "circle-radius": ["interpolate", ["linear"], ["zoom"], 5, 1, 20, 12],
+              "circle-color": "rgb(255, 148, 0)",
+              "circle-stroke-color": "white",
+              "circle-stroke-width": 1,
+              "circle-opacity": ["interpolate", ["linear"], ["zoom"], 9, 0, 20, 1]
+            }
+          };
+          return config_point;
+        }
+      }]);
+    }();
     var fn = {
       mars3d: mars3d_class,
-      gaode: gaode_class
+      gaode: gaode_class,
+      siji: siji_class
     };
     return fn[hnMap.mapType];
   });
@@ -5036,7 +5173,7 @@
     var mars3d_class = /*#__PURE__*/function () {
       function mars3d_class(option) {
         _classCallCheck(this, mars3d_class);
-        this.type = 'pointCloud';
+        this.type = "pointCloud";
         this.id = null;
         this.option = JSON.parse(JSON.stringify(defaultOption));
         this.config = null;
@@ -5103,9 +5240,114 @@
       _classCallCheck(this, gaode_class);
       throw new Error("高德地图不支持点云功能");
     });
+    var siji_class = /*#__PURE__*/function () {
+      function siji_class(option) {
+        _classCallCheck(this, siji_class);
+        this.type = "pointCloud";
+        this.id = null;
+        this.option = JSON.parse(JSON.stringify(defaultOption));
+        this.config = null;
+        this.layerEntity = null;
+        this.THREE = null;
+        this.camera = null;
+        this.scene = null;
+        this.renderer = null;
+        this.modelTransform = null;
+        this.id = option.id;
+        deepMerge(this.option, option);
+        this.config = this.formatConfig(this.option);
+      }
+      // 传入角度值（0-360度），转换为弧度
+      return _createClass(siji_class, [{
+        key: "calculateRotationFromDegrees",
+        value: function calculateRotationFromDegrees(angleInDegrees) {
+          // 将角度转换为弧度，Three.js中Z轴旋转是顺时针的
+          var rotateZ = angleInDegrees * Math.PI / 180;
+          return [0, 0, rotateZ];
+        }
+      }, {
+        key: "formatConfig",
+        value: function formatConfig(option) {
+          var modelOrigin = convertPosition([option.position.lng, option.position.lat]);
+          var modelAltitude = option.position.alt;
+          var modelRotate = this.calculateRotationFromDegrees(option.rotation);
+          console.log("modelRotate", modelRotate);
+          var modelScale = option.scale * 1e-6;
+          var modelTransform = {
+            translateX: SGMap.MercatorCoordinate.fromLngLat(modelOrigin, modelAltitude).x,
+            translateY: SGMap.MercatorCoordinate.fromLngLat(modelOrigin, modelAltitude).y,
+            translateZ: SGMap.MercatorCoordinate.fromLngLat(modelOrigin, modelAltitude).z,
+            rotateX: modelRotate[0],
+            rotateY: modelRotate[1],
+            rotateZ: modelRotate[2],
+            scale: modelScale
+          };
+          var THREE = window.THREE;
+          var config = {};
+          config = {
+            id: option.id,
+            type: "custom",
+            renderingMode: "3d",
+            onAdd: function onAdd(map, gl) {
+              console.log("map====", map);
+              this.camera = new THREE.Camera();
+              this.scene = new THREE.Scene();
+              var directionalLight = new THREE.DirectionalLight(0xffffff);
+              directionalLight.position.set(0, -70, 100).normalize();
+              this.scene.add(directionalLight);
+              var directionalLight2 = new THREE.DirectionalLight(0xffffff);
+              directionalLight2.position.set(0, 70, 100).normalize();
+              this.scene.add(directionalLight2);
+              // var loader = new THREE.GLTFLoader();
+              var loader = new THREE.ObjectLoader();
+              var that = this;
+              loader.load(option.url,
+              // 'https://map.sgcc.com.cn/products/js-sdk/v3/assets/model/ZH-SZC3-42.gltf',
+              // function (gltf: any) {
+              function (object) {
+                that.scene.add(object);
+                // that.scene.add(gltf.scene);
+                map.flyTo({
+                  center: modelOrigin,
+                  // 模型中心坐标
+                  zoom: 18,
+                  // 缩放级别，可以调整
+                  pitch: 75,
+                  // 倾斜角度
+                  bearing: 0,
+                  // 方向角
+                  duration: 2000,
+                  // 动画持续时间（毫秒）
+                  essential: true // 表示此动画对用户体验很重要
+                });
+              }.bind(that));
+              // this.map = map;
+              this.renderer = new THREE.WebGLRenderer({
+                canvas: map.getCanvas(),
+                context: gl
+              });
+              this.renderer.autoClear = false;
+            },
+            render: function render(gl, matrix) {
+              var rotationX = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(1, 0, 0), modelTransform.rotateX);
+              var rotationY = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(0, 1, 0), modelTransform.rotateY);
+              var rotationZ = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(0, 0, 1), modelTransform.rotateZ);
+              var m = new THREE.Matrix4().fromArray(matrix);
+              var l = new THREE.Matrix4().makeTranslation(modelTransform.translateX, modelTransform.translateY, modelTransform.translateZ).scale(new THREE.Vector3(modelTransform.scale, -modelTransform.scale, modelTransform.scale)).multiply(rotationX).multiply(rotationY).multiply(rotationZ);
+              this.camera.projectionMatrix.elements = matrix;
+              this.camera.projectionMatrix = m.multiply(l);
+              this.renderer.state.reset();
+              this.renderer.render(this.scene, this.camera);
+            }
+          };
+          return config;
+        }
+      }]);
+    }();
     var fn = {
       mars3d: mars3d_class,
-      gaode: gaode_class
+      gaode: gaode_class,
+      siji: siji_class
     };
     return fn[hnMap.mapType];
   });
@@ -5360,7 +5602,7 @@
      * 创建HnMap实例的方法
      * @param id 地图容器的ID
      * @param option 地图的配置选项
-     * @param mapType 地图的类型
+     * @param mapType 用户期望的地图类型（如 'gaode', 'siji'）
      */
     return _createClass(HnMap, [{
       key: "initModules",
@@ -5387,86 +5629,136 @@
       key: "create",
       value: function create(id, option, mapType) {
         return __awaiter(this, void 0, void 0, /*#__PURE__*/_regenerator().m(function _callee() {
-          var basePath, MapClass, innerMap, instance, _t;
+          var basePath, innerMap, finalMapType, instance, _t, _t2;
           return _regenerator().w(function (_context) {
             while (1) switch (_context.p = _context.n) {
               case 0:
-                // 判断是否在子路径下
-                basePath = window.location.pathname.endsWith("/") ? window.location.pathname : window.location.pathname.substring(0, window.location.pathname.lastIndexOf("/") + 1);
+                basePath = window.location.pathname.endsWith("/") ? window.location.pathname : window.location.pathname.substring(0, window.location.pathname.lastIndexOf("/") + 1); // 预加载 turf（所有类型都需要）
                 _context.n = 1;
                 return loadResource(basePath + "lib/turf/turf.min.js", "js");
               case 1:
-                _t = mapType;
-                _context.n = _t === "mars3d" ? 2 : _t === "gaode" ? 9 : _t === "siji" ? 13 : 17;
-                break;
-              case 2:
+                // 尝试创建地图，支持 fallback
+                innerMap = null;
+                finalMapType = mapType;
+                _context.p = 2;
                 _context.n = 3;
-                return loadResource(basePath + "lib/Cesium/Widgets/widgets.css", "css");
+                return HnMap.tryCreateMap(id, option, mapType, basePath);
               case 3:
-                _context.n = 4;
-                return loadResource(basePath + "lib/Cesium/Cesium.js", "js");
+                innerMap = _context.v;
+                _context.n = 8;
+                break;
               case 4:
-                _context.n = 5;
-                return loadResource(basePath + "lib/mars3d/mars3d.css", "css");
-              case 5:
+                _context.p = 4;
+                _t = _context.v;
+                console.warn("[".concat(mapType, "] \u5730\u56FE\u521D\u59CB\u5316\u5931\u8D25\uFF0C\u5C1D\u8BD5\u56DE\u9000\u5230 mars3d"), _t);
+                finalMapType = "mars3d";
+                _context.p = 5;
                 _context.n = 6;
-                return loadResource(basePath + "lib/mars3d/mars3d.js", "js");
+                return HnMap.tryCreateMap(id, option, "mars3d", basePath);
               case 6:
-                _context.n = 7;
-                return loadResource(basePath + "lib/mars3d/plugins/heatmap/heatmap.js", "js");
-              case 7:
+                innerMap = _context.v;
                 _context.n = 8;
+                break;
+              case 7:
+                _context.p = 7;
+                _t2 = _context.v;
+                console.error("mars3d 回退也失败了！", _t2);
+                throw new Error("所有地图类型均无法加载，请检查网络或资源配置");
+              case 8:
+                // 创建 HnMap 实例
+                HnMap.allowConstruction = true;
+                _context.p = 9;
+                instance = new HnMap(id, option, finalMapType, innerMap);
+                instance.initModules();
+                return _context.a(2, instance);
+              case 10:
+                _context.p = 10;
+                HnMap.allowConstruction = false;
+                return _context.f(10);
+              case 11:
+                return _context.a(2);
+            }
+          }, _callee, null, [[9,, 10, 11], [5, 7], [2, 4]]);
+        }));
+      }
+      /**
+       * 尝试根据 mapType 加载资源并创建地图实例
+       */
+    }, {
+      key: "tryCreateMap",
+      value: function tryCreateMap(id, option, mapType, basePath) {
+        return __awaiter(this, void 0, void 0, /*#__PURE__*/_regenerator().m(function _callee2() {
+          var MapClass, innerMap, _t3;
+          return _regenerator().w(function (_context2) {
+            while (1) switch (_context2.n) {
+              case 0:
+                _t3 = mapType;
+                _context2.n = _t3 === "mars3d" ? 1 : _t3 === "gaode" ? 8 : _t3 === "siji" ? 12 : 17;
+                break;
+              case 1:
+                _context2.n = 2;
+                return loadResource(basePath + "lib/Cesium/Widgets/widgets.css", "css");
+              case 2:
+                _context2.n = 3;
+                return loadResource(basePath + "lib/Cesium/Cesium.js", "js");
+              case 3:
+                _context2.n = 4;
+                return loadResource(basePath + "lib/mars3d/mars3d.css", "css");
+              case 4:
+                _context2.n = 5;
+                return loadResource(basePath + "lib/mars3d/mars3d.js", "js");
+              case 5:
+                _context2.n = 6;
+                return loadResource(basePath + "lib/mars3d/plugins/heatmap/heatmap.js", "js");
+              case 6:
+                _context2.n = 7;
                 return loadResource(basePath + "lib/mars3d/plugins/heatmap/mars3d-heatmap.js", "js");
+              case 7:
+                return _context2.a(3, 18);
               case 8:
-                return _context.a(3, 17);
-              case 9:
-                _context.n = 10;
+                _context2.n = 9;
                 return loadResource("https://webapi.amap.com/maps?v=2.0&key=".concat(option.gaode_key, "&plugin=AMap.HeatMap,AMap.MarkerCluster,AMap.MoveAnimation"), "js");
-              case 10:
-                _context.n = 11;
+              case 9:
+                _context2.n = 10;
                 return loadResource("https://a.amap.com/jsapi_demos/static/data3d/lib/three.117.js", "js");
-              case 11:
-                _context.n = 12;
+              case 10:
+                _context2.n = 11;
                 return loadResource("https://a.amap.com/jsapi_demos/static/data3d/lib/GLTFLoader.117.min.js", "js");
+              case 11:
+                return _context2.a(3, 18);
               case 12:
-                return _context.a(3, 17);
-              case 13:
-                _context.n = 14;
+                _context2.n = 13;
                 return loadResource(option.sj_js_url, "js");
+              case 13:
+                if (!(typeof SGMap === "undefined")) {
+                  _context2.n = 14;
+                  break;
+                }
+                throw new Error("siji 地图 JS 加载成功但 SGMap 未定义");
               case 14:
-                _context.n = 15;
+                _context2.n = 15;
                 return SGMap.tokenTask.login(option.sj_app_key, option.sj_app_secret);
               case 15:
-                _context.n = 16;
+                _context2.n = 16;
                 return SGMap.plugin(["SGMap.DrawPolygonHandler", "SGMap.DrawCircleHandler", "SGMap.DrawRectangleHandler", "SGMap.GeocodingTask", "SGMap.RoadNetLayer"]);
               case 16:
-                return _context.a(3, 17);
+                return _context2.a(3, 18);
               case 17:
+                throw new Error("\u4E0D\u652F\u6301\u7684\u5730\u56FE\u7C7B\u578B: ".concat(mapType));
+              case 18:
                 // 2. 创建地图对象
                 MapClass = map({
                   id: id,
                   option: option,
                   mapType: mapType
-                }); // 假设 map 是一个工厂
-                _context.n = 18;
+                });
+                _context2.n = 19;
                 return MapClass.create(id, option);
-              case 18:
-                innerMap = _context.v;
-                // 真正的地图实例
-                // 3. 创建 HnMap 实例（此时传入 map）
-                HnMap.allowConstruction = true;
-                _context.p = 19;
-                instance = new HnMap(id, option, mapType, innerMap); // 4. ✅ 此时 this.map 已存在，再初始化所有模块
-                instance.initModules();
-                return _context.a(2, instance);
-              case 20:
-                _context.p = 20;
-                HnMap.allowConstruction = false;
-                return _context.f(20);
-              case 21:
-                return _context.a(2);
+              case 19:
+                innerMap = _context2.v;
+                return _context2.a(2, innerMap);
             }
-          }, _callee, null, [[19,, 20, 21]]);
+          }, _callee2);
         }));
       }
     }]);

package/package.json

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

package/src/graphic/imagePoint.ts

@@ -202,7 +202,7 @@ export default (hnMap: any) => {
           "text-size": Number(option.fontSize),
           "text-anchor": option.verticalOrigin,
           "icon-anchor": option.verticalOrigin,
-          // "text-offset": convertPosition(option.offset),
+          "text-offset": convertPosition(option.offset),
         },
         paint: {
           "text-color": option.color,