@sword916/vae-map-plus 1.0.0 → 1.0.1

package/examples/views/index.vue

@@ -1,61 +0,0 @@
-<template>
-  <div class="examples">
-    <el-button @click="navi = true" type="primary" class="toggle">菜单</el-button>
-    <el-drawer v-model="navi" :show-close="false">
-      <el-row :gutter="10">
-        <el-col v-for="item in navis" :key="item" :span="8">
-          <el-button size="small" style="width: 100%" @click="routeTo(item)">{{ item }}</el-button>
-        </el-col>
-      </el-row>
-    </el-drawer>
-    <router-view />
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { useRouter } from 'vue-router'
-
-const router = useRouter()
-const navi = ref(false)
-const navis = ['amap', 'map', 'lrmap', 'push-area', 'push-line', 'echarts', 'trace', 'cluster', 'cover', 'draw', 'draw-line', 'measure', 'amarker', 'emarker', 'buffer', 'image']
-
-const routeTo = (path) => {
-  router.push(`/views/${path}`).finally(() => {
-    navi.value = false
-  })
-}
-</script>
-
-<style lang="less">
-.examples {
-  position: relative;
-  height: 100%;
-
-  .el-drawer__header {
-    padding: 0;
-    margin: 0;
-  }
-
-  .el-drawer__body {
-    padding: 10px;
-
-    .el-col {
-      text-align: center;
-      margin-top: 20px;
-    }
-
-    .el-button {
-      width: 88px;
-    }
-  }
-
-  .toggle {
-    position: absolute;
-    top: calc(50% - 20px);
-    right: 0;
-    z-index: 1500;
-    box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.5);
-  }
-}
-</style>

package/examples/views/lrmap.vue

@@ -1,108 +0,0 @@
-<template>
-  <div class="container">
-    <div class="actions">
-      <el-button type="success" size="small" @click="setLayerSet">切换图组</el-button>
-      <el-button type="primary" size="small" @click="getImage">缩略图</el-button>
-      <div style="background: #ccc">
-        <el-image :src="imageSrc" />
-      </div>
-    </div>
-    <div class="layers">
-      <el-tree ref="treeRef" :data="treeLayers" node-key="id" :default-checked-keys="visibleKeys" show-checkbox />
-      <div>
-        <el-button type="primary" size="small" @click="confirmLayers">确认</el-button>
-      </div>
-    </div>
-    <vae-lrmap :before-create="beforeCreate" :options="options" @init-map="initMap" @reload-map="initMap" />
-  </div>
-</template>
-
-<script setup>
-import { computed, ref } from 'vue'
-
-const treeRef = ref(null)
-const map = ref(null)
-const treeLayers = ref([])
-const visibleKeys = ref([])
-const imageSrc = ref(null)
-
-const options = computed(() => ({
-  url: 'http://123.56.162.219:8702/gis-xzk/',
-  dsname: 'XZMKGIS',
-  rotate: true,
-  crs: 'bj54'
-}))
-
-const initMap = async (value) => {
-  map.value = value
-  treeLayers.value = map.value.vae.treeLayers
-  visibleKeys.value = map.value.vae.visibleKeys
-
-  const arr = [
-    [32.76422859210167, 116.46418594831812],
-    [32.759949154841145, 116.48346373812541],
-    [32.757756957291484, 116.4829576836318],
-    [32.7620293706736, 116.46364205232726]
-  ]
-
-  L.polygon(arr, { fillColor: 'green', fillOpacity: 0.1 }).addTo(map.value).bindTooltip('测试', {
-    permanent: true,
-    direction: 'right',
-    className: 'nice-tooltip dark',
-    offset: [6, 28]
-  })
-}
-
-const beforeCreate = (context) => new Promise((resolve) => {
-  _.delay(() => {
-    console.log(context)
-    resolve()
-  }, 500)
-})
-
-const confirmLayers = () => {
-  map.value.vae.showLayers(treeRef.value.getCheckedKeys()).then((layers) => {
-    console.log(layers)
-  })
-}
-
-const setLayerSet = async () => {
-  const keys = await map.value.vae.showLayerSets('安全监测监控系统图')
-  treeRef.value.setCheckedKeys(keys)
-}
-
-const getImage = () => {
-  map.value.vae.getThumbnail().then((imageData) => {
-    imageSrc.value = imageData
-  })
-}
-</script>
-
-<style lang="less" scoped>
-.container {
-  height: 100%;
-  position: relative;
-
-  .actions {
-    position: absolute;
-    top: 10px;
-    left: 10px;
-    z-index: 1000;
-  }
-
-  .layers {
-    overflow: auto;
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    z-index: 1000;
-    height: 600px;
-    width: 400px;
-    background: #f5f7fa;
-
-    :deep(.el-tree) {
-      background: #f5f7fa;
-    }
-  }
-}
-</style>

package/examples/views/map.vue

