hn-map 1.0.10 → 1.1.1

package/src/layer/heatMap.ts

@@ -0,0 +1,163 @@
+import {deepMerge, wgs84ToGcj02Format} from '../util'
+
+export default (hnMap: any) => {
+
+    const defaultOption = {
+        id: "",
+        position: [],
+        allowDrillPick: true,
+        max: null,
+        min: null,
+        radius: 25,
+        minOpacity: 0.1,
+        maxOpacity: 0.8,
+        opacity: 1,
+        blur: 0.85,
+        gradient: {},
+        scaleByDistance: false,
+        clampToGround: true,
+        data: null
+    }
+
+    class mars3d_class {
+        type: any = 'heatMap'
+        id: any = null
+        option: any = JSON.parse(JSON.stringify(defaultOption))
+        config: any = null
+        layerEntity: any = null
+
+        constructor(option: any) {
+            this.id = option.id
+            deepMerge(this.option, option)
+            this.config = this.formatConfig(this.option)
+            this.layerEntity = new mars3d.layer.HeatLayer(JSON.parse(JSON.stringify(this.config)))
+        }
+
+        formatConfig(option: any) {
+            return {
+                id: option.id,
+                positions: option.position,
+                allowDrillPick: option.allowDrillPick,
+                max: option.max,
+                min: option.min,
+                heatStyle: {
+                    radius: option.radius,
+                    minOpacity: option.minOpacity,
+                    maxOpacity: option.maxOpacity,
+                    blur: option.blur,
+                    gradient: option.gradient,
+                },
+                style: {
+                    opacity: option.opacity,
+                    scaleByDistance: option.scaleByDistance,
+                    clampToGround: option.clampToGround,
+                },
+                redrawZoom: true,
+                attr: option.data
+            }
+        }
+
+        set(option: any) {
+            deepMerge(this.option, option)
+            this.config = this.formatConfig(this.option)
+            this.layerEntity.setOptions(this.config)
+        }
+
+        destroy() {
+            this.layerEntity.remove(true)
+            hnMap.map.layerList = hnMap.map.layerList.filter((v: any) => v.id !== this.id)
+        }
+
+        flyTo() {
+            this.layerEntity.flyTo()
+        }
+
+        clear() {
+            this.layerEntity.clear()
+        }
+
+        setPosition(position: any) {
+            deepMerge(this.option, {position})
+            this.layerEntity.setPositions(position)
+        }
+
+        show() {
+            this.layerEntity.show = true
+        }
+
+        hide() {
+            this.layerEntity.show = false
+        }
+
+    }
+
+    class gaode_class {
+
+        id: any = null
+        option: any = JSON.parse(JSON.stringify(defaultOption))
+        config: any = null
+        layerEntity: any = null
+
+        constructor(option: any) {
+            this.id = option.id
+            deepMerge(this.option, option)
+            this.config = this.formatConfig(this.option)
+            this.layerEntity = new AMap.HeatMap(hnMap.map.map, this.config)
+            this.layerEntity.setDataSet({data: this.config.data, max: this.config.max, min: this.config.min});
+
+        }
+
+        formatConfig(option: any) {
+            const data = option.position.map((v: any) => {
+                return {lng: v.lng, lat: v.lat, count: v.value}
+            })
+            const amapData = wgs84ToGcj02Format(data)
+
+            return {
+                id: option.id,
+                radius: option.radius,
+                max: option.max,
+                min: option.min,
+                opacity: [option.minOpacity, option.maxOpacity],
+                gradient: option.gradient,
+                data: amapData,
+                extData: {
+                    id: option.id,
+                    data: option.data,
+                },
+            }
+        }
+
+        set(option: any) {
+            deepMerge(this.option, option)
+            this.config = this.formatConfig(this.option)
+            this.layerEntity.setOptions(this.config)
+        }
+
+        destroy() {
+            this.layerEntity.setMap(null)
+            hnMap.map.layerList = hnMap.map.layerList.filter((v: any) => v.id !== this.id)
+        }
+
+
+        flyTo() {
+            let totalLng = 0;
+            let totalLat = 0;
+            this.config.data.map((item: any) => {
+                totalLng += item.lng;
+                totalLat += item.lat;
+            })
+            const centerLng = totalLng / this.config.data.length;
+            const centerLat = totalLat / this.config.data.length;
+            hnMap.map.map.setCenter([centerLng, centerLat])
+        }
+
+    }
+
+    const fn: any = {
+        mars3d: mars3d_class,
+        gaode: gaode_class
+    }
+
+    return fn[hnMap.mapType]
+}

