@sword916/vae-map-plus 1.0.0

package/examples/views/echarts.vue

@@ -0,0 +1,142 @@
+<template>
+  <div class="map-container">
+    <vae-map :options="options" :base-layers="baseLayers" @init-map="initMap" />
+    <span class="actions">
+      <el-button size="small" @click="switchLineLayers">迁徙图</el-button>
+      <el-button size="small" @click="switchHeatLayers">热力图</el-button>
+    </span>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const latLngs = [
+  [40.2539, 116.4551],
+  [31.2891, 121.4648],
+  [23.2196, 113.5107]
+]
+
+const echartsLatLngs = latLngs.map((item) => [item[1], item[0]])
+
+const map = ref(null)
+const options = {
+  zoom: 5
+}
+const baseLayers = ['Geoq.Normal.PurplishBlue']
+const lineLayers = L.layerGroup()
+const heatLayers = L.layerGroup()
+
+const addLineLayer = () => {
+  const planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z'
+  const series = [
+    {
+      coordinateSystem: 'leaflet',
+      type: 'lines',
+      zlevel: 1,
+      polyline: true,
+      effect: {
+        show: true,
+        period: 5,
+        trailLength: 0.8,
+        color: '#ffc107',
+        symbolSize: 8
+      },
+      lineStyle: {
+        color: '#0dcaf0',
+        opacity: 0.1,
+        width: 1
+      },
+      data: [{ coords: echartsLatLngs }]
+    },
+    {
+      coordinateSystem: 'leaflet',
+      type: 'lines',
+      zlevel: 3,
+      symbol: ['none', 'arrow'],
+      symbolSize: 10,
+      effect: {
+        show: true,
+        period: 5,
+        trailLength: 0,
+        symbol: planePath,
+        symbolSize: 25
+      },
+      lineStyle: {
+        width: 1,
+        curveness: 0.2
+      },
+      data: [{ coords: [echartsLatLngs[0], echartsLatLngs[2]] }]
+    },
+    {
+      coordinateSystem: 'leaflet',
+      type: 'effectScatter',
+      zlevel: 2,
+      symbolSize: 10,
+      rippleEffect: {
+        brushType: 'stroke'
+      },
+      data: echartsLatLngs
+    }
+  ]
+  L.echartsLayer({ series }).addTo(lineLayers)
+}
+
+const addHeatLayer = () => {
+  const chartOptions = {
+    visualMap: {
+      show: false,
+      seriesIndex: 0,
+      inRange: {
+        color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
+      }
+    },
+    series: [{
+      coordinateSystem: 'leaflet',
+      type: 'heatmap',
+      data: echartsLatLngs.map((item, index) => item.concat([(index + 1) * 50])),
+      pointSize: 15,
+      blurSize: 5
+    }]
+  }
+  L.echartsLayer(chartOptions).addTo(heatLayers)
+}
+
+const initMap = (value) => {
+  map.value = value
+  lineLayers.addTo(map.value)
+  heatLayers.addTo(map.value)
+  addLineLayer()
+  addHeatLayer()
+}
+
+const switchLineLayers = () => {
+  if (map.value.hasLayer(lineLayers)) {
+    map.value.removeLayer(lineLayers)
+  } else {
+    map.value.addLayer(lineLayers)
+  }
+}
+
+const switchHeatLayers = () => {
+  if (map.value.hasLayer(heatLayers)) {
+    map.value.removeLayer(heatLayers)
+  } else {
+    map.value.addLayer(heatLayers)
+  }
+}
+</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/emarker.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="map-container">
+    <vae-map :base-layers="baseLayers" @init-map="initMap" />
+  </div>
+</template>
+
+<script setup>
+const baseLayers = ['GaoDe.Normal.Map']
+
+const initMap = (map) => {
+  map.on('click', (event) => console.log(event))
+
+  L.elasticMarker(map.getCenter()).setIcon(L.glyphicon({
+    icon: 'fas fa-cat',
+    size: 40,
+    color: 'deeppink'
+  })).addTo(map)
+
+  L.elasticMarker({ lat: 34.30028857253559, lng: 117.39745616912843 }, {
+    elasticOpacity: false
+  }).addTo(map)
+
+  L.elasticMarker({ lat: 34.2974745093329, lng: 117.38054215908052 }).setIcon(L.icon({
+    iconUrl: '/images/marker.png',
+    iconSize: [22, 32],
+    iconAnchor: [11, 32]
+  })).bindTooltip('elasticMarker', {
+    permanent: true,
+    direction: 'right'
+  }).addTo(map)
+}
+</script>
+
+<style lang="less" scoped>
+.map-container {
+  height: 100%;
+  position: relative;
+}
+</style>

