@sword916/vae-map-plus 1.0.0 → 1.0.1

package/examples/views/buffer.vue

@@ -1,66 +0,0 @@
-<template>
-  <vae-map base-layers="GaoDe.Normal.Map" @init-map="initMap" />
-</template>
-
-<script setup>
-const lineLatLngs = [
-  { lat: 34.31614748988616, lng: 117.32368469238283 },
-  { lat: 34.293104769231974, lng: 117.31870651245119 },
-  { lat: 34.29367205056199, lng: 117.32385635375978 },
-  { lat: 34.29672112208355, lng: 117.32248306274415 },
-  { lat: 34.297572006012544, lng: 117.32591629028322 },
-  { lat: 34.30062093597998, lng: 117.32419967651369 },
-  { lat: 34.302322616209494, lng: 117.32909202575685 },
-  { lat: 34.30437876715258, lng: 117.32643127441408 },
-  { lat: 34.305513173709706, lng: 117.31441497802736 },
-  { lat: 34.29728837899387, lng: 117.31184005737306 }
-]
-
-const areaLatLngs = [
-  { lat: 34.308136430179374, lng: 117.34376907348634 },
-  { lat: 34.30189719938442, lng: 117.34196662902833 },
-  { lat: 34.30033731925641, lng: 117.3494338989258 },
-  { lat: 34.30714385628804, lng: 117.35355377197267 },
-  { lat: 34.31118497662593, lng: 117.34848976135255 }
-]
-
-const pointLatLng = { lat: 34.29587022953563, lng: 117.33552932739259 }
-const baseLayers = L.layerGroup()
-const bufferLayers = L.layerGroup()
-
-const bufferLine = () => {
-  L.polyline(lineLatLngs).addTo(baseLayers)
-  const bufferLatLngs = L.GeoUtil.bufferLine(lineLatLngs, 100)
-  L.polygon(bufferLatLngs, { weight: 0, color: 'violet' }).addTo(bufferLayers)
-}
-
-const bufferArea = () => {
-  L.polygon(areaLatLngs).addTo(baseLayers)
-  const bufferLatLngs = L.GeoUtil.bufferArea(areaLatLngs, 100)
-  L.polygon(bufferLatLngs, { weight: 0, color: 'DarkTurquoise' }).addTo(bufferLayers)
-}
-
-const bufferPoint = () => {
-  L.circleMarker(pointLatLng).addTo(baseLayers)
-  const bufferLatLngs = L.GeoUtil.bufferPoint(pointLatLng, 500)
-  L.polygon(bufferLatLngs, { weight: 0, color: 'greenyellow' }).addTo(bufferLayers)
-}
-
-const initMap = (map) => {
-  map.addLayer(baseLayers)
-  map.addLayer(bufferLayers)
-  map.on('click', (event) => {
-    console.log(event.latlng)
-  })
-
-  baseLayers.clearLayers()
-  bufferLayers.clearLayers()
-  bufferLine()
-  bufferArea()
-  bufferPoint()
-
-  _.delay(() => {
-    map.fitBounds(L.latLngBounds([...lineLatLngs, ...areaLatLngs, pointLatLng]))
-  }, 250)
-}
-</script>

package/examples/views/cluster.vue

@@ -1,74 +0,0 @@
-<template>
-  <div class="map-container">
-    <vae-map :base-layers="['GaoDe.Normal.Map']" @init-map="initMap" />
-    <div class="tools">
-      <el-button size="small" @click="setIconStyle('blue')">蓝色</el-button>
-      <el-button size="small" @click="setIconStyle('red')">红色</el-button>
-      <el-button size="small" @click="setIconStyle('yellow')">黄色</el-button>
-      <el-button size="small" @click="setIconStyle('orange')">橙色</el-button>
-      <el-button size="small" @click="setIconStyle('gray')">灰色</el-button>
-      <el-button size="small" @click="setIconStyle('cyan')">青绿</el-button>
-      <el-button size="small" @click="setIconStyle('purple')">紫色</el-button>
-      <el-button size="small" @click="setIconStyle('pink')">粉色</el-button>
-      <el-button size="small" @click="setIconStyle('transparent')">透明</el-button>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-
-const map = ref(null)
-const baseLayers = ref(new L.MarkerClusterGroupX())
-
-const getRandomLatLng = () => {
-  const bounds = L.latLngBounds([
-    { lat: 35.097439809364204, lng: 115.25756835937501 },
-    { lat: 33.8247936182649, lng: 114.74670410156251 },
-    { lat: 33.50475906922609, lng: 118.27331542968751 },
-    { lat: 34.800272350556824, lng: 118.6358642578125 }
-  ])
-  const north = bounds.getNorth()
-  const south = bounds.getSouth()
-  const east = bounds.getEast()
-  const west = bounds.getWest()
-  const lat = (north - south) * Math.random() + south
-  const lng = (east - west) * Math.random() + west
-  return L.latLng(lat, lng)
-}
-
-const addMarkers = () => {
-  for (let i = 0; i < 200; i += 1) {
-    const latLng = getRandomLatLng()
-    L.marker(latLng).addTo(baseLayers.value)
-    L.marker(latLng).addTo(baseLayers.value)
-  }
-}
-
-const setIconStyle = (color) => {
-  baseLayers.value.clearLayers()
-  baseLayers.value = new L.MarkerClusterGroupX({
-    iconStyle: color
-  }).addTo(map.value)
-  addMarkers()
-}
-
-const initMap = (value) => {
-  map.value = value
-  setIconStyle()
-}
-</script>
-
-<style lang="less" scoped>
-.map-container {
-  height: 100%;
-  position: relative;
-
-  .tools {
-    position: absolute;
-    right: 10px;
-    top: 10px;
-    z-index: 2000;
-  }
-}
-</style>

