hn-map 1.1.1 → 1.1.3

package/src/map.ts

@@ -1,433 +1,439 @@
-import {deepMerge, getHeightToLevel, getLevelMiddleHeight} from "./util";
+import { deepMerge, getHeightToLevel, getLevelMiddleHeight } from "./util";
 
 export default (hnMap: any) => {
-    const defaultOption = {
-        // 经度
-        lat: 37.7979042,
-        // 纬度
-        lng: 112.55074,
-        // 缩放级别
-        level: 11,
-        // 旋转角度
-        heading: 0,
-        // 俯仰角度
-        pitch: -60,
-        // 翻滚角度
-        roll: 0,
-        mars3d_config: "",
-        // 高德地图key
-        gaode_key: "",
-        // 思极key
-        sj_app_key: "",
-        sj_app_secret: "",
-        style: "aegis://styles/aegis/Streets-Raster512",
-    };
-
-    class mars3d_map {
-        map: any = null;
-
-        option: any = JSON.parse(JSON.stringify(defaultOption));
-        config: any = null;
-
-        // 图层集合
-        layerList: any = [];
-
-        event: any = {};
-
-        level: any = null;
-
-        private constructor(id: string, option: any) {
-            this.layerList = [];
-            this.level = this.option.level;
-            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);
-            });
-        }
-
-        static async create(id: string, option: any) {
-            const instance = new mars3d_map(id, option);
-            // 返回一个 Promise，等待地图的 'load' 事件
-            await new Promise<void>((resolve) => {
-                resolve();
-            });
-            // 地图加载完成后，返回实例
-            return instance;
-        }
-
-        formatConfig(option: any) {
-            const alt = getLevelMiddleHeight(option.level);
-            return {
-                ...option.mars3d_config,
-                control: {
-                    locationBar: {fps: true},
-                },
-                scene: {
-                    center: {
-                        lat: option.lat,
-                        lng: option.lng,
-                        alt: alt,
-                        heading: 360 - option.heading || 0,
-                        pitch: option.pitch || 0,
-                        roll: option.roll || 0,
-                    },
-                    fxaa: true,
-                    requestRenderMode: true, // 显式渲染
-                },
-            };
-        }
-
-        addLayer(layer: any) {
-            if (this.layerList.find((v: any) => v.id === layer.id)) {
-                console.error("已存在同名图层" + layer.id);
-            } else {
-                this.layerList.push(layer);
-                this.map.addLayer(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();
-            }
-        }
+  const defaultOption = {
+    // 经度
+    lat: 37.7979042,
+    // 纬度
+    lng: 112.55074,
+    // 缩放级别
+    level: 11,
+    // 旋转角度
+    heading: 0,
+    // 俯仰角度
+    pitch: -60,
+    // 翻滚角度
+    roll: 0,
+    mars3d_config: "",
+    // 高德地图key
+    gaode_key: "",
+    // 思极key
+    sj_app_key: "",
+    sj_app_secret: "",
+    sj_style: "aegis://styles/aegis/Streets-Raster512",
+  };
+
+  class mars3d_map {
+    map: any = null;
+
+    option: any = JSON.parse(JSON.stringify(defaultOption));
+    config: any = null;
+
+    // 图层集合
+    layerList: any = [];
+
+    event: any = {};
+
+    level: any = null;
+
+    private constructor(id: string, option: any) {
+      this.layerList = [];
+      this.level = 10;
+      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);
+      });
+    }
 
-        on(eventType: any, callback: any) {
-            this.off(eventType);
-            switch (eventType) {
-                case "click":
-                    this.event[eventType] = (event: any) => {
-                        const point = mars3d.LngLatPoint.fromCartesian(event.cartesian); //转为经纬度
-                        point.format(); // 经度、纬度、高度
-                        const position = {
-                            lng: point.lng,
-                            lat: point.lat,
-                            alt: point.alt,
-                        };
-                        callback(position);
-                    };
-                    break;
-                case "cameraMoveEnd":
-                    this.event[eventType] = (event: any) => {
-                        callback(event);
-                    };
-                    break;
-            }
-            this.map.on(eventType, this.event[eventType]);
-        }
+    static async create(id: string, option: any) {
+      const instance = new mars3d_map(id, option);
+      // 返回一个 Promise，等待地图的 'load' 事件
+      await new Promise<void>((resolve) => {
+        resolve();
+      });
+      // 地图加载完成后，返回实例
+      return instance;
+    }
 
