@sword916/vae-map-plus 1.0.0 → 1.0.1

package/src/composables/useContextMenu.js

@@ -1,99 +0,0 @@
-import { computed, h, nextTick, onBeforeUnmount, ref, unref, watch } from 'vue'
-import ContextMenu from '@/packages/vae-map/ctrl-context-menu/index.vue'
-
-function resolveElement(target) {
-  return target?.$el ?? target ?? null
-}
-
-export function useContextMenu({ mapRef, mapContainerRef, menusRef }) {
-  const contextMenuRef = ref(null)
-  const showContextMenu = ref(false)
-  const contextMenuEvent = ref(null)
-  const contextMenuLeft = ref(0)
-  const contextMenuTop = ref(0)
-
-  const menuList = computed(() => unref(menusRef) ?? [])
-
-  const hideContextMenu = () => {
-    const map = unref(mapRef)
-    map?.off('click', hideContextMenu)
-    showContextMenu.value = false
-    contextMenuEvent.value = null
-  }
-
-  const handleCallback = (callback) => {
-    showContextMenu.value = false
-    if (callback && _.isFunction(callback)) {
-      callback(contextMenuEvent.value)
-    }
-  }
-
-  const handleRightClick = async (event) => {
-    showContextMenu.value = true
-    contextMenuEvent.value = event
-    await nextTick()
-
-    const menuEl = resolveElement(contextMenuRef.value)
-    const containerEl = resolveElement(unref(mapContainerRef))
-    if (!menuEl || !containerEl) {
-      return
-    }
-
-    const menuHeight = menuEl.scrollHeight
-    const menuWidth = menuEl.scrollWidth
-    const containerHeight = containerEl.scrollHeight
-    const containerWidth = containerEl.scrollWidth
-
-    contextMenuLeft.value = event.containerPoint.x
-    contextMenuTop.value = event.containerPoint.y
-
-    if (contextMenuLeft.value + menuWidth > containerWidth && containerWidth > menuWidth) {
-      contextMenuLeft.value = containerWidth - menuWidth
-    }
-
-    if (contextMenuTop.value + menuHeight > containerHeight && containerHeight > menuHeight) {
-      contextMenuTop.value = containerHeight - menuHeight
-    }
-
-    unref(mapRef)?.on('click', hideContextMenu)
-  }
-
-  const addContextMenu = () => {
-    const map = unref(mapRef)
-    if (!map) {
-      return
-    }
-    map.off('contextmenu', handleRightClick)
-    if (menuList.value.length > 0) {
-      map.on('contextmenu', handleRightClick)
-    }
-  }
-
-  watch(menuList, addContextMenu, { deep: true })
-
-  onBeforeUnmount(() => {
-    const map = unref(mapRef)
-    map?.off('contextmenu', handleRightClick)
-    map?.off('click', hideContextMenu)
-  })
-
-  const renderContextMenu = () => {
-    if (menuList.value.length === 0 || !showContextMenu.value) {
-      return null
-    }
-
-    return h(ContextMenu, {
-      ref: contextMenuRef,
-      menus: menuList.value,
-      left: contextMenuLeft.value,
-      top: contextMenuTop.value,
-      onCallback: handleCallback
-    })
-  }
-
-  return {
-    addContextMenu,
-    hideContextMenu,
-    renderContextMenu
-  }
-}

package/src/composables/useMapMeasure.js

@@ -1,191 +0,0 @@
-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

@@ -1,81 +0,0 @@
-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

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

package/src/packages/index.js

@@ -1,16 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

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

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

@@ -1,98 +0,0 @@
-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

@@ -1,74 +0,0 @@
-<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>