@@ -1,82 +0,0 @@
-<template>
-  <vae-map :base-layers="baseLayers" :options="options" :context-menu="menus" @init-map="initMap" />
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import vpopup from './parts/popup.vue'
-import vtooltip from './parts/tooltip.vue'
-
-const map = ref(null)
-const baseLayers = ref([])
-const menus = ref([])
-const options = ref({})
-const latLngs = ref([])
-const points = ref([])
-
-const initMap = (value) => {
-  const icon = L.glyphicon({
-    icon: 'fab fa-alipay',
-    effect: {
-      type: 'halo'
-    }
-  })
-
-  const marker = L.marker(value.getCenter()).setIcon(icon).addTo(value)
-  marker.bindPopup(L.vuePopup({ vueInstance: vpopup, props: { name: 'vae' } }))
-  marker.bindTooltip(L.vueTooltip({ vueInstance: vtooltip, props: { name: 'vae' } }), {
-    permanent: true,
-    direction: 'right',
-    offset: [10, 0]
-  })
-
-  baseLayers.value = ['GaoDe.Normal.Map']
-  _.delay(() => {
-    baseLayers.value = ['TianDiTu.Satellite.Map@1a346e3ea95a3227a097cabf11a901b7']
-  }, 3000)
-
-  map.value = value
-
-  const polygonLatlngs = [
-    [37, -109.05],
-    [41, -109.03],
-    [41, -102.05],
-    [37, -102.04]
-  ]
-
-  const polygon = L.polygon(polygonLatlngs, { color: 'red' }).addTo(map.value)
-  polygon.bindTooltip(L.vueTooltip({ vueInstance: vtooltip, props: { name: 'vae' } }), {
-    permanent: true,
-    direction: 'right',
-    offset: [10, 0]
-  })
-  map.value.fitBounds(polygon.getBounds())
-
-  menus.value = [
-    {
-      text: 'hello world',
-      callback: (event) => {
-        L.marker(event.latlng).addTo(map.value)
-        if (points.value.length !== 4) {
-          latLngs.value.push(event.latlng)
-          if (latLngs.value.length === 4) {
-            L.polygon(latLngs.value).addTo(map.value)
-          }
-        }
-      }
-    },
-    {
-      text: 'zoom in',
-      divided: true
-    },
-    {
-      text: 'zoom out'
-    },
-    {
-      text: 'fly to',
-      divided: true,
-      disabled: true
-    }
-  ]
-}
-</script>

package/examples/views/measure.vue

@@ -1,86 +0,0 @@
-<template>
-  <div class="map-container">
-    <vae-lrmap :options="options" @init-map="initMap" />
-    <span class="actions">
-      <div style="text-align: right">
-        <el-button size="small" type="danger" @click="ClearMeasure">清理</el-button>
-        <el-button size="small" type="warning" @click="CancelMeasure">取消当前</el-button>
-        <el-button size="small" type="primary" @click="StartMeasure('Line')">测距</el-button>
-        <el-button size="small" type="primary" @click="StartMeasure('Polygon')">测面积</el-button>
-      </div>
-      <div style="margin-top: 10px; text-align: right">
-        <el-button size="small">绘制状态 # {{ DrawStatus }}</el-button>
-        <el-button size="small" type="danger" @click="clearDrawSegement">清理线段</el-button>
-        <el-button size="small" type="info" @click="drawSegement">画线段 # 非测距</el-button>
-      </div>
-    </span>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { useMapMeasure } from '@/composables/useMapMeasure'
-
-const { DrawStatus, EnableMeasure, StartMeasure, CancelMeasure, ClearMeasure } = useMapMeasure()
-
-const map = ref(null)
-const drawItems = L.layerGroup()
-const options = {
-  url: 'http://58.218.64.10:38500/',
-  dsname: 'XS_MLGIS',
-  crs: 'bj54',
-  defaultLayerSets: ['采掘工程平面图>8煤']
-}
-
-const initMap = (value) => {
-  map.value = value
-  EnableMeasure(value)
-}
-
-const drawSegement = () => {
-  drawItems.addTo(map.value)
-
-  const onLayerCreate = (event) => {
-    event.layer.remove().addTo(drawItems)
-  }
-  const onDrawStart = (event) => {
-    const workingLayer = event.workingLayer
-    if (event.shape === 'Line') {
-      workingLayer.on('pm:vertexadded', (vertex) => {
-        if (workingLayer._latlngs.length === 2) {
-          vertex.marker.fire('click')
-        }
-      })
-    }
-  }
-  const onDrawEnd = () => {
-    map.value.off('pm:create', onLayerCreate)
-    map.value.off('pm:drawstart', onDrawStart)
-    map.value.off('pm:drawend', onDrawEnd)
-  }
-
-  map.value.on('pm:create', onLayerCreate)
-  map.value.on('pm:drawstart', onDrawStart)
-  map.value.on('pm:drawend', onDrawEnd)
-  map.value.pm.enableDraw('Line')
-}
-
-const clearDrawSegement = () => {
-  map.value.pm.disableDraw('Line')
-  drawItems.clearLayers()
-}
-</script>
-
-<style lang="less" scoped>
-.map-container {
-  height: 100%;
-  position: relative;
-
-  .actions {
-    position: absolute;
-    right: 10px;
-    top: 10px;
-    z-index: 1000;
-  }
-}
-</style>

package/examples/views/parts/popup.vue

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

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

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

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

@@ -1,49 +0,0 @@
-<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/jsconfig.json

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

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

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

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

package/src/composables/useAutoMessage.js

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