hn-map 1.1.2 → 1.1.3

package/src/index.ts

@@ -19,150 +19,154 @@ import geoJson from "./layer/geoJson";
  * HnMap类是一个地图工具类，用于创建和管理地图对象及其相关元素
  */
 interface option {
-    lng: number;
-    lat: number;
-    level: number;
-    pitch: number;
-    gaode_key: string;
-    sj_app_key: string;
-    sj_app_secret: string;
-    sj_js_url: string;
+  lng: number;
+  lat: number;
+  level: number;
+  pitch: number;
+  gaode_key: string;
+  sj_app_key: string;
+  sj_app_secret: string;
+  sj_js_url: string;
+  sj_style: string;
 }
 
 export default class HnMap {
-    id: any = null;
-    option: any = null;
-    mapType: any = null;
-    map: any = null;
-    Layer: any = null;
-    Point: any = null;
-    NumPoint: any = null;
-    ImagePoint: any = null;
-    DivPoint: any = null;
-    Label: any = null;
-    Line: any = null;
-    Circle: any = null;
-    Rectangle: any = null;
-    Polygon: any = null;
-    Route: any = null;
-    HeatMap: any = null;
-    Cluster: any = null;
-    PointCloud: any = null;
-    GeoJson: any = null;
+  id: any = null;
+  option: any = null;
+  mapType: any = null;
+  map: any = null;
+  Layer: any = null;
+  Point: any = null;
+  NumPoint: any = null;
+  ImagePoint: any = null;
+  DivPoint: any = null;
+  Label: any = null;
+  Line: any = null;
+  Circle: any = null;
+  Rectangle: any = null;
+  Polygon: any = null;
+  Route: any = null;
+  HeatMap: any = null;
+  Cluster: any = null;
+  PointCloud: any = null;
 
-    // 允许构造函数
-    private static allowConstruction = false;
+  GeoJson: any = null;
 
-    /**
-     * HnMap类的构造函数
-     * @param id 地图容器的ID
-     * @param option 地图的配置选项
-     * @param mapType 地图的类型
-     * @param map
-     */
-    private constructor(id: string, option: option, mapType: string, map: any) {
-        if (!HnMap.allowConstruction) {
-            throw new Error("请使用 HnMap.create() 创建实例");
-        }
-        this.id = id;
-        this.option = option;
-        this.mapType = mapType;
-        this.map = map; // ✅ 此时 map 已创建
+  // 允许构造函数
+  private static allowConstruction = false;
+
+  /**
+   * HnMap类的构造函数
+   * @param id 地图容器的ID
+   * @param option 地图的配置选项
+   * @param mapType 地图的类型
+   * @param map
+   */
+  private constructor(id: string, option: option, mapType: string, map: any) {
+    if (!HnMap.allowConstruction) {
+      throw new Error("请使用 HnMap.create() 创建实例");
     }
+    this.id = id;
+    this.option = option;
+    this.mapType = mapType;
+    this.map = map; // ✅ 此时 map 已创建
+  }
 
-    /**
-     * 创建HnMap实例的方法
-     * @param id 地图容器的ID
-     * @param option 地图的配置选项
-     * @param mapType 地图的类型
-     */
-    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
-            );
-        await loadResource(basePath + "lib/turf/turf.min.js", "js");
+  /**
+   * 创建HnMap实例的方法
+   * @param id 地图容器的ID
+   * @param option 地图的配置选项
+   * @param mapType 地图的类型
+   */
+  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
+        );
+    await loadResource(basePath + "lib/turf/turf.min.js", "js");
 
-        // 1.根据不同的地图类型，加载相应的资源
-        switch (mapType) {
-            case "mars3d":
+    // 1.根据不同的地图类型，加载相应的资源
+    switch (mapType) {
+      case "mars3d":
+        await loadResource(basePath + "lib/Cesium/Widgets/widgets.css", "css");
+        await loadResource(basePath + "lib/Cesium/Cesium.js", "js");
+        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"
+        );
+        await loadResource(
+          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"
+        );
+        await loadResource(
+          "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"
+        );
+        break;
+      case "siji":
+        await loadResource(option.sj_js_url, "js");
+        await SGMap.tokenTask.login(option.sj_app_key, option.sj_app_secret);
+        await SGMap.plugin([
+          "SGMap.DrawPolygonHandler",
+          "SGMap.DrawCircleHandler",
+          "SGMap.DrawRectangleHandler",
+          "SGMap.GeocodingTask",
+          "SGMap.RoadNetLayer",
+        ]);
 
-                await loadResource(basePath + "lib/Cesium/Widgets/widgets.css", "css");
-                await loadResource(basePath + "lib/Cesium/Cesium.js", "js");
-                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"
-                );
-                await loadResource(
-                    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"
-                );
-                await loadResource(
-                    "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"
-                );
-                break;
-            case "siji":
-                await loadResource(option.sj_js_url, "js");
-                await SGMap.tokenTask.login(option.sj_app_key, option.sj_app_secret);
-                await SGMap.plugin([
-                    "SGMap.DrawPolygonHandler",
-                    "SGMap.DrawCircleHandler",
-                    "SGMap.DrawRectangleHandler",
-                    "SGMap.GeocodingTask",
-                ]);
-                break;
-        }
+        break;
+    }
 
