@sword916/vae-map-plus 1.0.0

package/src/plugins/L.SafeDivOverlay/index.js

@@ -0,0 +1,55 @@
+import L from 'leaflet'
+
+const PATCH_FLAG = '_safeDivOverlayPatched'
+
+function canUpdateOverlay(overlay) {
+  return !!(
+    overlay &&
+    overlay._map &&
+    overlay._latlng &&
+    overlay._container
+  )
+}
+
+function wrapOverlayMethod(target, methodName) {
+  if (!target?.prototype?.[methodName]) {
+    return
+  }
+
+  const methodFlag = `${PATCH_FLAG}_${methodName}`
+  if (target.prototype[methodFlag]) {
+    return
+  }
+
+  const originalMethod = target.prototype[methodName]
+
+  target.include({
+    [methodFlag]: true,
+    [methodName](...args) {
+      if (!canUpdateOverlay(this)) {
+        return
+      }
+
+      return originalMethod.apply(this, args)
+    }
+  })
+}
+
+function patchLeafletInstance(leaflet) {
+  if (!leaflet || leaflet[PATCH_FLAG]) {
+    return
+  }
+
+  wrapOverlayMethod(leaflet.Tooltip, '_animateZoom')
+  wrapOverlayMethod(leaflet.Tooltip, '_updatePosition')
+  wrapOverlayMethod(leaflet.Popup, '_animateZoom')
+  wrapOverlayMethod(leaflet.Popup, '_updatePosition')
+
+  leaflet[PATCH_FLAG] = true
+}
+
+patchLeafletInstance(L)
+
+if (typeof window !== 'undefined' && window.L && window.L !== L) {
+  patchLeafletInstance(window.L)
+}

package/src/plugins/L.TileLayer.ChinaProvider/index.js

@@ -0,0 +1,108 @@
+// 国内TMS提供方
+const providers = {
+
+    TianDiTu: {
+        Normal: {
+            Map: "https://t{s}.tianditu.gov.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}&tk={key}",
+            Annotion: "https://t{s}.tianditu.gov.cn/DataServer?T=cva_w&X={x}&Y={y}&L={z}&tk={key}",
+        },
+        Satellite: {
+            Map: "https://t{s}.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk={key}",
+            Annotion: "https://t{s}.tianditu.gov.cn/DataServer?T=cia_w&X={x}&Y={y}&L={z}&tk={key}",
+        },
+        Terrain: {
+            Map: "https://t{s}.tianditu.gov.cn/DataServer?T=ter_w&X={x}&Y={y}&L={z}&tk={key}",
+            Annotion: "https://t{s}.tianditu.gov.cn/DataServer?T=cta_w&X={x}&Y={y}&L={z}&tk={key}"
+        },
+        Subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
+        key: "1a346e3ea95a3227a097cabf11a901b7"
+    },
+
+    GaoDe: {
+        Normal: {
+            Map: 'https://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
+        },
+        Satellite: {
+            Map: 'https://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
+            Annotion: 'https://webst0{s}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}'
+        },
+        Subdomains: ["1", "2", "3", "4"]
+    },
+
+    GaoDe_Mobile: {
+        Normal: {
+            Map: 'https://wprd0{s}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7'
+        },
+        Satellite: {
+            Map: 'https://wprd0{s}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=6',
+            Annotion: 'https://wprd0{s}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=2&style=8'
+        },
+        Subdomains: ["1", "2", "3", "4"]
+    },
+
+    Google: {
+        Normal: {
+            Map: "https://www.google.cn/maps/vt?lyrs=m&gl=cn&x={x}&y={y}&z={z}"
+        },
+        Satellite: {
+            Map: "https://www.google.cn/maps/vt?lyrs=s&gl=cn&x={x}&y={y}&z={z}",
+            Annotion: "https://www.google.cn/maps/vt?lyrs=h&gl=cn&x={x}&y={y}&z={z}"
+        },
+        Subdomains: []
+    },
+
+    Geoq: {
+        Normal: {
+            Map: "https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}",
+            PurplishBlue: "https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
+            Gray: "https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetGray/MapServer/tile/{z}/{y}/{x}",
+            Warm: "https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetWarm/MapServer/tile/{z}/{y}/{x}"
+        },
+        Theme: {
+            Hydro: "https://thematic.geoq.cn/arcgis/rest/services/ThematicMaps/WorldHydroMap/MapServer/tile/{z}/{y}/{x}",
+            Division: "https://thematic.geoq.cn/arcgis/rest/services/ThematicMaps/administrative_division_boundaryandlabel/MapServer/tile/{z}/{y}/{x}"
+        },
+        Subdomains: []
+    }
+}
+
+L.TileLayer.ChinaProvider = L.TileLayer.extend({
+
+    initialize(type, options = {}) {
+
+        const [base, key] = type.split('@')
+        const parts = base.split('.')
+        if (parts[0] && parts.length == 3) {
+            const providerName = parts[0]
+            const mapName = parts[1]
+            const mapType = parts[2]
+            const provider = providers[providerName]
+            if (provider) {
+                const target = provider?.[mapName]?.[mapType]
+                if (target) {
+                    if (provider.hasOwnProperty('key') && !key) {
+                        console.error(`provider '${providerName}' need a key`)
+                    } else {
+                        const baseOptions = {
+                            maxZoom: 24,
+                            subdomains: provider.Subdomains,
+                            key
+                        }
+                        L.TileLayer.prototype.initialize.call(this, target, L.extend(baseOptions, options))
+                    }
+                } else {
+                    console.error(`provider not found '${type}'`)
+                }
+            } else {
+                console.error(`provider not found '${type}'`)
+            }
+        } else {
+            console.error(`provider not found '${type}'`)
+        }
+    }
+
+})
+
+L.tileLayer.chinaProvider = function (type, options) {
+    return new L.TileLayer.ChinaProvider(type, options)
+}