package/src/layer/layer.ts

@@ -0,0 +1,464 @@
+import {deepMerge} from "../util";
+
+export default (hnMap: any) => {
+    const defaultOption = {};
+
+    class mars3d_class {
+        type: any = "layer";
+        id: any = null;
+        option: any = JSON.parse(JSON.stringify(defaultOption));
+        config: any = null;
+        children: any = null;
+        layerEntity: any = null;
+
+        constructor(option: any) {
+            this.id = option.id;
+            this.children = [];
+            deepMerge(this.option, option);
+            this.config = this.formatConfig(this.option);
+            this.layerEntity = new mars3d.layer.GraphicLayer(this.config); // 创建图层
+        }
+
+        formatConfig(option: any) {
+            return option;
+        }
+
+        getEntity(id: any) {
+            return this.children.find((v: any) => v.id === id);
+        }
+
+        addEntity(entity: any) {
+            if (this.children.find((v: any) => v.id === entity.id)) {
+                console.error("已存在同名图形" + entity.id);
+            } else {
+                this.children.push(entity);
+                this.layerEntity.addGraphic(entity.graphic); // 添加图形
+                if (entity.type == "route") {
+                    entity.start();
+                }
+            }
+        }
+
+        removeEntity(entityParam: any) {
+            const entity = this.getEntity(entityParam);
+            if (entity) {
+                this.layerEntity.removeGraphic(entity.graphic);
+            }
+        }
+
+        clearEntity() {
+            this.children.forEach((v: any) => v.destroy());
+            this.children = [];
+            this.layerEntity.clear();
+        }
+
+        destroy() {
+            this.clearEntity();
+            this.layerEntity.remove(true);
+            hnMap.map.layerList = hnMap.map.layerList.filter(
+                (v: any) => v.id !== this.id
+            );
+        }
+
+        show() {
+            this.layerEntity.show = true;
+        }
+
+        hide() {
+            this.layerEntity.show = false;
+        }
+
+        flyTo() {
+            this.layerEntity.flyTo();
+        }
+
+        /**
+         * 飞向指定的多个图形
+         * @param entities
+         */
+        flyToCustomEntities(entities: any) {
+            // 计算所有线的最小最大坐标
+            let minLon = 180,
+                maxLon = -180,
+                minLat = 90,
+                maxLat = -90;
+
+            entities.forEach((line: any) => {
+                line.graphic.positions.forEach((pos: any) => {
+                    const carto = mars3d.Cesium.Cartographic.fromCartesian(pos);
+                    const lon = mars3d.Cesium.Math.toDegrees(carto.longitude);
+                    const lat = mars3d.Cesium.Math.toDegrees(carto.latitude);
+
+                    minLon = Math.min(minLon, lon);
+                    maxLon = Math.max(maxLon, lon);
+                    minLat = Math.min(minLat, lat);
+                    maxLat = Math.max(maxLat, lat);
+                });
+            });
+
+            // 飞到这个矩形范围
+            hnMap.map.map.flyToExtent({
+                xmin: minLon,
+                xmax: maxLon,
+                ymin: minLat,
+                ymax: maxLat,
+            });
+        }
+
+        // 添加属性弹窗
+        addPopupByAttr() {
+            this.layerEntity.bindPopup((event: any) => {
+                console.log(event.graphic, "====event.graphic==");
+                if (event.graphic.attr) {
+                    const data = event.graphic.attr;
+                    return mars3d.Util.getTemplateHtml({
+                        title: "详情",
+                        template: "all",
+                        attr: data,
+                    });
+                }
+            });
+        }
+
+        // 添加自定义dom弹窗
+        addCustomPopup(getCustomDom: any, option = {offsetY: -20}) {
+            this.layerEntity.bindPopup(async (event: any) => {
+                if (event.graphic.attr) {
+                    const data = event.graphic.attr || {};
+                    const dom = await getCustomDom(data);
+                    if (dom) {
+                        return dom;
+                    } else {
+                        hnMap.map.closePopup();
+                    }
+                }
+            }, option);
+        }
+    }
+
+    class gaode_class {
+        id: any = null;
+        option: any = JSON.parse(JSON.stringify(defaultOption));
+        config: any = null;
+        children: any = null;
+        layerEntity: any = null;
+        // 创建全局信息窗口实例
+        propsInfoWindow: any = null;
+        customInfoWindow: any = null;
+        getCustomDom: any = null;
+
+        constructor(option: any) {
+            this.id = option.id;
+            this.children = [];
+            deepMerge(this.option, option);
+            this.config = this.formatConfig(this.option);
+            this.layerEntity = new AMap.OverlayGroup([]); // 创建图层
+            this.layerEntity.id = option.id;
+        }
+
+        formatConfig(option: any) {
+            return option;
+        }
+
+        getEntity(entityParam: any) {
+            return this.children.find((v: any) => v.id === entityParam);
+        }
+
+        addEntity(entity: any) {
+            if (this.children.find((v: any) => v.id === entity.id)) {
+                console.error("已存在同名图形" + entity.id);
+            } else {
+                this.children.push(entity);
+                this.layerEntity.addOverlay(entity.graphic); // 添加图形
+
+                // 图层添加新图形后，需要重新调用绑定点击弹窗方法
+                if (this.propsInfoWindow) {
+                    this.addPopupByAttr();
+                }
+
+                if (this.customInfoWindow) {
+                    // this.addCustomPopup()
+                }
+            }
+        }
+
+        removeEntity(entityParam: any) {
+            const entity = this.getEntity(entityParam);
+
+            if (entity) {
+                this.children = this.children.filter((v: any): any => {
+                    return v.id !== entity.id;
+                });
+
+                this.layerEntity.removeOverlay(entity.graphic);
+                entity.destroy();
+            }
+        }
+
+        clearEntity() {
+            this.children = [];
+            this.layerEntity.clearOverlays();
+        }
+
+        destroy() {
+            this.clearEntity();
+            hnMap.map.map.remove(this.layerEntity);
+            hnMap.map.layerList = hnMap.map.layerList.filter(
+                (v: any) => v.id !== this.id
+            );
+        }
+
+        // 添加属性弹窗
+        addPopupByAttr() {
+            if (!this.propsInfoWindow) {
+                this.propsInfoWindow = new AMap.InfoWindow({
+                    offset: new AMap.Pixel(0, -30),
+                });
+            }
+            const handleClick = (e: any) => {
+                const overlay = e.target; // 获取被点击的具体覆盖物
+                const data = overlay.getOptions().extData.data;
+                let content = "";
+                for (const key in data) {
+                    content += `<div>${key}: ${data[key]}</div>`;
+                }
+                this.propsInfoWindow.setContent(content);
+                this.propsInfoWindow.open(hnMap.map.map, e.lnglat);
+            };
+
+            this.layerEntity.off("click", handleClick);
+            this.layerEntity.on("click", handleClick);
+        }
+
+        // 添加自定义dom弹窗
+        addCustomPopup(getCustomDom: any) {
+            if (!this.customInfoWindow) {
+                this.customInfoWindow = new AMap.InfoWindow({
+                    offset: new AMap.Pixel(0, -30),
+                });
+            }
+            if (getCustomDom) {
+                this.getCustomDom = getCustomDom;
+            }
+            const handleClick = (e: any) => {
+                const overlay = e.target; // 获取被点击的具体覆盖物
+                const data = overlay.getOptions().extData.data;
+                const dom = this.getCustomDom(data);
+                this.customInfoWindow.setContent(dom);
+                this.customInfoWindow.open(hnMap.map.map, e.lnglat);
+            };
+            this.layerEntity.off("click", handleClick);
+            this.layerEntity.on("click", handleClick);
+        }
+    }
+
+    class siji_class {
+        id = null;
+        option: any = JSON.parse(JSON.stringify(defaultOption));
+        config: any = null;
+        children: any = null;
+        hideChildrenMap: any = null;
+        layerEntity: any = null;
+        infoWindow: any = null;
+        entity: any = null;
+
+        constructor(option: any) {
+            this.id = option.id;
+            this.children = [];
+            this.hideChildrenMap = {};
+            deepMerge(this.option, option);
+            this.config = this.formatConfig(this.option);
+        }
+
+        formatConfig(option: any) {
+            return option;
+        }
+
+        updateEntity(entity: any, viewPos: any) {
+            const isUpdateEntity = hnMap.map.level >= Number(entity.option.distanceDisplayCondition_far) && hnMap.map.level <= Number(entity.option.distanceDisplayCondition_near)
+            if (isUpdateEntity) {
+                if (!entity.show && this.isIncludesLabel(entity.option.position, viewPos)) {
+                    this.addLevelEntity(entity);
+                }
+            } else {
+                if (entity.show) {
+                    this.removeLevelEntity(entity);
+                }
+            }
+        }
+
+        // 判断坐标是否在视口范围内
+        isIncludesLabel(p: any, viewPos: any) {
+            return p[0] > viewPos.xmin && p[0] < viewPos.xmax && p[1] > viewPos.ymin && p[1] < viewPos.ymax
+        }
+
+        getEntity(id: any) {
+            return this.children.find((v: any) => v.id === id);
+        }
+
+        addEntity(entity: any) {
+            if (this.children.find((v: any) => v.id === entity.id)) {
+                console.error("已存在同名图形" + entity.id);
+            } else {
+                this.children.push(entity);
+                const isUpdateEntity = hnMap.map.level >= Number(entity.option.distanceDisplayCondition_far) && hnMap.map.level <= Number(entity.option.distanceDisplayCondition_near)
+                if (!entity.option.distanceDisplayCondition || isUpdateEntity) {
+                    this.addLevelEntity(entity)
+                }
+            }
+        }
+
+        removeEntity(entityParam: any) {
+            const entity = this.getEntity(entityParam);
+            if (entity) {
+                this.children = this.children.filter((v: any) => {
+                    return v.id !== entity.id;
+                });
+                this.removeLevelEntity(entity)
+            }
+        }
+
+        addLevelEntity(entity: any) {
+            if (entity.type == "imagePoint") {
+                hnMap.map.map.loadImage(
+                    entity.option.image,
+                    function (error: any, image: any) {
+                        hnMap.map.map.addImage(entity.id + "_image", image);
+                        hnMap.map.map.addLayer(entity.config);
+                    }
+                );
+            } else if (entity.type == "numPoint") {
+                hnMap.map.map.addLayer(entity.config);
+                hnMap.map.map.addLayer(entity.configLabel);
+            } else if (entity.type == "divPoint") {
+                entity.graphic.setLngLat(entity.option.position).addTo(hnMap.map.map);
+            } else if (entity.type == "circle") {
+                let featureArr = {
+                    type: "Feature",
+                    properties: {
+                        centerPoint: entity.option.position,
+                        radius: entity.option.radius,
+                    },
+                    geometry: {
+                        type: "Polygon",
+                        coordinates: [],
+                    },
+                };
+                entity.graphic.addFeature(featureArr);
+                // entity.graphic = new SGMap.DrawCircleHandler(entity.config);
+            } else if (entity.type == "route") {
+                hnMap.map.map.addLayer(entity.config_routeline);
+                hnMap.map.map.addLayer(entity.config_routeplay);
+                entity.createCar();
+                entity.chunkData = entity.joinLinePoint();
+                entity.start();
+            } else {
+
+                hnMap.map.map.addLayer(entity.config);
+            }
+
+            entity.show = true;
+        }
+
+        removeLevelEntity(entity: any) {
+
+            if (entity) {
+                if (entity.type == "circle") {
+                    entity.graphic.remove();
+                    entity.graphic.clearData();
+                } else if (entity.type == "numPoint") {
+                    hnMap.map.map.removeLayer(entity.config.id);
+                    hnMap.map.map.removeSource(entity.config.id);
+                    hnMap.map.map.removeLayer(entity.configLabel.id);
+                    hnMap.map.map.removeSource(entity.configLabel.id);
+                } else if (entity.type == "divPoint") {
+                    entity.graphic.remove();
+                } else if (entity.type == "route") {
+                    hnMap.map.map.removeLayer(entity.config_routeline.id);
+                    hnMap.map.map.removeSource(entity.config_routeline.id);
+                    hnMap.map.map.removeLayer(entity.config_routeplay.id);
+                    hnMap.map.map.removeSource(entity.config_routeplay.id);
+                    entity.imgMarker.remove();
+                } else {
+                    hnMap.map.map.removeLayer(entity.id);
+                    hnMap.map.map.removeSource(entity.id);
+                }
+                entity.show = false;
+            }
+        }
+
+        clearEntity() {
+            this.children.forEach((v: any) => {
+                this.removeEntity(v.id)
+            });
+            this.children = [];
+        }
+
+        destroy() {
+            this.clearEntity();
+            hnMap.map.layerList = hnMap.map.layerList.filter(
+                (v: any) => v.id !== this.id
+            );
+        }
+
+        // 添加属性弹窗
+        addPopupByAttr() {
+            // 如果已有弹窗，先关闭
+            this.removePopup();
+            this.infoWindow = new SGMap.Popup({
+                offset: {bottom: [0, 0]},
+                className: "my-attrPopup-class",
+            });
+
+            const handleClick = (e: any) => {
+                let data = e.features[0].properties;
+
+                // 创建弹窗内容
+                let content = "";
+                for (const key in data) {
+                    content += `<div>${key}: ${data[key]}</div>`;
+                }
+
+                this.infoWindow.setHTML(content);
+                console.log("e.lngLat===", e.lngLat);
+                this.infoWindow.setLngLat(e.lngLat).addTo(hnMap.map.map);
+            };
+
+            hnMap.map.map.on("click", this.config.id, handleClick);
+        }
+
+        // 添加自定义dom弹窗
+        addCustomPopup(getCustomDom: any) {
+            // 如果已有弹窗，先关闭
+            this.removePopup();
+            this.infoWindow = new SGMap.Popup({
+                offset: {bottom: [0, 0]},
+                className: "my-customPopup-class",
+            });
+
+            const handleClick = (e: any) => {
+                const data = e.features[0].properties;
+                const dom = getCustomDom(data);
+                this.infoWindow.setHTML(dom);
+                this.infoWindow.setLngLat(e.lngLat).addTo(hnMap.map.map);
+            };
+
+            hnMap.map.map.on("click", this.config.id, handleClick);
+        }
+
+        // 弹窗删除
+        removePopup() {
+            if (this.infoWindow) {
+                this.infoWindow.remove();
+            }
+        }
+    }
+
+    const fn: any = {
+        mars3d: mars3d_class,
+        gaode: gaode_class,
+        siji: siji_class,
+    };
+
+    return fn[hnMap.mapType];
+};

