@sword916/vae-map-plus 1.0.0

package/examples/views/parts/popup.vue

@@ -0,0 +1,39 @@
+<template>
+  <div :style="style">
+    <div v-for="item in count" :key="item">{{ name }}: {{ item }}</div>
+  </div>
+</template>
+
+<script setup>
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+
+const props = defineProps({
+  name: {
+    type: String,
+    default: ''
+  }
+})
+
+const count = ref(1)
+let timer = null
+
+const style = computed(() => ({
+  width: `${100 + count.value * 10}px`
+}))
+
+onMounted(() => {
+  timer = window.setInterval(() => {
+    count.value += 1
+    if (count.value === 10) {
+      clearInterval(timer)
+      timer = null
+    }
+  }, 1000)
+})
+
+onBeforeUnmount(() => {
+  if (timer) {
+    clearInterval(timer)
+  }
+})
+</script>

package/examples/views/parts/tooltip.vue

@@ -0,0 +1,39 @@
+<template>
+  <div :style="style">
+    <div v-for="item in count" :key="item">{{ name }}: {{ item }}</div>
+  </div>
+</template>
+
+<script setup>
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+
+const props = defineProps({
+  name: {
+    type: String,
+    default: ''
+  }
+})
+
+const count = ref(1)
+let timer = null
+
+const style = computed(() => ({
+  width: `${50 + count.value * 10}px`
+}))
+
+onMounted(() => {
+  timer = window.setInterval(() => {
+    count.value += 1
+    if (count.value === 5) {
+      clearInterval(timer)
+      timer = null
+    }
+  }, 1000)
+})
+
+onBeforeUnmount(() => {
+  if (timer) {
+    clearInterval(timer)
+  }
+})
+</script>

package/examples/views/push-area.vue

@@ -0,0 +1,52 @@
+<template>
+  <vae-map :base-layers="['GaoDe.Normal.Map']" @init-map="initMap" />
+</template>
+
+<script setup>
+const poly = [
+  { lat: 34.26572889446933, lng: 117.18566894531251 },
+  { lat: 34.24274329938616, lng: 117.1956253051758 },
+  { lat: 34.27395677834786, lng: 117.4043655395508 },
+  { lat: 34.29579932143427, lng: 117.39475250244142 }
+]
+
+const baseLayers = L.layerGroup()
+let calculator = null
+
+const drawPoly = (map) => {
+  L.polygon(poly).addTo(baseLayers)
+  _.delay(() => {
+    map.fitBounds(L.latLngBounds(poly))
+  }, 250)
+}
+
+const doCalculate = () => {
+  calculator = L.footageCalculator.area({
+    latlngs: poly,
+    headStart: { lat: 34.26572889446933, lng: 117.18566894531251 },
+    headEnd: { lat: 34.29579932143427, lng: 117.39475250244142 },
+    tailStart: { lat: 34.24274329938616, lng: 117.1956253051758 },
+    tailEnd: { lat: 34.27395677834786, lng: 117.4043655395508 }
+  })
+
+  const result = calculator.doCalculate({
+    headStart: { lat: 34.26572889446933, lng: 117.18566894531251 },
+    tailStart: { lat: 34.24274329938616, lng: 117.1956253051758 },
+    headDistance: 100,
+    tailDistance: 100
+  })
+
+  L.polygon(result.latlngs, { color: 'red' }).addTo(baseLayers)
+}
+
+const initMap = (map) => {
+  map.addLayer(baseLayers)
+  map.on('click', (event) => {
+    console.log(event.latlng)
+  })
+
+  baseLayers.clearLayers()
+  drawPoly(map)
+  doCalculate()
+}
+</script>

package/examples/views/push-line.vue