package/src/plugins/L.VuePopup/index.js

@@ -0,0 +1,67 @@
+import { createApp } from 'vue'
+import { idGen } from '@/utils'
+import { observeElementResize } from '@/composables/useResizeObserver'
+
+L.VuePopup = L.Popup.extend({
+  app: null,
+  stopResize: null,
+
+  options: {
+    vueInstance: null,
+    props: null
+  },
+
+  initialize(options) {
+    L.setOptions(this, options)
+    this._bindEvents()
+    L.Popup.prototype.initialize.call(this, _.omit(this.options, ['vueInstance', 'props']))
+  },
+
+  _bindEvents() {
+    if (!this.options.vueInstance) {
+      return
+    }
+
+    this.on('add', () => {
+      const handleResize = () => {
+        this._updateVuePopup()
+      }
+
+      const uuid = `vue-popup-${idGen()}`
+      this.setContent(`<div id="${uuid}"></div>`)
+
+      queueMicrotask(() => {
+        const mountEl = document.getElementById(uuid)
+        if (!mountEl) {
+          return
+        }
+        this.app = createApp(this.options.vueInstance, this.options.props ?? {})
+        this.app.mount(mountEl)
+        this.stopResize = observeElementResize(mountEl, handleResize)
+      })
+    })
+
+    this.on('remove', () => {
+      this.stopResize?.()
+      this.stopResize = null
+      this.app?.unmount()
+      this.app = null
+    })
+  },
+
+  _updateVuePopup() {
+    if (!this._map || !this._latlng || !this._container) {
+      return
+    }
+
+    this._container.style.visibility = 'hidden'
+    this._updateLayout()
+    this._updatePosition()
+    this._container.style.visibility = ''
+    this._adjustPan()
+  }
+})
+
+L.vuePopup = function (options) {
+  return new L.VuePopup(options)
+}

package/src/plugins/L.VueTooltip/index.js

