@sword916/vae-map-plus 1.0.0

package/src/composables/useMapMeasure.js

@@ -0,0 +1,191 @@
+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 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 ?? ''}`.trim(),
+    iconSize: [iconWidth, 18]
+  })
+}
+
+const unregisterDrawEvents = () => {
+  map?.off('pm:create', Events.onLayerCreate)
+  map?.off('pm:drawstart', Events.onDrawStart)
+  map?.off('pm:drawend', Events.onDrawEnd)
+}
+
+const handleMouseMoveAtLine = _.throttle((event) => {
+  currentLatLng = event.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((event) => {
+  currentLatLng = event.latlng
+  const currentLatLngs = _.concat(polygonVertexes, currentLatLng)
+
+  let useLatLng = true
+  if (map.vae && !map.vae.crs.code) {
+    useLatLng = false
+  }
+
+  polygonCurrentArea = useLatLng
+    ? L.GeoUtil.areaByLatLngs(currentLatLngs)
+    : L.GeoUtil.areaByPoints(currentLatLngs.map((value) => ({ x: value.lat, y: value.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 Events = {
+  onLayerCreate(event) {
+    event.layer.remove().addTo(drawItems)
+    if (event.shape === 'Polygon') {
+      const hintMarkerIcon = createTextIcon(L.GeoUtil.readableArea(polygonCurrentArea))
+      L.marker(currentLatLng, { interactive: false }).setIcon(hintMarkerIcon).addTo(drawItems)
+    }
+  },
+  onDrawStart(event) {
+    const workingLayer = event.workingLayer
+    if (event.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 (event.shape === 'Polygon') {
+      map.on('mousemove', handleMouseMoveAtPolygon)
+      workingLayer.on('pm:vertexadded', () => {
+        polygonVertexes = workingLayer._latlngs
+      })
+    }
+  },
+  onDrawEnd(event) {
+    if (event.shape === 'Line') {
+      map.off('mousemove', handleMouseMoveAtLine)
+      if (lineHintMarker) {
+        drawHelpItems.removeLayer(lineHintMarker)
+        lineHintMarker = null
+      }
+      lineVertexes = []
+      currentLatLng = null
+      lineCurrentDistance = null
+    } else if (event.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)
+}
+
+export function useMapMeasure() {
+  const drawStatus = ref(false)
+
+  const enableMeasure = (value) => {
+    map = value
+    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 = () => {
+    drawHelpItems.clearLayers()
+    map.pm.Draw.getShapes().forEach((shape) => {
+      map.pm.disableDraw(shape)
+    })
+
+    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: drawStatus,
+    EnableMeasure: enableMeasure,
+    StartMeasure: startMeasure,
+    CancelMeasure: cancelMeasure,
+    ClearMeasure: clearMeasure
+  }
+}

package/src/composables/useResizeObserver.js

@@ -0,0 +1,81 @@
+import { onBeforeUnmount, unref, watch } from 'vue'
+
+const observerRegistry = new WeakMap()
+
+function normalizeEntry(entry) {
+  return {
+    width: entry.contentRect.width,
+    height: entry.contentRect.height,
+    visible: !!(entry.contentRect.height && entry.contentRect.width),
+    entry
+  }
+}
+
+function getOrCreateRecord(element) {
+  let record = observerRegistry.get(element)
+  if (!record) {
+    record = {
+      listeners: new Set(),
+      observer: new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          const current = observerRegistry.get(entry.target)
+          if (!current) {
+            continue
+          }
+          const payload = normalizeEntry(entry)
+          current.listeners.forEach((listener) => listener(payload))
+        }
+      })
+    }
+    record.observer.observe(element)
+    observerRegistry.set(element, record)
+  }
+  return record
+}
+
+function cleanupRecord(element) {
+  const record = observerRegistry.get(element)
+  if (!record || record.listeners.size > 0) {
+    return
+  }
+  record.observer.disconnect()
+  observerRegistry.delete(element)
+}
+
+export function observeElementResize(element, callback) {
+  if (!element || typeof callback !== 'function') {
+    return () => {}
+  }
+  const record = getOrCreateRecord(element)
+  record.listeners.add(callback)
+
+  return () => {
+    const current = observerRegistry.get(element)
+    if (!current) {
+      return
+    }
+    current.listeners.delete(callback)
+    cleanupRecord(element)
+  }
+}
+
+export function useElementResize(target, callback) {
+  let stop = null
+
+  const bind = (element) => {
+    stop?.()
+    stop = element ? observeElementResize(element, callback) : null
+  }
+
+  watch(
+    () => unref(target),
+    (element) => {
+      bind(element)
+    },
+    { immediate: true }
+  )
+
+  onBeforeUnmount(() => {
+    stop?.()
+  })
+}

package/src/mixins/message.js

@@ -0,0 +1 @@
+export { useAutoMessage as default } from '@/composables/useAutoMessage'

package/src/packages/index.js

@@ -0,0 +1,16 @@
+import '@/plugins/globals'
+
+import VaeAmap from './vae-amap/index.js'
+import VaeMap from './vae-map/index.js'
+import VaeCloudmap from './vae-cloudmap'
+const components = [VaeAmap, VaeMap, VaeCloudmap]
+
+const install = (app, options = {}) => {
+  components.forEach((component) => {
+    app.use(component, options)
+  })
+}
+
+export { VaeAmap, VaeMap, VaeCloudmap }
+
+export default { install }

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

@@ -0,0 +1,8 @@
+import VaeAmap from './vae-amap.jsx'
+import './style.less'
+
+VaeAmap.install = (app, options = {}) => {
+  app.component(`${options.prefix || 'vae'}-amap`, VaeAmap)
+}
+
+export default VaeAmap

package/src/packages/vae-amap/style.less

@@ -0,0 +1,9 @@
+.vae-amap {
+    .amap-logo {
+        opacity: 0;
+    }
+
+    .amap-copyright {
+        opacity: 0;
+    }
+}

package/src/packages/vae-amap/vae-amap.jsx

@@ -0,0 +1,98 @@
+import { defineComponent, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import AMapLoader from '@amap/amap-jsapi-loader'
+import { idGen } from '@/utils'
+
+export default defineComponent({
+  name: 'VaeAmap',
+  props: {
+    height: {
+      type: String,
+      default: '100%'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    apiKey: {
+      type: String,
+      default: ''
+    },
+    version: {
+      type: String,
+      default: '2.0'
+    },
+    plugins: {
+      type: Array,
+      default: () => []
+    },
+    options: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  emits: ['amap-ready', 'init-map'],
+  setup(props, { emit }) {
+    const uuid = ref(`vae_amap_${idGen()}`)
+    const amap = ref(null)
+
+    const redefineAMap = () => {
+      const originalConvertFrom = AMap.convertFrom
+      AMap.convertFrom = function (lnglat, type = 'gps') {
+        return new Promise((resolve) => {
+          originalConvertFrom(lnglat, type, (status, result) => {
+            resolve(result.locations)
+          })
+        })
+      }
+    }
+
+    const loadResource = async () => {
+      if (!window.AMap) {
+        await AMapLoader.load({
+          key: props.apiKey,
+          version: props.version,
+          plugins: props.plugins
+        })
+        redefineAMap()
+      }
+      emit('amap-ready')
+    }
+
+    const createMap = () => {
+      if (!amap.value && !_.isEmpty(props.options)) {
+        if (window.AMap) {
+          amap.value = new AMap.Map(uuid.value, props.options)
+          amap.value.on('complete', () => {
+            emit('init-map', amap.value)
+          })
+        } else {
+          console.error("AMap is not ready, set options in 'amap-ready' event")
+        }
+      }
+    }
+
+    watch(
+      () => props.options,
+      () => {
+        createMap()
+      },
+      { deep: true }
+    )
+
+    onMounted(() => {
+      loadResource()
+    })
+
+    onBeforeUnmount(() => {
+      amap.value?.destroy()
+    })
+
+    return () => (
+      <div
+        id={uuid.value}
+        class="vae-amap"
+        style={{ height: props.height, width: props.width }}>
+      </div>
+    )
+  }
+})

package/src/packages/vae-cloudmap/ctrl-context-menu/index.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="vae-map-ctrl--context-menu" :style="style">
+    <template v-for="item in menus" :key="item.text">
+      <div class="item" :class="{ 'is-disabled': item.disabled, 'is-divided': item.divided }" @click="handleItemClick(item)">
+        {{ item.text }}
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  left: {
+    type: Number,
+    default: 0
+  },
+  top: {
+    type: Number,
+    default: 0
+  },
+  menus: {
+    type: Array,
+    default: () => []
+  }
+})
+
+const emit = defineEmits(['callback'])
+
+const handleItemClick = (item) => {
+  if (!item.disabled) {
+    emit('callback', item.callback)
+  }
+}
+
+const style = computed(() => ({
+  left: `${props.left}px`,
+  top: `${props.top}px`
+}))
+</script>
+
+<style lang="less" scoped>
+.vae-map-ctrl--context-menu {
+  position: absolute;
+  width: 200px;
+  background-color: white;
+  padding: 3px 0px;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
+  z-index: 2000;
+
+  .item {
+    height: 28px;
+    line-height: 28px;
+    font-size: 12px;
+    padding: 0px 12px;
+    letter-spacing: 1px;
+    cursor: default;
+
+    &:not(:first-child).is-divided {
+      border-top: 1px solid #dcdfe6;
+    }
+
+    &:hover {
+      background-color: #eee;
+    }
+
+    &.is-disabled {
+      color: #c0c4cc;
+      background-color: white;
+    }
+  }
+}
+</style>