@@ -0,0 +1,84 @@
+<template>
+  <vae-map @init-map="initMap" />
+</template>
+
+<script setup>
+const lines = [
+  [
+    { lat: 34.31614748988616, lng: 117.32368469238283 },
+    { lat: 34.293104769231974, lng: 117.31870651245119 },
+    { lat: 34.28629709450699, lng: 117.33801841735841 }
+  ],
+  [
+    { lat: 34.29955736832844, lng: 117.33630180358887 },
+    { lat: 34.299202842785114, lng: 117.35329627990724 }
+  ],
+  [
+    { lat: 34.29565750505196, lng: 117.33501434326173 },
+    { lat: 34.29374296045891, lng: 117.35097885131837 }
+  ]
+]
+
+const footages = [3100, 200, 200, 2000, 100, 300, 300, 300, 2000, 100, 100]
+const colors = ['#964B00', '#FFC0CB', '#00FF00', '#87CEFA', '#e01f54', '#f5e8c8', '#0a915d']
+const baseLayers = L.layerGroup()
+const polylines = []
+
+const drawLines = (map) => {
+  let latlngs = []
+  lines.forEach((line) => {
+    polylines.push(L.polyline(line).addTo(baseLayers))
+    latlngs = _.concat(latlngs, line)
+  })
+  _.delay(() => {
+    map.fitBounds(L.latLngBounds(latlngs))
+  }, 250)
+}
+
+const doCalculate = () => {
+  let footageIndex = 0
+
+  for (const line of lines) {
+    const remainingFootages = _.takeRight(footages, footages.length - footageIndex)
+    if (remainingFootages.length === 0) {
+      continue
+    }
+
+    const calculator = new L.FootageCalculator.Line({
+      latlngs: line,
+      width: 200
+    })
+    let start = line[0]
+
+    for (const footage of remainingFootages) {
+      const { path, remainingPath, area } = calculator.doCalculate({
+        start,
+        distance: footage
+      })
+
+      L.polygon(area, {
+        color: colors[footageIndex % colors.length],
+        fillOpacity: 0.8
+      }).addTo(baseLayers)
+
+      footageIndex += 1
+      start = _.last(path)
+
+      if (remainingPath.length === 0) {
+        break
+      }
+    }
+  }
+}
+
+const initMap = (map) => {
+  map.addLayer(baseLayers)
+  map.on('click', (event) => {
+    console.log(event.latlng)
+  })
+
+  baseLayers.clearLayers()
+  drawLines(map)
+  doCalculate()
+}
+</script>

package/examples/views/trace.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="map-container">
+    <vae-map :base-layers="['GaoDe.Normal.Map']" @init-map="initMap" />
+    <div class="actions">
+      <el-button @click="start">START</el-button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const latLngs = [
+  { lat: 34.3380, lng: 117.311 },
+  { lat: 34.2794, lng: 117.314 },
+  { lat: 34.2867, lng: 117.365 },
+  { lat: 34.2470, lng: 117.341 },
+  { lat: 34.2132, lng: 117.403 }
+]
+
+const map = ref(null)
+const aMarker = ref(null)
+
+const initMap = (value) => {
+  map.value = value
+  aMarker.value = L.animatedMarker({ latLngs }).addTo(map.value)
+}
+
+const start = () => {
+  aMarker.value.on('chunkmove', ({ index, duration }) => {
+    map.value.panTo(latLngs[index], { duration: duration / 1000 })
+  })
+  aMarker.value.startMove()
+}
+</script>
+
+<style lang="less" scoped>
+.map-container {
+  height: 100%;
+  position: relative;
+
+  .actions {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    z-index: 2000;
+  }
+}
+</style>

package/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>vae-map</title>
+    <link rel="icon" href="/favicon.ico" />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/examples/index.js"></script>
+  </body>
+  </html>

