csk-gis-frame-work 4.0.0

package/mapboxgl/utils/mapbox.js

@@ -0,0 +1,3821 @@
+import mapConfig from "../../baseSetting/config/mapConfig.js";
+import {
+    base_sources,
+    business_layers,
+    business_sources,
+    Dark_Layers,
+    Dark_Sources,
+    Image_Layers,
+    LayerConfig,
+    Light_Layers,
+    Light_Sources,
+    Vector_Layers,
+} from "../../baseSetting/gis-data/sources_layers.js";
+import {
+    Dark_Style,
+    Light_Style,
+} from "../../baseSetting/style/DevMapConfig.js";
+import TokenUtils from "../../baseSetting/utils/TokenUtils.js";
+import {Scene, Mapbox} from '@antv/l7'
+
+// 图标资源
+const point_icon = require('../../baseSetting/images/map/point.png');
+const img_todo = require('../../baseSetting/images/map/todo.png');
+const img_done = require('../../baseSetting/images/map/done.png');
+const img_invalid = require('../../baseSetting/images/map/invalid.png');
+const img_error = require('../../baseSetting/images/map/error.png');
+let map = null
+let antv7Scene = null
+let pendingRequests = new Set();
+const throttleDelay = 300; // 300ms 内相同瓦片不重复请求
+
+// 颜色配置 TODO: 是否增加亮色/暗色的配置
+const actual_color = '#7ed321';
+const plan_color_valid = '#3a6bdb';
+const plan_color_invalid = '#9b9b9b';
+
+/**
+ * MapboxGL 地图工具集
+ * 按 map layer toolFunction 分类组织的工具函数集合
+ *
+ * @description
+ *   一、地图初始化与生命周期     - create / loadMapboxResources / initMap / createAntVL7Scene / getMap / getAntV7Scene / disposeMap
+ *   二、瓦片坐标与边界工具       - isValidTile / tile2lonlat / boundsIntersect
+ *   三、底图与图层源管理         - formatBaseSource / getGeoserverSources / getGeoserverSource / updateBaseMapVisibility / addTiles / changeMap / clearOverlays / updateEventAndAlarmLayerIndex / switchLayerVisible / addGeojsonSourceToMap
+ *   四、图标与标记               - getFeature / hideLogo / addImageSource / addMarker
+ *   五、服务URL构建              - joinWmtsUrl / joinTmsUrl / getTmsUrl / joinWfsUrl / getWfsQueryUrl
+ *   六、样式与主题切换           - setStyle / changeStyle / _changeStyle / setLayoutProperty / setPaintProperty / setFog / _setFog / setDEM / _loadDEM
+ *   七、巡检业务绘制             - setZoom / drawPatrolTask / drawPatrol / drawPatrolTaskInGaoDe / drawPatrolInGaoDe / placePoint
+ *   八、地图交互与搜索(POI)      - addSearch / executeSearch / drawPOIResults / clearPOIResults / showSearchResults / clearSearchResults / focusOnPOI
+ *   九、点位标记与拖拽           - getMapboxPoints / hitPoint / _enablePointDragging
+ *   十、绘制工具(polyline)       - renderLine / _enableLineEditing / _disableLineEditing / removeLine
+ *   十一、绘制工具(point)        - renderPoint / _enablePointEditing / _disablePointEditing / removePoint
+ *   十二、绘制工具(polygon)      - renderPolygon / _enablePolygonEditing / _disablePolygonEditing / removePolygon
+ *   十三、网格与辅助工具         - _drawGridWithCenterLabels / clearGridWithCenterLabels / countMidFromLine / resetCenterAndZoom
+ *   十四、相机与视角控制         - enableScrollWheelZoom / initialize / flyInitialize / initBearing / overlook / flyToOrigin / flyToTarget / flyTo / changeMode / locationArea
+ *   十五、地图导出               - _compositeSnapshotCanvas / exportBlob / exportBase64
+ */
+export default {
+    // ==================== 配置属性 ====================
+    workspace: mapConfig.workspace,
+    mapType: mapConfig.mapType || "vector",
+    vectorSignalStr: ['vec', 'cva'],
+    imageSignalStr: ['img', 'cia'],
+    map_srid: mapConfig.map_srid,
+    business_srid: mapConfig.business_srid,
+    mbMap: null,
+    styleUrl: mapConfig.mapUrl + '/mapbox-gl/style',
+    sceneConfig: mapConfig.sceneConfig,
+    opts: {},
+    _customPopup: null,
+
+    // ==================== 一、地图初始化与生命周期 ====================
+
+    /**
+     * 创建地图实例
+     * theme = 'dark'时 将使用离线暗色底图瓦片,将mapConfig中的isOnline设置为false,此时默认使用文件服务器上的暗色瓦片资源
+     * theme = 'light'时 将使用在线亮色底图瓦片,将mapConfig中的isOnline设置为true,此时默认使用天地图资源
+     * theme = 'light'时 将使用在线亮色底图瓦片,将mapConfig中的isOnline设置为false,此时默认使用文件服务器上的亮色瓦片资源
+     * @param opts
+     * @param callback
+     */
+    create: function (opts, callback) {
+        this.opts = opts
+        if (mapConfig.noMap) {
+            this.$message.info("未配置地图")
+            alert("未配置地图")
+        } else {
+            if (typeof mapboxgl == 'undefined') {
+                // 使用 Promise 确保资源加载完成后再执行后续逻辑
+                this.loadMapboxResources().then(() => {
+                    this.initMap(opts, callback);
+                }).catch((error) => {
+                    console.error("地图资源加载失败:", error);
+                    callback && callback();
+                });
+            } else {
+                this.initMap(opts, callback);
+            }
+        }
+    },
+
+
+    loadMapboxResources: function () {
+        return new Promise((resolve, reject) => {
+            const script = document.createElement("script");
+            script.src = mapConfig.mapUrl + "/mapbox-gl/mapbox-gl.js";
+
+            const link = document.createElement("link");
+            link.href = mapConfig.mapUrl + "/mapbox-gl/mapbox-gl.css";
+            link.rel = "stylesheet";
+
+            // 风格样式文件
+            const linkSearch = document.createElement("link");
+            linkSearch.href = mapConfig.mapUrl + "/mapbox-gl/gis-" + this.opts.theme + ".css";
+            linkSearch.rel = "stylesheet";
+
+            let scriptLoaded = false;
+            let linkLoaded = false;
+            let linkSearchLoaded = false;
+
+            const checkComplete = () => {
+                if (scriptLoaded && linkLoaded && linkSearchLoaded) {
+                    resolve();
+                }
+            };
+
+            script.onload = () => {
+                scriptLoaded = true;
+                checkComplete();
+            };
+
+            link.onload = () => {
+                linkLoaded = true;
+                checkComplete();
+            };
+
+            linkSearch.onload = () => {
+                linkSearchLoaded = true;
+                checkComplete();
+            };
+
+            script.onerror = () => reject(new Error("Mapbox GL JS 加载失败"));
+            link.onerror = () => reject(new Error("Mapbox GL CSS 加载失败"));
+            linkSearch.onerror = () => reject(new Error("gis公共样式 加载失败"));
+
+            document.body.appendChild(script);
+            document.body.appendChild(link);
+            document.body.appendChild(linkSearch);
+        });
+    },
+
+    /**
+     * 初始化地图
+     * @param opts
+     * @param callback
+     */
+    initMap: function (opts, callback) {
+        let baseSources = {}, baseLayers = [];
+        const customStyle = opts.theme === "dark" ? Dark_Style : Light_Style;
+
+        if (mapConfig.isOnline) {
+            const basemapType = mapConfig.map_srid === 'EPSG:3857' ? 'w' : 'c';
+
+            baseSources = {};
+            baseLayers = [];
+
+            this.vectorSignalStr.forEach(signal => {
+                baseSources['tdt_vec_' + signal + '_tiles'] = {
+                    type: 'raster',
+                    tiles: [
+                        'https://t0.tianditu.gov.cn/' + signal + '_' + basemapType + '/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=' + signal + '&STYLE=default&TILEMATRIXSET=' + basemapType + '&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=' + TokenUtils.TDT_token,
+                    ],
+                    scheme: 'xyz',
+                    minzoom: 0,
+                    maxzoom: mapConfig.maxOnlineZoom,
+                    tileSize: 256
+                }
+                baseLayers.push({
+                    id: 'tdt_vec_' + signal + '_tiles',
+                    type: 'raster',
+                    source: 'tdt_vec_' + signal + '_tiles',
+                    minzoom: 0,
+                    maxzoom: mapConfig.maxOnlineZoom,
+                })
+            })
+
+            this.imageSignalStr.forEach(signal => {
+                baseSources['tdt_img_' + signal + '_tiles'] = {
+                    type: 'raster',
+                    tiles: [
+                        'https://t0.tianditu.gov.cn/' + signal + '_' + basemapType + '/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=' + signal + '&STYLE=default&TILEMATRIXSET=' + basemapType + '&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=' + TokenUtils.TDT_token,
+                    ],
+                    scheme: 'xyz',
+                    minzoom: 0,
+                    maxzoom: mapConfig.maxOnlineZoom,
+                    tileSize: 256
+                }
+                baseLayers.push({
+                    id: 'tdt_img_' + signal + '_tiles',
+                    type: 'raster',
+                    source: 'tdt_img_' + signal + '_tiles',
+                    minzoom: 0,
+                    maxzoom: mapConfig.maxOnlineZoom,
+                })
+            })
+        } else {
+            baseSources = opts.theme === "dark" ? this.getGeoserverSources(Dark_Sources) : {...this.formatBaseSource(base_sources), ...this.getGeoserverSources(Light_Sources)};
+            baseLayers = opts.theme === "dark" ? Dark_Layers : Light_Layers;
+        }
+
+        // let businessSources = this.getGeoserverSources(business_sources[opts.theme])
+        // let businessLayers = business_layers[opts.theme];
+        let businessLayers = [];
+        const mapId = opts.mapId;
+
+        mapboxgl.accessToken = TokenUtils.MapboxGL_AccessToken;
+        console.log('baseSources, baseLayers', baseSources, baseLayers);
+        mapboxgl.config.MAX_PARALLEL_IMAGE_REQUESTS = 256;
+
+        map = new mapboxgl.Map({
+            container: mapId,
+            minZoom: mapConfig.minZoom,
+            maxZoom: mapConfig.isOnline ? mapConfig.maxOnlineZoom : mapConfig.maxZoom,
+            zoom: mapConfig.zoom,
+            center: mapConfig.center,
+            maxBounds: [
+                [mapConfig.mapExtent[0], mapConfig.mapExtent[1]],
+                [mapConfig.mapExtent[2], mapConfig.mapExtent[3]]
+            ],
+            pitch: mapConfig.pitch,
+            bearing: mapConfig.bearing,
+            preserveDrawingBuffer: true,
+            constrainMode: 'width-and-height',
+            renderWorldCopies: false,
+            dragRotate: false, // 允许拖动旋转
+            touchZoom: true,
+            touchRotate: false,
+            style: {
+                version: 8,
+                name: "mb_map_style",
+                sprite: this.styleUrl + "/sprite/" + opts.theme + "/sprite",
+                glyphs: this.styleUrl + "/fonts/{fontstack}/{range}.pbf",
+                transition: {
+                    duration: 300,
+                    delay: 0,
+                },
+                sources: {
+                    ...baseSources,
+                    // ...businessSources,
+                },
+                layers: baseLayers
+            },
+            attributionControl: false,
+            // 👇 在这里配置 transformRequest
+            transformRequest: (url, resourceType) => {
+                // 仅处理瓦片请求 (可选，避免影响字体、精灵图等其他资源)
+                if (resourceType === 'Tile') {
+                    // 1. 判断 URL 是否包含您的瓦片服务地址
+                    if (url.includes('.pbf')) {
+                        // 2. 尝试解析 URL 中的 z, x, y 参数
+                        const urlObj = new URL(url);
+                        const pathParts = urlObj.pathname.split('/');
+                        const z = parseInt(pathParts[pathParts.length - 3]); // 根据实际路径结构调整
+                        const x = parseInt(pathParts[pathParts.length - 2]);
+                        const y = parseInt(pathParts[pathParts.length - 1].split('.')[0]);
+
+                        // 3. 在这里写您的逻辑：判断 z/x/y 是否在有效范围内
+                        this.isValidTile(z, x, y, url)
+                    }
+                }
+                // 对于正常的请求，直接返回 url (或不做处理)
+                // return { url: url };
+            }
+        });
+
+        this.setStyle(map);
+        this.addImageSource(map)
+        map._customStyle = customStyle
+
+        map.on('load', () => {
+            if (mapConfig.isOnline) {
+                this.updateBaseMapVisibility(this.mapType);
+            }
+
+            if (businessLayers.length > 0) {
+                this.addBusinessLayer(map, businessLayers);
+            }
+
+            map.on('click', (pos) => {
+                window.currentLocation = [pos.lngLat.lng, pos.lngLat.lat]
+            })
+
+            map.on('zoom', () => {
+                const currentZoom = map.getZoom();
+                if (currentZoom > mapConfig.maxZoom) {
+                    map.setZoom(mapConfig.maxZoom);
+                }
+            });
+
+            map.on('zoomend', () => {
+                const currentZoom = map.getZoom();
+                if (currentZoom >= mapConfig.maxZoom) {
+                    map.flyTo({
+                        zoom: mapConfig.maxZoom,
+                        duration: 0
+                    });
+                }
+            });
+
+
+            if (this.sceneConfig.useAntVL7Scene) {
+                antv7Scene = this.createAntVL7Scene(opts.mapId, map)
+            }
+
+            this.hideLogo()
+            map.resize()
+
+            if (antv7Scene) {
+                antv7Scene.on('loaded', () => {
+                    callback && callback(map, antv7Scene);
+                })
+            } else {
+                callback && callback(map, null);
+            }
+
+        });
+
+        //@csk 瓦片请求优化（节流）
+        map.on('tile_request', (e) => {
+            const url = e.url;
+            if (pendingRequests.has(url)) {
+                e.preventDefault(); // 阻止重复请求
+                return;
+            }
+            pendingRequests.add(url);
+            setTimeout(() => pendingRequests.delete(url), throttleDelay);
+        });
+    },
+
+    createAntVL7Scene: function (mapId, map) {
+        // 立即返回 scene 对象，外部可以通过 scene.on('loaded') 监听加载完成
+        return new Scene({
+            id: mapId,
+            antialias: true, // 👈 关键！启用硬件抗锯齿
+            preserveDrawingBuffer: true,
+            map: new Mapbox({
+                mapInstance: map,
+            }),
+            WebGLParams: {
+                antialias: true
+            },
+            // 关闭默认 L7 Logo
+            logoVisible: false,
+        });
+    },
+
+
+    getMap: function () {
+        return map;
+    },
+
+
+    getAntV7Scene: function () {
+        return antv7Scene;
+    },
+
+
+    disposeMap: function () {
+        if (map) {
+            map.remove();
+        }
+    },
+
+
+    // ==================== 二、瓦片坐标与边界工具 ====================
+
+    isValidTile: function (z, x, y, url) {
+        // 在这里写你的判断逻辑
+        // 例如：mapConfig.mapExtent获取地图的经纬度范围从而判断z,x,y是否在有效范围内,如果是返回正确的url,否则返回一个空的图片
+        const mapBounds = mapConfig.mapExtent;
+        const tileBounds = this.tile2lonlat(x, y, z);
+        if (this.boundsIntersect(tileBounds, mapBounds)) {
+            return {
+                url: url
+            }
+        } else {
+            // 返回一个空的透明图片 Data URL，阻止实际的网络请求
+            return {
+                url: 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
+            };
+        }
+    },
+
+
+    tile2lonlat: function (x, y, z) {
+        // 计算瓦片左上角的经纬度
+        const n = Math.pow(2, z);
+        const lon1 = (x / n) * 360 - 180;
+        const lat1 = Math.atan(Math.sinh(Math.PI * (1 - 2 * y / n))) * (180 / Math.PI);
+
+        // 计算瓦片右下角的经纬度
+        const lon2 = ((x + 1) / n) * 360 - 180;
+        const lat2 = Math.atan(Math.sinh(Math.PI * (1 - 2 * (y + 1) / n))) * (180 / Math.PI);
+
+        // Mapbox GL JS 使用 TMS 方案，y 轴是反的，需要转换
+        // 如果你的服务是 XYZ 方案，请注释下面的 lat 转换
+        const tileSize = 256;
+        const tileCount = Math.pow(2, z);
+        const yTMS = tileCount - 1 - y;
+
+        // 重新计算 TMS 对应的经纬度
+        const lat1TMS = Math.atan(Math.sinh(Math.PI * (1 - 2 * yTMS / n))) * (180 / Math.PI);
+        const lat2TMS = Math.atan(Math.sinh(Math.PI * (1 - 2 * (yTMS + 1) / n))) * (180 / Math.PI);
+
+        return [lon1, lat2TMS, lon2, lat1TMS];
+    },
+
+
+    boundsIntersect: function (bounds1, bounds2) {
+        // bounds 格式: [minLng, minLat, maxLng, maxLat]
+        return !(
+                bounds1[0] > bounds2[2] || // 左 > 右
+                bounds1[2] < bounds2[0] || // 右 < 左
+                bounds1[1] > bounds2[3] || // 下 > 上
+                bounds1[3] < bounds2[1]    // 上 < 下
+        );
+    },
+
+
+    // ==================== 三、底图与图层源管理 ====================
+
+    formatBaseSource: function (sources) {
+        for (let lyrName in sources) {
+            // 瓦片服务地址为空时，使用默认地址，否则使用geoserver地址
+            if (!sources[lyrName].hasOwnProperty('tiles')) {
+                let tiles = this.joinTmsUrl(lyrName);
+                sources[lyrName].tiles = [tiles];
+            }
+        }
+        return sources
+    },
+
+
+    getGeoserverSources: function (configs) {
+        const dataSources = {};
+        configs.filter(src => !src.category).forEach((ds) => {
+            // 获取数据源对象
+            const sourceObj = this.getGeoserverSource(ds);
+            if (sourceObj) {
+                dataSources[ds.id] = sourceObj;
+            }
+        });
+
+        return dataSources;
+    },
+
+
+    getGeoserverSource: function (options) {
+        switch (options.type) {
+            case 'raster': { // GeoServer-栅格瓦片服务
+                return {
+                    type: options.type,
+                    scheme: options.scheme || 'xyz',
+                    tiles: [
+                        this.joinWmtsUrl(options.geoLayer, options.workspace)
+                    ],
+                    minzoom: options.minZoom || 0,
+                    maxzoom: options.maxZoom || 22
+                };
+            }
+            case 'vector': { // GeoServer-矢量瓦片服务
+                return {
+                    type: options.type,
+                    scheme: options.scheme || 'tms',
+                    tiles: [
+                        this.joinTmsUrl(options.geoLayer, options.workspace)
+                    ],
+                    minzoom: options.minZoom || 0,
+                    maxzoom: options.maxZoom || 22
+                };
+            }
+            case 'geojson': { // GeoServer-WFS服务
+                return {
+                    type: options.type,
+                    data: this.joinWfsUrl(options.geoLayer, options.category)
+                };
+            }
+            default:
+                return null;
+        }
+    },
+
+    /**
+     * 更新底图可见性
+     * @param {String} type - 底图类型：'vector' 或 'image'
+     */
+    updateBaseMapVisibility: function (type) {
+        if (!map || !mapConfig.isOnline) return;
+
+        const vecLayerIds = this.vectorSignalStr.map(signal => 'tdt_vec_' + signal + '_tiles');
+        const imgLayerIds = this.imageSignalStr.map(signal => 'tdt_img_' + signal + '_tiles');
+
+        vecLayerIds.forEach(layerId => {
+            if (map.getLayer(layerId)) {
+                const visibility = type === 'vector' ? 'visible' : 'none';
+                map.setLayoutProperty(layerId, 'visibility', visibility);
+            }
+        });
+
+        imgLayerIds.forEach(layerId => {
+            if (map.getLayer(layerId)) {
+                const visibility = type === 'image' ? 'visible' : 'none';
+                map.setLayoutProperty(layerId, 'visibility', visibility);
+            }
+        });
+    },
+
+    addTiles: function (map) {
+        if (!map) return;
+
+        // 添加自定义瓦片图层
+        map.addSource('custom-tiles', {
+            type: 'raster',
+            tiles: ['/images/tiles/{z}/{x}/{y}.png'],
+            tileSize: 256
+        });
+
+        map.addLayer({
+            id: 'custom-tiles-layer',
+            type: 'raster',
+            source: 'custom-tiles',
+            minzoom: 0,
+            maxzoom: 22
+        });
+    },
+
+    /*
+     * 切换底图
+     * @param {String} type -目标底图类型
+    */
+    changeMap: function (type) {
+        if (!map || type === this.mapType) return;
+
+        if (mapConfig.isOnline) {
+            this.updateBaseMapVisibility(type);
+        } else {
+            let changedLayers = null;
+            switch (type) {
+                case 'vector':
+                    changedLayers = Vector_Layers;
+                    break;
+                case 'image':
+                    changedLayers = Image_Layers;
+                    break;
+                default:
+                    return;
+            }
+
+            changedLayers.forEach(layer => {
+                if (map.getLayer(layer.id)) {
+                    map.setLayoutProperty(layer.id, 'visibility', layer.visibility);
+                }
+            });
+        }
+
+        this.mapType = type;
+    },
+
+    addBusinessLayer: function (map, businessLayers) {
+        businessLayers.forEach(layer => {
+            map.addLayer(layer)
+        })
+    },
+
+
+    clearOverlays: function () {
+        // 批量清除所有巡检相关的动态图层（ID包含patrol-track-前缀）
+        const layers = map.getStyle().layers;
+        layers.forEach(layer => {
+            if (layer.id.includes('patrol-track-')) {
+                map.removeLayer(layer.id);
+                if (layer.source && layer.source.includes('patrol-track-')) {
+                    map.removeSource(layer.source);
+                }
+            }
+        });
+    },
+
+
+    updateEventAndAlarmLayerIndex: function (layerIds) {
+        const layers = map.getStyle().layers;
+        layerIds.forEach(layerId => {
+            map.moveLayer(layerId, layers[layers.length - 1].id);
+        });
+    },
+
+    switchLayerVisible: function (layerIdArray = []) {
+        const busilayers = business_layers[this.opts.theme];
+        if (layerIdArray.length === 0) {
+            busilayers.forEach(layer => {
+                map.setLayoutProperty(layer.id, 'visibility', 'visible');
+            })
+        } else {
+            busilayers.forEach(layer => {
+                if (layerIdArray.includes(layer.id)) {
+                    map.setLayoutProperty(layer.id, 'visibility', 'visible');
+                } else {
+                    map.setLayoutProperty(layer.id, 'visibility', 'none');
+                }
+            })
+        }
+    },
+
+    addGeojsonSourceToMap: function (sourceId, geojson) {
+        gisMap.addSource(sourceId, {
+            type: 'geojson',
+            data: geojson
+        })
+    },
+
+    // 源数据获取后统一加载到地图出口
+    addLayerToMap: function (sourceId, styleConfig) {
+        const layerConfig = {...styleConfig, source: sourceId}
+        console.log('layerConfig', layerConfig);
+        gisMap.addLayer(layerConfig)
+    },
+
+    // ==================== 四、图标与标记 ====================
+
+    getFeature: function (e) {
+        // 获取点击位置的要素
+        const features = map.queryRenderedFeatures(e.point);
+
+        if (features.length > 0) {
+            const feature = features[0];
+            console.log('点击的要素:', feature.properties);
+            return feature
+        }
+    },
+
+
+    hideLogo: function () {
+        console.log('logo is hidden')
+        let controls = map._controls;
+        controls.forEach(control => {
+            // 去除logo控件
+            if ('_updateLogo' in control) {
+                map.removeControl(control)
+            }
+
+            // 去除attribute控件
+            if ('_attribHTML' in control) {
+                map.removeControl(control)
+            }
+        })
+    },
+
+
+    addImageSource: function (map) {
+        // 添加图标到地图
+        if (!map.hasImage('img_done')) {
+            map.loadImage(img_done, (error, image) => {
+                if (error) throw error;
+                map.addImage('img_done', image);
+            });
+        }
+
+        if (!map.hasImage('img_error')) {
+            map.loadImage(img_error, (error, image) => {
+                if (error) throw error;
+                map.addImage('img_error', image);
+            });
+        }
+
+        if (!map.hasImage('img_invalid')) {
+            map.loadImage(img_invalid, (error, image) => {
+                if (error) throw error;
+                map.addImage('img_invalid', image);
+            });
+        }
+
+        if (!map.hasImage('img_todo')) {
+            map.loadImage(img_todo, (error, image) => {
+                if (error) throw error;
+                map.addImage('img_todo', image);
+            });
+        }
+    },
+
+
+    addMarker: function (data, customIcon, customIconName) {
+        console.log('addMarker>>>>>>')
+        // 清除之前的标记图层和数据源
+        if (map.getLayer('marker-point')) {
+            map.removeLayer('marker-point');
+        }
+        if (map.getSource('marker-point')) {
+            map.removeSource('marker-point');
+        }
+
+        if (data.longitude && data.latitude) {
+            // 确保图标已加载到地图中
+            if (!map.hasImage('add_marker_icon')) {
+                map.loadImage(point_icon, (error, image) => {
+                    if (error) throw error;
+                    map.addImage('add_marker_icon', image);
+                });
+            }
+
+            if (!map.hasImage('custom-icon')) {
+                map.loadImage(customIcon, (error, image) => {
+                    if (error) throw error;
+                    map.addImage(customIconName || 'custom-icon', image);
+                });
+            }
+
+            // 创建GeoJSON数据源
+            const geojson = {
+                type: 'FeatureCollection',
+                features: [{
+                    type: 'Feature',
+                    geometry: {
+                        type: 'Point',
+                        coordinates: [data.longitude, data.latitude]
+                    },
+                    properties: {}
+                }]
+            };
+
+            // 添加数据源
+            map.addSource('marker-point', {
+                type: 'geojson',
+                data: geojson
+            });
+
+            // 添加图层显示标记点（使用自定义图标）
+            map.addLayer({
+                id: 'marker-point',
+                type: 'symbol',
+                source: 'marker-point',
+                layout: {
+                    'icon-image': customIconName || 'add_marker_icon',
+                    'icon-size': 1,
+                    'icon-offset': [4, -19]
+                }
+            });
+
+            // 设置地图中心点和缩放级别
+            map.setCenter([data.longitude, data.latitude]);
+            map.setZoom(data.zoom || mapConfig.maxZoom || 18);
+        }
+    },
+
+    /**
+     * 添加自定义弹窗到地图
+     * @param {Array|Object} lngLat - 经纬度坐标 [lng, lat] 或 { lng, lat }
+     * @param {HTMLElement|String} content - 弹窗内容（DOM 元素或 HTML 字符串）
+     * @param {String} className - 自定义 CSS 类名，默认 'gis-custom-popup'
+     * @param {Array}  addOnOffset - 在基础偏移 [37, -107] 上的补充偏移 [dx, dy]
+     * @returns {mapboxgl.Popup} popup 实例
+     */
+    addCustomPopup: function (lngLat, content, className, addOnOffset = [0, 0]) {
+        // 移除之前的弹窗
+        this.removeCustomPopup()
+
+        const BASE_OFFSET_X = 37    // 弹窗修饰 SVG 圆点水平偏移
+        const BASE_OFFSET_Y = -107  // 弹窗修饰 SVG 圆点垂直偏移
+
+        const popup = new mapboxgl.Popup({
+            closeButton: false,
+            closeOnClick: false,
+            anchor: 'bottom-left',
+            offset: [BASE_OFFSET_X + (addOnOffset[0] || 0), BASE_OFFSET_Y + (addOnOffset[1] || 0)],
+            maxWidth: 'none',
+            className: className || 'gis-custom-popup'
+        })
+                .setLngLat(lngLat)
+                .setDOMContent(content)
+                .addTo(map)
+
+        this._customPopup = popup
+        return popup
+    },
+
+    /**
+     * 移除当前自定义弹窗
+     */
+    removeCustomPopup: function () {
+        if (this._customPopup) {
+            this._customPopup.remove()
+            this._customPopup = null
+        }
+    },
+
+
+    // ==================== 五、服务URL构建 ====================
+
+    joinWmtsUrl: function (layerName) {
+        return (
+                mapConfig.mapUrl +
+                "/geoserver/gwc/service/wmts?request=GetTile" +
+                "&service=WMTS" +
+                "&version=1.0.0" +
+                "&layer=" +
+                this.workspace +
+                ":" +
+                layerName +
+                "&style=" +
+                "&tilematrixset=" +
+                this.map_srid +
+                "&tilematrix=" +
+                this.map_srid +
+                ":{z}" +
+                "&format=image/png" +
+                "&tilecol={x}" +
+                "&tilerow={y}"
+        );
+    },
+
+
+    joinTmsUrl: function (layerName) {
+        return (
+                mapConfig.mapUrl +
+                "/geoserver/gwc/service/tms/1.0.0/" +
+                this.workspace +
+                ":" +
+                layerName +
+                "@" +
+                this.map_srid +
+                "@pbf/{z}/{x}/{y}.pbf"
+        );
+    },
+
+
+    getTmsUrl: function (z, x, y) {
+        const ymax = Math.pow(2, z) - 1;
+        const y_tms = ymax - y;
+        return mapConfig.mapUrl + `/gis-data/shenzhen/${z}/${x}/${y_tms}.png`;
+    },
+
+    /**
+     * 拼接WFS服务地址
+     * @param {String} layerName -图层名称
+     * @param {String} category -类别(pipeline、manhole等)
+     */
+    joinWfsUrl(layerName, category = null) {
+        let url = mapConfig.mapUrl +
+                "/geoserver/" +
+                this.workspace +
+                "/ows?request=GetFeature" +
+                "&service=WFS" +
+                "&version=1.1.0" +
+                "&typeName=" +
+                this.workspace +
+                ":" +
+                layerName +
+                "&outputFormat=application/json" +
+                "&srsName=" +
+                this.map_srid;
+
+        if (category) {
+            // 全局图层管理器入口
+            const layers = LayerConfig.Layers.filter((lc) => {
+                return lc.parent === category;
+            });
+            if (layers.length > 0 &&
+                    layers[0].fields && layers[0].fields.length > 0) {
+                url += "&propertyName=geom,";
+                url += layers[0].fields;
+            }
+        }
+
+        return url;
+    },
+
+    getWfsQueryUrl: function () {
+        return (
+                mapConfig.mapUrl + "/geoserver/" + this.workspace +
+                "/ows?service=WFS&version=1.0.0" +
+                "&request=GetFeature" +
+                "&outputFormat=application/json" +
+                "&maxFeatures=2500" +
+                "&srsName=" + this.map_srid +
+                "&typeName="
+        );
+    },
+
+
+    // ==================== 六、样式与主题切换 ====================
+
+    setStyle: function (map) {
+        if (!map) return;
+
+        // 独立设置需要的mapbox内置样式
+        // 默认的base64 png图片 并进行addImage操作 iVBORw0KGgoAAAANSUhEUgAAAAsAAAArCAYAAABm8CLRAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAd5JREFUeNqkld9LAlEUxr93Z3fHXV1bE1JLMoheIh/6B/oHIiilICjohR76A4KgHnroTwh6CIKgICIzKCvNMnVdXd3ZnbnndIcZZ3bWEPoNDnfuOed855tzzz1XGGNgGIbxf8DpdF5omoZer/eXpmmYTCaIRCJot9vwer3wer0wmUwAgFarhXa7jXa7jVarhXa7jU6ng263i16vh36/DwAYDAaIRCKIRCJE0zQMDAzAarWCZVlgjIFSCkopKKXgeR6CICAIAjiOA8dxIIQAQghIkoQkSSBJEkRRhCiKEEURPM+DYRgwDAOGYUBRFCiKAkVRoKoqVFUFpRSapkHzPGiapnnDMAzDMAzDMIzf8M8BXq8XPp8PPp8Poij+9Xg8hkajgXq9jkajgXq9jnq9jmazCUIIGGOglILneQiCAEEQIAgCOI4Dx3EQBAEcxyEQCECWZUiShEAgALvdDovFAovFApvNBovFAkmSIEmSJEnSNVmW/1JV9Zym6XOaptc0TT/QNP1A0/QDTdMPNE0/0DR9T9P0PU3TdzRN39I0fUPT9DVN01c0TV/SNH1B0/Q5TdOnNE2f0DR9TNP0EU3ThzRNH9A0vU/T9B5N07s0Te/SNL1D0/Q2TdNbNE1v0jS9QdP0Ok3TazRNr9I0vULT9DJN00s0TS/SNL1A0/Q8TdNzNE3P0jQ9Q9P0NE3TUzRN/6Rp+jhN00c0TR/SNH1A0/Q+TdN7NE3v0jS9Q9P0Nk3TWzRNb9I0vUHT9DpN02s0Ta/SNL1C0/QyTdNLNE0v0jS9QNP0PE3TczRNz9I0PUMmk0kkEgnE43HE43HE43HEYjFomgZKKSilIIQAAARBAM/zEAQBgiCA53nwPA+e58HzPHiehyAI4DgOHMeB53lwHAeO48BxHHiehyAI4DgOHMeB53nwPA9BECAIAjiOA8dx4DgOPM+D53nwPA9BECAIAjiOA8dx4DgOHMeB53nwPA9BECAIAjiOA8dx4DgOHMeB53nwPA9BECAIAjiOA8dx4DgOHMeB53nwPA9BECAIAjiOA8dx4DgOHMeB53nwPA9BECAIAjiOA8dx4DgOHMeB53nwPA9BECAIAjiOA8dx4DgOHMeB53nwPA9BECAIAjiOA8dx4DgOHMeB53nwPA9BECAIAjiOA8dx4DgOHMeB53nwPA9BECAIAjiOA8dx4DgOHMeB53nwPA9BECAIAjiOA8dx4DgOHMeB53nwPA9BECAIAjiOA8dx4DgOHMeB53nwPA9BECAIAjiOA8dx4DgOHMeB/wD/BGAAuJZK3XZCtKsAAAAASUVORK5CYII=
+        // 添加基于base64的自定义图片资源
+        if (!map.hasImage('custom_circle_icon')) {
+            const img = new Image();
+            img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAArCAYAAABm8CLRAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAd5JREFUeNqkld9LAlEUxr93Z3fHXV1bE1JLMoheIh/6B/oHIiilICjohR76A4KgHnroTwh6CIKgICIzKCvNMnVdXd3ZnbnndIcZZ3bWEPoNDnfuOed855tzzz1XGGNgGIbxf8DpdF5omoZer/eXpmmYTCaIRCLot9vwer3wer0wmUwAgFarhXa7jXa7jVarhXa7jU6ng263i16vh36/DwAYDAaIRCKIRCJE0zQMDAzAarWCZVlgjIFSCkopKKXgeR6CICAIAjiOA8dxIIQAQghIkoQkSSBJEkRRhCiKEEURPM+DYRgwDAOGYUBRFCiKAkVRoKoqVFUFpRSapkHzPGiapnnDMAzDMIzDMIzf8M8BXq8PPp8PPp8Poij+9Xg8hkajgXq9jkajgXq9jnq9jmazCUIIGGOglILneQiCAEEQIAgCOI4Dx3EQBAEcxyEQCECWZUiShEAgALvdDovFAovFApvNBovFAkmSIEmSJEnSNVmW/1JV9Zym6XOaptc0TT/QNP1A0/QDTdMPNE0/0DR9T9P0PU3TdzRN39I0fUPT9DVN01c0TV/SNH1B0/Q5TdOnNE2f0DR9TNP0EU3ThzRNH9A0vU/T9B5N07s0Te/SNL1D0/Q2TdNbNE1v0jS9QdP0Ok3TazRNr9I0vULT9DJN00s0TS/SNL1A0/Q8TdNzNE3P0jQ9Q9P0NE3TUzRN/6Rp+jhN00c0TR/SNH1A0/Q+TdN7NE3v0jS9Q9P0Nk3TWzRNb9I0vUHT9DpN02s0Ta/SNL1C0/QyTdNLNE0v0jS9QNP0PE3TczRNz9I0PUMmk0kkEgnE43HE43HEYjFomgZKKSilIIQAAARBAM/zEAQBgiCA53nwPA+e58HzPHiehyAI4DgOHMeB53lwHAeO48BxHHiehyAI4DgOHMeB53nwPA9BECAIAjiOA8dx4DgOPM+D53nwPA9BECAIAjiOA8dx4DgOHMeB53nwPA9BECAIAjiOA8dx4DgOHMeB53nwPA9BECAIAjiOA8dx4DgOHMeB53nwPA9BECAIAjiOA8dx4DgOHMeB53nwPA9BECAIAjiOA8dx4DgOHMeB53nwPA9BECAIAjiOA8dx4DgOHMeB53nwPA9BECAIAjiOA8dx4DgOHMeB53nwPA9BECAIAjiOA8dx4DgOHMeB53nwPA9BECAIAjiOA8dx4DgOHMeB53nwPA9BECAIAjiOA8dx4DgOHMeB/wD/BGAAuJZK3XZCtKsAAAAASUVORK5CYII=';
+            img.onload = () => {
+                map.addImage('custom_circle_icon', img);
+            };
+        }
+
+        // Mapbox GL JS使用不同的样式设置方式
+        // 这里可以设置预定义样式或自定义样式
+        // map.setStyle('mapbox://styles/mapbox/streets-v11');
+    },
+
+    /**
+     * 更改样式
+     * @param {String} theme -主题
+     */
+    changeStyle(theme) {
+        if (theme === this._theme) return;
+
+        this._theme = theme;
+        const isDark = this._theme === "dark";
+
+        // 数据源列表
+        const dataSources = this._getSources(isDark ? Dark_Sources : Light_Sources);
+        // 基础图层列表
+        const baseLayers = isDark ? Dark_Layers : Light_Layers;
+
+        // 更改样式
+        this._changeStyle(dataSources, baseLayers);
+    },
+
+    /**
+     * 更改地图样式
+     * @param {Object} sources -源对象
+     * @param {Array} layers -图层列表
+     */
+    _changeStyle: function (sources, layers) {
+        if (!map) return;
+
+        const that = this;
+
+        // 设置样式
+        map.setStyle({
+            version: 8,
+            name: "MaptoMap",
+            sprite: this.styleUrl + "/sprite/sprite",
+            glyphs: this.styleUrl + "/fonts/{fontstack}/{range}.pbf",
+            transition: {
+                duration: 300,
+                delay: 0,
+            },
+            sources: sources, // 数据源
+            layers: layers,   // 图层列表
+        });
+
+        // 样式加载完成事件
+        map.on('style.load', () => {
+            // 禁止双击缩放
+            map.doubleClickZoom.disable();
+
+            // 自定义样式
+            map._params.customStyle = that._theme === "dark"
+                    ? Dark_Style
+                    : Light_Style;
+            // 获取fill-extrusion类型图层ID
+            const mapLayers = map.getStyle().layers;
+            for (let i = 0; i < mapLayers.length; i++) {
+                if (mapLayers[i].type === 'fill-extrusion') {
+                    map._params.building3DLayerId = mapLayers[i].id;
+                    break;
+                }
+            }
+
+            // 设置雾
+            if (that.withFog) {
+                that._setFog();
+            }
+            // 设置地形
+            if (that.withDem) {
+                that._loadDEM();
+            }
+
+            // 触发地图更改完成事件
+            that.$emit("changed", map);
+        });
+    },
+
+    setLayoutProperty: function (layerId, propertyName, propertyValue) {
+        if (!map) return;
+        map.setLayoutProperty(layerId, propertyName, propertyValue);
+    },
+
+    setPaintProperty: function (layerId, propertyName, propertyValue) {
+        if (!map) return;
+        map.setPaintProperty(layerId, propertyName, propertyValue);
+    },
+
+    setFog: function () {
+        this._setFog();
+    },
+
+    /**
+     * 设置雾
+     */
+    _setFog: function () {
+        if (!map) return;
+        if (this._theme === "dark") {
+            map.setFog({
+                'range': [1, 20],
+                'color': '#F8F8FF',
+                'high-color': '#ADD8E6',
+                'space-color': '#0B1026',
+                'horizon-blend': 0.001,
+                'star-intensity': 0.01
+            });
+        } else {
+            map.setFog({
+                'range': [0, 20],
+                'color': '#FFFFFF',
+                'high-color': '#ADD8E6',
+                'space-color': '#d8f2ff',
+                'horizon-blend': 0.005,
+                'star-intensity': 0
+            });
+        }
+    },
+
+    setDEM: function (hillshade = false) {
+        this._loadDEM(hillshade);
+    },
+
+    /**
+     * 加载DEM
+     * @param {Boolean} hillshade -是否加载山体阴影
+     */
+    _loadDEM: function (hillshade = false) {
+        if (!map) return;
+
+        let demSourceId = this._demSourceId;
+        let minZoom = this.demMinZoom;
+        let maxZoom = this.demMaxZoom;
+
+        if (demSourceId) {
+            // 获取离线DEM数据源
+            const demSource = map.getSource(demSourceId);
+            if (demSource) {
+                minZoom = demSource.minzoom;
+                maxZoom = demSource.maxzoom;
+            }
+        } else {
+            demSourceId = 'mapbox-dem';
+            if (!map.getSource(demSourceId)) {
+                // 加载在线DEM
+                map.addSource(demSourceId, {
+                    type: 'raster-dem',
+                    url: 'mapbox://mapbox.mapbox-terrain-dem-v1',
+                    tileSize: 256,
+                    minzoom: minZoom,
+                    maxzoom: maxZoom
+                });
+            }
+        }
+        // 设置地形
+        map.setTerrain({
+            source: demSourceId,
+            exaggeration: 1.0
+        });
+
+        // 山体阴影
+        if (hillshade && hillshade === true) {
+            const hillshadeSourceId = demSourceId;
+            const hillshadeLayerId = demSourceId + '-hillshading';
+            if (!map.getLayer(hillshadeLayerId)) {
+                // 加载hillshade图层
+                map.addLayer({
+                    type: 'hillshade',
+                    id: hillshadeLayerId,
+                    source: hillshadeSourceId,
+                    minzoom: minZoom,
+                    maxzoom: maxZoom,
+                    paint: {
+                        'hillshade-exaggeration': 1.0,
+                        'hillshade-highlight-color': this._theme === 'dark' ? '#7387B9' : '#FFFFFF',
+                        'hillshade-shadow-color': this._theme === 'dark' ? '#000615' : '#333333',
+                    }
+                });
+            }
+        }
+    },
+
+    /**
+     * 设置地图缩放级别和中心点
+     */
+    setZoom: function (map, points, zoomLevel = null) {
+        if (!map || !points || points.length === 0) return;
+
+        let coordinates;
+        if (typeof points[0] === 'number' && points.length % 2 === 0) {
+            // 处理扁平数组格式
+            coordinates = [];
+            for (let i = 0; i < points.length; i += 2) {
+                coordinates.push([points[i], points[i + 1]]);
+            }
+        } else {
+            // 处理对象数组格式
+            coordinates = points.map(p => [p.longitude, p.latitude]);
+        }
+
+        // 计算所有坐标的边界框
+        const bounds = coordinates.reduce(
+                (bbox, coord) => {
+                    return [
+                        Math.min(bbox[0], coord[0]), // 最小经度
+                        Math.min(bbox[1], coord[1]), // 最小纬度
+                        Math.max(bbox[2], coord[0]), // 最大经度
+                        Math.max(bbox[3], coord[1])  // 最大纬度
+                    ];
+                },
+                [Infinity, Infinity, -Infinity, -Infinity] // 初始边界
+        );
+
+        if (zoomLevel) {
+            const center = [
+                (bounds[0] + bounds[2]) / 2,
+                (bounds[1] + bounds[3]) / 2
+            ];
+            map.setCenter(center);
+            map.setZoom(zoomLevel);
+        } else {
+            map.fitBounds(
+                    [[bounds[0], bounds[1]], [bounds[2], bounds[3]]],
+                    {
+                        padding: 80,
+                        maxZoom: 16,
+                        duration: 800
+                    }
+            );
+        }
+    },
+
+
+    // ==================== 七、巡检业务绘制 ====================
+
+    drawPatrolTask: function (map, data) {
+        if (!map || !data) return;
+
+        const points = data.patrolPointDetailDTOs || [];
+        const lines = data.patrolTaskPlanPaths || [];
+
+        if (!points.length || !lines.length) return;
+
+        this.setZoom(map, points);
+
+        // 清除之前的图层
+        if (map.getLayer('patrol-points')) map.removeLayer('patrol-points');
+        if (map.getSource('patrol-points')) map.removeSource('patrol-points');
+        if (map.getLayer('patrol-lines')) map.removeLayer('patrol-lines');
+        if (map.getSource('patrol-lines')) map.removeSource('patrol-lines');
+
+        // 添加点数据
+        const pointFeatures = points.map(po => ({
+            type: 'Feature',
+            geometry: {
+                type: 'Point',
+                coordinates: [po.longitude, po.latitude]
+            },
+            properties: {
+                ...po
+            }
+        }));
+
+        map.addSource('patrol-points', {
+            type: 'geojson',
+            data: {
+                type: 'FeatureCollection',
+                features: pointFeatures
+            }
+        });
+
+        // 根据状态设置不同图标
+        map.addLayer({
+            id: 'patrol-points',
+            type: 'circle',
+            source: 'patrol-points',
+            paint: {
+                'circle-radius': 6,
+                'circle-color': [
+                    'match',
+                    ['get', 'status'],
+                    '正常', '#7ed321',
+                    '异常', '#ff0000',
+                    '未检', '#9b9b9b',
+                    '#3a6bdb' // 默认颜色
+                ],
+                'circle-stroke-width': 2,
+                'circle-stroke-color': '#ffffff'
+            }
+        });
+
+        // 添加点标签
+        map.addLayer({
+            id: 'patrol-point-labels',
+            type: 'symbol',
+            source: 'patrol-points',
+            layout: {
+                'text-field': ['get', 'patrolPoint'],
+                'text-offset': [0, 1.5],
+                'text-anchor': 'top'
+            },
+            paint: {
+                'text-color': '#0093ff'
+            }
+        });
+
+        // 添加线数据
+        if (lines.length >= 2) {
+            const lineFeatures = [];
+            for (let i = 0; i < lines.length - 1; i++) {
+                lineFeatures.push({
+                    type: 'Feature',
+                    geometry: {
+                        type: 'LineString',
+                        coordinates: [
+                            [lines[i].longitude, lines[i].latitude],
+                            [lines[i + 1].longitude, lines[i + 1].latitude]
+                        ]
+                    },
+                    properties: {
+                        validate: lines[i].validate
+                    }
+                });
+            }
+
+            map.addSource('patrol-lines', {
+                type: 'geojson',
+                data: {
+                    type: 'FeatureCollection',
+                    features: lineFeatures
+                }
+            });
+
+            map.addLayer({
+                id: 'patrol-lines',
+                type: 'line',
+                source: 'patrol-lines',
+                paint: {
+                    'line-color': [
+                        'match',
+                        ['get', 'validate'],
+                        'valid', plan_color_valid,
+                        plan_color_invalid
+                    ],
+                    'line-width': 4
+                }
+            });
+        }
+    },
+
+
+    drawPatrol: function (map, data, pointField) {
+        if (!map || !data) return;
+        const taskUniqueId = data.id || data.patrolTaskId;
+        if (!taskUniqueId) return;
+
+        const points = data.patrolTaskPointTrackDTOs || [];
+        const lines = data.patrolTaskPlanPaths || [];
+        if (!points.length || !lines.length) return;
+
+        this.setZoom(map, points);
+
+        // 定义动态唯一ID
+        const pointSourceId = `patrol-track-points-${taskUniqueId}`;
+        const pointIconLayerId = `patrol-track-points-icons-${taskUniqueId}`;
+        const pointLabelLayerId = `patrol-track-point-labels-${taskUniqueId}`;
+        const lineSourceId = `patrol-track-lines-${taskUniqueId}`;
+        const lineLayerId = `patrol-track-lines-${taskUniqueId}`;
+
+        // 清除旧图层/数据源（使用动态ID）
+        if (map.getLayer(pointIconLayerId)) map.removeLayer(pointIconLayerId);
+        if (map.getLayer(pointLabelLayerId)) map.removeLayer(pointLabelLayerId);
+        if (map.getSource(pointSourceId)) map.removeSource(pointSourceId);
+        if (map.getLayer(lineLayerId)) map.removeLayer(lineLayerId);
+        if (map.getSource(lineSourceId)) map.removeSource(lineSourceId);
+
+        // 添加点数据
+        const pointFeatures = points.map(po => ({
+            type: 'Feature',
+            geometry: {
+                type: 'Point',
+                coordinates: [po.longitude, po.latitude]
+            },
+            properties: {
+                ...po
+            }
+        }));
+
+        // 在 addSource 中添加图标属性
+        map.addSource(pointSourceId, {
+            type: 'geojson',
+            data: {
+                type: 'FeatureCollection',
+                features: pointFeatures.map(feature => {
+                    let icon;
+                    const status = feature.properties.status;
+                    switch (status) {
+                        case '正常':
+                            icon = 'img_done';
+                            break;
+                        case '异常':
+                            icon = 'img_error';
+                            break;
+                        case '未检':
+                            icon = 'img_invalid';
+                            break;
+                        default:
+                            icon = 'img_todo';
+                            break;
+                    }
+                    return {
+                        ...feature,
+                        properties: {...feature.properties, icon: icon}
+                    };
+                })
+            }
+        });
+
+        // 在图层中使用图标
+        map.addLayer({
+            id: pointIconLayerId,
+            type: 'symbol',
+            source: pointSourceId,
+            layout: {
+                'icon-image': ['get', 'icon'],
+                'icon-size': 1,
+                'icon-anchor': 'bottom'
+            }
+        });
+
+        // 添加点标签
+        map.addLayer({
+            id: pointLabelLayerId,
+            type: 'symbol',
+            source: pointSourceId,
+            layout: {
+                'text-field': ['get', 'patrolPointName'],
+                'text-offset': [0, 1.5],
+                'text-anchor': 'top'
+            },
+            paint: {'text-color': '#0093ff'}
+        });
+
+        // 添加线数据,绑定任务信息到 properties
+        if (lines.length >= 2) {
+            const lineFeatures = [];
+            for (let i = 0; i < lines.length - 1; i++) {
+                lineFeatures.push({
+                    type: 'Feature',
+                    geometry: {
+                        type: 'LineString',
+                        coordinates: [
+                            [lines[i].longitude, lines[i].latitude],
+                            [lines[i + 1].longitude, lines[i + 1].latitude]
+                        ]
+                    },
+                    properties: {
+                        validate: lines[i].validate,
+                        taskId: taskUniqueId,
+                        taskInfo: {
+                            name: data.name,
+                            executeStatus: data.executeStatus,
+                            startTime: data.startTime,
+                            endTime: data.endTime,
+                            faultCount: data.faultCount,
+                            patrolPointCount: data.patrolPointCount,
+                            inspectedCount: data.inspectedCount,
+                            planPathLength: data.planPathLength,
+                            validPathLength: data.validPathLength
+                        }
+                    }
+                });
+            }
+
+            map.addSource(lineSourceId, {
+                type: 'geojson',
+                data: {type: 'FeatureCollection', features: lineFeatures}
+            });
+
+            map.addLayer({
+                id: lineLayerId,
+                type: 'line',
+                source: lineSourceId,
+                paint: {
+                    'line-color': ['match', ['get', 'validate'], 'valid', plan_color_valid, plan_color_invalid],
+                    'line-width': 4,
+                    'line-dasharray': [2, 2]
+                },
+                interactive: true // 开启线图层点击交互
+            });
+        }
+
+        // console.log('当前地图图层ID列表:', map.getStyle().layers.map(layer => layer.id));
+    },
+
+
+    drawPatrolTaskInGaoDe: function (map, data) {
+        if (!map || !data) return;
+
+        const points = data.patrolPointDetailDTOs || [];
+        const lines = data.patrolTaskPlanPaths || [];
+
+        if (!points.length || !lines.length) return;
+
+        this.setZoom(map, points);
+
+        // 清除之前的图层
+        if (map.getLayer('patrol-points')) map.removeLayer('patrol-points');
+        if (map.getSource('patrol-points')) map.removeSource('patrol-points');
+        if (map.getLayer('patrol-lines')) map.removeLayer('patrol-lines');
+        if (map.getSource('patrol-lines')) map.removeSource('patrol-lines');
+
+        // 添加点数据
+        // 返回高德结果时需要进行wgs84转gcj02
+        points.forEach(po => {
+            [po.longitude, po.latitude] = SpatialRefUtils.wgs84toGcj02([po.longitude, po.latitude])
+        })
+        const pointFeatures = points.map(po => ({
+            type: 'Feature',
+            geometry: {
+                type: 'Point',
+                coordinates: [po.longitude, po.latitude]
+            },
+            properties: {
+                ...po
+            }
+        }));
+
+        map.addSource('patrol-points', {
+            type: 'geojson',
+            data: {
+                type: 'FeatureCollection',
+                features: pointFeatures
+            }
+        });
+
+        // 根据状态设置不同图标
+        map.addLayer({
+            id: 'patrol-points',
+            type: 'circle',
+            source: 'patrol-points',
+            paint: {
+                'circle-radius': 6,
+                'circle-color': [
+                    'match',
+                    ['get', 'status'],
+                    '正常', '#7ed321',
+                    '异常', '#ff0000',
+                    '未检', '#9b9b9b',
+                    '#3a6bdb' // 默认颜色
+                ],
+                'circle-stroke-width': 2,
+                'circle-stroke-color': '#ffffff'
+            }
+        });
+
+        // 添加点标签
+        map.addLayer({
+            id: 'patrol-point-labels',
+            type: 'symbol',
+            source: 'patrol-points',
+            layout: {
+                'text-field': ['get', 'patrolPoint'],
+                'text-offset': [0, 1.5],
+                'text-anchor': 'top'
+            },
+            paint: {
+                'text-color': '#0093ff'
+            }
+        });
+
+        // 添加线数据
+        if (lines.length >= 2) {
+            const lineFeatures = [];
+            for (let i = 0; i < lines.length - 1; i++) {
+                lineFeatures.push({
+                    type: 'Feature',
+                    geometry: {
+                        type: 'LineString',
+                        coordinates: [
+                            [lines[i].longitude, lines[i].latitude],
+                            [lines[i + 1].longitude, lines[i + 1].latitude]
+                        ]
+                    },
+                    properties: {
+                        validate: lines[i].validate
+                    }
+                });
+            }
+
+            map.addSource('patrol-lines', {
+                type: 'geojson',
+                data: {
+                    type: 'FeatureCollection',
+                    features: lineFeatures
+                }
+            });
+
+            map.addLayer({
+                id: 'patrol-lines',
+                type: 'line',
+                source: 'patrol-lines',
+                paint: {
+                    'line-color': [
+                        'match',
+                        ['get', 'validate'],
+                        'valid', plan_color_valid,
+                        plan_color_invalid
+                    ],
+                    'line-width': 4
+                }
+            });
+        }
+    },
+
+
+    drawPatrolInGaoDe: function (map, data, pointField) {
+        if (!map || !data) return;
+        const taskUniqueId = data.id || data.patrolTaskId;
+        if (!taskUniqueId) return;
+
+        const points = data.patrolTaskPointTrackDTOs || [];
+        const lines = data.patrolTaskPlanPaths || [];
+        if (!points.length || !lines.length) return;
+
+        this.setZoom(map, points);
+
+        // 定义动态唯一ID
+        const pointSourceId = `patrol-track-points-${taskUniqueId}`;
+        const pointIconLayerId = `patrol-track-points-icons-${taskUniqueId}`;
+        const pointLabelLayerId = `patrol-track-point-labels-${taskUniqueId}`;
+        const lineSourceId = `patrol-track-lines-${taskUniqueId}`;
+        const lineLayerId = `patrol-track-lines-${taskUniqueId}`;
+
+        // 清除旧图层/数据源（使用动态ID）
+        if (map.getLayer(pointIconLayerId)) map.removeLayer(pointIconLayerId);
+        if (map.getLayer(pointLabelLayerId)) map.removeLayer(pointLabelLayerId);
+        if (map.getSource(pointSourceId)) map.removeSource(pointSourceId);
+        if (map.getLayer(lineLayerId)) map.removeLayer(lineLayerId);
+        if (map.getSource(lineSourceId)) map.removeSource(lineSourceId);
+
+        // 添加点数据
+        // 返回高德结果时需要进行wgs84转gcj02
+        points.forEach(po => {
+            [po.longitude, po.latitude] = SpatialRefUtils.wgs84toGcj02([po.longitude, po.latitude])
+        })
+        const pointFeatures = points.map(po => ({
+            type: 'Feature',
+            geometry: {
+                type: 'Point',
+                coordinates: [po.longitude, po.latitude]
+            },
+            properties: {
+                ...po
+            }
+        }));
+
+        // 在 addSource 中添加图标属性
+        map.addSource(pointSourceId, {
+            type: 'geojson',
+            data: {
+                type: 'FeatureCollection',
+                features: pointFeatures.map(feature => {
+                    let icon;
+                    const status = feature.properties.status;
+                    switch (status) {
+                        case '正常':
+                            icon = 'img_done';
+                            break;
+                        case '异常':
+                            icon = 'img_error';
+                            break;
+                        case '未检':
+                            icon = 'img_invalid';
+                            break;
+                        default:
+                            icon = 'img_todo';
+                            break;
+                    }
+                    return {
+                        ...feature,
+                        properties: {...feature.properties, icon: icon}
+                    };
+                })
+            }
+        });
+
+        // 在图层中使用图标
+        map.addLayer({
+            id: pointIconLayerId,
+            type: 'symbol',
+            source: pointSourceId,
+            layout: {
+                'icon-image': ['get', 'icon'],
+                'icon-size': 1,
+                'icon-anchor': 'bottom'
+            }
+        });
+
+        // 添加点标签
+        map.addLayer({
+            id: pointLabelLayerId,
+            type: 'symbol',
+            source: pointSourceId,
+            layout: {
+                'text-field': ['get', 'patrolPointName'],
+                'text-offset': [0, 1.5],
+                'text-anchor': 'top'
+            },
+            paint: {'text-color': '#0093ff'}
+        });
+
+        // 添加线数据,绑定任务信息到 properties
+        if (lines.length >= 2) {
+            const lineFeatures = [];
+            for (let i = 0; i < lines.length - 1; i++) {
+                lineFeatures.push({
+                    type: 'Feature',
+                    geometry: {
+                        type: 'LineString',
+                        coordinates: [
+                            [lines[i].longitude, lines[i].latitude],
+                            [lines[i + 1].longitude, lines[i + 1].latitude]
+                        ]
+                    },
+                    properties: {
+                        validate: lines[i].validate,
+                        taskId: taskUniqueId,
+                        taskInfo: {
+                            name: data.name,
+                            executeStatus: data.executeStatus,
+                            startTime: data.startTime,
+                            endTime: data.endTime,
+                            faultCount: data.faultCount,
+                            patrolPointCount: data.patrolPointCount,
+                            inspectedCount: data.inspectedCount,
+                            planPathLength: data.planPathLength,
+                            validPathLength: data.validPathLength
+                        }
+                    }
+                });
+            }
+
+            map.addSource(lineSourceId, {
+                type: 'geojson',
+                data: {type: 'FeatureCollection', features: lineFeatures}
+            });
+
+            map.addLayer({
+                id: lineLayerId,
+                type: 'line',
+                source: lineSourceId,
+                paint: {
+                    'line-color': ['match', ['get', 'validate'], 'valid', plan_color_valid, plan_color_invalid],
+                    'line-width': 4,
+                    'line-dasharray': [2, 2]
+                },
+                interactive: true // 开启线图层点击交互
+            });
+        }
+
+        // console.log('当前地图图层ID列表:', map.getStyle().layers.map(layer => layer.id));
+    },
+
+    /**
+     * 定位到当前位置
+     */
+    placePoint: function (map, location, callback) {
+        if (!map) return;
+        if (Array.isArray(location) && location.length === 2) {
+            map.setCenter(location)
+            map.setZoom(mapConfig.zoom);
+        } else {
+            navigator.geolocation.getCurrentPosition(
+                    (position) => {
+                        console.log('navigator.geolocation', position);
+                        const point = {
+                            lng: position.coords.longitude,
+                            lat: position.coords.latitude
+                        };
+
+                        map.setCenter([point.lng, point.lat]);
+                        map.setZoom(mapConfig.maxZoom);
+                        callback && callback(point);
+                    },
+                    (error) => {
+                        switch (error.code) {
+                            case error.PERMISSION_DENIED:
+                                console.error("用户拒绝了位置请求");
+                                break;
+                            case error.POSITION_UNAVAILABLE:
+                                console.error("位置信息不可用");
+                                break;
+                            case error.TIMEOUT:
+                                console.error("请求超时");
+                                break;
+                            default:
+                                console.error("未知错误", error.message);
+                        }
+                        // 默认定位到地图中心点
+                        const point = {lng: mapConfig.center[0], lat: mapConfig.center[1]};
+                        map.setCenter([point.lng, point.lat]);
+                        map.setZoom(mapConfig.maxZoom);
+                        callback && callback(point);
+                    },
+                    {
+                        enableHighAccuracy: true, // 高精度（可能更耗电）
+                        timeout: 10000,           // 10秒超时
+                        maximumAge: 30000         // 允许使用30秒内的缓存位置
+                    }
+            );
+        }
+    },
+
+    // ==================== 八、地图交互与搜索(POI) ====================
+
+    /**
+     * 添加搜索功能
+     * @param {string} containerId - 搜索输入框的容器ID
+     * @param {Array} bounds - 搜索边界范围
+     * @param {Function} callback - 回调函数
+     */
+    addSearch(containerId, bounds = [], callback) {
+        // 检查容器ID是否存在
+        if (!containerId) return;
+
+        // 通过容器ID获取输入框元素
+        const inputElement = document.getElementById(containerId);
+        inputElement.setAttribute('placeholder', '请输入搜索内容并通过↩︎进行查询')
+        if (!inputElement) {
+            console.error(`未找到ID为 ${containerId} 的输入框元素`);
+            return;
+        }
+
+        // 创建搜索结果容器并插入到输入框下方
+        let resultListContainer = document.getElementById(`${containerId}-results`);
+        if (!resultListContainer) {
+            resultListContainer = document.createElement('div');
+            resultListContainer.id = `${containerId}-results`;
+            resultListContainer.className = 'search-results-container';
+            inputElement.parentNode.insertBefore(resultListContainer, inputElement.nextSibling);
+        }
+
+        // 默认隐藏搜索结果容器
+        resultListContainer.style.display = 'none';
+
+        // 监听输入事件，当输入为空时清空并隐藏结果列表
+        inputElement.addEventListener('input', (event) => {
+            const keyword = event.target.value.trim();
+            if (!keyword) {
+                // 清空并隐藏搜索结果列表
+                this.clearSearchResults(containerId);
+            }
+        });
+
+        inputElement.addEventListener('keydown', (event) => {
+            if (event.key === 'Enter') {
+                event.preventDefault();
+                const keyword = inputElement.value.trim();
+                if (keyword) {
+                    this.executeSearch(containerId, bounds, (poiList) => {
+                        // 展示搜索结果列表
+                        this.showSearchResults(containerId, poiList);
+                        callback && callback(poiList);
+                    });
+                } else {
+                    // 如果输入为空，清空并隐藏结果列表
+                    this.clearSearchResults(containerId);
+                }
+            }
+        });
+
+        // 添加输入框失去焦点时隐藏结果列表的事件
+        inputElement.addEventListener('blur', () => {
+            // 延迟隐藏，确保点击列表项时不会立即隐藏
+            setTimeout(() => {
+                if (resultListContainer) {
+                    resultListContainer.style.display = 'none';
+                }
+            }, 200);
+        });
+
+        // 添加输入框获得焦点时显示结果列表的事件（如果有结果）
+        inputElement.addEventListener('focus', () => {
+            if (resultListContainer && resultListContainer.children.length > 0) {
+                resultListContainer.style.display = 'block';
+            }
+        });
+    },
+
+    executeSearch(containerId, bounds = [], callback) {
+        // 通过容器ID获取输入框元素
+        const inputElement = document.getElementById(containerId);
+        if (!inputElement) {
+            console.error(`未找到ID为 ${containerId} 的输入框元素`);
+            return;
+        }
+        // 获取输入框的值作为搜索关键词
+        const keyword = inputElement.value.trim();
+        if (!keyword) return;
+
+        // 天地图POI搜索API URL (使用注释中的v2/search接口)
+        const baseUrl = 'https://api.tianditu.gov.cn/v2/search';
+
+        // 构建请求参数 (按照注释中的格式)
+        const postStr = {
+            keyWord: keyword,
+            level: 12,
+            queryType: 1,
+            start: 0,
+            count: 100
+        };
+
+        // 如果提供了搜索范围，则添加边界参数
+        if (bounds && bounds.length === 4) {
+            postStr.mapBound = `${bounds[0]},${bounds[1]},${bounds[2]},${bounds[3]}`;
+        } else {
+            postStr.mapBound = `${mapConfig.mapExtent[0]},${mapConfig.mapExtent[1]},${mapConfig.mapExtent[2]},${mapConfig.mapExtent[3]}`;
+        }
+
+        // 构建完整的请求URL
+        const params = new URLSearchParams({
+            postStr: JSON.stringify(postStr),
+            type: 'query',
+            tk: TokenUtils.TDT_token
+        });
+
+        // 发送请求
+        fetch(`${baseUrl}?${params.toString()}`)
+                .then(response => response.json())
+                .then(data => {
+                    if (data.pois) {
+                        // 处理返回的数据，转换为统一格式
+                        const poiList = data.pois.map(item => ({
+                            id: item.lonlat ? item.lonlat.split(',')[1] : '', // 使用lonlat生成ID
+                            name: item.name,
+                            address: item.address || '',
+                            longitude: item.lonlat ? parseFloat(item.lonlat.split(',')[0]) : 0,
+                            latitude: item.lonlat ? parseFloat(item.lonlat.split(',')[1]) : 0,
+                            tel: item.phone || '',
+                            type: item.type || ''
+                        }));
+
+                        // 使用Mapbox绘制POI结果
+                        this.drawPOIResults(poiList);
+
+                        callback && callback(poiList);
+                    } else {
+                        this.clearPOIResults();
+                        callback && callback([]);
+                    }
+                })
+                .catch(error => {
+                    console.error('天地图POI搜索失败:', error);
+                    this.clearPOIResults();
+                    callback && callback([]);
+                });
+    },
+
+    drawPOIResults: function (poiList) {
+        if (!map || !poiList || !poiList.length) return;
+
+        // 清除之前的结果图层
+        this.clearPOIResults();
+
+        // 创建GeoJSON数据
+        const geojson = {
+            type: 'FeatureCollection',
+            features: poiList.map(poi => ({
+                type: 'Feature',
+                geometry: {
+                    type: 'Point',
+                    coordinates: [poi.longitude, poi.latitude]
+                },
+                properties: {
+                    id: poi.id,
+                    name: poi.name,
+                    address: poi.address,
+                    tel: poi.tel,
+                    type: poi.type
+                }
+            }))
+        };
+
+        // 添加数据源
+        map.addSource('poi-results', {
+            type: 'geojson',
+            data: geojson
+        });
+
+        // 添加点图层
+        map.addLayer({
+            id: 'poi-results',
+            type: 'circle',
+            source: 'poi-results',
+            paint: {
+                'circle-radius': 8,
+                'circle-color': '#ff6b35',
+                'circle-stroke-width': 2,
+                'circle-stroke-color': '#ffffff'
+            }
+        });
+
+        // 添加标签图层
+        map.addLayer({
+            id: 'poi-labels',
+            type: 'symbol',
+            source: 'poi-results',
+            layout: {
+                'text-field': ['get', 'name'],
+                'text-offset': [0, 1.5],
+                'text-anchor': 'top',
+                'text-size': 12
+            },
+            paint: {
+                'text-color': '#333333',
+                'text-halo-color': '#ffffff',
+                'text-halo-width': 1
+            }
+        });
+
+        // 添加点击事件
+        map.on('click', 'poi-results', (e) => {
+            const feature = e.features[0];
+            new mapboxgl.Popup({offset: [0, -15]})
+                    .setLngLat(feature.geometry.coordinates)
+                    .setHTML(`                <div style="padding: 10px;">
+                    <h3 style="margin: 0 0 5px 0;">${feature.properties.name}</h3>
+                    <p style="margin: 5px 0;"><strong>地址:</strong> ${feature.properties.address || '无'}</p>
+                    <p style="margin: 5px 0;"><strong>电话:</strong> ${feature.properties.tel || '无'}</p>
+                    <p style="margin: 5px 0;"><strong>类型:</strong> ${feature.properties.type || '未知'}</p>
+                </div>
+            `)
+                    .addTo(map);
+        });
+
+        // 设置鼠标悬停效果
+        map.on('mouseenter', 'poi-results', () => {
+            map.getCanvas().style.cursor = 'pointer';
+        });
+
+        map.on('mouseleave', 'poi-results', () => {
+            map.getCanvas().style.cursor = '';
+        });
+    },
+
+
+    clearPOIResults: function () {
+        if (!map) return;
+
+        if (map.getLayer('poi-results')) {
+            map.removeLayer('poi-results');
+        }
+        if (map.getLayer('poi-labels')) {
+            map.removeLayer('poi-labels');
+        }
+        if (map.getSource('poi-results')) {
+            map.removeSource('poi-results');
+        }
+
+        // 移除事件监听器
+        map.off('click', 'poi-results');
+        map.off('mouseenter', 'poi-results');
+        map.off('mouseleave', 'poi-results');
+    },
+
+    /**
+     * 展示搜索结果列表
+     * @param {string} containerId - 搜索输入框的容器ID
+     * @param {Array} poiList - POI结果列表
+     */
+    showSearchResults: function (containerId, poiList) {
+        const resultListContainer = document.getElementById(`${containerId}-results`);
+        if (!resultListContainer) return;
+
+        // 清空容器内容
+        resultListContainer.innerHTML = '';
+
+        if (!poiList || poiList.length === 0) {
+            resultListContainer.innerHTML = '<div class="no-results">未找到相关结果</div>';
+            resultListContainer.style.display = 'block';
+            return;
+        }
+
+        // 创建结果列表
+        const resultList = document.createElement('ul');
+        resultList.className = 'search-result-list';
+
+        // 为每个POI创建列表项
+        poiList.forEach((poi, index) => {
+            const listItem = document.createElement('li');
+            listItem.className = 'search-result-item';
+            listItem.dataset.index = index;
+
+            // 设置列表项内容
+            listItem.innerHTML = `
+            <div class="result-item-header">
+                <span class="result-item-name">${poi.name || '未知名称'}</span>
+                ${poi.type ? `<span class="result-item-type">${poi.type}</span>` : ''}
+            </div>
+            ${poi.address ? `<div class="result-item-address">${poi.address}</div>` : ''}
+            ${poi.tel ? `<div class="result-item-tel">电话: ${poi.tel}</div>` : ''}
+        `;
+
+            // 绑定点击事件，实现定位功能
+            listItem.addEventListener('mousedown', (e) => {
+                // 使用mousedown而不是click，避免blur事件先触发
+                e.preventDefault();
+                this.focusOnPOI(poi);
+            });
+
+            resultList.appendChild(listItem);
+        });
+
+        resultListContainer.appendChild(resultList);
+        resultListContainer.style.display = 'block';
+    },
+
+    clearSearchResults: function (containerId) {
+        const resultListContainer = document.getElementById(`${containerId}-results`);
+        if (resultListContainer) {
+            resultListContainer.innerHTML = '';
+            resultListContainer.style.display = 'none';
+        }
+
+        // 同时清除地图上的POI结果
+        this.clearPOIResults();
+    },
+
+
+    focusOnPOI: function (poi) {
+        if (!map || !poi || !poi.longitude || !poi.latitude) return;
+
+        // 移动地图到POI位置
+        map.flyTo({
+            center: [poi.longitude, poi.latitude],
+            zoom: 18,
+            essential: true // 动画不受 prefers-reduced-motion 影响
+        });
+
+        // 高亮显示该POI（如果地图上已有POI结果图层）
+        if (map.getSource('poi-results')) {
+            // 创建临时标记
+            const popup = new mapboxgl.Popup({
+                closeButton: false,
+                className: 'poi-focus-popup'
+            })
+                    .setLngLat([poi.longitude, poi.latitude])
+                    .setHTML(`<div class="poi-focus-content">${poi.name}</div>`)
+                    .addTo(map);
+
+            // 3秒后自动关闭弹窗
+            setTimeout(() => {
+                if (popup.isOpen()) {
+                    popup.remove();
+                }
+            }, 3000);
+        }
+    },
+
+
+    // ==================== 九、点位标记与拖拽 ====================
+
+    getMapboxPoints: function (data) {
+        if (!data) return [];
+        return data.map(item => [item.longitude, item.latitude]);
+    },
+
+
+    hitPoint: function (map, points, disableDrag = true, onDragEnd) {
+        if (!map) return;
+
+        let pointsArray = Array.isArray(points) ? points : [points];
+
+        // 创建点数据源 - 改进数据验证逻辑，允许坐标值为0
+        const features = pointsArray
+                .filter(point =>
+                        typeof point.longitude !== 'undefined' &&
+                        typeof point.latitude !== 'undefined' &&
+                        point.longitude !== null &&
+                        point.latitude !== null
+                )
+                .map((point, idx) => ({
+                    type: 'Feature',
+                    geometry: {
+                        type: 'Point',
+                        coordinates: [point.longitude, point.latitude]
+                    },
+                    properties: {
+                        id: point.id,
+                        patrolPoint: point.patrolPoint
+                    }
+                }));
+
+        // 添加数据源和图层
+        if (!map.getSource('hit-points')) {
+            map.addSource('hit-points', {
+                type: 'geojson',
+                data: {
+                    type: 'FeatureCollection',
+                    features: features
+                }
+            });
+
+            map.addLayer({
+                id: 'hit-points',
+                type: 'circle',
+                source: 'hit-points',
+                minzoom: 5,
+                maxZoom: 19,
+                layout: {
+                    'visibility': 'visible'  // 显式设置图层可见性
+                },
+                paint: {
+                    'circle-radius': 6,
+                    'circle-color': '#3a6bdb',
+                    'circle-stroke-width': 2,
+                    'circle-stroke-color': '#ffffff'
+                }
+            });
+
+            // 添加标签
+            map.addLayer({
+                id: 'hit-point-labels',
+                type: 'symbol',
+                source: 'hit-points',
+                minzoom: 5,
+                maxZoom: 19,
+                layout: {
+                    "text-font": ["Microsoft YaHei"],
+                    'text-field': ['get', 'patrolPoint'],
+                    'text-offset': [0, 1.5],
+                    'text-anchor': 'top',
+                    'visibility': 'visible'  // 显式设置图层可见性
+                },
+                paint: {
+                    'text-color': '#0093ff'
+                }
+            });
+
+            // 确保图层在最上层显示
+            const layers = map.getStyle().layers;
+            const lastLayerId = layers.length > 0 ? layers[layers.length - 1].id : undefined;
+            if (lastLayerId) {
+                map.moveLayer('hit-points', lastLayerId);
+                map.moveLayer('hit-point-labels', lastLayerId);
+            }
+
+            // 如果不禁用拖拽，则添加拖拽功能
+            if (!disableDrag) {
+                this._enablePointDragging(map, onDragEnd);
+            }
+
+            // 将 disableDrag 状态存储在图层上，便于后续更新时判断
+            map.getLayer('hit-points')._disableDrag = disableDrag;
+        } else {
+            // 更新数据
+            map.getSource('hit-points').setData({
+                type: 'FeatureCollection',
+                features: features
+            });
+
+            // 确保图层可见
+            map.setLayoutProperty('hit-points', 'visibility', 'visible');
+            map.setLayoutProperty('hit-point-labels', 'visibility', 'visible');
+
+            // 检查是否需要更新拖拽功能状态
+            const hitPointsLayer = map.getLayer('hit-points');
+            if (hitPointsLayer && hitPointsLayer._disableDrag !== disableDrag) {
+                if (!disableDrag) {
+                    // 启用拖拽功能
+                    this._enablePointDragging(map, onDragEnd);
+                } else {
+                    // 禁用拖拽功能，移除相关事件监听器
+                    map.off('mousedown', 'hit-points');
+                    map.off('mouseenter', 'hit-points');
+                    map.off('mouseleave', 'hit-points');
+                }
+                // 更新状态
+                hitPointsLayer._disableDrag = disableDrag;
+            }
+        }
+
+        // 调试日志
+        console.log('_hitPoint_ executed with features:', features);
+        console.log('Current zoom level:', map.getZoom());
+        console.log('Layer visibility:',
+                map.getLayoutProperty('hit-points', 'visibility'),
+                map.getLayoutProperty('hit-point-labels', 'visibility')
+        );
+    },
+
+    /**
+     * 启用点位拖拽功能
+     * @param {Object} map - 地图实例
+     * @param {Function} onDragEnd - 拖拽结束回调函数
+     */
+    _enablePointDragging: function (map, onDragEnd) {
+        let isDragging = false;
+        let dragTarget = null;
+        let originalPosition = null;
+        let tooltip = null; // 添加tooltip变量
+
+        // 鼠标按下事件 - 开始拖拽
+        map.on('mousedown', 'hit-points', (e) => {
+            this.enableScrollWheelZoom(false)
+            map.dragPan.disable();
+            isDragging = true;
+            dragTarget = e.features[0];
+            originalPosition = dragTarget.geometry.coordinates.slice();
+
+            // 设置鼠标样式
+            map.getCanvas().style.cursor = 'grabbing';
+
+            // 为dragTarget增加一个tooltip
+            tooltip = new mapboxgl.Popup({
+                closeButton: false,
+                closeOnClick: false,
+                className: 'drag-tooltip'
+            })
+                    .setLngLat(dragTarget.geometry.coordinates)
+                    .setHTML('<div>拖拽中...</div>')
+                    .addTo(map);
+        });
+
+        // 鼠标移动事件 - 执行拖拽
+        map.on('mousemove', (e) => {
+            if (!isDragging || !dragTarget) return;
+
+            // 更新点位位置
+            const updatedFeatures = map.getSource('hit-points')._data.features.map(feature => {
+                if (feature.properties.id === dragTarget.properties.id) {
+                    return {
+                        ...feature,
+                        geometry: {
+                            ...feature.geometry,
+                            coordinates: [e.lngLat.lng, e.lngLat.lat]
+                        }
+                    };
+                }
+                return feature;
+            });
+
+            // 更新数据源
+            map.getSource('hit-points').setData({
+                type: 'FeatureCollection',
+                features: updatedFeatures
+            });
+
+            // 更新tooltip位置
+            if (tooltip) {
+                tooltip.setLngLat([e.lngLat.lng, e.lngLat.lat]);
+            }
+        });
+
+        // 鼠标释放事件 - 结束拖拽
+        map.on('mouseup', () => {
+            // 移除tooltip
+            if (tooltip) {
+                tooltip.remove();
+                tooltip = null;
+            }
+            if (isDragging && dragTarget) {
+                isDragging = false;
+
+                // 获取更新后的点位数据
+                const updatedFeatures = map.getSource('hit-points')._data.features;
+                const updatedPoint = updatedFeatures.find(
+                        feature => feature.properties.id === dragTarget.properties.id
+                );
+
+                // 调用回调函数返回更新后的点位信息
+                if (onDragEnd && updatedPoint) {
+                    onDragEnd({
+                        id: updatedPoint.properties.id,
+                        patrolPoint: updatedPoint.properties.patrolPoint,
+                        longitude: updatedPoint.geometry.coordinates[0],
+                        latitude: updatedPoint.geometry.coordinates[1],
+                        originalLongitude: originalPosition[0],
+                        originalLatitude: originalPosition[1]
+                    });
+                }
+
+                dragTarget = null;
+                originalPosition = null;
+
+                this.enableScrollWheelZoom()
+                map.dragPan.enable();
+            }
+
+            // 恢复鼠标样式
+            map.getCanvas().style.cursor = '';
+        });
+
+        // 鼠标离开地图时也结束拖拽
+        map.on('mouseleave', () => {
+            if (isDragging) {
+                isDragging = false;
+                dragTarget = null;
+                originalPosition = null;
+
+                // 移除tooltip
+                if (tooltip) {
+                    tooltip.remove();
+                    tooltip = null;
+                }
+
+                map.getCanvas().style.cursor = '';
+            }
+        });
+
+        // 设置鼠标悬停样式
+        map.on('mouseenter', 'hit-points', () => {
+            map.getCanvas().style.cursor = 'grab';
+        });
+
+        map.on('mouseleave', 'hit-points', () => {
+            if (!isDragging) {
+                map.getCanvas().style.cursor = '';
+            }
+        });
+    },
+
+    // ==================== 十、绘制工具(polyline) - 线 ====================
+
+    renderLine: function (map, points, options) {
+        if (!map || !points || points.length < 2) return null;
+
+        const coordinates = points.map(p => [p.lng, p.lat]);
+        const sourceId = options && options.id ? 'custom-line-' + options.id : 'custom-line';
+        const layerId = sourceId;
+
+        const config = {
+            enableEditing: false,
+            enableClicking: true,
+            strokeWeight: 5,
+            strokeOpacity: 0.65,
+            color: '#3a6bdb',
+            ...options
+        };
+
+        // 创建线数据源（统一使用 FeatureCollection 格式）
+        if (!map.getSource(sourceId)) {
+            map.addSource(sourceId, {
+                type: 'geojson',
+                data: {
+                    type: 'FeatureCollection',
+                    features: [{
+                        type: 'Feature',
+                        geometry: {
+                            type: 'LineString',
+                            coordinates: coordinates
+                        },
+                        properties: {
+                            id: options.id || Date.now()
+                        }
+                    }]
+                }
+            });
+
+            map.addLayer({
+                id: layerId,
+                type: 'line',
+                source: sourceId,
+                paint: {
+                    'line-color': config.color,
+                    'line-width': config.strokeWeight,
+                    'line-opacity': config.strokeOpacity
+                }
+            });
+        } else {
+            // 更新数据（统一通过 features[0] 访问，兼容旧格式）
+            const existingData = map.getSource(sourceId)._data;
+            const isFeatureCollection = existingData.hasOwnProperty('features');
+            const geomData = isFeatureCollection ? existingData.features[0] : existingData;
+            geomData.geometry.coordinates = coordinates;
+            geomData.properties = {
+                ...geomData.properties,
+                ...options.properties
+            };
+            map.getSource(sourceId).setData(isFeatureCollection ? existingData : geomData);
+        }
+
+        // 获取更新后的feature（统一从 FeatureCollection 获取）
+        const sourceData = map.getSource(sourceId)._data;
+        const updatedFeature = sourceData.hasOwnProperty('features') ? sourceData.features[0] : sourceData;
+
+        // 先关闭旧的编辑功能，再按需开启
+        this._disableLineEditing(map, sourceId);
+        if (config.enableEditing) {
+            this._enableLineEditing(map, sourceId, config);
+        }
+
+        // 将 sourceId 附加到返回的 feature 上，便于外部操作
+        if (updatedFeature && updatedFeature.properties) {
+            updatedFeature.properties._sourceId = sourceId;
+        }
+
+        return updatedFeature;
+    },
+
+    /**
+     * 启用线段编辑功能
+     * @param {Object} map - 地图实例
+     * @param {string} sourceId - 线段数据源ID
+     * @param {Object} config - 编辑配置
+     */
+    _enableLineEditing: function (map, sourceId, config) {
+        let editingVertexIndex = -1;
+        let isVertexDragging = false;
+
+        const verticesSourceId = sourceId + '-vertices';
+        const verticesLayerId = verticesSourceId;
+
+        // 创建顶点图层以便编辑
+        if (!map.getSource(verticesSourceId)) {
+            map.addSource(verticesSourceId, {
+                type: 'geojson',
+                data: {
+                    type: 'FeatureCollection',
+                    features: []
+                }
+            });
+
+            map.addLayer({
+                id: verticesLayerId,
+                type: 'circle',
+                source: verticesSourceId,
+                filter: ['==', '$type', 'Point'],
+                paint: {
+                    'circle-radius': 6,
+                    'circle-color': '#ff0000',
+                    'circle-stroke-width': 2,
+                    'circle-stroke-color': '#ffffff'
+                }
+            });
+        }
+
+        // 更新顶点显示（统一使用 FeatureCollection 格式读取坐标）
+        const updateVertices = () => {
+            const lineData = map.getSource(sourceId)._data;
+            const isFeatureCollection = lineData.hasOwnProperty('features');
+            const coordinates = isFeatureCollection
+                    ? lineData.features[0].geometry.coordinates
+                    : lineData.geometry.coordinates;
+
+            const vertices = coordinates.map((coord, index) => ({
+                type: 'Feature',
+                geometry: {
+                    type: 'Point',
+                    coordinates: coord
+                },
+                properties: {
+                    vertexIndex: index
+                }
+            }));
+
+            map.getSource(verticesSourceId).setData({
+                type: 'FeatureCollection',
+                features: vertices
+            });
+        };
+
+        // 定义事件处理函数（具名引用，便于后续清理）
+        const onVertexMouseDown = (e) => {
+            if (!config.enableEditing) return;
+
+            this.enableScrollWheelZoom(false);
+            map.dragPan.disable();
+            editingVertexIndex = e.features[0].properties.vertexIndex;
+            isVertexDragging = true;
+
+            // 设置鼠标样式
+            map.getCanvas().style.cursor = 'grabbing';
+        };
+
+        const onVertexMouseMove = (e) => {
+            if (!isVertexDragging || editingVertexIndex === -1 || !config.enableEditing) return;
+
+            // 更新线段坐标（兼容 Feature 和 FeatureCollection 两种格式）
+            const source = map.getSource(sourceId);
+            const data = source._data;
+            const isFeatureCollection = data.hasOwnProperty('features');
+            const coordinates = isFeatureCollection
+                    ? data.features[0].geometry.coordinates
+                    : data.geometry.coordinates;
+
+            // 更新对应顶点的坐标
+            coordinates[editingVertexIndex] = [e.lngLat.lng, e.lngLat.lat];
+
+            source.setData(data);
+
+            // 更新顶点显示
+            updateVertices();
+        };
+
+        const onVertexMouseUp = () => {
+            if (isVertexDragging) {
+                isVertexDragging = false;
+                editingVertexIndex = -1;
+
+                // 触发编辑完成回调
+                if (config.onEditComplete) {
+                    const sourceData = map.getSource(sourceId)._data;
+                    const updatedFeature = sourceData.hasOwnProperty('features')
+                            ? sourceData.features[0]
+                            : sourceData;
+                    config.onEditComplete(updatedFeature);
+                }
+
+                this.enableScrollWheelZoom();
+                map.dragPan.enable();
+            }
+
+            // 恢复鼠标样式
+            map.getCanvas().style.cursor = '';
+        };
+
+        const onVertexMouseEnter = () => {
+            if (config.enableEditing) {
+                map.getCanvas().style.cursor = 'crosshair';
+            }
+        };
+
+        const onVertexMouseLeave = () => {
+            if (!isVertexDragging && config.enableEditing) {
+                map.getCanvas().style.cursor = '';
+            }
+        };
+
+        // 绑定事件
+        map.on('mousedown', verticesLayerId, onVertexMouseDown);
+        map.on('mousemove', onVertexMouseMove);
+        map.on('mouseup', onVertexMouseUp);
+        map.on('mouseenter', verticesLayerId, onVertexMouseEnter);
+        map.on('mouseleave', verticesLayerId, onVertexMouseLeave);
+
+        // 保存清理引用到 source 的 _editHandlers 上
+        const source = map.getSource(sourceId);
+        if (source) {
+            source._editHandlers = {
+                verticesSourceId: verticesSourceId,
+                verticesLayerId: verticesLayerId,
+                sourceId: sourceId,
+                onVertexMouseDown: onVertexMouseDown,
+                onVertexMouseMove: onVertexMouseMove,
+                onVertexMouseUp: onVertexMouseUp,
+                onVertexMouseEnter: onVertexMouseEnter,
+                onVertexMouseLeave: onVertexMouseLeave
+            };
+        }
+
+        // 初始显示顶点
+        if (config.enableEditing) {
+            updateVertices();
+        }
+    },
+
+    /**
+     * 禁用线段编辑功能，清理事件和顶点图层
+     * @param {Object} map - 地图实例
+     * @param {string} sourceId - 线段数据源ID
+     */
+    _disableLineEditing: function (map, sourceId) {
+        if (!map) return;
+        const srcId = sourceId || 'custom-line';
+        const source = map.getSource(srcId);
+        if (!source || !source._editHandlers) return;
+
+        const handlers = source._editHandlers;
+        const verticesLayerId = handlers.verticesLayerId;
+        const verticesSourceId = handlers.verticesSourceId;
+
+        // 移除事件监听
+        if (handlers.onVertexMouseDown) {
+            map.off('mousedown', verticesLayerId, handlers.onVertexMouseDown);
+        }
+        if (handlers.onVertexMouseMove) {
+            map.off('mousemove', handlers.onVertexMouseMove);
+        }
+        if (handlers.onVertexMouseUp) {
+            map.off('mouseup', handlers.onVertexMouseUp);
+        }
+        if (handlers.onVertexMouseEnter) {
+            map.off('mouseenter', verticesLayerId, handlers.onVertexMouseEnter);
+        }
+        if (handlers.onVertexMouseLeave) {
+            map.off('mouseleave', verticesLayerId, handlers.onVertexMouseLeave);
+        }
+
+        // 移除顶点图层和源
+        if (map.getLayer(verticesLayerId)) {
+            map.removeLayer(verticesLayerId);
+        }
+        if (map.getSource(verticesSourceId)) {
+            map.removeSource(verticesSourceId);
+        }
+
+        // 清除引用
+        delete source._editHandlers;
+
+        // 恢复地图交互
+        this.enableScrollWheelZoom(true);
+        if (map.dragPan && !map.dragPan.isEnabled()) {
+            map.dragPan.enable();
+        }
+    },
+
+    /**
+     * 清理线图层（source + layer + 编辑状态）
+     * @param {Object} map - 地图实例
+     * @param {string} sourceId - 线段数据源ID（可选，默认 'custom-line'）
+     */
+    removeLine: function (map, sourceId) {
+        if (!map) return;
+        const srcId = sourceId || 'custom-line';
+
+        // 先关闭编辑
+        this._disableLineEditing(map, srcId);
+
+        // 移除图层再移除数据源
+        if (map.getLayer(srcId)) {
+            map.removeLayer(srcId);
+        }
+        if (map.getSource(srcId)) {
+            map.removeSource(srcId);
+        }
+    },
+
+    // ==================== 十一、绘制工具(point) - 点 ====================
+
+    /**
+     * 绘制点
+     * @param map 地图实例
+     * @param point 点对象
+     * @param options 绘制配置项
+     * @returns {*|null} 绘制的点对象
+     */
+    renderPoint: function (map, point, options) {
+        if (!map || !point || typeof point.lng === 'undefined' || typeof point.lat === 'undefined') return null;
+
+        const coordinates = [point.lng, point.lat];
+        const sourceId = options && options.id ? 'custom-point-' + options.id : 'custom-point';
+        const layerId = sourceId;
+
+        const config = {
+            enableEditing: false,
+            enableClicking: true,
+            radius: 6,
+            color: '#3a6bdb',
+            strokeColor: '#ffffff',
+            strokeWidth: 2,
+            ...options
+        };
+
+        // 创建点数据源（统一使用 FeatureCollection 格式）
+        if (!map.getSource(sourceId)) {
+            map.addSource(sourceId, {
+                type: 'geojson',
+                data: {
+                    type: 'FeatureCollection',
+                    features: [{
+                        type: 'Feature',
+                        geometry: {
+                            type: 'Point',
+                            coordinates: coordinates
+                        },
+                        properties: {
+                            id: point.id || Date.now()
+                        }
+                    }]
+                }
+            });
+
+            map.addLayer({
+                id: layerId,
+                type: 'circle',
+                source: sourceId,
+                paint: {
+                    'circle-radius': config.radius,
+                    'circle-color': config.color,
+                    'circle-stroke-width': config.strokeWidth,
+                    'circle-stroke-color': config.strokeColor
+                }
+            });
+        } else {
+            // 更新数据（兼容 Feature 和 FeatureCollection 两种格式）
+            const existingData = map.getSource(sourceId)._data;
+            const isFeatureCollection = existingData.hasOwnProperty('features');
+            const geomData = isFeatureCollection ? existingData.features[0] : existingData;
+            geomData.geometry.coordinates = coordinates;
+            geomData.properties = {
+                ...geomData.properties,
+                ...point.properties
+            };
+
+            map.getSource(sourceId).setData(isFeatureCollection ? existingData : geomData);
+        }
+
+        // 获取更新后的feature（统一从 FeatureCollection 获取）
+        const sourceData = map.getSource(sourceId)._data;
+        const updatedFeature = sourceData.hasOwnProperty('features') ? sourceData.features[0] : sourceData;
+
+        // 先关闭旧的编辑功能，再按需开启
+        this._disablePointEditing(map, sourceId);
+        if (config.enableEditing) {
+            this._enablePointEditing(map, sourceId, config);
+        }
+
+        // 附加 sourceId 便于外部操作
+        if (updatedFeature && updatedFeature.properties) {
+            updatedFeature.properties._sourceId = sourceId;
+        }
+
+        return updatedFeature;
+    },
+
+    /**
+     * 启用点编辑功能
+     * @param {Object} map - 地图实例
+     * @param {string} sourceId - 点数据源ID
+     * @param {Object} config - 编辑配置
+     */
+    _enablePointEditing: function (map, sourceId, config) {
+        let isDragging = false;
+        let dragStartPos = null;
+
+        // 定义事件处理函数（具名引用，便于后续清理）
+        const onPointMouseDown = (e) => {
+            if (!config.enableEditing) return;
+
+            this.enableScrollWheelZoom(false);
+            map.dragPan.disable();
+            isDragging = true;
+            dragStartPos = e.lngLat;
+
+            // 设置鼠标样式
+            map.getCanvas().style.cursor = 'grabbing';
+        };
+
+        const onPointMouseMove = (e) => {
+            if (!isDragging || !config.enableEditing) return;
+
+            // 更新坐标（兼容 Feature 和 FeatureCollection 两种格式）
+            const source = map.getSource(sourceId);
+            const data = source._data;
+            const isFeatureCollection = data.hasOwnProperty('features');
+            const geomData = isFeatureCollection ? data.features[0] : data;
+            geomData.geometry.coordinates = [e.lngLat.lng, e.lngLat.lat];
+            source.setData(data);
+        };
+
+        const onPointMouseUp = () => {
+            if (isDragging) {
+                isDragging = false;
+
+                // 触发编辑完成回调
+                if (config.onEditComplete) {
+                    const sourceData = map.getSource(sourceId)._data;
+                    const updatedFeature = sourceData.hasOwnProperty('features') ? sourceData.features[0] : sourceData;
+                    config.onEditComplete(updatedFeature);
+                }
+
+                this.enableScrollWheelZoom();
+                map.dragPan.enable();
+            }
+
+            // 恢复鼠标样式
+            map.getCanvas().style.cursor = '';
+        };
+
+        const onPointMouseEnter = () => {
+            if (config.enableEditing) {
+                map.getCanvas().style.cursor = 'grab';
+            }
+        };
+
+        const onPointMouseLeave = () => {
+            if (!isDragging && config.enableEditing) {
+                map.getCanvas().style.cursor = '';
+            }
+        };
+
+        // 绑定事件
+        map.on('mousedown', sourceId, onPointMouseDown);
+        map.on('mousemove', onPointMouseMove);
+        map.on('mouseup', onPointMouseUp);
+        map.on('mouseenter', sourceId, onPointMouseEnter);
+        map.on('mouseleave', sourceId, onPointMouseLeave);
+
+        // 保存清理引用到 source 上
+        const source = map.getSource(sourceId);
+        if (source) {
+            source._editHandlers = {
+                sourceId: sourceId,
+                onPointMouseDown: onPointMouseDown,
+                onPointMouseMove: onPointMouseMove,
+                onPointMouseUp: onPointMouseUp,
+                onPointMouseEnter: onPointMouseEnter,
+                onPointMouseLeave: onPointMouseLeave
+            };
+        }
+    },
+
+    /**
+     * 禁用点编辑功能，清理事件
+     * @param {Object} map - 地图实例
+     * @param {string} sourceId - 点数据源ID
+     */
+    _disablePointEditing: function (map, sourceId) {
+        if (!map) return;
+        const srcId = sourceId || 'custom-point';
+        const source = map.getSource(srcId);
+        if (!source || !source._editHandlers) return;
+
+        const handlers = source._editHandlers;
+
+        if (handlers.onPointMouseDown) {
+            map.off('mousedown', srcId, handlers.onPointMouseDown);
+        }
+        if (handlers.onPointMouseMove) {
+            map.off('mousemove', handlers.onPointMouseMove);
+        }
+        if (handlers.onPointMouseUp) {
+            map.off('mouseup', handlers.onPointMouseUp);
+        }
+        if (handlers.onPointMouseEnter) {
+            map.off('mouseenter', srcId, handlers.onPointMouseEnter);
+        }
+        if (handlers.onPointMouseLeave) {
+            map.off('mouseleave', srcId, handlers.onPointMouseLeave);
+        }
+
+        delete source._editHandlers;
+
+        // 恢复地图交互
+        this.enableScrollWheelZoom(true);
+        if (map.dragPan && !map.dragPan.isEnabled()) {
+            map.dragPan.enable();
+        }
+    },
+
+    /**
+     * 清理点图层
+     * @param {Object} map - 地图实例
+     * @param {string} sourceId - 点数据源ID（可选，默认 'custom-point'）
+     */
+    removePoint: function (map, sourceId) {
+        if (!map) return;
+        const srcId = sourceId || 'custom-point';
+
+        this._disablePointEditing(map, srcId);
+
+        if (map.getLayer(srcId)) {
+            map.removeLayer(srcId);
+        }
+        if (map.getSource(srcId)) {
+            map.removeSource(srcId);
+        }
+    },
+
+
+    // ==================== 十二、绘制工具(polygon) - 面 ====================
+
+    renderPolygon: function (map, points, options) {
+        if (!map || !points || points.length < 3) return null;
+
+        // 确保多边形闭合
+        const coordinates = [...points.map(p => [p.lng, p.lat])];
+        if (coordinates[0][0] !== coordinates[coordinates.length - 1][0] ||
+                coordinates[0][1] !== coordinates[coordinates.length - 1][1]) {
+            coordinates.push(coordinates[0]); // 闭合多边形
+        }
+
+        const sourceId = options && options.id ? 'custom-polygon-' + options.id : 'custom-polygon';
+        const fillLayerId = sourceId + '-fill';
+        const strokeLayerId = sourceId + '-stroke';
+
+        const config = {
+            enableEditing: false,
+            enableClicking: true,
+            fillColor: '#3a6bdb',
+            fillOpacity: 0.4,
+            strokeColor: '#3a6bdb',
+            strokeWidth: 2,
+            ...options
+        };
+
+        // 创建多边形数据源（统一使用 FeatureCollection 格式）
+        if (!map.getSource(sourceId)) {
+            map.addSource(sourceId, {
+                type: 'geojson',
+                data: {
+                    type: 'FeatureCollection',
+                    features: [{
+                        type: 'Feature',
+                        geometry: {
+                            type: 'Polygon',
+                            coordinates: [coordinates]
+                        },
+                        properties: {
+                            id: options.id || Date.now()
+                        }
+                    }]
+                }
+            });
+
+            map.addLayer({
+                id: fillLayerId,
+                type: 'fill',
+                source: sourceId,
+                paint: {
+                    'fill-color': config.fillColor,
+                    'fill-opacity': config.fillOpacity
+                }
+            });
+
+            map.addLayer({
+                id: strokeLayerId,
+                type: 'line',
+                source: sourceId,
+                paint: {
+                    'line-color': config.strokeColor,
+                    'line-width': config.strokeWidth
+                }
+            });
+        } else {
+            // 更新数据（兼容旧格式）
+            const existingData = map.getSource(sourceId)._data;
+            const isFeatureCollection = existingData.hasOwnProperty('features');
+            const geomData = isFeatureCollection ? existingData.features[0] : existingData;
+            geomData.geometry.coordinates = [coordinates];
+            geomData.properties = {
+                ...geomData.properties,
+                ...options.properties
+            };
+
+            map.getSource(sourceId).setData(isFeatureCollection ? existingData : geomData);
+        }
+
+        // 获取更新后的feature（统一从 FeatureCollection 获取）
+        const sourceData = map.getSource(sourceId)._data;
+        const updatedFeature = sourceData.hasOwnProperty('features') ? sourceData.features[0] : sourceData;
+
+        // 先关闭旧的编辑功能，再按需开启
+        this._disablePolygonEditing(map, sourceId);
+        if (config.enableEditing) {
+            this._enablePolygonEditing(map, sourceId, config);
+        }
+
+        // 附加 sourceId 便于外部操作
+        if (updatedFeature && updatedFeature.properties) {
+            updatedFeature.properties._sourceId = sourceId;
+        }
+
+        return updatedFeature;
+    },
+
+    /**
+     * 启用多边形编辑功能
+     * @param {Object} map - 地图实例
+     * @param {string} sourceId - 多边形数据源ID
+     * @param {Object} config - 编辑配置
+     */
+    _enablePolygonEditing: function (map, sourceId, config) {
+        let editingVertexIndex = -1;
+        let isVertexDragging = false;
+
+        const verticesSourceId = sourceId + '-vertices';
+        const verticesLayerId = verticesSourceId;
+
+        // 创建顶点图层以便编辑
+        if (!map.getSource(verticesSourceId)) {
+            map.addSource(verticesSourceId, {
+                type: 'geojson',
+                data: {
+                    type: 'FeatureCollection',
+                    features: []
+                }
+            });
+
+            map.addLayer({
+                id: verticesLayerId,
+                type: 'circle',
+                source: verticesSourceId,
+                filter: ['==', '$type', 'Point'],
+                paint: {
+                    'circle-radius': 6,
+                    'circle-color': '#ff0000',
+                    'circle-stroke-width': 2,
+                    'circle-stroke-color': '#ffffff'
+                }
+            });
+        }
+
+        // 更新顶点显示（兼容新旧格式）
+        const updateVertices = () => {
+            const polygonData = map.getSource(sourceId)._data;
+            const isFeatureCollection = polygonData.hasOwnProperty('features');
+            let coordinates;
+            if (isFeatureCollection) {
+                coordinates = polygonData.features[0].geometry.coordinates[0];
+            } else {
+                coordinates = polygonData.geometry.coordinates[0];
+            }
+
+            const vertices = coordinates.slice(0, -1).map((coord, index) => ({ // 不包含最后一个重复点
+                type: 'Feature',
+                geometry: {
+                    type: 'Point',
+                    coordinates: coord
+                },
+                properties: {
+                    vertexIndex: index
+                }
+            }));
+
+            map.getSource(verticesSourceId).setData({
+                type: 'FeatureCollection',
+                features: vertices
+            });
+        };
+
+        // 定义事件处理函数（具名引用，便于后续清理）
+        const onVertexMouseDown = (e) => {
+            if (!config.enableEditing) return;
+
+            this.enableScrollWheelZoom(false);
+            map.dragPan.disable();
+            editingVertexIndex = e.features[0].properties.vertexIndex;
+            isVertexDragging = true;
+
+            // 设置鼠标样式
+            map.getCanvas().style.cursor = 'grabbing';
+        };
+
+        const onVertexMouseMove = (e) => {
+            if (!isVertexDragging || editingVertexIndex === -1 || !config.enableEditing) return;
+
+            // 更新多边形坐标（兼容 Feature 和 FeatureCollection 两种格式）
+            const source = map.getSource(sourceId);
+            const data = source._data;
+            const isFeatureCollection = data.hasOwnProperty('features');
+            const coordinates = isFeatureCollection
+                    ? data.features[0].geometry.coordinates[0]
+                    : data.geometry.coordinates[0];
+
+            // 更新对应顶点的坐标
+            coordinates[editingVertexIndex] = [e.lngLat.lng, e.lngLat.lat];
+            // 如果是第一个点，也要更新最后一个点（因为多边形是闭合的）
+            if (editingVertexIndex === 0) {
+                coordinates[coordinates.length - 1] = [e.lngLat.lng, e.lngLat.lat];
+            }
+
+            source.setData(data);
+
+            // 更新顶点显示
+            updateVertices();
+        };
+
+        const onVertexMouseUp = () => {
+            if (isVertexDragging) {
+                isVertexDragging = false;
+                editingVertexIndex = -1;
+
+                // 触发编辑完成回调
+                if (config.onEditComplete) {
+                    const sourceData = map.getSource(sourceId)._data;
+                    const updatedFeature = sourceData.hasOwnProperty('features')
+                            ? sourceData.features[0]
+                            : sourceData;
+                    config.onEditComplete(updatedFeature);
+                }
+
+                this.enableScrollWheelZoom();
+                map.dragPan.enable();
+            }
+
+            // 恢复鼠标样式
+            map.getCanvas().style.cursor = '';
+        };
+
+        const onVertexMouseEnter = () => {
+            if (config.enableEditing) {
+                map.getCanvas().style.cursor = 'crosshair';
+            }
+        };
+
+        const onVertexMouseLeave = () => {
+            if (!isVertexDragging && config.enableEditing) {
+                map.getCanvas().style.cursor = '';
+            }
+        };
+
+        // 绑定事件
+        map.on('mousedown', verticesLayerId, onVertexMouseDown);
+        map.on('mousemove', onVertexMouseMove);
+        map.on('mouseup', onVertexMouseUp);
+        map.on('mouseenter', verticesLayerId, onVertexMouseEnter);
+        map.on('mouseleave', verticesLayerId, onVertexMouseLeave);
+
+        // 保存清理引用
+        const source = map.getSource(sourceId);
+        if (source) {
+            source._editHandlers = {
+                verticesSourceId: verticesSourceId,
+                verticesLayerId: verticesLayerId,
+                sourceId: sourceId,
+                onVertexMouseDown: onVertexMouseDown,
+                onVertexMouseMove: onVertexMouseMove,
+                onVertexMouseUp: onVertexMouseUp,
+                onVertexMouseEnter: onVertexMouseEnter,
+                onVertexMouseLeave: onVertexMouseLeave
+            };
+        }
+
+        // 初始显示顶点
+        if (config.enableEditing) {
+            updateVertices();
+        }
+    },
+
+    /**
+     * 禁用多边形编辑功能，清理事件和顶点图层
+     * @param {Object} map - 地图实例
+     * @param {string} sourceId - 多边形数据源ID
+     */
+    _disablePolygonEditing: function (map, sourceId) {
+        if (!map) return;
+        const srcId = sourceId || 'custom-polygon';
+        const source = map.getSource(srcId);
+        if (!source || !source._editHandlers) return;
+
+        const handlers = source._editHandlers;
+        const verticesLayerId = handlers.verticesLayerId;
+        const verticesSourceId = handlers.verticesSourceId;
+
+        // 移除事件监听
+        if (handlers.onVertexMouseDown) {
+            map.off('mousedown', verticesLayerId, handlers.onVertexMouseDown);
+        }
+        if (handlers.onVertexMouseMove) {
+            map.off('mousemove', handlers.onVertexMouseMove);
+        }
+        if (handlers.onVertexMouseUp) {
+            map.off('mouseup', handlers.onVertexMouseUp);
+        }
+        if (handlers.onVertexMouseEnter) {
+            map.off('mouseenter', verticesLayerId, handlers.onVertexMouseEnter);
+        }
+        if (handlers.onVertexMouseLeave) {
+            map.off('mouseleave', verticesLayerId, handlers.onVertexMouseLeave);
+        }
+
+        // 移除顶点图层和源
+        if (map.getLayer(verticesLayerId)) {
+            map.removeLayer(verticesLayerId);
+        }
+        if (map.getSource(verticesSourceId)) {
+            map.removeSource(verticesSourceId);
+        }
+
+        // 清除引用
+        delete source._editHandlers;
+
+        // 恢复地图交互
+        this.enableScrollWheelZoom(true);
+        if (map.dragPan && !map.dragPan.isEnabled()) {
+            map.dragPan.enable();
+        }
+    },
+
+    /**
+     * 清理多边形图层
+     * @param {Object} map - 地图实例
+     * @param {string} sourceId - 多边形数据源ID（可选，默认 'custom-polygon'）
+     */
+    removePolygon: function (map, sourceId) {
+        if (!map) return;
+        const srcId = sourceId || 'custom-polygon';
+
+        this._disablePolygonEditing(map, srcId);
+
+        const fillLayerId = srcId + '-fill';
+        const strokeLayerId = srcId + '-stroke';
+
+        if (map.getLayer(fillLayerId)) {
+            map.removeLayer(fillLayerId);
+        }
+        if (map.getLayer(strokeLayerId)) {
+            map.removeLayer(strokeLayerId);
+        }
+        if (map.getSource(srcId)) {
+            map.removeSource(srcId);
+        }
+    },
+
+    // ==================== 十三、网格与辅助工具 ====================
+
+    _drawGridWithCenterLabels: function (map, options = {}) {
+        if (!map) return;
+
+        const {
+            interval = 1,
+            color = '#0066cc',
+            width = 1,
+            showLabels = true,
+            showCenterLabels = true
+        } = options;
+
+        const features = [];
+        const labelFeatures = [];
+        const centerLabelFeatures = [];
+
+        // 中国范围经纬度网格
+        // 73.55, 3.85, 135.08, 53.55
+        const minLng = mapConfig.mapExtent[0], maxLng = mapConfig.mapExtent[2];
+        const minLat = mapConfig.mapExtent[1], maxLat = mapConfig.mapExtent[3];
+
+        // 经线
+        for (let lng = Math.ceil(minLng); lng <= Math.floor(maxLng); lng += interval) {
+            const coordinates = [];
+            for (let lat = minLat; lat <= maxLat; lat += 0.1) {
+                coordinates.push([lng, lat]);
+            }
+            features.push({
+                type: 'Feature',
+                geometry: {
+                    type: 'LineString',
+                    coordinates: coordinates
+                },
+                properties: {
+                    type: 'longitude',
+                    value: lng
+                }
+            });
+
+            // 添加经度标签
+            if (showLabels) {
+                labelFeatures.push({
+                    type: 'Feature',
+                    geometry: {
+                        type: 'Point',
+                        coordinates: [lng, minLat]
+                    },
+                    properties: {
+                        text: `${lng}°`
+                    }
+                });
+            }
+        }
+
+        // 纬线
+        for (let lat = Math.ceil(minLat); lat <= Math.floor(maxLat); lat += interval) {
+            const coordinates = [];
+            for (let lng = minLng; lng <= maxLng; lng += 0.1) {
+                coordinates.push([lng, lat]);
+            }
+            features.push({
+                type: 'Feature',
+                geometry: {
+                    type: 'LineString',
+                    coordinates: coordinates
+                },
+                properties: {
+                    type: 'latitude',
+                    value: lat
+                }
+            });
+
+            // 添加纬度标签
+            if (showLabels) {
+                labelFeatures.push({
+                    type: 'Feature',
+                    geometry: {
+                        type: 'Point',
+                        coordinates: [minLng, lat]
+                    },
+                    properties: {
+                        text: `${lat}°`
+                    }
+                });
+            }
+        }
+
+        // 添加网格中心点标签（显示经纬度区间）
+        if (showCenterLabels) {
+            for (let lng = Math.ceil(minLng); lng < Math.floor(maxLng); lng += interval) {
+                for (let lat = Math.ceil(minLat); lat < Math.floor(maxLat); lat += interval) {
+                    // 计算网格中心点
+                    const centerLng = lng + interval / 2;
+                    const centerLat = lat + interval / 2;
+
+                    // 创建区间标签文本
+                    const label = `${lng}°~${lng + interval}°\n${lat}°~${lat + interval}°`;
+
+                    centerLabelFeatures.push({
+                        type: 'Feature',
+                        geometry: {
+                            type: 'Point',
+                            coordinates: [centerLng, centerLat]
+                        },
+                        properties: {
+                            text: label
+                        }
+                    });
+                }
+            }
+        }
+
+        // 添加网格线数据源和图层
+        if (!map.getSource('longitude-latitude-grid')) {
+            map.addSource('longitude-latitude-grid', {
+                type: 'geojson',
+                data: {
+                    type: 'FeatureCollection',
+                    features: features
+                }
+            });
+
+            map.addLayer({
+                id: 'longitude-latitude-grid',
+                type: 'line',
+                source: 'longitude-latitude-grid',
+                paint: {
+                    'line-color': color,
+                    'line-width': width,
+                    'line-opacity': 0.6,
+                    'line-dasharray': [2, 2]
+                }
+            });
+        } else {
+            map.getSource('longitude-latitude-grid').setData({
+                type: 'FeatureCollection',
+                features: features
+            });
+        }
+
+        // 添加边界标签数据源和图层
+        if (showLabels && labelFeatures.length > 0) {
+            if (!map.getSource('grid-labels')) {
+                map.addSource('grid-labels', {
+                    type: 'geojson',
+                    data: {
+                        type: 'FeatureCollection',
+                        features: labelFeatures
+                    }
+                });
+
+                map.addLayer({
+                    id: 'grid-labels',
+                    type: 'symbol',
+                    source: 'grid-labels',
+                    layout: {
+                        'text-field': ['get', 'text'],
+                        'text-size': 16,
+                        'text-offset': [0, 1]
+                    },
+                    paint: {
+                        'text-color': '#ff6b35',
+                        'text-halo-color': '#ffffff',
+                        'text-halo-width': 1,
+                    }
+                });
+            } else {
+                map.getSource('grid-labels').setData({
+                    type: 'FeatureCollection',
+                    features: labelFeatures
+                });
+            }
+        }
+
+        // 添加中心点区间标签数据源和图层（仅在层级10及以上显示）
+        if (showCenterLabels && centerLabelFeatures.length > 0) {
+            if (!map.getSource('grid-center-labels')) {
+                map.addSource('grid-center-labels', {
+                    type: 'geojson',
+                    data: {
+                        type: 'FeatureCollection',
+                        features: centerLabelFeatures
+                    }
+                });
+
+                map.addLayer({
+                    id: 'grid-center-labels',
+                    type: 'symbol',
+                    source: 'grid-center-labels',
+                    layout: {
+                        'text-field': ['get', 'text'],
+                        'text-size': 16,
+                        'text-offset': [0, 0],
+                        'text-anchor': 'center',
+                        'text-justify': 'center',
+                    },
+                    paint: {
+                        'text-color': '#ff6b35',
+                        'text-halo-color': '#ffffff',
+                        'text-halo-width': 1,
+                    }
+                });
+            } else {
+                map.getSource('grid-center-labels').setData({
+                    type: 'FeatureCollection',
+                    features: centerLabelFeatures
+                });
+            }
+        }
+    },
+
+
+    clearGridWithCenterLabels: function (map) {
+        if (!map) return;
+
+        // 清除网格线
+        if (map.getLayer('longitude-latitude-grid')) {
+            map.removeLayer('longitude-latitude-grid');
+        }
+        if (map.getSource('longitude-latitude-grid')) {
+            map.removeSource('longitude-latitude-grid');
+        }
+
+        // 清除边界标签
+        if (map.getLayer('grid-labels')) {
+            map.removeLayer('grid-labels');
+        }
+        if (map.getSource('grid-labels')) {
+            map.removeSource('grid-labels');
+        }
+
+        // 清除中心点标签
+        if (map.getLayer('grid-center-labels')) {
+            map.removeLayer('grid-center-labels');
+        }
+        if (map.getSource('grid-center-labels')) {
+            map.removeSource('grid-center-labels');
+        }
+    },
+
+
+    countMidFromLine: function (start, end) {
+        return {
+            lng: (start.lng + end.lng) / 2,
+            lat: (start.lat + end.lat) / 2
+        };
+    },
+
+    resetCenterAndZoom: function (map) {
+        if (!map) return;
+        map.jumpTo({center: mapConfig.center, zoom: mapConfig.zoom});
+    },
+
+
+    // ==================== 十四、相机与视角控制 ====================
+
+    enableScrollWheelZoom: function (isOpen = true) {
+        // 进行mapboxgl的scroll(wheel)事件的控制
+        if (!map) return;
+
+        if (isOpen) {
+            map.scrollZoom.enable();
+        } else {
+            map.scrollZoom.disable();
+        }
+    },
+
+
+    initialize() {
+        const map = map;
+        if (!map) return;
+
+        if (this._overlook) {
+            map.setCenter(this.target ? this.target.center2d : this.origin.center2d);
+            map.setZoom(this.target ? this.target.zoom2d : this.origin.zoom2d);
+            map.setPitch(0);
+            map.setBearing(0);
+        } else {
+            map.setCenter(this.target ? this.target.center : this.origin.center);
+            map.setZoom(this.target ? this.target.zoom : this.origin.zoom);
+            map.setPitch(this.target ? this.target.pitch : this.origin.pitch);
+            map.setBearing(this.target ? this.target.bearing : this.origin.bearing);
+        }
+    },
+
+
+    flyInitialize() {
+        if (!map) return;
+
+        // fly with default options to null island
+        if (this._overlook) {
+            map.flyTo({
+                center: this.target ? this.target.center2d : this.origin.center2d,
+                zoom: this.target ? this.target.zoom2d : this.origin.zoom2d,
+                pitch: 0,
+                bearing: 0,
+            });
+        } else {
+            map.flyTo({
+                center: this.target ? this.target.center : this.origin.center,
+                zoom: this.target ? this.target.zoom : this.origin.zoom,
+                pitch: this.target ? this.target.pitch : this.origin.pitch,
+                bearing: this.target ? this.target.bearing : this.origin.bearing,
+            });
+        }
+    },
+
+
+    initBearing() {
+        if (!map) return;
+
+        if (this._overlook) {
+            map.setPitch(0);
+            map.setBearing(0);
+        } else {
+            map.setPitch(this.target ? this.target.pitch : this.origin.pitch);
+            map.setBearing(this.target ? this.target.bearing : this.origin.bearing);
+        }
+    },
+
+
+    overlook(is2D = true) {
+        if (!map) return;
+
+        let pitch = 0, bearing = 0;
+        if (is2D) {
+            this._overlook = true;
+
+            if (this.target) {
+                if (map.getZoom() <= this.target.zoom) {
+                    map.setCenter(this.target.center2d);
+                    map.setZoom(this.target.zoom2d);
+                }
+            } else {
+                if (map.getZoom() <= this.origin.zoom) {
+                    map.setCenter(this.origin.center2d);
+                    map.setZoom(this.origin.zoom2d);
+                }
+            }
+        } else {
+            this._overlook = false;
+
+            if (this.target) {
+                if (map.getZoom() <= this.target.zoom) {
+                    map.setCenter(this.target.center);
+                    map.setZoom(this.target.zoom);
+                }
+                pitch = this.target.pitch;
+                bearing = this.target.bearing;
+            } else {
+                if (map.getZoom() <= this.origin.zoom) {
+                    map.setCenter(this.origin.center);
+                    map.setZoom(this.origin.zoom);
+                }
+                pitch = this.origin.pitch;
+                bearing = this.origin.bearing;
+            }
+        }
+
+        map.setPitch(pitch);
+        map.setBearing(bearing);
+    },
+
+    /**
+     * 飞行至原点
+     */
+    flyToOrigin() {
+        if (!map) return;
+
+        // 飞行至原点
+        if (this.origin) {
+            map.flyTo({
+                ...this.origin,
+                duration: this.flyingDuration,
+                essential: true,
+                easing: (t) => {
+                    return t; // 飞行时间进度, (t === 1) 即飞行结束
+                }
+            }, {
+                // eventData 自定义的事件属性
+                moveend: 'FLYTO_END'
+            });
+        }
+    },
+
+    /**
+     * 飞行到目标点
+     */
+    flyToTarget() {
+        if (!map) return;
+
+        // 飞行至目标点
+        const target = this.target ? this.target : this.origin;
+        const duration = this.target ? this.flyingDuration : 0;
+        if (target) {
+            map.flyTo({
+                ...target,  // Fly to the selected target
+                duration: duration,  // Animate over 4.5 seconds
+                essential: true, // This animation is considered essential with respect to prefers-reduced-motion
+                easing: (t) => {
+                    return t; // 飞行时间进度, (t === 1) 即飞行结束
+                }
+            }, {
+                // eventData 自定义的事件属性
+                moveend: 'FLYTO_END'
+            });
+        }
+    },
+
+    /**
+     * 飞行至目标
+     * @param {Object} target -目标对象
+     *
+     * @summary <target参数：{
+     *   center: [],
+     *   zoom: zoom,
+     *   pitch: pitch,
+     *   bearing: bearing
+     * }>
+     */
+    flyTo(target) {
+        if (!map) return;
+
+        map.flyTo({
+            ...target,  // Fly to the selected target
+            duration: this.flyingDuration,  // Animate over 7.5 seconds
+            essential: true, // This animation is considered essential with respect to prefers-reduced-motion
+            easing: (t) => {
+                return t; // 飞行时间进度, (t === 1) 即飞行结束
+            }
+        }, {
+            // eventData 自定义的事件属性
+            moveend: 'FLYTO'
+        });
+    },
+
+    /**
+     * 改变投影模式
+     * @param {String} mode -投影模式(2d, 3d)
+     */
+    changeMode(mode) {
+        if (mode === this._mode) return;
+
+        this._mode = mode;
+
+        if (!map) return;
+
+        switch (this._mode) {
+            case '2d': {
+                map.setProjection('mercator');
+                break;
+            }
+            case '3d': {
+                map.setProjection('globe');
+                break;
+            }
+            default:
+                break;
+        }
+    },
+
+    /**
+     * 地图视角调整
+     * @param {Object} target -地图视角参数
+     */
+    locationArea(target) {   // 默认地图视角参数
+        const defaultCenter = mapConfig.center;
+        const defaultZoom = mapConfig.zoom;
+        const defaultBearing = mapConfig.bearing;
+        const defaultPitch = mapConfig.pitch;
+
+        // 解构传入的参数，若没有传入，则使用默认值
+        let {
+            center = defaultCenter,
+            zoom = defaultZoom,
+            bearing = defaultBearing,
+            pitch = defaultPitch
+        } = target;
+
+        // 校验 center 是否为有效的坐标
+        if (!Array.isArray(center) || center.length !== 2) {
+            console.error('无效的center参数，使用默认中心点');
+            center = defaultCenter;
+        }
+
+        // 校验其他参数是否为数字，若不是则使用默认值
+        const validZoom = typeof zoom === 'number' ? zoom : defaultZoom;
+        const validBearing = typeof bearing === 'number' ? bearing : defaultBearing;
+        const validPitch = typeof pitch === 'number' ? pitch : defaultPitch;
+
+        // 调整地图视角
+        if (map) {
+            map.setCenter(center);
+            map.setZoom(validZoom);
+            map.setBearing(validBearing);
+            map.setPitch(validPitch);
+        } else {
+            console.error('地图实例未初始化');
+        }
+    },
+
+    /**
+     * 合成快照用 canvas：Mapbox 主 canvas + AntV L7 等叠加 WebGL canvas。
+     * L7 与 Mapbox 可能像素宽高不一致，不能只匹配「同宽高」；需在导出前 scene.render()，否则会读到空缓冲。
+     *
+     * @returns {HTMLCanvasElement|null}
+     */
+    _compositeSnapshotCanvas() {
+        if (!map) {
+            return null;
+        }
+        if (antv7Scene && typeof antv7Scene.render === "function") {
+            try {
+                antv7Scene.render();
+            } catch (e) {
+                /* ignore */
+            }
+        }
+
+        const mapCanvas = map.getCanvas();
+        const w = mapCanvas.width;
+        const h = mapCanvas.height;
+        const merged = document.createElement("canvas");
+        merged.width = w;
+        merged.height = h;
+        const ctx = merged.getContext("2d");
+        ctx.drawImage(mapCanvas, 0, 0);
+
+        const roots = [];
+        const byId = document.getElementById(this._id);
+        if (byId) {
+            roots.push(byId);
+        }
+        if (typeof map.getContainer === "function") {
+            const mc = map.getContainer();
+            if (mc && roots.indexOf(mc) < 0) {
+                roots.push(mc);
+            }
+        }
+
+        const drawn = new Set([mapCanvas]);
+        const drawOverlay = (c) => {
+            if (!c || drawn.has(c)) {
+                return;
+            }
+            if (!c.width || !c.height) {
+                return;
+            }
+            /* 过滤控件等小 canvas，避免误铺满 */
+            if (c.width < 80 || c.height < 80) {
+                return;
+            }
+            try {
+                if (c.width === w && c.height === h) {
+                    ctx.drawImage(c, 0, 0);
+                } else {
+                    ctx.drawImage(c, 0, 0, c.width, c.height, 0, 0, w, h);
+                }
+                drawn.add(c);
+            } catch (e) {
+                /* WebGL 未就绪或跨域 */
+            }
+        };
+
+        roots.forEach((root) => {
+            root.querySelectorAll("canvas").forEach((c) => drawOverlay(c));
+        });
+
+        return merged;
+    },
+
+    // ==================== 十五、地图导出 ====================
+
+    exportBlob() {
+        return new Promise((resolve) => {
+            const finish = () => {
+                const merged = this._compositeSnapshotCanvas();
+                if (!merged) {
+                    resolve({msg: "error", data: null});
+                    return;
+                }
+                merged.toBlob((blob) => {
+                    resolve({msg: "success", data: blob});
+                }, "image/png", 0.95);
+            };
+            /* render 后多等一帧再读像素，减少 WebGL 未合成完导致的空白层 */
+            requestAnimationFrame(() => {
+                requestAnimationFrame(finish);
+            });
+        });
+    },
+
+
+    exportBase64() {
+        return new Promise((resolve, reject) => {
+            const finish = () => {
+                const merged = this._compositeSnapshotCanvas();
+                if (!merged) {
+                    reject({msg: "error", data: null});
+                    return;
+                }
+                merged.toBlob((blob) => {
+                    const reader = new FileReader();
+                    reader.readAsDataURL(blob);
+                    reader.onload = () => {
+                        resolve({msg: "success", data: reader.result});
+                    };
+                    reader.onerror = () => {
+                        reject({msg: "error", data: null});
+                    };
+                }, "image/png", 0.95);
+            };
+            requestAnimationFrame(() => {
+                requestAnimationFrame(finish);
+            });
+        });
+    },
+}