-        off(eventType: any) {
-            if (this.event[eventType]) {
-                this.map.off(eventType, this.event[eventType]);
-                delete this.event[eventType];
-            }
-        }
+    formatConfig(option: any) {
+      const alt = getLevelMiddleHeight(option.level);
+      return {
+        ...option.mars3d_config,
+        control: {
+          locationBar: { fps: true },
+        },
+        scene: {
+          center: {
+            lat: option.lat,
+            lng: option.lng,
+            alt: alt,
+            heading: 360 - option.heading || 0,
+            pitch: option.pitch || 0,
+            roll: option.roll || 0,
+          },
+          fxaa: true,
+          requestRenderMode: true, // 显式渲染
+        },
+      };
+    }
 
-        /**
-         * 获取当前视口的经纬度范围
-         * 返回参数 {xmin,xmax,ymin,ymax}
-         * @returns {*}
-         */
-        getExtent() {
-            return this.map.getExtent();
-        }
+    addLayer(layer: any) {
+      if (this.layerList.find((v: any) => v.id === layer.id)) {
+        console.error("已存在同名图层" + layer.id);
+      } else {
+        this.layerList.push(layer);
+        this.map.addLayer(layer.layerEntity);
+        return layer;
+      }
+    }
 
-        /**
-         * 获取当前视高
-         * 返回参数 {alt}
-         * @returns {any}
-         */
-        getCameraView() {
-            return this.map.getCameraView();
-        }
+    getLayer(layerId: any) {
+      return this.layerList.find((v: any) => v.id === layerId);
+    }
 
-        flyToPoint(position: any) {
-            const pos = new mars3d.LngLatPoint(position[0], position[1], position[2]);
-            this.map.flyToPoint(pos);
-        }
+    // 删除图层
+    removeLayer(layerId: any) {
+      const layer = this.getLayer(layerId);
+      if (layer) {
+        this.layerList = this.layerList.filter((v: any) => v.id !== layerId);
+        layer.destroy();
+      }
+    }
 
-        closePopup() {
-            this.map.closePopup();
-        }
+    // 清空图层
+    clearLayer(layerId: any) {
+      const layer = this.getLayer(layerId);
+      if (layer) {
+        layer.children = [];
+        layer.clearEntity();
+      }
+    }
 