@@ -0,0 +1,63 @@
+import { createApp } from 'vue'
+import { idGen } from '@/utils'
+import { observeElementResize } from '@/composables/useResizeObserver'
+
+L.VueTooltip = L.Tooltip.extend({
+  app: null,
+  stopResize: null,
+
+  options: {
+    vueInstance: null,
+    props: null
+  },
+
+  initialize(options) {
+    L.setOptions(this, options)
+    this._bindEvents()
+    L.Tooltip.prototype.initialize.call(this, _.omit(this.options, ['vueInstance', 'props']))
+  },
+
+  _bindEvents() {
+    if (!this.options.vueInstance) {
+      return
+    }
+
+    this.on('add', () => {
+      const handleResize = () => {
+        this._updateVueTooltip()
+      }
+
+      const uuid = `vue-tooltip-${idGen()}`
+      this.setContent(`<div id="${uuid}"></div>`)
+
+      queueMicrotask(() => {
+        const mountEl = document.getElementById(uuid)
+        if (!mountEl) {
+          return
+        }
+        this.app = createApp(this.options.vueInstance, this.options.props ?? {})
+        this.app.mount(mountEl)
+        this.stopResize = observeElementResize(mountEl, handleResize)
+      })
+    })
+
+    this.on('remove', () => {
+      this.stopResize?.()
+      this.stopResize = null
+      this.app?.unmount()
+      this.app = null
+    })
+  },
+
+  _updateVueTooltip() {
+    if (!this._map || !this._latlng || !this._container) {
+      return
+    }
+
+    this._updatePosition()
+  }
+})
+
+L.vueTooltip = function (options) {
+  return new L.VueTooltip(options)
+}

package/src/plugins/Mixin.Map.Measure/index.js

