hn-map 1.0.9 → 1.1.0

package/src/index.ts

@@ -0,0 +1,202 @@
+import map from "./map";
+import layer from "./layer/layer";
+import point from "./graphic/point";
+import numPoint from "./graphic/numPoint";
+import imagePoint from "./graphic/imagePoint";
+import divPoint from "./graphic/divPoint";
+import label from "./graphic/label";
+import line from "./graphic/line";
+import circle from "./graphic/circle";
+import rectangle from "./graphic/rectangle";
+import polygon from "./graphic/polygon";
+import route from "./other/route";
+import heatMap from "./layer/heatMap";
+import cluster from "./layer/cluster";
+import pointCloud from "./layer/pointCloud";
+import geoJson from "./layer/geoJson";
+
+/**
+ * HnMap类是一个地图工具类，用于创建和管理地图对象及其相关元素
+ */
+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;
+
+    // 允许构造函数
+    private static allowConstruction = false;
+
+    /**
+     * HnMap类的构造函数
+     * @param id 地图容器的ID
+     * @param option 地图的配置选项
+     * @param mapType 地图的类型
+     * @param map
+     */
+    private constructor(id: string, option: any, 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 已创建
+    }
+
+    /**
+     * 创建HnMap实例的方法
+     * @param id 地图容器的ID
+     * @param option 地图的配置选项
+     * @param mapType 地图的类型
+     */
+    static async create(id: string, option: any, mapType: string) {
+        // 判断是否在子路径下
+        const basePath = window.location.pathname.endsWith("/")
+            ? window.location.pathname
+            : window.location.pathname.substring(
+                0,
+                window.location.pathname.lastIndexOf("/") + 1
+            );
+        await loadResource(basePath + "lib/turf/turf.min.js", "js");
+
+        // 1.根据不同的地图类型，加载相应的资源
+        switch (mapType) {
+            case "mars3d":
+
+                await loadResource(basePath + "lib/Cesium/Widgets/widgets.css", "css");
+                await loadResource(basePath + "lib/Cesium/Cesium.js", "js");
+                await loadResource(basePath + "lib/mars3d/mars3d.css", "css");
+                await loadResource(basePath + "lib/mars3d/mars3d.js", "js");
+                await loadResource(
+                    basePath + "lib/mars3d/plugins/heatmap/heatmap.js",
+                    "js"
+                );
+                await loadResource(
+                    basePath + "lib/mars3d/plugins/heatmap/mars3d-heatmap.js",
+                    "js"
+                );
+                break;
+            case "gaode":
+                await loadResource(
+                    `https://webapi.amap.com/maps?v=2.0&key=${option.gaode_key}&plugin=AMap.HeatMap,AMap.MarkerCluster,AMap.MoveAnimation`,
+                    "js"
+                );
+                await loadResource(
+                    "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"
+                );
+                break;
+            case "siji":
+                await loadResource("https://map.sgcc.com.cn/maps?v=3.0.0", "js");
+                await SGMap.tokenTask.login(option.sj_app_key, option.sj_app_secret);
+                await SGMap.plugin([
+                    "SGMap.DrawPolygonHandler",
+                    "SGMap.DrawCircleHandler",
+                    "SGMap.DrawRectangleHandler",
+                    "SGMap.GeocodingTask",
+                ]);
+                break;
+        }
+
+        // 2. 创建地图对象
+        const MapClass = map({id, option, mapType}); // 假设 map 是一个工厂
+        const innerMap = await MapClass.create(id, option); // 真正的地图实例
+        // 3. 创建 HnMap 实例（此时传入 map）
+        HnMap.allowConstruction = true;
+        try {
+            const instance = new HnMap(id, option, mapType, innerMap);
+
+            // 4. ✅ 此时 this.map 已存在，再初始化所有模块
+            instance.initModules();
+            return instance;
+        } finally {
+            HnMap.allowConstruction = false;
+        }
+    }
+
+    // ✅ 添加一个初始化方法，用于注册所有图形类
+    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);
+    }
+}
+
+/**
+ * 检查资源是否已加载
+ * @param path 资源的路径
+ * @returns {boolean} 资源是否已加载
+ */
+const isResourceLoaded = (path: string): boolean => {
+    // 检查脚本
+    const scripts = Array.from(document.getElementsByTagName("script"));
+    if (scripts.some((script) => script.src.includes(path))) {
+        return true;
+    }
+
+    // 检查样式
+    const links = Array.from(document.getElementsByTagName("link"));
+    return links.some((link) => link.href.includes(path));
+};
+
+/**
+ * 加载资源的方法
+ * @param path 资源的路径
+ * @param type 资源的类型，'css'或'js'
+ * @returns {Promise<void>} 加载完成的Promise
+ */
+const loadResource = (path: string, type: string): Promise<void> => {
+    return new Promise<void>((resolve, reject) => {
+        // 如果资源已加载，直接返回
+        if (isResourceLoaded(path)) {
+            resolve();
+            return;
+        }
+        if (type === "css") {
+            const link = document.createElement("link");
+            link.rel = "stylesheet";
+            link.href = path;
+            link.onload = () => resolve();
+            link.onerror = reject;
+            document.head.appendChild(link);
+        } else {
+            const script = document.createElement("script");
+            script.src = path;
+            script.onload = () => resolve();
+            script.onerror = reject;
+            document.body.appendChild(script);
+        }
+    });
+};

