hn-map 1.1.14 → 1.1.16

package/src/map.ts

@@ -21,7 +21,13 @@ export default (hnMap: any) => {
     sj_app_key: "",
     sj_app_secret: "",
     sj_style: "aegis://styles/aegis/Streets-Raster512",
-    sj_route_net:true,
+    sj_route_net: true,
+    // Cesium配置
+    cesium_accessToken: "",
+    cesium_baseUrl: "",
+    cesium_terrainProvider: null,
+    cesium_imageryProvider: null,
+    cesium_options: {},
   };
 
   class mars3d_map {
@@ -43,7 +49,6 @@ export default (hnMap: any) => {
       deepMerge(this.option, option);
       this.config = this.formatConfig(this.option);
       this.map = new mars3d.Map(id, this.config);
-
       this.map.on("cameraMoveEnd", (e: any) => {
         const height = this.map.getCameraView().alt;
         this.level = getHeightToLevel(height);
@@ -287,24 +292,21 @@ export default (hnMap: any) => {
       await new Promise((resolve) => {
         instance.map.on("load", (e: any) => {
           // 路况展示
-          if(option.sj_route_net){
+          if (option.sj_route_net) {
             let roadNetLayer = new SGMap.RoadNetLayer({ map: instance.map });
             roadNetLayer.render();
           }
 
           //添加天空图层
           instance.map.addLayer({
-            "id": "sky",
-            "type": "sky",
-            "paint": {
+            id: "sky",
+            type: "sky",
+            paint: {
               "sky-type": "atmosphere",
-              "sky-atmosphere-sun": [
-                0,
-                0
-              ],
-              "sky-atmosphere-sun-intensity": 15
-            }
-          })
+              "sky-atmosphere-sun": [0, 0],
+              "sky-atmosphere-sun-intensity": 15,
+            },
+          });
 
           // 加载地形（需要v3.1.0，且需要新的key和secret）
           // !instance.map.getSource('terrain') && instance.map.addSource('terrain',{
@@ -386,11 +388,14 @@ export default (hnMap: any) => {
       switch (eventType) {
         case "click":
           this.event[eventType] = (event: any) => {
-            callback({
-              lng: event.lngLat.lng,
-              lat: event.lngLat.lat,
-              alt: event.lngLat.alt || 0,
-            });
+            callback(
+              {
+                lng: event.lngLat.lng,
+                lat: event.lngLat.lat,
+                alt: event.lngLat.alt || 0,
+              },
+              event
+            );
           };
           break;
         case "dblclick":
@@ -460,10 +465,405 @@ export default (hnMap: any) => {
     }
   }
 
+  class cesium_map {
+    map: any = null;
+    option: any = JSON.parse(JSON.stringify(defaultOption));
+    config: any = null;
+    layerList: any = [];
+    event: any = {};
+    level: any = null;
+    // 数据源集合
+    dataSources: any = new Cesium.CustomDataSource("hnMap_dataSources");
+    private constructor(id: any, option: any) {
+      this.layerList = [];
+      this.level = 10;
+      deepMerge(this.option, option);
+      this.config = this.formatConfig(this.option);
+      this.map = new Cesium.Viewer(id, this.config);
+
+      // 监听相机移动事件
+      this.map.camera.moveEnd.addEventListener(() => {
+        const camera = this.map.camera;
+        const cartographic = Cesium.Cartographic.fromCartesian(camera.position);
+        const height = cartographic.height;
+        this.level = getHeightToLevel(height);
+
+        // 触发cameraMoveEnd事件
+        if (this.event.cameraMoveEnd) {
+          this.event.cameraMoveEnd();
+        }
+      });
+      // 添加自定义数据源
+      this.map.dataSources.add(this.dataSources);
+
+      // 设置初始视图
+      const { lat, lng, level, heading, pitch, roll } = this.option;
+      const alt = getLevelMiddleHeight(level);
+
+      // 设置相机位置
+      const initialPosition = Cesium.Cartesian3.fromDegrees(lng, lat, alt);
+      const initialOrientation = new Cesium.HeadingPitchRoll(
+        Cesium.Math.toRadians(heading),
+        Cesium.Math.toRadians(pitch),
+        Cesium.Math.toRadians(roll)
+      );
+
+      this.map.camera.setView({
+        destination: initialPosition,
+        orientation: initialOrientation,
+      });
+    }
+    static async create(id: string, option: any) {
+      const instance = new cesium_map(id, option);
+
+      // 返回一个 Promise，等待地图的 'ready' 事件
+      await new Promise<void>((resolve) => {
+        resolve();
+      });
+
+      return instance;
+    }
+    // 格式化配置
+    formatConfig(option: any) {
+      const config: any = {
+        ...option.cesium_options,
+        // 设置不显示商标
+        imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
+          url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
+          enablePickFeatures: false,
+        }),
+      };
+
+      // 设置地形 - 兼容性处理
+      if (option.cesium_terrainProvider) {
+        config.terrainProvider = option.cesium_terrainProvider;
+      } else {
+        config.terrainProvider = this.createTerrainProvider();
+      }
+
+      // 设置影像 - 兼容性处理
+      if (option.cesium_imageryProvider) {
+        config.imageryProvider = option.cesium_imageryProvider;
+      } else {
+        config.imageryProvider = this.createImageryProvider();
+      }
+
+      return config;
+    }
+
+    // 创建地形提供者（兼容各版本）
+    createTerrainProvider() {
+      // 检查是否支持createWorldTerrain
+      if (typeof Cesium.createWorldTerrain === "function") {
+        // 1.107及以上版本
+        return Cesium.createWorldTerrain({
+          requestWaterMask: true,
+          requestVertexNormals: true,
+        });
+      } else if (Cesium.CesiumTerrainProvider) {
+        // 1.106及以下版本
+        const terrainUrl = this.getTerrainUrl();
+        return new Cesium.CesiumTerrainProvider({
+          url: terrainUrl,
+          requestWaterMask: true,
+          requestVertexNormals: true,
+        });
+      } else {
+        // 没有地形
+        console.warn("Cesium地形不可用，使用无地形模式");
+        return new Cesium.EllipsoidTerrainProvider();
+      }
+    }
+
+    // 获取地形URL（兼容处理）
+    getTerrainUrl() {
+      // 根据不同版本的API获取地形URL
+      if (Cesium.IonResource && Cesium.IonResource.fromAssetId) {
+        return Cesium.IonResource.fromAssetId(1);
+      } else if (Cesium.Ion && Cesium.Ion.defaultServer) {
+        return `${Cesium.Ion.defaultServer.url}/assets/1/quantized-mesh`;
+      } else {
+        // 使用Cesium官方的地形服务
+        return "https://assets.cesium.com/1/";
+      }
+    }
+
+    // 创建影像提供者（兼容各版本）
+    createImageryProvider() {
+      // 默认使用Bing地图或ArcGIS
+      try {
+        // 尝试创建Bing地图
+        if (Cesium.BingMapsImageryProvider) {
+          return new Cesium.BingMapsImageryProvider({
+            url: "https://dev.virtualearth.net",
+            key: this.option.cesium_bing_key || "", // 需要Bing Maps Key
+            mapStyle: Cesium.BingMapsStyle.AERIAL,
+          });
+        }
+      } catch (e) {
+        console.warn("Bing地图不可用，尝试其他影像源", e);
+      }
+
+      // 使用ArcGIS作为备选
+      if (Cesium.ArcGisMapServerImageryProvider) {
+        return new Cesium.ArcGisMapServerImageryProvider({
+          url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
+        });
+      }
+
+      // 使用OpenStreetMap作为最后备选
+      if (Cesium.OpenStreetMapImageryProvider) {
+        return new Cesium.OpenStreetMapImageryProvider({
+          url: "https://a.tile.openstreetmap.org/",
+        });
+      }
+
+      // 没有可用影像提供者
+      console.warn("没有可用的影像提供者");
+      return undefined;
+    }
+    // 添加图层
+    addLayer(layer: any) {
+      if (this.layerList.find((v: any) => v.id === layer.id)) {
+        console.error("已存在同名图层" + layer.id);
+        return null;
+      }
+
+      this.layerList.push(layer);
+
+      // 如果是数据源图层，添加到数据源集合
+      if (layer.layerEntity && layer.layerEntity.entities) {
+        this.map.dataSources.add(layer.layerEntity);
+      }
+
+      // 如果是Primitive图层，添加到Primitive集合
+      if (
+        layer.layerEntity &&
+        layer.layerEntity instanceof Cesium.PrimitiveCollection
+      ) {
+        this.map.scene.primitives.add(layer.layerEntity);
+      }
+
+      return layer;
+    }
+
+    // 获取图层
+    getLayer(layerId: any) {
+      return this.layerList.find((v: any) => v.id === layerId);
+    }
+
+    // 删除图层
+    removeLayer(layerId: any) {
+      const layer = this.getLayer(layerId);
+      if (layer) {
+        this.layerList = this.layerList.filter((v: any) => v.id !== layerId);
+        layer.destroy();
+      }
+    }
+
+    // 清空图层
+    clearLayer(layerId: any) {
+      const layer = this.getLayer(layerId);
+      if (layer) {
+        layer.children = [];
+        layer.clearEntity();
+      }
+    }
+
+    // 事件监听
+    on(eventType: any, callback: any) {
+      this.off(eventType);
+
+      switch (eventType) {
+        case "click":
+          this.event[eventType] = (movement: any) => {
+            // 获取点击位置
+            const ray = this.map.camera.getPickRay(movement.position);
+            if (!ray) return;
+
+            const cartesian = this.map.scene.globe.pick(ray, this.map.scene);
+            if (!cartesian) return;
+
+            const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
+            const position = {
+              lng: Cesium.Math.toDegrees(cartographic.longitude),
+              lat: Cesium.Math.toDegrees(cartographic.latitude),
+              alt: cartographic.height,
+            };
+
+            callback(position);
+          };
+
+          // 使用屏幕空间事件处理器
+          this.map.screenSpaceEventHandler.setInputAction((movement: any) => {
+            this.event[eventType](movement);
+          }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+          break;
+
+        case "cameraMoveEnd":
+          this.event[eventType] = () => {
+            callback();
+          };
+          break;
+
+        case "mouseMove":
+          this.event[eventType] = (movement: any) => {
+            callback(movement);
+          };
+
+          this.map.screenSpaceEventHandler.setInputAction((movement: any) => {
+            this.event[eventType](movement);
+          }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+          break;
+      }
+    }
+
+    // 取消事件监听
+    off(eventType: any) {
+      if (this.event[eventType]) {
+        // 移除事件处理器
+        this.map.screenSpaceEventHandler.removeInputAction(
+          Cesium.ScreenSpaceEventType.LEFT_CLICK
+        );
+        delete this.event[eventType];
+      }
+    }
+
+    /**
+     * 获取当前视口的经纬度范围
+     */
+    getExtent() {
+      const camera = this.map.camera;
+      const frustum = camera.frustum;
+
+      // 计算视锥体的四个角点
+      const corners = [
+        new Cesium.Cartesian2(0, 0),
+        new Cesium.Cartesian2(this.map.canvas.width, 0),
+        new Cesium.Cartesian2(this.map.canvas.width, this.map.canvas.height),
+        new Cesium.Cartesian2(0, this.map.canvas.height),
+      ];
+
+      let minLon = 180;
+      let maxLon = -180;
+      let minLat = 90;
+      let maxLat = -90;
+
+      corners.forEach((corner) => {
+        const ray = camera.getPickRay(corner);
+        if (!ray) return;
+
+        const cartesian = this.map.scene.globe.pick(ray, this.map.scene);
+        if (!cartesian) return;
+
+        const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
+        const lon = Cesium.Math.toDegrees(cartographic.longitude);
+        const lat = Cesium.Math.toDegrees(cartographic.latitude);
+
+        minLon = Math.min(minLon, lon);
+        maxLon = Math.max(maxLon, lon);
+        minLat = Math.min(minLat, lat);
+        maxLat = Math.max(maxLat, lat);
+      });
+
+      return {
+        xmin: minLon,
+        xmax: maxLon,
+        ymin: minLat,
+        ymax: maxLat,
+      };
+    }
+
+    /**
+     * 获取当前相机视图
+     */
+    getCameraView() {
+      const camera = this.map.camera;
+      const position = camera.positionWC;
+      const cartographic = Cesium.Cartographic.fromCartesian(position);
+
+      return {
+        lng: Cesium.Math.toDegrees(cartographic.longitude),
+        lat: Cesium.Math.toDegrees(cartographic.latitude),
+        alt: cartographic.height,
+        heading: Cesium.Math.toDegrees(camera.heading),
+        pitch: Cesium.Math.toDegrees(camera.pitch),
+        roll: Cesium.Math.toDegrees(camera.roll),
+      };
+    }
+
+    /**
+     * 飞向指定点
+     */
+    flyToPoint(position: any) {
+      const [lng, lat, alt] = position;
+      const cartesian = Cesium.Cartesian3.fromDegrees(lng, lat, alt); // 创建经纬度坐标点
+
+      this.map.camera.flyTo({
+        destination: cartesian,
+        duration: 2,
+        complete: () => {
+          console.log("飞行动画完成");
+        },
+      });
+    }
+
+    /**
+     * 飞向指定区域
+     */
+    flyToExtent(extent: any) {
+      const rectangle = Cesium.Rectangle.fromDegrees(
+        extent.xmin,
+        extent.ymin,
+        extent.xmax,
+        extent.ymax
+      );
+
+      this.map.camera.flyTo({
+        destination: rectangle,
+        duration: 2,
+      });
+    }
+
+    /**
+     * 关闭所有弹窗
+     */
+    closePopup() {
+      this.map.selectedEntity = null;
+      this.map.trackedEntity = null;
+    }
+
+    /**
+     * 设置投影模式 2d/3d
+     */
+    setMode(mode: string) {
+      const modes: any = {
+        "2d": Cesium.SceneMode.SCENE2D,
+        "3d": Cesium.SceneMode.SCENE3D,
+        columbus: Cesium.SceneMode.COLUMBUS_VIEW,
+      };
+
+      if (modes[mode.toLowerCase()]) {
+        this.map.scene.mode = modes[mode.toLowerCase()];
+      }
+    }
+
+    /**
+     * 销毁地图
+     */
+    destroy() {
+      if (this.map) {
+        this.map.destroy();
+        this.map = null;
+      }
+    }
+  }
+
   const map: any = {
     mars3d: mars3d_map,
     gaode: gaode_map,
     siji: siji_map,
+    cesium: cesium_map,
   };
   return map[hnMap.mapType];
 };

package/src/other/route.ts

@@ -1,6 +1,6 @@
 import { deepMerge, wgs84ToGcj02Format } from "../util";
 
-import siji_entity from "../base/siji_entity";
+import SijiEntity from "../base/siji_entity";
 export default (hnMap: any) => {
   const defaultOption = {
     id: "",
@@ -242,7 +242,7 @@ export default (hnMap: any) => {
     }
   }
 
-  class siji_class extends siji_entity {
+  class siji_class extends SijiEntity {
     type: any = "route";
     id: any = null;
     option: any = JSON.parse(JSON.stringify(defaultOption));