@sword916/vae-map-plus 1.0.0

package/src/packages/vae-map/ctrl-draw/index.vue

@@ -0,0 +1,498 @@
+<template>
+  <div class="vae-map-ctrl--draw">
+    <div class="item-group">
+      <template v-if="showPolyFuncs">
+        <div class="item" title="绘制">
+          <div class="item-icon fas fa-pen-alt" :class="actionDisabled('draw')" @click="startDrawMode" />
+          <div v-if="drawStatus === 'draw'" class="tooltips">
+            <span @click="drawStatus = 'none'">取消</span>
+            <span @click="removeLastVertx">移除上一个节点</span>
+          </div>
+        </div>
+        <div class="item" title="编辑">
+          <div class="item-icon fas fa-draw-polygon" :class="actionDisabled('edit')" @click="startEditMode" />
+          <div v-if="drawStatus === 'edit'" class="tooltips">
+            <span @click="drawStatus = 'none'">完成</span>
+          </div>
+        </div>
+        <div class="item" title="移动">
+          <div class="item-icon fas fa-expand-arrows-alt" :class="actionDisabled('drag')" @click="startDragMode" />
+          <div v-if="drawStatus === 'drag'" class="tooltips">
+            <span @click="drawStatus = 'none'">完成</span>
+          </div>
+        </div>
+      </template>
+      <div class="item" title="机头机尾">
+        <div class="item-icon fas fa-map-pin" :class="actionDisabled('pick')" @click="startPickMode" />
+        <div v-if="drawStatus === 'pick'" class="tooltips">
+          <span @click="drawStatus = 'none'">取消</span>
+          <span @click="resetPickMode">重置</span>
+          <span v-if="htIndex === 5" @click="finishPick">完成</span>
+        </div>
+      </div>
+      <div v-if="showPolyFuncs" class="item" title="清除">
+        <div class="item-icon fas fa-trash-alt" @click="clearDrawItems" />
+      </div>
+    </div>
+    <div class="item-group">
+      <div class="item" title="保存">
+        <div class="item-icon fas fa-save" :class="actionDisabled('save')" @click="saveItems" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref, watch } from 'vue'
+import { ElMessage } from 'element-plus'
+
+defineOptions({
+  name: 'VaeMapCtrlDraw'
+})
+
+const CMOptions = {
+  unpicked: { color: '#ffc107', fillColor: '#fff', fillOpacity: 1, radius: 6 },
+  picked: { color: '#28a745', fillColor: '#fff', fillOpacity: 1, radius: 7, weight: 5 },
+  hint: { color: 'transparent', radius: 1, weight: 1, interactive: false }
+}
+
+function TTContent({ action, content, style }) {
+  const textHtml = `<span class="${style ?? ''}">${content}</span>`
+  if (action) {
+    return `<span><span class="action">${action}</span>${textHtml}</span>`
+  }
+  return `<span>${textHtml}</span>`
+}
+
+function PickedMarker(sign, latLng) {
+  let config = { content: '-' }
+  switch (sign) {
+    case 'hs':
+      config = { content: '机头起点', style: 'green' }
+      break
+    case 'ts':
+      config = { content: '机尾起点', style: 'red' }
+      break
+    case 'he':
+      config = { content: '机头终点', style: 'green' }
+      break
+    case 'te':
+      config = { content: '机尾终点', style: 'red' }
+      break
+  }
+  return L.circleMarker(latLng, CMOptions.hint).bindTooltip(TTContent(config), {
+    direction: 'right',
+    permanent: true,
+    className: 'ht-tooltip'
+  })
+}
+
+function adjustIndex(index, length) {
+  if (index > length - 1) {
+    return index - length
+  }
+  if (index < 0) {
+    return index + length
+  }
+  return index
+}
+
+const props = defineProps({
+  htOnly: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['on-create', 'on-save'])
+
+const enabled = ref(false)
+const mapInstance = ref(null)
+const drawItems = L.layerGroup()
+const drawStatus = ref('none')
+const polygon = ref(null)
+const htItems = L.layerGroup()
+const htHelpItems = L.layerGroup()
+const htHelpCacheItems = L.layerGroup()
+const htTooltip = ref(null)
+const htIndex = ref(0)
+const hsIndex = ref(-1)
+const tsIndex = ref(-1)
+const heIndex = ref(-1)
+const teIndex = ref(-1)
+const htHelpMarkers = new Map()
+
+const polygonReady = computed(() => polygon.value && polygon.value.getLatLngs()[0].length > 3)
+const drawReady = computed(() => enabled.value && drawStatus.value !== 'finish')
+const editReady = computed(() => enabled.value && polygonReady.value && drawStatus.value !== 'finish')
+const dragReady = computed(() => enabled.value && polygonReady.value && drawStatus.value !== 'finish')
+const pickReady = computed(() => enabled.value && polygonReady.value)
+const saveReady = computed(() => enabled.value && ['finish', 'reset'].includes(drawStatus.value))
+const showPolyFuncs = computed(() => !props.htOnly)
+
+watch(drawStatus, (value) => {
+  if (value === 'draw') {
+    quitEditMode()
+    quitDragMode()
+    quitPickMode()
+  } else if (value === 'edit') {
+    quitDrawMode()
+    quitDragMode()
+    quitPickMode()
+  } else if (value === 'drag') {
+    quitDrawMode()
+    quitEditMode()
+    quitPickMode()
+  } else if (value === 'pick') {
+    quitDrawMode()
+    quitEditMode()
+    quitDragMode()
+  } else if (value === 'none' || value === 'reset') {
+    quitDrawMode()
+    quitEditMode()
+    quitDragMode()
+    quitPickMode()
+  } else if (value === 'finish') {
+    quitDrawMode()
+    quitEditMode()
+    quitDragMode()
+  }
+})
+
+const enable = (map, data) => {
+  if (!map) {
+    return
+  }
+
+  enabled.value = true
+  mapInstance.value = map
+  mapInstance.value.pm.setLang('zh')
+  drawItems.addTo(mapInstance.value)
+  mapInstance.value.on('pm:create', ({ shape, layer }) => {
+    layer.remove()
+    layer.addTo(drawItems)
+    if (shape === 'Polygon') {
+      if (layer.getLatLngs()[0].length === 3) {
+        layer.remove()
+        drawStatus.value = 'none'
+        ElMessage.error('绘制错误，请至少绘制 4 个边')
+      } else {
+        if (polygon.value) {
+          polygon.value.remove()
+        }
+        polygon.value = layer
+        drawStatus.value = 'none'
+        ElMessage.success('绘制完成')
+        emit('on-create', polygon.value)
+      }
+    }
+  })
+
+  const latLngs = data?.latLngs
+  const currentHtIndex = data?.htIndex
+  if (Array.isArray(latLngs) && latLngs.length > 3) {
+    polygon.value = L.polygon(latLngs).addTo(drawItems)
+    if (Array.isArray(currentHtIndex) && currentHtIndex.length === 4) {
+      if (!drawItems.hasLayer(htItems)) {
+        drawItems.addLayer(htItems)
+      }
+      hsIndex.value = currentHtIndex[0]
+      PickedMarker('hs', latLngs[hsIndex.value]).addTo(htItems)
+      tsIndex.value = currentHtIndex[1]
+      PickedMarker('ts', latLngs[tsIndex.value]).addTo(htItems)
+      heIndex.value = currentHtIndex[2]
+      PickedMarker('he', latLngs[heIndex.value]).addTo(htItems)
+      teIndex.value = currentHtIndex[3]
+      PickedMarker('te', latLngs[teIndex.value]).addTo(htItems)
+      drawStatus.value = 'finish'
+    }
+    emit('on-create', polygon.value)
+  }
+}
+
+const clearDrawItems = () => {
+  drawStatus.value = 'reset'
+  drawItems.clearLayers()
+  polygon.value = null
+  ElMessage.success('已清理')
+}
+
+const startDrawMode = () => {
+  if (drawReady.value) {
+    mapInstance.value.pm.enableDraw('Polygon')
+    drawStatus.value = 'draw'
+  }
+}
+
+const removeLastVertx = () => {
+  const target = mapInstance.value.pm.Draw.Polygon
+  target._removeLastVertex()
+  if (!target._enabled) {
+    drawStatus.value = 'none'
+  }
+}
+
+const quitDrawMode = () => {
+  mapInstance.value?.pm.disableDraw('Polygon')
+}
+
+const startEditMode = () => {
+  if (editReady.value && !polygon.value.pm.enabled()) {
+    polygon.value.pm.enable()
+    drawStatus.value = 'edit'
+  }
+}
+
+const quitEditMode = () => {
+  if (polygon.value?.pm.enabled()) {
+    polygon.value.pm.disable()
+  }
+}
+
+const startDragMode = () => {
+  if (dragReady.value && !mapInstance.value.pm.globalDragModeEnabled()) {
+    mapInstance.value.pm.toggleGlobalDragMode()
+    drawStatus.value = 'drag'
+  }
+}
+
+const quitDragMode = () => {
+  if (mapInstance.value?.pm.globalDragModeEnabled()) {
+    mapInstance.value.pm.toggleGlobalDragMode()
+  }
+}
+
+const handlePickMove = (event) => {
+  if (htTooltip.value) {
+    htTooltip.value.setLatLng(event.latlng)
+    if (!htHelpItems.hasLayer(htTooltip.value)) {
+      htTooltip.value.addTo(htHelpItems)
+    }
+  }
+}
+
+const resetPickMode = () => {
+  htItems.clearLayers()
+  htHelpItems.clearLayers()
+  htHelpCacheItems.clearLayers()
+  htHelpMarkers.clear()
+
+  const latLngs = polygon.value.getLatLngs()[0]
+  latLngs.forEach((latLng, index) => {
+    const marker = L.circleMarker(latLng, CMOptions.unpicked).addTo(htHelpItems)
+    bindPickEvent(marker, index)
+    htHelpMarkers.set(index, marker)
+  })
+
+  hsIndex.value = -1
+  tsIndex.value = -1
+  heIndex.value = -1
+  teIndex.value = -1
+  htIndex.value = 1
+
+  htTooltip.value = L.circleMarker(mapInstance.value.getCenter(), CMOptions.hint).bindTooltip(TTContent({
+    action: '请选择',
+    content: '机头起点',
+    style: 'green'
+  }), {
+    direction: 'bottom',
+    offset: [0, 8],
+    permanent: true,
+    className: 'ht-tooltip'
+  })
+  mapInstance.value.off('mousemove', handlePickMove)
+  mapInstance.value.on('mousemove', handlePickMove)
+}
+
+const startPickMode = () => {
+  if (pickReady.value) {
+    drawStatus.value = 'pick'
+    htItems.addTo(drawItems)
+    htHelpItems.addTo(drawItems)
+    resetPickMode()
+  }
+}
+
+const quitPickMode = () => {
+  mapInstance.value?.off('mousemove', handlePickMove)
+  if (drawStatus.value !== 'finish') {
+    htItems.clearLayers()
+    hsIndex.value = -1
+    tsIndex.value = -1
+    heIndex.value = -1
+    teIndex.value = -1
+  }
+  htTooltip.value = null
+  htHelpItems.clearLayers()
+  htHelpCacheItems.clearLayers()
+  htHelpMarkers.clear()
+  htIndex.value = 0
+}
+
+const finishPick = () => {
+  if (htIndex.value === 5) {
+    drawStatus.value = 'finish'
+    quitPickMode()
+    ElMessage.success('标注完成')
+  } else {
+    drawStatus.value = 'none'
+  }
+}
+
+const doPickMarker = (index) => {
+  let sign
+  let next
+  if (htIndex.value === 1) {
+    sign = 'hs'
+    next = { action: '请选择', content: '机尾起点', style: 'red' }
+  } else if (htIndex.value === 2) {
+    sign = 'ts'
+    next = { action: '请选择', content: '机头终点', style: 'green' }
+  } else if (htIndex.value === 3) {
+    sign = 'he'
+    next = { action: '请选择', content: '机尾终点', style: 'red' }
+  } else {
+    sign = 'te'
+    next = { content: '-' }
+  }
+
+  const target = htHelpMarkers.get(index)
+  const indexRefs = { hs: hsIndex, ts: tsIndex, he: heIndex, te: teIndex }
+  PickedMarker(sign, target.getLatLng()).addTo(htItems)
+  target.off('click')
+  target.remove()
+  htHelpMarkers.delete(index)
+  htIndex.value += 1
+  indexRefs[sign].value = index
+  htTooltip.value?.setTooltipContent(TTContent(next))
+}
+
+const bindPickEvent = (target, index) => {
+  if (!target) {
+    return
+  }
+
+  target.on('click', () => {
+    const length = polygon.value.getLatLngs()[0].length
+
+    if (htIndex.value === 1) {
+      doPickMarker(index)
+      const leftIndex = index === length - 1 ? 0 : index + 1
+      const rightIndex = index === 0 ? length - 1 : index - 1
+      for (const [key, marker] of htHelpMarkers) {
+        if (key !== leftIndex && key !== rightIndex) {
+          htHelpCacheItems.addLayer(marker)
+          htHelpItems.removeLayer(marker)
+        }
+      }
+    } else if (htIndex.value === 2) {
+      doPickMarker(index)
+      htHelpMarkers.delete(index)
+      htHelpCacheItems.eachLayer((layer) => {
+        layer.addTo(htHelpItems)
+        htHelpCacheItems.removeLayer(layer)
+      })
+
+      let directionPositive = hsIndex.value < tsIndex.value
+      if (Math.abs(hsIndex.value - tsIndex.value) === length - 1) {
+        directionPositive = tsIndex.value === 0
+      }
+
+      if (htHelpMarkers.size === 2) {
+        const nextHeIndex = adjustIndex(directionPositive ? hsIndex.value - 1 : hsIndex.value + 1, length)
+        doPickMarker(nextHeIndex)
+        const nextTeIndex = adjustIndex(directionPositive ? tsIndex.value + 1 : tsIndex.value - 1, length)
+        doPickMarker(nextTeIndex)
+        finishPick()
+      } else {
+        const banIndex = adjustIndex(directionPositive ? tsIndex.value + 1 : tsIndex.value - 1, length)
+        const banMarker = htHelpMarkers.get(banIndex)
+        htHelpCacheItems.addLayer(banMarker)
+        htHelpItems.removeLayer(banMarker)
+      }
+    } else if (htIndex.value === 3) {
+      doPickMarker(index)
+      htHelpMarkers.delete(index)
+      htHelpCacheItems.eachLayer((layer) => {
+        htHelpCacheItems.removeLayer(layer)
+        layer.addTo(htHelpItems)
+      })
+
+      let directionPositive = hsIndex.value < tsIndex.value
+      if (Math.abs(hsIndex.value - tsIndex.value) === length - 1) {
+        directionPositive = tsIndex.value === 0
+      }
+
+      const banIndex = []
+      if (directionPositive) {
+        const tempEnd = hsIndex.value < index ? hsIndex.value + length : hsIndex.value
+        for (let current = index + 1; current < tempEnd; current += 1) {
+          banIndex.push(current > length - 1 ? current - length : current)
+        }
+      } else {
+        const tempEnd = hsIndex.value > index ? index + length : index
+        for (let current = hsIndex.value + 1; current < tempEnd; current += 1) {
+          banIndex.push(current > length - 1 ? current - length : current)
+        }
+      }
+
+      banIndex.forEach((value) => {
+        const banMarker = htHelpMarkers.get(value)
+        htHelpCacheItems.addLayer(banMarker)
+        htHelpItems.removeLayer(banMarker)
+      })
+
+      if (length - banIndex.length - 3 === 1) {
+        for (const key of htHelpMarkers.keys()) {
+          if (_.indexOf(banIndex, key) < 0) {
+            doPickMarker(key)
+            finishPick()
+            break
+          }
+        }
+      }
+    } else if (htIndex.value === 4) {
+      doPickMarker(index)
+      finishPick()
+    }
+  })
+}
+
+const saveItems = () => {
+  if (!saveReady.value) {
+    return
+  }
+
+  if (drawStatus.value === 'reset') {
+    emit('on-save', { latLngs: null, htIndex: null })
+  } else if (drawStatus.value === 'finish') {
+    emit('on-save', {
+      latLngs: polygon.value.getLatLngs()[0],
+      htIndex: [hsIndex.value, tsIndex.value, heIndex.value, teIndex.value]
+    })
+  }
+}
+
+const actionDisabled = (action) => {
+  if (action === 'draw') {
+    return drawReady.value ? null : 'disabled'
+  }
+  if (action === 'edit') {
+    return editReady.value ? null : 'disabled'
+  }
+  if (action === 'drag') {
+    return dragReady.value ? null : 'disabled'
+  }
+  if (action === 'pick') {
+    return pickReady.value ? null : 'disabled'
+  }
+  if (action === 'save') {
+    return saveReady.value ? null : 'disabled'
+  }
+  return null
+}
+
+defineExpose({
+  enable
+})
+</script>

package/src/packages/vae-map/ctrl-draw-line/index.vue

@@ -0,0 +1,128 @@
+<template>
+  <div class="vae-map-ctrl--draw">
+    <div class="item-group">
+      <div class="item" title="绘制">
+        <div class="item-icon fas fa-pen-alt" :class="actionDisabled('draw')" @click="startDrawMode" />
+        <div v-if="drawStatus === 'draw'" class="tooltips">
+          <span @click="drawStatus = 'none'">取消</span>
+          <span @click="removeLastVertx">移除上一个节点</span>
+        </div>
+      </div>
+      <div class="item" title="清除">
+        <div class="item-icon fas fa-trash-alt" @click="clearDrawItems" />
+      </div>
+    </div>
+    <div class="item-group">
+      <div class="item" title="保存">
+        <div class="item-icon fas fa-save" :class="actionDisabled('save')" @click="saveItems" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref, watch } from 'vue'
+import { ElMessage } from 'element-plus'
+
+defineOptions({
+  name: 'VaeMapCtrlDrawLine'
+})
+
+const emit = defineEmits(['on-create', 'on-save'])
+
+const enabled = ref(false)
+const mapInstance = ref(null)
+const drawItems = L.layerGroup()
+const drawStatus = ref('none')
+const polyline = ref(null)
+
+watch(drawStatus, (value) => {
+  if (value === 'none') {
+    quitDrawMode()
+  }
+})
+
+const enable = (map, data) => {
+  if (!map) {
+    return
+  }
+
+  enabled.value = true
+  mapInstance.value = map
+  mapInstance.value.pm.setLang('zh')
+  drawItems.addTo(mapInstance.value)
+  mapInstance.value.on('pm:create', ({ shape, layer }) => {
+    layer.remove()
+    layer.addTo(drawItems)
+    if (shape === 'Line') {
+      if (polyline.value) {
+        polyline.value.remove()
+      }
+      polyline.value = layer
+      drawStatus.value = 'none'
+      ElMessage.success('绘制完成')
+      emit('on-create', polyline.value)
+    }
+  })
+
+  if (data?.latLngs && data.latLngs.length > 1) {
+    polyline.value = L.polyline(data.latLngs).addTo(drawItems)
+    emit('on-create', polyline.value)
+  }
+}
+
+const clearDrawItems = () => {
+  drawStatus.value = 'none'
+  drawItems.clearLayers()
+  polyline.value = null
+  ElMessage.success('已清理')
+}
+
+const startDrawMode = () => {
+  if (drawReady.value) {
+    mapInstance.value.pm.enableDraw('Line')
+    drawStatus.value = 'draw'
+  }
+}
+
+const removeLastVertx = () => {
+  const target = mapInstance.value.pm.Draw.Line
+  target._removeLastVertex()
+  if (!target._enabled) {
+    drawStatus.value = 'none'
+  }
+}
+
+const quitDrawMode = () => {
+  mapInstance.value?.pm.disableDraw('Line')
+}
+
+const saveItems = () => {
+  if (!saveReady.value) {
+    return
+  }
+
+  if (polyline.value) {
+    emit('on-save', { latLngs: polyline.value.getLatLngs() })
+  } else {
+    emit('on-save', { latLngs: null })
+  }
+}
+
+const actionDisabled = (action) => {
+  if (action === 'draw') {
+    return drawReady.value ? null : 'disabled'
+  }
+  if (action === 'save') {
+    return saveReady.value ? null : 'disabled'
+  }
+  return null
+}
+
+const drawReady = computed(() => enabled.value)
+const saveReady = computed(() => enabled.value)
+
+defineExpose({
+  enable
+})
+</script>