package/jsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    }
+  },
+  "exclude": [
+    "node_modules",
+    "dist",
+    "lib",
+    "plugins",
+    "vae-map"
+  ]
+}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@sword916/vae-map-plus",
+  "version": "1.0.0",
+  "private": false,
+  "description": "map components and plugins",
+  "author": "@sword916",
+  "license": "MIT",
+  "main": "./lib/index.js",
+  "module": "./lib/index.js",
+  "exports": {
+    ".": "./lib/index.js"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "node ./build/index.mjs",
+    "build-example": "vite build",
+    "preview": "vite preview --port 6601",
+    "pub": "npm publish --access public",
+    "pub-beta": "npm publish --tag beta --access public"
+  },
+  "dependencies": {
+    "@amap/amap-jsapi-loader": "^1.0.1",
+    "@fortawesome/fontawesome-free": "^5.15.4",
+    "@geoman-io/leaflet-geoman-free": "^2.11.4",
+    "@turf/buffer": "^6.5.0",
+    "axios": "^0.24.0",
+    "echarts": "^5.2.2",
+    "element-plus": "^2.8.8",
+    "jquery": "^3.6.0",
+    "leaflet": "^1.9.4",
+    "leaflet-geometryutil": "^0.10.3",
+    "leaflet.markercluster": "^1.5.3",
+    "lodash": "^4.17.21",
+    "proj4": "^2.7.5",
+    "proj4leaflet": "^1.0.2",
+    "uuid": "^9.0.1",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vitejs/plugin-vue-jsx": "^4.1.2",
+    "@vue/compiler-sfc": "^3.5.13",
+    "less": "^4.2.0",
+    "vite": "^5.4.11"
+  }
+}

package/public/index.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+  <style type="text/css">
+    html {
+      width: 100%;
+      height: 100%;
+    }
+
+    body {
+      width: 100%;
+      height: 100%;
+      margin: 0;
+      padding: 0;
+      overflow: hidden;
+    }
+  </style>
+  <title>...</title>
+</head>
+
+<body>
+  <div id="app"></div>
+</body>
+
+</html>

package/src/components/resize-listener/component.jsx

@@ -0,0 +1,30 @@
+import { defineComponent, ref } from 'vue'
+import { debounce as lodashDebounce } from 'lodash'
+import { useElementResize } from '@/composables/useResizeObserver'
+
+export default defineComponent({
+  name: 'ResizeListener',
+  props: {
+    debounce: {
+      type: Number,
+      default: 100
+    }
+  },
+  emits: ['resize'],
+  setup(props, { emit, slots }) {
+    const rootRef = ref(null)
+    const emitResize = lodashDebounce(() => {
+      if (rootRef.value) {
+        emit('resize', rootRef.value)
+      }
+    }, props.debounce)
+
+    useElementResize(rootRef, ({ visible }) => {
+      if (visible) {
+        emitResize()
+      }
+    })
+
+    return () => <div ref={rootRef}>{slots.default?.()}</div>
+  }
+})

package/src/components/resize-listener/index.js

@@ -0,0 +1,3 @@
+import ResizeListener from './component.jsx'
+
+export default ResizeListener

package/src/composables/useAutoMessage.js

@@ -0,0 +1,41 @@
+import { ElMessage, ElNotification } from 'element-plus'
+
+export function useAutoMessage() {
+  return (options) => {
+    let message
+    let type
+    let duration
+
+    if (_.isString(options)) {
+      message = options
+      type = 'error'
+      duration = 3000
+    } else {
+      message = options.message
+      type = options.type || 'error'
+      duration = _.isNil(options.duration) ? 3000 : options.duration
+    }
+
+    if (['success', 'warning', 'info', 'error'].includes(type)) {
+      ElMessage({
+        message,
+        type,
+        duration
+      })
+      return
+    }
+
+    let notifyType = type
+    if (notifyType === 'info') {
+      notifyType = 'primary'
+    } else if (notifyType === 'error') {
+      notifyType = 'danger'
+    }
+
+    ElNotification({
+      message,
+      type: notifyType,
+      duration
+    })
+  }
+}

package/src/composables/useContextMenu.js

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