hn-map 1.1.14 → 1.1.16

package/src/graphic/point.ts

@@ -4,9 +4,9 @@ import {
   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";
+import Mars3dEntity from "../base/mars3d_entity";
+import GaodeEntity from "../base/gaode_entity";
+import SijiEntity from "../base/siji_entity";
 
 export default (hnMap: any) => {
   const defaultOption = {
@@ -37,7 +37,7 @@ export default (hnMap: any) => {
     data: null,
   };
 
-  class mars3d_class extends mars3d_entity {
+  class mars3d_class extends Mars3dEntity {
     type: any = "point";
     id: any = null;
     option: any = JSON.parse(JSON.stringify(defaultOption));
@@ -105,7 +105,7 @@ export default (hnMap: any) => {
     }
   }
 
-  class gaode_class extends gaode_entity {
+  class gaode_class extends GaodeEntity {
     id: any = null;
     option: any = JSON.parse(JSON.stringify(defaultOption));
     config: any = null;
@@ -144,7 +144,7 @@ export default (hnMap: any) => {
     }
   }
 
-  class siji_class extends siji_entity {
+  class siji_class extends SijiEntity {
     type: any = "point";
     id: any = null;
     option: any = JSON.parse(JSON.stringify(defaultOption));
@@ -180,7 +180,11 @@ export default (hnMap: any) => {
             ],
           },
         },
-
+        layout: {
+          "text-field": "{name}", // 文本
+          "text-size": Number(option.fontSize),
+          "text-offset": convertPosition(option.fontOffset),
+        },
         paint: {
           "circle-opacity": Number(option.opacity),
           "circle-radius": Number(option.size),
@@ -194,6 +198,7 @@ export default (hnMap: any) => {
           "circle-stroke-opacity": option.outline
             ? Number(option.outlineOpacity)
             : 1, // 边框样式
+          
         }, // 填充样式
       };
 

package/src/graphic/polygon.ts

@@ -4,9 +4,9 @@ import {
   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";
+import Mars3dEntity from "../base/mars3d_entity";
+import GaodeEntity from "../base/gaode_entity";
+import SijiEntity from "../base/siji_entity";
 export default (hnMap: any) => {
   const defaultOption = {
     id: "",
@@ -24,7 +24,7 @@ export default (hnMap: any) => {
     data: null,
   };
 
-  class mars3d_class extends mars3d_entity {
+  class mars3d_class extends Mars3dEntity {
     type: any = "polygon";
     id: any = null;
     option: any = JSON.parse(JSON.stringify(defaultOption));
@@ -73,7 +73,7 @@ export default (hnMap: any) => {
     }
   }
 
-  class gaode_class extends gaode_entity {
+  class gaode_class extends GaodeEntity {
     id: any = null;
     option: any = JSON.parse(JSON.stringify(defaultOption));
     config: any = null;
@@ -111,7 +111,7 @@ export default (hnMap: any) => {
     }
   }
 
-  class siji_class extends siji_entity {
+  class siji_class extends SijiEntity {
     type: any = "polygon";
     id: any = null;
     option: any = JSON.parse(JSON.stringify(defaultOption));
@@ -166,7 +166,7 @@ export default (hnMap: any) => {
             type: "Feature",
             geometry: {
               type: "Polygon",
-              coordinates: convertPosition(option.position), //三层数组[[[0,0],[0,0]]]
+              coordinates: convertPosition(this.option.position), //三层数组[[[0,0],[0,0]]]
             },
           },
         ],

package/src/graphic/rectangle.ts

@@ -4,9 +4,9 @@ import {
   createRectangleCoordinates,
   getLevelMiddleHeight,
 } from "../util";
-import mars3d_entity from "../base/mars3d_entity";
-import gaode_entity from "../base/gaode_entity";
-import siji_entity from "../base/siji_entity";
+import Mars3dEntity from "../base/mars3d_entity";
+import GaodeEntity from "../base/gaode_entity";
+import SijiEntity from "../base/siji_entity";
 export default (hnMap: any) => {
   const defaultOption = {
     id: "",
@@ -24,7 +24,7 @@ export default (hnMap: any) => {
     data: null,
   };
 
-  class mars3d_class extends mars3d_entity {
+  class mars3d_class extends Mars3dEntity {
     type: any = "retangle";
     id: any = null;
     option: any = JSON.parse(JSON.stringify(defaultOption));
@@ -73,7 +73,7 @@ export default (hnMap: any) => {
     }
   }
 
-  class gaode_class extends gaode_entity {
+  class gaode_class extends GaodeEntity {
     id: any = null;
     option: any = JSON.parse(JSON.stringify(defaultOption));
     config: any = null;
@@ -113,7 +113,7 @@ export default (hnMap: any) => {
       this.graphic.setBounds(this.config.bounds);
     }
   }
-  class siji_class extends siji_entity {
+  class siji_class extends SijiEntity {
     type: any = "rectangle";
     id: any = null;
     option: any = JSON.parse(JSON.stringify(defaultOption));

package/src/index.ts

@@ -14,91 +14,127 @@ import heatMap from "./layer/heatMap";
 import cluster from "./layer/cluster";
 import pointCloud from "./layer/pointCloud";
 import geoJson from "./layer/geoJson";
-import {mars3dTileErrorHandler} from "./util";
+import { mars3dTileErrorHandler } from "./util";
 
 /**
  * HnMap类是一个地图工具类，用于创建和管理地图对象及其相关元素
+ * 支持mars3d、高德地图和思极地图三种地图引擎
  */
-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;
-  sj_style: string;
-  sj_route_net: boolean;
+
+/**
+ * 地图初始化配置选项
+ */
+interface MapOption {
+  lng: number; // 地图中心点经度
+  lat: number; // 地图中心点纬度
+  level: number; // 地图初始缩放级别
+  pitch: number; // 地图初始俯仰角度
+  gaode_key: string; // 高德地图API密钥
+  sj_app_key: string; // 思极地图应用密钥
+  sj_app_secret: string; // 思极地图应用密钥
+  sj_js_url: string; // 思极地图JS API加载地址
+  sj_style: string; // 思极地图样式
+  sj_route_net: boolean; // 是否显示思极地图路网
+  // 添加Cesium相关配置
+  cesium_accessToken: string; // Cesium Ion访问令牌
+  cesium_baseUrl: string; // Cesium静态资源基础路径
+  cesium_terrainProvider: any; // 地形提供者配置
+  cesium_imageryProvider: any; // 影像提供者配置
+  cesium_options: {};
 }
 
+/**
+ * HnMap主类，提供统一的地图操作API
+ */
 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: string | null = null; // 地图容器ID
+  option: MapOption | null = null; // 地图配置选项
+  mapType: string | null = null; // 地图类型：mars3d、gaode、siji
+  map: any = null; // 底层地图实例
+  Layer: any = null; // 图层管理实例
+  Point: any = null; // 点要素类
+  NumPoint: any = null; // 数字点要素类
+  ImagePoint: any = null; // 图片点要素类
+  DivPoint: any = null; // DOM点要素类
+  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; // GeoJSON图层类
+
+  // 构造函数访问控制标志
   private static allowConstruction = false;
 
   /**
    * HnMap类的构造函数
+   * @private 私有构造函数，只能通过create静态方法创建实例
    * @param id 地图容器的ID
    * @param option 地图的配置选项
    * @param mapType 地图的类型
-   * @param map
+   * @param map 底层地图实例
    */
-  private constructor(id: string, option: option, mapType: string, map: any) {
+  private constructor(
+    id: string,
+    option: MapOption,
+    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 已创建
+    this.map = map; // 此时map已创建完成
   }
 
   /**
-   * 创建HnMap实例的方法
-   * @param id 地图容器的ID
+   * 创建HnMap实例的静态方法
+   * @param id 地图容器的DOM元素ID
    * @param option 地图的配置选项
-   * @param mapType 用户期望的地图类型（如 'gaode', 'siji'）
+   * @param mapType 用户期望的地图类型（如 'mars3d', 'gaode', 'siji'）
+   * @returns Promise<HnMap> 返回HnMap实例的Promise
+   * @example
+   * ```javascript
+   * HnMap.create('mapContainer', {
+   *   lng: 112.55074,
+   *   lat: 37.7979042,
+   *   level: 11,
+   *   gaode_key: 'your-gaode-key',
+   *   sj_app_key: 'your-siji-key',
+   *   sj_app_secret: 'your-siji-secret'
+   * }, 'mars3d').then(map => {
+   *   // 使用地图实例
+   * });
+   * ```
    */
-  static async create(id: string, option: option, mapType: string) {
+  static async create(id: string, option: MapOption, 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（所有类型都需要）
+    // 预加载turf地理空间分析库（所有地图类型都需要）
     await loadResource(basePath + "lib/turf/turf.min.js", "js");
 
-    // 尝试创建地图，支持 fallback
+    // 尝试创建地图，支持失败回退机制
     let innerMap: any = null;
     let finalMapType = mapType;
 
     try {
+      // 尝试创建指定类型的地图
       innerMap = await HnMap.tryCreateMap(id, option, mapType, basePath);
     } catch (error) {
       console.warn(`[${mapType}] 地图初始化失败，尝试回退到 mars3d`, error);
+      // 回退到mars3d地图
       finalMapType = "mars3d";
       try {
         innerMap = await HnMap.tryCreateMap(id, option, "mars3d", basePath);
@@ -108,65 +144,83 @@ export default class HnMap {
       }
     }
 
-    // 创建 HnMap 实例
+    // 创建HnMap实例
     HnMap.allowConstruction = true;
     try {
       const instance = new HnMap(id, option, finalMapType, innerMap);
-      instance.initModules();
+      instance.initModules(); // 初始化所有地图模块
       return instance;
     } finally {
+      // 恢复构造函数访问控制
       HnMap.allowConstruction = false;
     }
   }
 
   /**
-   * 尝试根据 mapType 加载资源并创建地图实例
+   * 尝试根据地图类型加载资源并创建地图实例
+   * @private
+   * @param id 地图容器ID
+   * @param option 地图配置选项
+   * @param mapType 地图类型
+   * @param basePath 资源加载基础路径
+   * @returns Promise<any> 返回地图实例的Promise
    */
   private static async tryCreateMap(
-      id: string,
-      option: option,
-      mapType: string,
-      basePath: string
+    id: string,
+    option: MapOption,
+    mapType: string,
+    basePath: string
   ): Promise<any> {
-    // 1. 加载对应地图的资源
+    // 1. 加载对应地图平台的资源
     switch (mapType) {
       case "mars3d":
+        // 加载Cesium资源
         await loadResource(basePath + "lib/Cesium/Widgets/widgets.css", "css");
         await loadResource(basePath + "lib/Cesium/Cesium.js", "js");
+        // 加载mars3d资源
         await loadResource(basePath + "lib/mars3d/mars3d.css", "css");
         await loadResource(basePath + "lib/mars3d/mars3d.js", "js");
+        // 加载mars3d热力图插件
         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"
         );
 
-        mars3dTileErrorHandler()
+        // 初始化mars3d瓦片错误处理
+        mars3dTileErrorHandler();
         break;
+
       case "gaode":
+        // 加载高德地图API
         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"
         );
+        // 加载3D模型所需的Three.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":
+        // 加载思极地图JS API
         await loadResource(option.sj_js_url, "js");
-        // 注意：SGMap 可能是全局变量，需确保已挂载
+        // 检查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",
           "SGMap.DrawCircleHandler",
@@ -175,34 +229,78 @@ export default class HnMap {
           "SGMap.RoadNetLayer",
         ]);
         break;
+      case "cesium":
+        // 加载Cesium资源
+        await HnMap.loadCesiumResources(option, basePath);
+        break;
       default:
         throw new Error(`不支持的地图类型: ${mapType}`);
     }
 
-    // 2. 创建地图对象
+    // 2. 创建地图对象实例
     const MapClass = map({ id, option, mapType });
-    const innerMap = await MapClass.create(id, option); // 这里可能也会失败（如容器不存在、key无效等）
+    const innerMap = await MapClass.create(id, option); // 这里可能会失败（如容器不存在、key无效等）
     return innerMap;
   }
 
-  // ✅ 添加一个初始化方法，用于注册所有图形类
+  /**
+   * 加载Cesium相关资源
+   */
+  private static async loadCesiumResources(
+    option: MapOption,
+    basePath: string
+  ): Promise<void> {
+    // 加载Cesium CSS
+    // await loadResource(basePath + "lib/Cesium/Widgets/widgets.css", "css");
+    await loadResource(
+      "https://cesium.com/downloads/cesiumjs/releases/1.107/Build/Cesium/Widgets/widgets.css",
+      "css"
+    );
+
+    // 加载Cesium JS
+    await loadResource(
+      "https://cesium.com/downloads/cesiumjs/releases/1.107/Build/Cesium/Cesium.js",
+      "js"
+    );
+
+    // 设置Cesium访问令牌（如果有）
+    if (option.cesium_accessToken) {
+      Cesium.Ion.defaultAccessToken = option.cesium_accessToken;
+    }
+
+    // 等待Cesium加载完成
+    await new Promise<void>((resolve) => {
+      const checkCesium = () => {
+        if (typeof Cesium !== "undefined" && Cesium.Viewer) {
+          resolve();
+        } else {
+          setTimeout(checkCesium, 100);
+        }
+      };
+      checkCesium();
+    });
+  }
+
+  /**
+   * 初始化地图模块，注册所有图形要素类
+   * @private
+   */
   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);
+    this.Layer = layer(this); // 基础图层类
+    this.Point = point(this); // 点要素类
+    this.NumPoint = numPoint(this); // 数字点要素类
+    this.ImagePoint = imagePoint(this); // 图片点要素类
+    this.DivPoint = divPoint(this); // DOM点要素类
+    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); // GeoJSON图层类
   }
 }