hn-map 1.1.7 → 1.1.10

package/src/index.ts

@@ -77,19 +77,57 @@ export default class HnMap {
    * 创建HnMap实例的方法
    * @param id 地图容器的ID
    * @param option 地图的配置选项
-   * @param mapType 地图的类型
+   * @param mapType 用户期望的地图类型（如 'gaode', 'siji'）
    */
   static async create(id: string, option: option, mapType: string) {
-    // 判断是否在子路径下
     const basePath = window.location.pathname.endsWith("/")
-      ? window.location.pathname
-      : window.location.pathname.substring(
-          0,
-          window.location.pathname.lastIndexOf("/") + 1
+        ? window.location.pathname
+        : window.location.pathname.substring(
+            0,
+            window.location.pathname.lastIndexOf("/") + 1
         );
+
+    // 预加载 turf（所有类型都需要）
     await loadResource(basePath + "lib/turf/turf.min.js", "js");
 
-    // 1.根据不同的地图类型，加载相应的资源
+    // 尝试创建地图，支持 fallback
+    let innerMap: any = null;
+    let finalMapType = mapType;
+
+    try {
+      innerMap = await HnMap.tryCreateMap(id, option, mapType, basePath);
+    } catch (error) {
+      console.warn(`[${mapType}] 地图初始化失败，尝试回退到 mars3d`, error);
+      finalMapType = "mars3d";
+      try {
+        innerMap = await HnMap.tryCreateMap(id, option, "mars3d", basePath);
+      } catch (fallbackError) {
+        console.error("mars3d 回退也失败了！", fallbackError);
+        throw new Error("所有地图类型均无法加载，请检查网络或资源配置");
+      }
+    }
+
+    // 创建 HnMap 实例
+    HnMap.allowConstruction = true;
+    try {
+      const instance = new HnMap(id, option, finalMapType, innerMap);
+      instance.initModules();
+      return instance;
+    } finally {
+      HnMap.allowConstruction = false;
+    }
+  }
+
+  /**
+   * 尝试根据 mapType 加载资源并创建地图实例
+   */
+  private static async tryCreateMap(
+      id: string,
+      option: option,
+      mapType: string,
+      basePath: string
+  ): Promise<any> {
+    // 1. 加载对应地图的资源
     switch (mapType) {
       case "mars3d":
         await loadResource(basePath + "lib/Cesium/Widgets/widgets.css", "css");
@@ -97,30 +135,34 @@ export default class HnMap {
         await loadResource(basePath + "lib/mars3d/mars3d.css", "css");
         await loadResource(basePath + "lib/mars3d/mars3d.js", "js");
         await loadResource(
-          basePath + "lib/mars3d/plugins/heatmap/heatmap.js",
-          "js"
+            basePath + "lib/mars3d/plugins/heatmap/heatmap.js",
+            "js"
         );
         await loadResource(
-          basePath + "lib/mars3d/plugins/heatmap/mars3d-heatmap.js",
-          "js"
+            basePath + "lib/mars3d/plugins/heatmap/mars3d-heatmap.js",
+            "js"
         );
         break;
       case "gaode":
         await loadResource(
-          `https://webapi.amap.com/maps?v=2.0&key=${option.gaode_key}&plugin=AMap.HeatMap,AMap.MarkerCluster,AMap.MoveAnimation`,
-          "js"
+            `https://webapi.amap.com/maps?v=2.0&key=${option.gaode_key}&plugin=AMap.HeatMap,AMap.MarkerCluster,AMap.MoveAnimation`,
+            "js"
         );
         await loadResource(
-          "https://a.amap.com/jsapi_demos/static/data3d/lib/three.117.js",
-          "js"
+            "https://a.amap.com/jsapi_demos/static/data3d/lib/three.117.js",
+            "js"
         );
         await loadResource(
-          "https://a.amap.com/jsapi_demos/static/data3d/lib/GLTFLoader.117.min.js",
-          "js"
+            "https://a.amap.com/jsapi_demos/static/data3d/lib/GLTFLoader.117.min.js",
+            "js"
         );
         break;
       case "siji":
         await loadResource(option.sj_js_url, "js");
+        // 注意：SGMap 可能是全局变量，需确保已挂载
+        if (typeof SGMap === "undefined") {
+          throw new Error("siji 地图 JS 加载成功但 SGMap 未定义");
+        }
         await SGMap.tokenTask.login(option.sj_app_key, option.sj_app_secret);
         await SGMap.plugin([
           "SGMap.DrawPolygonHandler",
@@ -129,24 +171,15 @@ export default class HnMap {
           "SGMap.GeocodingTask",
           "SGMap.RoadNetLayer",
         ]);
-
         break;
+      default:
+        throw new Error(`不支持的地图类型: ${mapType}`);
     }
 
     // 2. 创建地图对象
-    const MapClass = map({ id, option, mapType }); // 假设 map 是一个工厂
-    const innerMap = await MapClass.create(id, option); // 真正的地图实例
-    // 3. 创建 HnMap 实例（此时传入 map）
-    HnMap.allowConstruction = true;
-    try {
-      const instance = new HnMap(id, option, mapType, innerMap);
-
-      // 4. ✅ 此时 this.map 已存在，再初始化所有模块
-      instance.initModules();
-      return instance;
-    } finally {
-      HnMap.allowConstruction = false;
-    }
+    const MapClass = map({ id, option, mapType });
+    const innerMap = await MapClass.create(id, option); // 这里可能也会失败（如容器不存在、key无效等）
+    return innerMap;
   }
 
   // ✅ 添加一个初始化方法，用于注册所有图形类

package/src/layer/heatMap.ts

@@ -1,163 +1,313 @@
-import {deepMerge, wgs84ToGcj02Format} from '../util'
+import { deepMerge, wgs84ToGcj02Format } from "../util";
 
 export default (hnMap: any) => {
+  const defaultOption = {
+    id: "",
+    position: [],
+    allowDrillPick: true,
+    max: null,
+    min: null,
+    radius: 25,
+    minOpacity: 0.1,
+    maxOpacity: 0.8,
+    opacity: 1,
+    blur: 0.85,
+    gradient: {},
+    scaleByDistance: false,
+    clampToGround: true,
+    data: null,
+  };
 
-    const defaultOption = {
-        id: "",
-        position: [],
-        allowDrillPick: true,
-        max: null,
-        min: null,
-        radius: 25,
-        minOpacity: 0.1,
-        maxOpacity: 0.8,
-        opacity: 1,
-        blur: 0.85,
-        gradient: {},
-        scaleByDistance: false,
-        clampToGround: true,
-        data: null
-    }
-
-    class mars3d_class {
-        type: any = 'heatMap'
-        id: any = null
-        option: any = JSON.parse(JSON.stringify(defaultOption))
-        config: any = null
-        layerEntity: any = null
-
-        constructor(option: any) {
-            this.id = option.id
-            deepMerge(this.option, option)
-            this.config = this.formatConfig(this.option)
-            this.layerEntity = new mars3d.layer.HeatLayer(JSON.parse(JSON.stringify(this.config)))
-        }
-
-        formatConfig(option: any) {
-            return {
-                id: option.id,
-                positions: option.position,
-                allowDrillPick: option.allowDrillPick,
-                max: option.max,
-                min: option.min,
-                heatStyle: {
-                    radius: option.radius,
-                    minOpacity: option.minOpacity,
-                    maxOpacity: option.maxOpacity,
-                    blur: option.blur,
-                    gradient: option.gradient,
-                },
-                style: {
-                    opacity: option.opacity,
-                    scaleByDistance: option.scaleByDistance,
-                    clampToGround: option.clampToGround,
-                },
-                redrawZoom: true,
-                attr: option.data
-            }
-        }
-
-        set(option: any) {
-            deepMerge(this.option, option)
-            this.config = this.formatConfig(this.option)
-            this.layerEntity.setOptions(this.config)
-        }
-
-        destroy() {
-            this.layerEntity.remove(true)
-            hnMap.map.layerList = hnMap.map.layerList.filter((v: any) => v.id !== this.id)
-        }
-
-        flyTo() {
-            this.layerEntity.flyTo()
-        }
-
-        clear() {
-            this.layerEntity.clear()
-        }
-
-        setPosition(position: any) {
-            deepMerge(this.option, {position})
-            this.layerEntity.setPositions(position)
-        }
-
-        show() {
-            this.layerEntity.show = true
-        }
-
-        hide() {
-            this.layerEntity.show = false
-        }
-
-    }
-
-    class gaode_class {
-
-        id: any = null
-        option: any = JSON.parse(JSON.stringify(defaultOption))
-        config: any = null
-        layerEntity: any = null
-
-        constructor(option: any) {
-            this.id = option.id
-            deepMerge(this.option, option)
-            this.config = this.formatConfig(this.option)
-            this.layerEntity = new AMap.HeatMap(hnMap.map.map, this.config)
-            this.layerEntity.setDataSet({data: this.config.data, max: this.config.max, min: this.config.min});
-
-        }
-
-        formatConfig(option: any) {
-            const data = option.position.map((v: any) => {
-                return {lng: v.lng, lat: v.lat, count: v.value}
-            })
-            const amapData = wgs84ToGcj02Format(data)
-
-            return {
-                id: option.id,
-                radius: option.radius,
-                max: option.max,
-                min: option.min,
-                opacity: [option.minOpacity, option.maxOpacity],
-                gradient: option.gradient,
-                data: amapData,
-                extData: {
-                    id: option.id,
-                    data: option.data,
-                },
-            }
-        }
-
-        set(option: any) {
-            deepMerge(this.option, option)
-            this.config = this.formatConfig(this.option)
-            this.layerEntity.setOptions(this.config)
-        }
-
-        destroy() {
-            this.layerEntity.setMap(null)
-            hnMap.map.layerList = hnMap.map.layerList.filter((v: any) => v.id !== this.id)
-        }
-
-
-        flyTo() {
-            let totalLng = 0;
-            let totalLat = 0;
-            this.config.data.map((item: any) => {
-                totalLng += item.lng;
-                totalLat += item.lat;
-            })
-            const centerLng = totalLng / this.config.data.length;
-            const centerLat = totalLat / this.config.data.length;
-            hnMap.map.map.setCenter([centerLng, centerLat])
-        }
-
-    }
-
-    const fn: any = {
-        mars3d: mars3d_class,
-        gaode: gaode_class
-    }
-
-    return fn[hnMap.mapType]
-}
+  class mars3d_class {
+    type: any = "heatMap";
+    id: any = null;
+    option: any = JSON.parse(JSON.stringify(defaultOption));
+    config: any = null;
+    layerEntity: any = null;
+
+    constructor(option: any) {
+      this.id = option.id;
+      deepMerge(this.option, option);
+      this.config = this.formatConfig(this.option);
+      this.layerEntity = new mars3d.layer.HeatLayer(
+        JSON.parse(JSON.stringify(this.config))
+      );
+    }
+
+    formatConfig(option: any) {
+      return {
+        id: option.id,
+        positions: option.position,
+        allowDrillPick: option.allowDrillPick,
+        max: option.max,
+        min: option.min,
+        heatStyle: {
+          radius: option.radius,
+          minOpacity: option.minOpacity,
+          maxOpacity: option.maxOpacity,
+          blur: option.blur,
+          gradient: option.gradient,
+        },
+        style: {
+          opacity: option.opacity,
+          scaleByDistance: option.scaleByDistance,
+          clampToGround: option.clampToGround,
+        },
+        redrawZoom: true,
+        flyTo: true,
+        attr: option.data,
+      };
+    }
+
+    set(option: any) {
+      deepMerge(this.option, option);
+      this.config = this.formatConfig(this.option);
+      this.layerEntity.setOptions(this.config);
+    }
+
+    destroy() {
+      this.layerEntity.remove(true);
+      hnMap.map.layerList = hnMap.map.layerList.filter(
+        (v: any) => v.id !== this.id
+      );
+    }
+
+    flyTo() {
+      this.layerEntity.flyTo();
+    }
+
+    clear() {
+      this.layerEntity.clear();
+    }
+
+    setPosition(position: any) {
+      deepMerge(this.option, { position });
+      this.layerEntity.setPositions(position);
+    }
+
+    show() {
+      this.layerEntity.show = true;
+    }
+
+    hide() {
+      this.layerEntity.show = false;
+    }
+  }
+
+  class gaode_class {
+    id: any = null;
+    option: any = JSON.parse(JSON.stringify(defaultOption));
+    config: any = null;
+    layerEntity: any = null;
+
+    constructor(option: any) {
+      this.id = option.id;
+      deepMerge(this.option, option);
+      this.config = this.formatConfig(this.option);
+      this.layerEntity = new AMap.HeatMap(hnMap.map.map, this.config);
+      this.layerEntity.setDataSet({
+        data: this.config.data,
+        max: this.config.max,
+        min: this.config.min,
+      });
+    }
+
+    formatConfig(option: any) {
+      const data = option.position.map((v: any) => {
+        return { lng: v.lng, lat: v.lat, count: v.value };
+      });
+      const amapData = wgs84ToGcj02Format(data);
+
+      return {
+        id: option.id,
+        radius: option.radius,
+        max: option.max,
+        min: option.min,
+        opacity: [option.minOpacity, option.maxOpacity],
+        gradient: option.gradient,
+        data: amapData,
+        extData: {
+          id: option.id,
+          data: option.data,
+        },
+      };
+    }
+
+    set(option: any) {
+      deepMerge(this.option, option);
+      this.config = this.formatConfig(this.option);
+      this.layerEntity.setOptions(this.config);
+    }
+
+    destroy() {
+      this.layerEntity.setMap(null);
+      hnMap.map.layerList = hnMap.map.layerList.filter(
+        (v: any) => v.id !== this.id
+      );
+    }
+
+    flyTo() {
+      let totalLng = 0;
+      let totalLat = 0;
+      this.config.data.map((item: any) => {
+        totalLng += item.lng;
+        totalLat += item.lat;
+      });
+      const centerLng = totalLng / this.config.data.length;
+      const centerLat = totalLat / this.config.data.length;
+      hnMap.map.map.setCenter([centerLng, centerLat]);
+    }
+  }
+
+  class siji_class {
+    type: any = "heatMap";
+    id: any = null;
+    option: any = JSON.parse(JSON.stringify(defaultOption));
+    config_heatmap: any = null;
+    config_point: any = null;
+    layerEntity: any = null;
+
+    constructor(option: any) {
+      this.id = option.id;
+      deepMerge(this.option, option);
+      hnMap.map.map.addSource("themeData", {
+        type: "geojson",
+        data: {
+          type: "FeatureCollection",
+          features: this.option.position.map((v: any) => ({
+            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);
+    }
+
+    formatConfig_heatmap(option: any) {
+      let config: any = {};
+      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;
+    }
+
+    formatConfig_point(option: any) {
+      let config_point: any = {};
+      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;
+    }
+  }
+
+  const fn: any = {
+    mars3d: mars3d_class,
+    gaode: gaode_class,
+    siji: siji_class,
+  };
+
+  return fn[hnMap.mapType];
+};