package/src/packages/vae-map/index.js

@@ -0,0 +1,59 @@
+import VaeMap from './vae-map.jsx'
+import VaeLrmap from './vae-lrmap.jsx'
+import VaeMapCtrlDraw from './ctrl-draw/index.vue'
+import VaeMapCtrlDrawLine from './ctrl-draw-line/index.vue'
+import './style.less'
+
+import 'leaflet'
+import 'leaflet/dist/leaflet.css'
+import markerIcon2x from 'leaflet/dist/images/marker-icon-2x.png'
+import markerIcon from 'leaflet/dist/images/marker-icon.png'
+import markerShadow from 'leaflet/dist/images/marker-shadow.png'
+
+import './scripts/L.Vae.CRS'
+import './scripts/L.Vae.Client'
+
+import 'leaflet.markercluster'
+import 'leaflet.markercluster/dist/MarkerCluster.css'
+import 'leaflet.markercluster/dist/MarkerCluster.Default.css'
+
+import 'leaflet-geometryutil'
+import 'proj4'
+import 'proj4leaflet'
+import '@geoman-io/leaflet-geoman-free'
+import '@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css'
+
+import '@/plugins/L.AnimatedMarker'
+import '@/plugins/L.EchartsLayer'
+import '@/plugins/L.ElasticMarker'
+import '@/plugins/L.FootageCalculator.Area'
+import '@/plugins/L.FootageCalculator.Line'
+import '@/plugins/L.GeoUtil'
+import '@/plugins/L.Glyphicon'
+import '@/plugins/L.MarkerClusterX'
+import '@/plugins/L.TileLayer.ChinaProvider'
+import '@/plugins/L.VuePopup'
+import '@/plugins/L.VueTooltip'
+import '@/plugins/L.SafeDivOverlay'
+
+const resetDefaultMarkerIcon = () => {
+  delete L.Icon.Default.prototype._getIconUrl
+
+  L.Icon.Default.mergeOptions({
+    iconRetinaUrl: markerIcon2x,
+    iconUrl: markerIcon,
+    shadowUrl: markerShadow
+  })
+}
+
+const install = (app, options = {}) => {
+  app.component(`${options.prefix || 'vae'}-map`, VaeMap)
+  app.component(`${options.prefix || 'vae'}-lrmap`, VaeLrmap)
+  app.component(`${options.prefix || 'vae'}-map-ctrl-draw`, VaeMapCtrlDraw)
+  app.component(`${options.prefix || 'vae'}-map-ctrl-draw-line`, VaeMapCtrlDrawLine)
+  resetDefaultMarkerIcon()
+}
+
+export { VaeMap, VaeLrmap, VaeMapCtrlDraw, VaeMapCtrlDrawLine }
+
+export default { install }