package/src/layer/cluster.ts

@@ -0,0 +1,276 @@
+import {deepMerge, wgs84ToGcj02Format} from '../util'
+import Layer from "./layer";
+
+export default (hnMap: any) => {
+
+    const defaultOption = {
+        id: "",
+        position: [],
+        pixelRange: 20,
+        cluster: true,
+        image: '',
+        width: 20,
+        height: 20,
+        data: null
+    }
+    class mars3d_class extends Layer(hnMap) {
+        type: any = 'cluster'
+        id: any = null
+        option: any = JSON.parse(JSON.stringify(defaultOption))
+        config_layer: any = null
+        config_label: any = null
+        children: any = null
+        layerEntity: any = null
+
+        constructor(option: any) {
+            super(option)
+            this.id = option.id
+            this.children = []
+            deepMerge(this.option, option)
+            this.config_layer = this.formatConfigLayer(this.option)
+            this.config_label = this.formatConfigLabel(this.option)
+            this.layerEntity = new mars3d.layer.GraphicLayer(this.config_layer)
+        }
+
+        // 格式化layer配置
+        formatConfigLayer(option: any) {
+            return {
+                id: option.id,
+                cluster: {
+                    enabled: option.cluster,
+                    pixelRange: option.pixelRange
+                }
+            }
+        }
+
+        // 格式化点位配置
+        formatConfigLabel(option: any) {
+            return {
+                id: option.id,
+                image: option.image,
+                width: option.width,
+                height: option.height,
+            }
+        }
+
+        clearEntity() {
+            this.children = []
+            this.layerEntity.clear()
+        }
+
+        addEntity(entity: any) {
+            this.children.push(entity)
+            this.layerEntity.addGraphic(entity.graphic)
+        }
+
+        setPosition(data: any) {
+            this.clearEntity()
+            data.forEach((item: any, index: any) => {
+                let imagePointOption = {
+                    id: this.config_label.id + '_point' + item.id,
+                    position: item.position,
+                    image: this.config_label.image,
+                    height: this.config_label.height,
+                    width: this.config_label.width,
+                    data: item.data
+                }
+                const imagePoint = new hnMap.ImagePoint(imagePointOption);
+                this.addEntity(imagePoint)
+            })
+        }
+
+        destroy() {
+            this.clearEntity()
+            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 = event.graphic.attr
+                return mars3d.Util.getTemplateHtml({title: "详情", template: "all", attr: data})
+            })
+        }
+
+        // 添加自定义dom弹窗
+        addCustomPopup(getCustomDom: any) {
+            this.layerEntity.bindPopup(async (event: any) => {
+                if (event.graphic.attr) {
+                    const data = event.graphic.attr || {};
+                    return await getCustomDom(data);
+                }
+            }, {offsetY: -20});
+        }
+
+        flyTo() {
+            this.layerEntity.flyTo()
+        }
+
+        getEntity(entityParam: any) {
+            let entity
+            if (typeof entityParam == 'string') {
+                entity = this.children.find((v: any) => v.id === entityParam)
+            } else {
+                entity = entityParam
+            }
+            if (!entity) {
+                return Promise.reject(new Error('未找到此图形'))
+            }
+            return entity
+        }
+
+        // 手动打开聚合功能
+        openCluster() {
+            deepMerge(this.option, {cluster: true,})
+            this.config_layer = this.formatConfigLayer(this.option)
+            this.layerEntity.clusterEnabled = true
+        }
+
+        // 手动关闭聚合功能
+        closeCluster() {
+            deepMerge(this.option, {cluster: false,})
+            this.config_layer = this.formatConfigLayer(this.option)
+            this.layerEntity.clusterEnabled = false
+        }
+
+    }
+
+    class gaode_class {
+
+        id: any = null
+        option: any = JSON.parse(JSON.stringify(defaultOption))
+        config: any = null
+        layerEntity: any = null
+        // 创建全局信息窗口实例
+        infoWindow: any = null
+
+        constructor(option: any) {
+            this.id = option.id
+            deepMerge(this.option, option)
+            this.config = this.formatConfig(this.option)
+            this.layerEntity = new AMap.MarkerCluster(hnMap.map.map, this.config.position, this.config);
+        }
+
+        formatConfig(option: any) {
+            const position = option.position.map((item: any, index: any) => {
+                return {
+                    lnglat: wgs84ToGcj02Format(item),
+                    // 添加弹窗属性参数
+                    extData: {
+                        id: this.id + '_point' + index
+                    }
+                }
+            })
+            const count = position.length;
+            const _renderClusterMarker = (context: any) => {
+                var factor = Math.pow(context.count / count, 1 / 18);
+                var div = document.createElement('div');
+                var Hue = 180 - factor * 180;
+                var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)';
+                var fontColor = 'hsla(' + Hue + ',100%,90%,1)';
+                var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
+                var shadowColor = 'hsla(' + Hue + ',100%,90%,1)';
+                div.style.backgroundColor = bgColor;
+                var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
+                div.style.width = div.style.height = size + 'px';
+                div.style.border = 'solid 1px ' + borderColor;
+                div.style.borderRadius = size / 2 + 'px';
+                div.style.boxShadow = '0 0 5px ' + shadowColor;
+                div.innerHTML = context.count;
+                div.style.lineHeight = size + 'px';
+                div.style.color = fontColor;
+                div.style.fontSize = '14px';
+                div.style.textAlign = 'center';
+                context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
+                context.marker.setContent(div)
+
+            }
+
+            const _renderMarker = (context: any) => {
+                let icon = new AMap.Icon({
+                    image: this.option.style.image,
+                    imageSize: new AMap.Size(this.option.style.height, this.option.style.width),
+                    size: new AMap.Size(this.option.style.height, this.option.style.width),
+                })
+                context.marker.setIcon(icon)
+            }
+            return {
+                id: option.id,
+                position,
+                gridSize: option.pixelRange, // 设置网格像素大小
+                clusterByZoomChange: true,
+                renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
+                renderMarker: _renderMarker, // 自定义非聚合点样式
+            }
+        }
+
+        setPosition(position: any) {
+            deepMerge(this.option, {position: position})
+            this.config = this.formatConfig(this.option)
+            this.layerEntity.setData(this.config.position)
+        }
+
+
+        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.position.map((item: any) => {
+                totalLng += item.lnglat.lng;
+                totalLat += item.lnglat.lat;
+            })
+            const centerLng = totalLng / this.config.position.length;
+            const centerLat = totalLat / this.config.position.length;
+            hnMap.map.map.setCenter([centerLng, centerLat])
+        }
+
+        // 添加属性弹窗
+        addPopupByAttr() {
+            if (!this.infoWindow) {
+                this.infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
+            }
+
+            this.layerEntity.on('click', (cluster: any) => {
+                if (cluster.clusterData.length === 1) {
+                    let content = ''
+                    const data = cluster.clusterData[0].extData
+                    for (const key in data) {
+                        content += `<div>${key}: ${data[key]}</div>`
+                    }
+                    this.infoWindow.setContent(content);
+                    this.infoWindow.open(hnMap.map.map, cluster.marker._position);
+                }
+
+            })
+        }
+
+        // 添加自定义dom弹窗
+        addCustomPopup(getCustomDom: any) {
+            if (!this.infoWindow) {
+                this.infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
+            }
+
+            this.layerEntity.on('click', (cluster: any) => {
+                if (cluster.clusterData.length === 1) {
+                    let content = ''
+                    const data = cluster.clusterData[0].extData
+                    const dom = getCustomDom(data);
+                    this.infoWindow.setContent(dom);
+                    this.infoWindow.open(hnMap.map.map, cluster.marker._position);
+                }
+            })
+        }
+
+    }
+
+    const fn:any = {
+        mars3d: mars3d_class,
+        gaode: gaode_class
+    }
+    return fn[hnMap.mapType]
+}

