hn-map 1.0.9 → 1.1.0

package/src/map.ts

@@ -0,0 +1,433 @@
+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 = 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);
+            });
+        }
+
+        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();
+            }
+        }
+
+        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]);
+        }
+
+        off(eventType: any) {
+            if (this.event[eventType]) {
+                this.map.off(eventType, this.event[eventType]);
+                delete this.event[eventType];
+            }
+        }
+
+        /**
+         * 获取当前视口的经纬度范围
+         * 返回参数 {xmin,xmax,ymin,ymax}
+         * @returns {*}
+         */
+        getExtent() {
+            return this.map.getExtent();
+        }
+
+        /**
+         * 获取当前视高
+         * 返回参数 {alt}
+         * @returns {any}
+         */
+        getCameraView() {
+            return this.map.getCameraView();
+        }
+
+        flyToPoint(position: any) {
+            const pos = new mars3d.LngLatPoint(position[0], position[1], position[2]);
+            this.map.flyToPoint(pos);
+        }
+
+        closePopup() {
+            this.map.closePopup();
+        }
+
+        // 设置投影模式 2d/3d
+        setMode(mode: any) {
+            const obj: any = {
+                "2d": Cesium.SceneMode.SCENE2D,
+                "3d": Cesium.SceneMode.SCENE3D,
+            };
+            this.map.scene.mode = obj[mode.toLowerCase()];
+        }
+    }
+
+    class gaode_map {
+        map: any = null;
+
+        option: any = JSON.parse(JSON.stringify(defaultOption));
+        config: any = null;
+
+        // 图层集合
+        layerList: any = [];
+
+        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);
+        }
+
+        static async create(id: string, option: any) {
+            const instance = new gaode_map(id, option);
+
+            // 返回一个 Promise，等待地图的 'load' 事件
+            await new Promise<void>((resolve) => {
+                resolve();
+            });
+
+            // 地图加载完成后，返回实例
+            return instance;
+        }
+
+        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], // 初始化地图中心点位置
+            };
+        }
+
+        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;
+            }
+        }
+
+        getLayer(layerId: any) {
+            return this.layerList.find((v: any) => v.id === layerId);
+        }
+
+        removeLayer(layerId: any) {
+            const layer = this.getLayer(layerId);
+            if (layer) {
+                layer.destroy();
+                this.layerList = this.layerList.filter((v: any) => v.id !== layerId);
+            }
+        }
+
+        clearLayer(layerId: any) {
+            const layer = this.getLayer(layerId);
+            if (layer) {
+                layer.children = [];
+                layer.clearEntity();
+            }
+        }
+    }
+
+    class siji_map {
+        id: any = null;
+        map: 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.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)); // 地图俯仰角度完成
+        }
+
+        static async create(id: string, option: any) {
+            const instance = new siji_map(id, option);
+
+            // 返回一个 Promise，等待地图的 'load' 事件
+            await new Promise((resolve) => {
+                instance.map.on("load", (e: any) => {
+                    resolve(e);
+                });
+            });
+
+            // 地图加载完成后，返回实例
+            return instance;
+        }
+
+        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",
+            };
+        }
+
+        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;
+                }
+            }
+        }
+
+        getLayer(layerId: any) {
+            return this.layerList.find((v: any) => v.id === layerId);
+        }
+
+        removeLayer(layerId: any) {
+            const layer = this.getLayer(layerId);
+
+            if (layer.id) {
+                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();
+            }
+        }
+
+        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.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]);
+        }
+
+        off(eventType: any) {
+            if (this.event[eventType]) {
+                this.map.off(eventType, this.event[eventType]);
+                delete this.event[eventType];
+            }
+        }
+
+        // 更新当前地图参数
+        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];
+};