package/examples/views/image.vue

@@ -0,0 +1,182 @@
+<template>
+  <div class="outer">
+    <div class="inner">
+      <vae-map :options="options" @init-map="initMap" />
+    </div>
+    <div class="actions">
+      <div style="margin-top: 15px">
+        <el-button size="small" type="success" @click="addGridOverlay">添加栅格图片</el-button>
+        <el-button size="small" type="success" @click="addGameOverlay">添加游戏地图</el-button>
+      </div>
+      <el-input v-model="latlngValue" style="margin-top: 25px" />
+      <div style="margin-top: 15px; text-align: right">
+        <el-button size="small" @click="addDargonMarker">添加标注</el-button>
+        <el-button size="small" type="danger" @click="clearDargonMarker">清理标注</el-button>
+      </div>
+      <div style="margin-top: 30px; text-align: right">
+        <el-button size="small" @click="addFightMarker">添加动态标注</el-button>
+        <el-button size="small" type="danger" @click="clearFightMarker">清理动态标注</el-button>
+      </div>
+      <div style="margin-top: 30px; text-align: right">
+        <el-button size="small" type="primary" @click="resetMap">RESET</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const fighterIcon = L.glyphicon({
+  icon: 'fas fa-walking',
+  size: 32,
+  borderWidth: 2,
+  background: 'FireBrick',
+  color: 'white',
+  boxShadow: false
+})
+
+const dargonIcon = L.glyphicon({
+  icon: 'fas fa-dragon',
+  size: 40,
+  borderWidth: 2,
+  background: 'Indigo',
+  color: 'white'
+})
+
+const fighterLatLngs = [
+  { lat: 290, lng: 261 }, { lat: 318, lng: 250 }, { lat: 330, lng: 233 }, { lat: 356, lng: 217 }, { lat: 380, lng: 218 }, { lat: 407, lng: 216 }, { lat: 425, lng: 219 }, { lat: 429, lng: 174 }, { lat: 428, lng: 120 }, { lat: 427, lng: 67 }, { lat: 428, lng: 28 }, { lat: 398, lng: 35 }, { lat: 368, lng: 54 }, { lat: 327, lng: 68 }, { lat: 258, lng: 70 }, { lat: 233, lng: 62 }, { lat: 192, lng: 56 }, { lat: 157, lng: 54 }, { lat: 131, lng: 53 }, { lat: 102, lng: 54 },
+  { lat: 105, lng: 79 }, { lat: 122, lng: 113 }, { lat: 132, lng: 131 }, { lat: 149, lng: 147 }, { lat: 171, lng: 164 }, { lat: 192, lng: 174 }, { lat: 213, lng: 182 }, { lat: 224, lng: 194 }, { lat: 228, lng: 210 }, { lat: 224, lng: 233 }, { lat: 207, lng: 253 }, { lat: 186, lng: 255 }, { lat: 171, lng: 259 }, { lat: 178, lng: 280 }, { lat: 190, lng: 298 }, { lat: 194, lng: 318 }, { lat: 189, lng: 339 }, { lat: 183, lng: 364 }, { lat: 179, lng: 398 }, { lat: 188, lng: 417 },
+  { lat: 182, lng: 449 }, { lat: 171, lng: 479 }, { lat: 172, lng: 503 }, { lat: 175, lng: 532 }, { lat: 182, lng: 553 }, { lat: 184, lng: 589 }, { lat: 199, lng: 610 }, { lat: 234, lng: 618 }, { lat: 260, lng: 620 }, { lat: 274, lng: 614 }, { lat: 278, lng: 584 }, { lat: 278, lng: 553 }, { lat: 278, lng: 531 }, { lat: 282, lng: 501 }, { lat: 287, lng: 491 }, { lat: 296, lng: 491 }, { lat: 313, lng: 496 }, { lat: 333, lng: 505 }, { lat: 348, lng: 508 }, { lat: 368, lng: 505 },
+  { lat: 379, lng: 488 }, { lat: 391, lng: 476 }, { lat: 402, lng: 458 }, { lat: 408, lng: 448 }, { lat: 415, lng: 435 }, { lat: 421, lng: 418 }, { lat: 424, lng: 404 }, { lat: 432, lng: 380 }, { lat: 448, lng: 380 }, { lat: 448, lng: 431 }, { lat: 447, lng: 459 }, { lat: 446, lng: 491 }, { lat: 447, lng: 524 }, { lat: 449, lng: 569 }, { lat: 433, lng: 591 }, { lat: 419, lng: 592 }, { lat: 397, lng: 607 }, { lat: 376, lng: 608 }, { lat: 369, lng: 623 }, { lat: 372, lng: 658 }
+]
+
+const mapBounds = [[0, 0], [500, 800]]
+
+const map = ref(null)
+const gridOverlay = ref(null)
+const gameOverlay = ref(null)
+const latlngValue = ref('')
+const dragonMarker = ref(null)
+const dragonLayers = L.layerGroup()
+const fightLayers = L.layerGroup()
+const options = {
+  zoom: 0,
+  maxZoom: 1,
+  minZoom: -1,
+  crs: L.CRS.Simple
+}
+
+const initMap = (value) => {
+  map.value = value
+  dragonLayers.addTo(map.value)
+  fightLayers.addTo(map.value)
+  map.value.fitBounds(mapBounds)
+}
+
+const resetMap = () => {
+  map.value.setView([250, 400], 0)
+}
+
+const addGridOverlay = () => {
+  if (gridOverlay.value) {
+    map.value.removeLayer(gridOverlay.value)
+  }
+  gridOverlay.value = L.imageOverlay('/images/grid.png', mapBounds).addTo(map.value)
+}
+
+const addGameOverlay = () => {
+  if (gameOverlay.value) {
+    map.value.removeLayer(gameOverlay.value)
+  }
+  gameOverlay.value = L.imageOverlay('/images/game.png', mapBounds).bringToBack().addTo(map.value)
+}
+
+const addDargonMarker = () => {
+  const latlng = latlngValue.value.split(',')
+  if (latlng.length === 2) {
+    dragonMarker.value = L.marker(latlng).setIcon(dargonIcon).bindTooltip(latlngValue.value, {
+      permanent: true,
+      direction: 'right',
+      offset: [15, 0]
+    }).addTo(dragonLayers)
+  }
+}
+
+const clearDargonMarker = () => {
+  dragonMarker.value = null
+  dragonLayers.clearLayers()
+}
+
+const showDialog = () => {
+  const list = [
+    '我来了',
+    '是的，我看到了',
+    '我走了三天三夜',
+    `你走过了${fighterLatLngs.length}个地方`,
+    '今天的勇者找恶龙就分享到这里',
+    '感谢大家观看'
+  ]
+
+  const showText = (index = 0) => {
+    const currentLatLng = index % 2 === 0 ? _.last(fighterLatLngs) : dragonMarker.value.getLatLng()
+    if (!list[index]) {
+      return
+    }
+    L.popup({ offset: [0, -10] }).setContent(
+      `<div style='font-size:13px;'>${list[index]}</div>`
+    ).setLatLng(currentLatLng).openOn(map.value)
+    _.delay(() => {
+      showText(index + 1)
+    }, 2000)
+  }
+
+  showText(0)
+}
+
+const addFightMarker = () => {
+  const amarker = L.animatedMarker({
+    latLngs: fighterLatLngs,
+    duration: 1000 * 15
+  }).setIcon(fighterIcon).addTo(fightLayers)
+
+  amarker.on('stopmove', () => {
+    if (dragonMarker.value) {
+      showDialog()
+    }
+  })
+
+  _.delay(() => {
+    amarker.startMove()
+  }, 500)
+}
+
+const clearFightMarker = () => {
+  fightLayers.clearLayers()
+}
+</script>
+
+<style lang="less" scoped>
+.outer {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #010101;
+
+  .inner {
+    height: 550px;
+    width: 850px;
+    background: #880000;
+  }
+
+  .actions {
+    height: 780px;
+    width: 400px;
+    margin-left: 150px;
+    background: #eee;
+    padding: 10px 20px;
+  }
+}
+</style>

package/examples/views/index.vue

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

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

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

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