-        // 设置投影模式 2d/3d
-        setMode(mode: any) {
-            const obj: any = {
-                "2d": Cesium.SceneMode.SCENE2D,
-                "3d": Cesium.SceneMode.SCENE3D,
+    on(eventType: any, callback: any) {
+      this.off(eventType);
+      switch (eventType) {
+        case "click":
+          this.event[eventType] = (event: any) => {
+            const point = mars3d.LngLatPoint.fromCartesian(event.cartesian); //转为经纬度
+            point.format(); // 经度、纬度、高度
+            const position = {
+              lng: point.lng,
+              lat: point.lat,
+              alt: point.alt,
             };
-            this.map.scene.mode = obj[mode.toLowerCase()];
-        }
+            callback(position);
+          };
+          break;
+        case "cameraMoveEnd":
+          this.event[eventType] = (event: any) => {
+            callback(event);
+          };
+          break;
+      }
+      this.map.on(eventType, this.event[eventType]);
     }
 
-    class gaode_map {
-        map: any = null;
-
-        option: any = JSON.parse(JSON.stringify(defaultOption));
-        config: any = null;
-
-        // 图层集合
-        layerList: any = [];
+    off(eventType: any) {
+      if (this.event[eventType]) {
+        this.map.off(eventType, this.event[eventType]);
+        delete this.event[eventType];
+      }
+    }
 
-        private constructor(id: any, option: any) {
-            this.layerList = [];
-            deepMerge(this.option, option);
-            this.config = this.formatConfig(this.option);
-            this.map = new AMap.Map(id, this.config);
-        }
+    /**
+     * 获取当前视口的经纬度范围
+     * 返回参数 {xmin,xmax,ymin,ymax}
+     * @returns {*}
+     */
+    getExtent() {
+      return this.map.getExtent();
+    }
 
-        static async create(id: string, option: any) {
-            const instance = new gaode_map(id, option);
+    /**
+     * 获取当前视高
+     * 返回参数 {alt}
+     * @returns {any}
+     */
+    getCameraView() {
+      return this.map.getCameraView();
+    }
 
-            // 返回一个 Promise，等待地图的 'load' 事件
-            await new Promise<void>((resolve) => {
-                resolve();
-            });
+    flyToPoint(position: any) {
+      const pos = new mars3d.LngLatPoint(position[0], position[1], position[2]);
+      this.map.flyToPoint(pos);
+    }
 
-            // 地图加载完成后，返回实例
-            return instance;
-        }
+    closePopup() {
+      this.map.closePopup();
+    }
 
-        formatConfig(option: any) {
-            return {
-                viewMode: "2D", // 是否为3D地图模式
-                level: option.level, // 初始化地图级别
-                pitch: option.pitch,
-                rotation: option.heading,
-                rotateEnable: true,
-                pitchEnable: true,
-                terrain: true, // 开启地形图
-                center: [option.lng, option.lat], // 初始化地图中心点位置
-            };
-        }
+    // 设置投影模式 2d/3d
+    setMode(mode: any) {
+      const obj: any = {
+        "2d": Cesium.SceneMode.SCENE2D,
+        "3d": Cesium.SceneMode.SCENE3D,
+      };
+      this.map.scene.mode = obj[mode.toLowerCase()];
+    }
+  }
 
-        addLayer(layer: any) {
-            if (this.layerList.find((v: any) => v.id === layer.id)) {
-                console.error("已存在同名图层");
-            } else {
-                this.layerList.push(layer);
-                this.map.add(layer.layerEntity);
-                return layer;
-            }
-        }
+  class gaode_map {
+    map: any = null;
 
-        getLayer(layerId: any) {
-            return this.layerList.find((v: any) => v.id === layerId);
-        }
+    option: any = JSON.parse(JSON.stringify(defaultOption));
+    config: any = null;
 
-        removeLayer(layerId: any) {
-            const layer = this.getLayer(layerId);
-            if (layer) {
-                layer.destroy();
-                this.layerList = this.layerList.filter((v: any) => v.id !== layerId);
-            }
-        }
+    // 图层集合
+    layerList: any = [];
 
-        clearLayer(layerId: any) {
-            const layer = this.getLayer(layerId);
-            if (layer) {
-                layer.children = [];
-                layer.clearEntity();
-            }
-        }
+    private constructor(id: any, option: any) {
+      this.layerList = [];
+      deepMerge(this.option, option);
+      this.config = this.formatConfig(this.option);
+      this.map = new AMap.Map(id, this.config);
     }
 
-    class siji_map {
-        id: any = null;
-        map: any = null;
+    static async create(id: string, option: any) {
+      const instance = new gaode_map(id, option);
 
-        option: any = JSON.parse(JSON.stringify(defaultOption));
-        config: any = null;
+      // 返回一个 Promise，等待地图的 'load' 事件
+      await new Promise<void>((resolve) => {
+        resolve();
+      });
 
-        // 图层集合
-        layerList: any = [];
-        event: any = {};
-        level: any = null;
+      // 地图加载完成后，返回实例
+      return instance;
+    }
 
-        private constructor(id: any, option: any) {
-            this.id = id;
-            this.layerList = [];
+    formatConfig(option: any) {
+      return {
+        viewMode: "2D", // 是否为3D地图模式
+        level: option.level, // 初始化地图级别
+        pitch: option.pitch,
+        rotation: option.heading,
+        rotateEnable: true,
+        pitchEnable: true,
+        terrain: true, // 开启地形图
+        center: [option.lng, option.lat], // 初始化地图中心点位置
+      };
+    }
 
-            this.level = this.option.level;
-            deepMerge(this.option, option);
-            this.config = this.formatConfig(this.option);
-            this.map = new SGMap.Map(this.config);
-            this.map.on("moveend", (e: any) => this.updateMapParams(e)); // 地图移动完成
-            this.map.on("zoomend", (e: any) => this.updateMapParams(e)); // 地图缩放完成
-            this.map.on("pitchend", (e: any) => this.updateMapParams(e)); // 地图俯仰角度完成
-        }
+    addLayer(layer: any) {
+      if (this.layerList.find((v: any) => v.id === layer.id)) {
+        console.error("已存在同名图层");
+      } else {
+        this.layerList.push(layer);
+        this.map.add(layer.layerEntity);
+        return layer;
+      }
+    }
 
-        static async create(id: string, option: any) {
-            const instance = new siji_map(id, option);
+    getLayer(layerId: any) {
+      return this.layerList.find((v: any) => v.id === layerId);
+    }
 
-            // 返回一个 Promise，等待地图的 'load' 事件
-            await new Promise((resolve) => {
-                instance.map.on("load", (e: any) => {
-                    resolve(e);
-                });
-            });
+    removeLayer(layerId: any) {
+      const layer = this.getLayer(layerId);
+      if (layer) {
+        layer.destroy();
+        this.layerList = this.layerList.filter((v: any) => v.id !== layerId);
+      }
+    }
 
-            // 地图加载完成后，返回实例
-            return instance;
-        }
+    clearLayer(layerId: any) {
+      const layer = this.getLayer(layerId);
+      if (layer) {
+        layer.children = [];
+        layer.clearEntity();
+      }
+    }
+  }
+
+  class siji_map {
+    id: any = null;
+    map: any = null;
+    geocodingTask: any = null;
+    option: any = JSON.parse(JSON.stringify(defaultOption));
+    config: any = null;
+
+    // 图层集合
+    layerList: any = [];
+    event: any = {};
+    level: any = null;
+
+    private constructor(id: any, option: any) {
+      this.id = id;
+      this.layerList = [];
+
+      this.level = this.option.level;
+      deepMerge(this.option, option);
+      this.config = this.formatConfig(this.option);
+      this.map = new SGMap.Map(this.config);
+      this.geocodingTask = new SGMap.GeocodingTask();
+      this.map.on("moveend", (e: any) => this.updateMapParams(e)); // 地图移动完成
+      this.map.on("zoomend", (e: any) => this.updateMapParams(e)); // 地图缩放完成
+      this.map.on("pitchend", (e: any) => this.updateMapParams(e)); // 地图俯仰角度完成
+      this.map.on("load", (e: any) => {
+        // 路况展示
+        let roadNetLayer = new SGMap.RoadNetLayer({ map: this.map });
+        roadNetLayer.render();
+      });
+    }
 
-        formatConfig(option: any) {
-            return {
-                container: this.id,
-                style: "aegis://styles/aegis/Streets-v2",
-                // 默认缩放层级
-                zoom: option.level,
-                // 地图中心点
-                center: [option.lng, option.lat],
-                // 地图默认字体
-                localIdeographFontFamily: "Microsoft YaHei Regular",
-            };
-        }
+    static async create(id: string, option: any) {
+      const instance = new siji_map(id, option);
 
-        addLayer(layer: any) {
-            if (this.layerList.find((v: any) => v.id === layer.id)) {
-                console.error("已存在同名图层");
-            } else {
-                if (this.map) {
-                    this.layerList.push(layer);
-                    // this.map.addLayer(layer.config);
-                    return layer;
-                }
-            }
-        }
+      // 返回一个 Promise，等待地图的 'load' 事件
+      await new Promise((resolve) => {
+        instance.map.on("load", (e: any) => {
+          resolve(e);
+        });
+      });
 
-        getLayer(layerId: any) {
-            return this.layerList.find((v: any) => v.id === layerId);
-        }
+      // 地图加载完成后，返回实例
+      return instance;
+    }
 
-        removeLayer(layerId: any) {
-            const layer = this.getLayer(layerId);
+    formatConfig(option: any) {
+      return {
+        container: this.id,
+        style: option.sj_style || "aegis://styles/aegis/StreetsDark-v2",
+        // 默认缩放层级
+        zoom: option.level,
+        // 地图中心点
+        center: [option.lng, option.lat],
+        // 地图默认字体
+        localIdeographFontFamily: "Microsoft YaHei Regular",
+      };
+    }
 
-            if (layer.id) {
-                this.layerList = this.layerList.filter((v: any) => v.id !== layerId);
-                layer.destroy();
-            }
+    addLayer(layer: any) {
+      if (this.layerList.find((v: any) => v.id === layer.id)) {
+        console.error("已存在同名图层");
+      } else {
+        if (this.map) {
+          this.layerList.push(layer);
+          // this.map.addLayer(layer.config);
+          return layer;
         }
+      }
+    }
 
-        clearLayer(layerId: any) {
-            const layer = this.getLayer(layerId);
-            if (layer) {
-                layer.children = [];
-                layer.clearEntity();
-            }
-        }
+    getLayer(layerId: any) {
+      return this.layerList.find((v: any) => v.id === layerId);
+    }
 
-        getExtent() {
-            const data = this.map.getBounds();
-            return {
-                xmin: data._sw.lng,
-                ymin: data._sw.lat,
-                xmax: data._ne.lng,
-                ymax: data._ne.lat,
-            };
-        }
+    removeLayer(layerId: any) {
+      const layer = this.getLayer(layerId);
 
-        on(eventType: any, callback: any) {
-            this.off(eventType);
-            switch (eventType) {
-                case "click":
-                    this.event[eventType] = (event: any) => {
-                        callback(event.lngLat);
-                    };
-                    break;
-                case "dblclick":
-                    this.event[eventType] = (event: any) => {
-                        callback(event);
-                    };
-                    break;
-                case "cameraMoveEnd":
-                    this.event[eventType] = () => {
-                        this.map.on("moveend", (event: any) => callback(event)); // 地图移动完成
-                        this.map.on("zoomend", (event: any) => callback(event)); // 地图缩放完成
-                        this.map.on("pitchend", (event: any) => callback(event)); // 地图俯仰角度完成
-                    };
-                    this.event[eventType]()
-                    break;
-                //镜头移动事件
-                case "moveend":
-                    this.event[eventType] = (event: any) => {
-                        callback(event);
-                    };
-                    break;
-                case "zoomend": //"levelend"
-                    this.event[eventType] = (event: any) => {
-                        callback(event);
-                    };
-                    break;
-                case "mouseenter":
-                    this.event[eventType] = (event: any) => {
-                        callback(event);
-                    };
-                    break;
-                case "mouseleave":
-                    this.event[eventType] = (event: any) => {
-                        callback(event);
-                    };
-                    break;
-                case "mousemove":
-                    this.event[eventType] = (event: any) => {
-                        callback(event);
-                    };
-                    break;
-            }
-            this.map.on(eventType, this.event[eventType]);
-        }
+      if (layer.id) {
+        this.layerList = this.layerList.filter((v: any) => v.id !== layerId);
+        layer.destroy();
+      }
+    }
 
-        off(eventType: any) {
-            if (this.event[eventType]) {
-                this.map.off(eventType, this.event[eventType]);
-                delete this.event[eventType];
-            }
-        }
+    clearLayer(layerId: any) {
+      const layer = this.getLayer(layerId);
+      if (layer) {
+        layer.children = [];
+        layer.clearEntity();
+      }
+    }
 
-        // 更新当前地图参数
-        private updateMapParams(e: any) {
-            this.level = this.map.getZoom();
-            let viewPos = this.getExtent()
-            console.log("当前缩放级别level：", this.level);
-            if (this.level !== this.option.level) {
-                this.layerList.forEach((layer: any) => {
-                    layer.children.forEach((entity: any) => {
-                        entity.option.distanceDisplayCondition && layer.updateEntity(entity,viewPos)
-                    });
-                });
-            } else {
-                return;
-            }
+    getExtent() {
+      const data = this.map.getBounds();
+      return {
+        xmin: data._sw.lng,
+        ymin: data._sw.lat,
+        xmax: data._ne.lng,
+        ymax: data._ne.lat,
+      };
+    }
 
-        }
+    on(eventType: any, callback: any) {
+      this.off(eventType);
+      switch (eventType) {
+        case "click":
+          this.event[eventType] = (event: any) => {
+            callback(event);
+          };
+          break;
+        case "dblclick":
+          this.event[eventType] = (event: any) => {
+            callback(event);
+          };
+          break;
+        case "cameraMoveEnd":
+          this.event[eventType] = () => {
+            this.map.on("moveend", (event: any) => callback(event)); // 地图移动完成
+            this.map.on("zoomend", (event: any) => callback(event)); // 地图缩放完成
+            this.map.on("pitchend", (event: any) => callback(event)); // 地图俯仰角度完成
+          };
+          this.event[eventType]();
+          break;
+        //镜头移动事件
+        case "moveend":
+          this.event[eventType] = (event: any) => {
+            callback(event);
+          };
+          break;
+        case "zoomend": //"levelend"
+          this.event[eventType] = (event: any) => {
+            callback(event);
+          };
+          break;
+        case "mouseenter":
+          this.event[eventType] = (event: any) => {
+            callback(event);
+          };
+          break;
+        case "mouseleave":
+          this.event[eventType] = (event: any) => {
+            callback(event);
+          };
+          break;
+        case "mousemove":
+          this.event[eventType] = (event: any) => {
+            callback(event);
+          };
+          break;
+      }
+      this.map.on(eventType, this.event[eventType]);
+    }
+
+    off(eventType: any) {
+      if (this.event[eventType]) {
+        this.map.off(eventType, this.event[eventType]);
+        delete this.event[eventType];
+      }
     }
 
-    const map: any = {
-        mars3d: mars3d_map,
-        gaode: gaode_map,
-        siji: siji_map,
-    };
-    return map[hnMap.mapType];
+    // 更新当前地图参数
+    private updateMapParams(e: any) {
+      this.level = this.map.getZoom();
+      let viewPos = this.getExtent();
+      console.log("当前缩放级别level：", this.level);
+      if (this.level !== this.option.level) {
+        this.layerList.forEach((layer: any) => {
+          layer.children.forEach((entity: any) => {
+            entity.option.distanceDisplayCondition &&
+              layer.updateEntity(entity, viewPos);
+          });
+        });
+      } else {
+        return;
+      }
+    }
+  }
+
+  const map: any = {
+    mars3d: mars3d_map,
+    gaode: gaode_map,
+    siji: siji_map,
+  };
+  return map[hnMap.mapType];
 };