@@ -0,0 +1,248 @@
+import { onBeforeUnmount, ref } from 'vue'
+
+// 地图实例
+let map
+
+// 绘制层，放置绘制的覆盖物和文字提示
+let drawItems = L.featureGroup()
+
+// 绘制辅助层，放置绘制过程中的提示覆盖物和提示信息
+let drawHelpItems = L.featureGroup()
+
+// 鼠标当前经纬度
+let currentLatLng
+
+// 测距：节点集
+let lineVertexes = []
+
+// 测距：当前距离
+let lineCurrentDistance
+
+// 测距：当前距离提示标注
+let lineHintMarker
+
+// 测面积：节点集
+let polygonVertexes = []
+
+// 测面积：当前面积
+let polygonCurrentArea
+
+// 测面积：面积提示标注
+let polygonHintMarker
+
+// 测面积：提示多边形
+let polygonHintpolygon
+
+// 绘制事件集
+const Events = {
+
+    // 管理绘制的覆盖物
+    onLayerCreate(e) {
+        e.layer.remove().addTo(drawItems)
+
+        // 添加测面积标注
+        if (e.shape == 'Polygon') {
+            const hintMarkerIcon = createTextIcon(L.GeoUtil.readableArea(polygonCurrentArea))
+            L.marker(currentLatLng, { interactive: false }).setIcon(hintMarkerIcon).addTo(drawItems)
+        }
+    },
+
+    // 绘制开始
+    onDrawStart(e) {
+        const workingLayer = e.workingLayer
+        // 测距
+        if (e.shape == 'Line') {
+            map.on('mousemove', handleMouseMoveAtLine)
+            workingLayer.on('pm:vertexadded', vertex => {
+                const hintMarker = L.marker(vertex.latlng, { interactive: false })
+                lineVertexes = workingLayer._latlngs
+                if (lineVertexes.length == 1) {
+                    hintMarker.setIcon(createTextIcon('测距起点')).addTo(drawHelpItems)
+                } else {
+                    const distanceText = L.GeometryUtil.readableDistance(lineCurrentDistance)
+                    hintMarker.setIcon(createTextIcon(distanceText)).addTo(drawHelpItems)
+                }
+            })
+        }
+        // 测面积
+        else if (e.shape == 'Polygon') {
+            map.on('mousemove', handleMouseMoveAtPolygon)
+            workingLayer.on('pm:vertexadded', vertex => {
+                polygonVertexes = workingLayer._latlngs
+            })
+        }
+    },
+
+    // 绘制结束
+    onDrawEnd(e) {
+        // 重置测距
+        if (e.shape == 'Line') {
+            map.off('mousemove', handleMouseMoveAtLine)
+            if (lineHintMarker) {
+                drawHelpItems.removeLayer(lineHintMarker)
+                lineHintMarker = null
+            }
+            lineVertexes = []
+            currentLatLng = null
+            lineCurrentDistance = null
+        }
+        // 重置测面积
+        else if (e.shape == 'Polygon') {
+            map.off('mousemove', handleMouseMoveAtPolygon)
+            if (polygonHintMarker) {
+                drawHelpItems.removeLayer(polygonHintMarker)
+                polygonHintMarker = null
+            }
+            if (polygonHintpolygon) {
+                drawHelpItems.removeLayer(polygonHintpolygon)
+                polygonHintpolygon = null
+            }
+            polygonVertexes = []
+            currentLatLng = null
+            polygonCurrentArea = null
+        }
+        // 转移辅助层至绘制层，避免开始新绘制时被清理
+        drawHelpItems.eachLayer(layer => {
+            drawHelpItems.removeLayer(layer)
+            layer.addTo(drawItems)
+        })
+        drawHelpItems.clearLayers()
+
+        // 绘制结束，取消事件监听
+        unregisterDrawEvents()
+    }
+
+}
+
+// 注册绘制事件
+const registerDrawEvents = () => {
+    map.on('pm:create', Events.onLayerCreate)
+    map.on('pm:drawstart', Events.onDrawStart)
+    map.on('pm:drawend', Events.onDrawEnd)
+}
+
+// 取消注册绘制事件
+const unregisterDrawEvents = () => {
+    map.off('pm:create', Events.onLayerCreate)
+    map.off('pm:drawstart', Events.onDrawStart)
+    map.off('pm:drawend', Events.onDrawEnd)
+}
+
+// 测距：响应鼠标移动（计算距离，更新提示）
+const handleMouseMoveAtLine = _.throttle(e => {
+    // 更新位置
+    currentLatLng = e.latlng
+    // 更新节点集
+    const currentLatLngs = _.concat(lineVertexes, currentLatLng)
+    // 更新当前距离
+    lineCurrentDistance = L.GeoUtil.distanceByLatLngs(currentLatLngs, map)
+    // 更新提示
+    if (lineVertexes.length > 0) {
+        const hintMarkerIcon = createTextIcon(L.GeometryUtil.readableDistance(lineCurrentDistance), 'dark')
+        if (lineHintMarker) {
+            lineHintMarker.setIcon(hintMarkerIcon).setLatLng(currentLatLng)
+        } else {
+            lineHintMarker = L.marker(currentLatLng, { interactive: false }).setIcon(hintMarkerIcon).addTo(drawHelpItems)
+        }
+    }
+}, 20)
+
+// 测面积：响应鼠标移动（计算面积，更新提示）
+const handleMouseMoveAtPolygon = _.throttle(e => {
+    // 更新位置
+    currentLatLng = e.latlng
+    // 更新节点集
+    const currentLatLngs = _.concat(polygonVertexes, currentLatLng)
+    // 根据CRS选择算法
+    let useLatLng = true
+    if (map.vae && !map.vae.crs.code) {
+        useLatLng = false
+    }
+    // 使用simple坐标系时，将LatLng转为Point处理
+    polygonCurrentArea = useLatLng ?
+        L.GeoUtil.areaByLatLngs(currentLatLngs) :
+        L.GeoUtil.areaByPoints(currentLatLngs.map(v => ({ x: v.lat, y: v.lng })))
+    // 更新提示
+    if (polygonVertexes.length > 1) {
+        const hintMarkerIcon = createTextIcon(L.GeoUtil.readableArea(polygonCurrentArea), 'dark')
+        if (polygonHintMarker) {
+            polygonHintMarker.setIcon(hintMarkerIcon).setLatLng(currentLatLng)
+        } else {
+            polygonHintMarker = L.marker(currentLatLng, { interactive: false }).setIcon(hintMarkerIcon).addTo(drawHelpItems)
+        }
+        if (polygonHintpolygon) {
+            polygonHintpolygon.setLatLngs(currentLatLngs)
+        } else {
+            polygonHintpolygon = L.polygon(polygonVertexes, { stroke: false, fillOpacity: 0.1 }).addTo(drawHelpItems)
+        }
+    }
+}, 20)
+
+// 创建文字标签
+const createTextIcon = (value, className) => {
+    const iconWidth = value.length > 6 ? (value.length - 6) * 5 + 60 : 60
+    return L.divIcon({
+        html: `<div>${value}</div>`,
+        className: `icon--simple-text ${className}`,
+        iconSize: [iconWidth, 18]
+    })
+}
+
+// 地图测量组合式函数
+export function useMapMeasure() {
+    const DrawStatus = ref(false)
+
+    // 启动插件
+    const EnableMeasure = v => {
+        map = v
+        map.pm.setLang('zh')
+
+        drawItems.clearLayers().addTo(map)
+        drawHelpItems.clearLayers().addTo(map)
+    }
+
+    // 开始绘制
+    const StartMeasure = shape => {
+        registerDrawEvents()
+        map.pm.enableDraw(shape)
+        DrawStatus.value = true
+    }
+
+    // 取消当前绘制
+    const CancelMeasure = () => {
+        // 清理辅助层，避免在DrawEnd中被转移
+        drawHelpItems.clearLayers()
+        map.pm.Draw.getShapes().forEach(v => {
+            map.pm.disableDraw(v)
+        })
+        // 画布空白时，切换绘制状态
+        if (drawItems.getLayers().length == 0) {
+            DrawStatus.value = false
+        }
+    }
+
+    // 结束绘制，清理画布
+    const ClearMeasure = () => {
+        CancelMeasure()
+        drawItems.clearLayers()
+        DrawStatus.value = false
+    }
+
+    onBeforeUnmount(() => {
+        ClearMeasure()
+        if (map) {
+            map.removeLayer(drawItems)
+            map.removeLayer(drawHelpItems)
+        }
+    })
+
+    return {
+        DrawStatus,
+        EnableMeasure,
+        StartMeasure,
+        CancelMeasure,
+        ClearMeasure
+    }
+}
+
+export default useMapMeasure