package/src/layer/pointCloud.ts

@@ -0,0 +1,78 @@
+import {deepMerge} from "../util";
+
+export default (hnMap: any) => {
+
+    const defaultOption = {
+        id: "",
+        name: "",
+        url: "",
+        position: null,
+        scale: 1,
+        flyTo: false,
+    }
+
+    class mars3d_class {
+        type: any = 'pointCloud'
+        id: any = null
+        option: any = JSON.parse(JSON.stringify(defaultOption))
+        config: any = null
+        layerEntity: any = null
+
+        constructor(option: any) {
+            this.id = option.id
+            deepMerge(this.option, option)
+            this.config = this.formatConfig(this.option)
+            this.layerEntity = new mars3d.layer.TilesetLayer(this.config)
+        }
+
+        formatConfig(option: any) {
+            return {
+                id: option.id,
+                name: option.name,
+                url: option.url,
+                position: option.position,
+                scale: option.scale,
+                attr: {
+                    name: option.name,
+                },
+                flyTo: option.flyTo
+            }
+        }
+
+        set(option: any) {
+            deepMerge(this.option, option)
+            this.config = this.formatConfig(this.option)
+            this.layerEntity.setOptions(this.config)
+        }
+
+        destroy() {
+            this.layerEntity.remove(true)
+            hnMap.map.layerList = hnMap.map.layerList.filter((v: any) => v.id !== this.id)
+        }
+
+        // 添加属性弹窗
+        addPopupByAttr() {
+            this.layerEntity.bindPopup((event: any) => {
+                const data = {name: event.layer.name}
+                return mars3d.Util.getTemplateHtml({title: "详情", template: "all", attr: data})
+            })
+        }
+
+        flyTo() {
+            this.layerEntity.flyTo()
+        }
+    }
+
+    class gaode_class {
+        constructor(option: any) {
+            throw new Error("高德地图不支持点云功能")
+        }
+    }
+
+    const fn: any = {
+        mars3d: mars3d_class,
+        gaode: gaode_class
+    }
+
+    return fn[hnMap.mapType]
+}