@sword916/vae-map-plus 1.0.0 → 1.0.1

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

@@ -1,499 +0,0 @@
-<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'
-})
-
-// L.CircleMarker鐨勯厤缃?
-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-cloudmap/ctrl-draw-line/index.vue

@@ -1,161 +0,0 @@
-<template>
-  <div class="vae-map-ctrl--draw">
-    <div class="item-group">
-      <template>
-        <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-trash-alt" @click="clearDrawItems" />
-        </div>
-      </template>
-    </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)
-
-const drawReady = computed(() => enabled.value)
-const saveReady = computed(() => enabled.value)
-
-watch(drawStatus, (value) => {
-  if (value === 'none') {
-    quitDrawMode()
-  } else if (value === 'edit') {
-    quitDrawMode()
-    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 === 'Line') {
-      if (polyline.value) {
-        polyline.value.remove()
-      }
-      polyline.value = layer
-      drawStatus.value = 'none'
-      ElMessage.success('缁樺埗瀹屾垚')
-      emit('on-create', polyline.value)
-    }
-  })
-
-  const latLngs = data?.latLngs
-  if (Array.isArray(latLngs) && latLngs.length > 1) {
-    polyline.value = L.polyline(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 startEditMode = () => {
-  if (drawReady.value && !polyline.value.pm.enabled()) {
-    polyline.value.pm.enable()
-    drawStatus.value = 'edit'
-  }
-}
-
-const quitEditMode = () => {
-  if (polyline.value?.pm.enabled()) {
-    polyline.value.pm.disable()
-  }
-}
-
-const removeLastVertx = () => {
-  const target = mapInstance.value.pm.Draw.Line
-  target._removeLastVertex()
-  if (!target._enabled) {
-    drawStatus.value = 'none'
-  }
-}
-
-const quitDragMode = () => {
-  if (mapInstance.value?.pm.globalDragModeEnabled()) {
-    mapInstance.value.pm.toggleGlobalDragMode()
-  }
-}
-
-const quitDrawMode = () => {
-  mapInstance.value?.pm.disableDraw('Line')
-}
-
-const saveItems = () => {
-  drawStatus.value = 'finish'
-  quitEditMode()
-  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
-}
-
-defineExpose({
-  enable
-})
-</script>