package/src/plugins/globals/index.js

@@ -0,0 +1,7 @@
+import lodash from 'lodash'
+
+window._ = lodash
+
+import leaflet from 'leaflet'
+
+window.L = leaflet

package/src/utils/index.js

@@ -0,0 +1,36 @@
+import { v4 as uuid } from 'uuid'
+
+// 生成UUID
+export const idGen = () => _.replace(uuid(), /-/g, '')
+
+// 获取树结构首个断言为真的节点
+export function getTreeNode(tree, predicate) {
+    // 转换断言
+    if (predicate && _.isPlainObject(predicate)) {
+        let predicateObj = predicate
+        predicate = function (e) {
+            let result = true
+            Object.keys(predicateObj).forEach(v => {
+                if (e[v] != predicateObj[v]) {
+                    result = false
+                }
+            })
+            return result
+        }
+    }
+    // 递归
+    function recurTree(src = [], result) {
+        src.forEach(e => {
+            if (predicate && _.isObject(predicate) && !result) {
+                if (predicate(e)) {
+                    result = e
+                } else if (e.children && Array.isArray(e.children)) {
+                    result = recurTree(e.children, result) || result
+                }
+            }
+        })
+        return result
+    }
+
+    return recurTree(tree)
+}

package/src/utils/resize-event.js

@@ -0,0 +1,45 @@
+import { observeElementResize } from '@/composables/useResizeObserver'
+
+const legacyRegistry = new WeakMap()
+
+export const addResizeListener = function (element, fn) {
+  if (!element || typeof fn !== 'function') {
+    return
+  }
+
+  let listeners = legacyRegistry.get(element)
+  if (!listeners) {
+    listeners = new Map()
+    legacyRegistry.set(element, listeners)
+  }
+
+  if (listeners.has(fn)) {
+    return
+  }
+
+  const stop = observeElementResize(element, fn)
+  listeners.set(fn, stop)
+}
+
+export const removeResizeListener = function (element, fn) {
+  if (!element) {
+    return
+  }
+
+  const listeners = legacyRegistry.get(element)
+  if (!listeners) {
+    return
+  }
+
+  const stop = listeners.get(fn)
+  if (!stop) {
+    return
+  }
+
+  stop()
+  listeners.delete(fn)
+
+  if (listeners.size === 0) {
+    legacyRegistry.delete(element)
+  }
+}

package/vite.config.mjs

@@ -0,0 +1,25 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueJsx from '@vitejs/plugin-vue-jsx'
+import path from 'path'
+import { fileURLToPath } from 'url'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+
+export default defineConfig(({ command }) => ({
+  plugins: [vue(), vueJsx()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'src')
+    }
+  },
+  server: {
+    port: 6602,
+    open: false
+  },
+  build: {
+    outDir: 'vae-map',
+    sourcemap: false
+  },
+  base: command === 'serve' ? '/' : '/vae-map/'
+}))