package/src/layer/geoJson.ts

@@ -0,0 +1,174 @@
+import {deepMerge, wgs84ToGcj02Format} from '../util'
+
+let baseGeoData: any = {
+    type: 'FeatureCollection',
+    name: '',
+    crs: {},
+    features: [
+        {
+            type: 'Feature',
+            properties: {},
+            geometry: {
+                type: 'MultiPolygon',
+                coordinates: [[[]]]
+            }
+        }
+    ]
+}
+export default (hnMap: any) => {
+
+    const defaultOption = {
+        id: "",
+        data: baseGeoData,
+        opacity: 1,
+        line: {
+            show: true,
+            color: "#ff00ff",
+            opacity: 1,
+            width: 2,
+        },
+        area: {
+            show: false,
+            color: "#ffff00",
+            opacity: 1,
+        }
+    }
+
+    class mars3d_class {
+        type: any = 'geoJson'
+        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.GeoJsonLayer(this.config)
+        }
+
+        formatConfig(option: any) {
+            return {
+                name: option.id,
+                id: option.id,
+                allowDrillPick: true,
+                data: option.data,
+                symbol: {
+                    styleOptions: {
+                        clampToGround: true,
+                        fill: option.area.show,
+                        randomColor: !!(option.area.show && option.area.color), // 随机色
+                        outline: option.line.show,
+                        opacity: option.opacity,
+                        outlineStyle: {
+                            color: option.line.color,
+                            width: option.line.width,
+                            opacity: option.line.opacity,
+                        },
+                    }
+                },
+                // flyTo: true,
+                // attr: option.data
+            }
+        }
+
+        set(option: any) {
+            deepMerge(this.option, option)
+            this.config = this.formatConfig(this.option)
+            this.layerEntity.setOptions(this.config)
+        }
+
+        customStyle(callback: any) {
+            this.layerEntity.options.symbol.callback = (attr: any) => {
+                return callback(attr)
+            }
+        }
+
+        destroy() {
+            this.layerEntity.remove(true)
+            hnMap.map.layerList = hnMap.map.layerList.filter((v: any) => v.id !== this.id)
+        }
+
+        setData(data: any) {
+            this.layerEntity.loadGeoJSON(data, {clear: true})
+        }
+
+        clear() {
+            this.layerEntity.clear()
+        }
+
+        flyTo() {
+            this.layerEntity.flyTo()
+        }
+
+        // 添加属性弹窗
+        addPopupByAttr() {
+            this.layerEntity.bindPopup((event: any) => {
+                if (event.graphic.attr) {
+                    const data = event.graphic.attr
+                    return mars3d.Util.getTemplateHtml({title: "详情", template: "all", attr: data})
+                }
+            })
+        }
+
+        // 添加自定义dom弹窗
+        addCustomPopup(getCustomDom: any) {
+            this.layerEntity.bindPopup(async (event: any) => {
+                if (event.graphic.attr) {
+                    const data = event.graphic.attr || {};
+                    return await getCustomDom(data);
+                }
+            }, {offsetY: -20});
+        }
+
+    }
+
+    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)
+        }
+
+        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 {}
+        }
+
+        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() {
+
+        }
+
+    }
+
+    const fn: any = {
+        mars3d: mars3d_class,
+        gaode: gaode_class
+    }
+
+    return fn[hnMap.mapType]
+}