-        // 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);
+    // 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;
-        }
+      // 4. ✅ 此时 this.map 已存在，再初始化所有模块
+      instance.initModules();
+      return instance;
+    } finally {
+      HnMap.allowConstruction = false;
     }
+  }
 
-    // ✅ 添加一个初始化方法，用于注册所有图形类
-    private initModules() {
-        this.Layer = layer(this);
-        this.Point = point(this);
-        this.NumPoint = numPoint(this);
-        this.ImagePoint = imagePoint(this);
-        this.DivPoint = divPoint(this);
-        this.Label = label(this);
-        this.Line = line(this);
-        this.Circle = circle(this);
-        this.Rectangle = rectangle(this);
-        this.Polygon = polygon(this);
-        this.Route = route(this);
-        this.HeatMap = heatMap(this);
-        this.Cluster = cluster(this);
-        this.PointCloud = pointCloud(this);
-        this.GeoJson = geoJson(this);
-    }
+  // ✅ 添加一个初始化方法，用于注册所有图形类
+  private initModules() {
+    this.Layer = layer(this);
+    this.Point = point(this);
+    this.NumPoint = numPoint(this);
+    this.ImagePoint = imagePoint(this);
+    this.DivPoint = divPoint(this);
+    this.Label = label(this);
+    this.Line = line(this);
+    this.Circle = circle(this);
+    this.Rectangle = rectangle(this);
+    this.Polygon = polygon(this);
+    this.Route = route(this);
+    this.HeatMap = heatMap(this);
+    this.Cluster = cluster(this);
+    this.PointCloud = pointCloud(this);
+
+    this.GeoJson = geoJson(this);
+  }
 }
 
 /**
@@ -171,15 +175,15 @@ export default class HnMap {
  * @returns {boolean} 资源是否已加载
  */
 const isResourceLoaded = (path: string): boolean => {
-    // 检查脚本
-    const scripts = Array.from(document.getElementsByTagName("script"));
-    if (scripts.some((script) => script.src.includes(path))) {
-        return true;
-    }
+  // 检查脚本
+  const scripts = Array.from(document.getElementsByTagName("script"));
+  if (scripts.some((script) => script.src.includes(path))) {
+    return true;
+  }
 
-    // 检查样式
-    const links = Array.from(document.getElementsByTagName("link"));
-    return links.some((link) => link.href.includes(path));
+  // 检查样式
+  const links = Array.from(document.getElementsByTagName("link"));
+  return links.some((link) => link.href.includes(path));
 };
 
 /**
@@ -189,25 +193,25 @@ const isResourceLoaded = (path: string): boolean => {
  * @returns {Promise<void>} 加载完成的Promise
  */
 const loadResource = (path: string, type: string): Promise<void> => {
-    return new Promise<void>((resolve, reject) => {
-        // 如果资源已加载，直接返回
-        if (isResourceLoaded(path)) {
-            resolve();
-            return;
-        }
-        if (type === "css") {
-            const link = document.createElement("link");
-            link.rel = "stylesheet";
-            link.href = path;
-            link.onload = () => resolve();
-            link.onerror = reject;
-            document.head.appendChild(link);
-        } else {
-            const script = document.createElement("script");
-            script.src = path;
-            script.onload = () => resolve();
-            script.onerror = reject;
-            document.body.appendChild(script);
-        }
-    });
+  return new Promise<void>((resolve, reject) => {
+    // 如果资源已加载，直接返回
+    if (isResourceLoaded(path)) {
+      resolve();
+      return;
+    }
+    if (type === "css") {
+      const link = document.createElement("link");
+      link.rel = "stylesheet";
+      link.href = path;
+      link.onload = () => resolve();
+      link.onerror = reject;
+      document.head.appendChild(link);
+    } else {
+      const script = document.createElement("script");
+      script.src = path;
+      script.onload = () => resolve();
+      script.onerror = reject;
+      document.body.appendChild(script);
+    }
+  });
 };