package/examples/views/cover.vue

@@ -1,85 +0,0 @@
-<template>
-  <div class="map-container">
-    <vae-lrmap :options="options" @init-map="initMap" @reload-map="hdReloadMap" />
-    <div class="tools">
-      <el-button size="small" @click="reloadBJ54">BJ54</el-button>
-      <el-button size="small" @click="reloadEPSG3857">L.CRS.EPSG3857</el-button>
-      <el-button size="small" @click="addNewMap">puzzle</el-button>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { computed, ref } from 'vue'
-
-const optionsBJ54 = {
-  url: 'http://58.218.64.10:38500/',
-  dsname: 'XS_MLGIS',
-  crs: 'bj54',
-  defaultLayerSets: ['矿井充水性图>8煤']
-}
-
-const optionsEPSG3857 = {
-  url: 'http://58.218.64.10:38500/',
-  dsname: 'XS_MLGIS',
-  crs: L.CRS.EPSG3857,
-  wmscrs: 'bj54',
-  defaultLayerSets: ['矿井充水性图>8煤']
-}
-
-const map = ref(null)
-const options = ref(optionsBJ54)
-const tdtLayer = ref(null)
-
-const vae = computed(() => map.value?.vae)
-
-const initMap = (value) => {
-  map.value = value
-  tdtLayer.value = L.tileLayer.chinaProvider('TianDiTu.Satellite.Map@1a346e3ea95a3227a097cabf11a901b7')
-}
-
-const hdReloadMap = (value) => {
-  map.value = value
-  if (options.value === optionsBJ54) {
-    map.value.removeLayer(tdtLayer.value)
-  } else {
-    tdtLayer.value.addTo(map.value).bringToBack()
-  }
-}
-
-const reloadBJ54 = () => {
-  options.value = optionsBJ54
-  vae.value?.reloadMap()
-}
-
-const reloadEPSG3857 = () => {
-  options.value = optionsEPSG3857
-  vae.value?.reloadMap()
-}
-
-const addNewMap = () => {
-  const client = new L.Vae.Client({
-    dsname: 'XGKGIS',
-    url: 'http://58.218.64.10:28406/',
-    crs: 'bj54',
-    defaultLayerSets: ['采掘工程平面图']
-  })
-  client.createTileLayer().then((layer) => {
-    layer.addTo(map.value)
-  })
-}
-</script>
-
-<style lang="less" scoped>
-.map-container {
-  height: 100%;
-  position: relative;
-
-  .tools {
-    position: absolute;
-    right: 10px;
-    top: 10px;
-    z-index: 2000;
-  }
-}
-</style>

package/examples/views/draw-line.vue

@@ -1,49 +0,0 @@
-<template>
-  <div class="map-container">
-    <vae-lrmap :options="options" @init-map="initMap" />
-    <vae-map-ctrl-draw-line ref="drawRef" @on-create="handleCreatePolyline" @on-save="saveItems" />
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-
-const initData = {
-  latLngs: [
-    [4425993, 548012],
-    [4425462, 548656]
-  ]
-}
-
-const drawRef = ref(null)
-const map = ref(null)
-const options = {
-  url: 'http://58.218.64.10:38500/',
-  dsname: 'XS_MLGIS',
-  crs: 'bj54',
-  defaultLayerSets: ['采掘工程平面图>8煤']
-}
-
-const initMap = (value) => {
-  map.value = value
-  drawRef.value?.enable(map.value, initData)
-}
-
-const handleCreatePolyline = (polyline) => {
-  polyline.bindTooltip('polyline', {
-    permanent: true,
-    direction: 'right'
-  })
-}
-
-const saveItems = (data) => {
-  console.log(data)
-}
-</script>
-
-<style lang="less" scoped>
-.map-container {
-  height: 100%;
-  position: relative;
-}
-</style>

package/examples/views/draw.vue

@@ -1,54 +0,0 @@
-<template>
-  <div class="map-container">
-    <vae-lrmap :options="options" @init-map="initMap" />
-    <vae-map-ctrl-draw ref="drawRef" @on-create="handleCreatePolygon" @on-save="saveItems" />
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-
-const initData = {
-  latLngs: [
-    [37.83858083450778, 112.11063490845389],
-    [37.82919941967444, 112.11496488333559],
-    [37.83846349063635, 112.14989225592417],
-    [37.846981386397296, 112.14555284783862]
-  ],
-  htIndex: [0, 1, 3, 2]
-}
-
-const drawRef = ref(null)
-const map = ref(null)
-const options = {
-  url: 'http://58.218.64.10:38500/',
-  dsname: 'XS_MLGIS',
-  crs: 'bj54',
-  defaultLayerSets: ['采掘工程平面图>8煤']
-}
-
-const initMap = (value) => {
-  map.value = value
-  drawRef.value?.enable(map.value, initData)
-}
-
-const handleCreatePolygon = (polygon) => {
-  polygon.bindTooltip('polygon', {
-    permanent: true,
-    direction: 'right'
-  })
-}
-
-const saveItems = (data) => {
-  data.latLngs?.forEach((latLng) => {
-    console.log(latLng.lat, latLng.lng)
-  })
-}
-</script>
-
-<style lang="less" scoped>
-.map-container {
-  height: 100%;
-  position: relative;
-}
-</style>

package/examples/views/echarts.vue

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

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

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