@sword916/vae-map-plus 1.0.0

package/README.md

@@ -0,0 +1,3 @@
+### vae-map
+
+#### map components and plugins

package/build/index.mjs

@@ -0,0 +1,113 @@
+import path from 'path'
+import { promises as fs } from 'fs'
+import { fileURLToPath } from 'url'
+import { build } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueJsx from '@vitejs/plugin-vue-jsx'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const rootDir = path.resolve(__dirname, '..')
+
+const external = [
+  'vue',
+  'lodash',
+  'axios',
+  'leaflet',
+  'proj4',
+  'proj4leaflet',
+  'leaflet-geometryutil',
+  'jquery',
+  'uuid',
+  '@geoman-io/leaflet-geoman-free',
+  '@turf/buffer',
+  'leaflet.markercluster',
+  'echarts'
+]
+
+const packageEntries = [
+  { entry: 'src/packages/index.js', outDir: 'lib' },
+  { entry: 'src/packages/vae-amap/index.js', outDir: 'lib/vae-amap' },
+  { entry: 'src/packages/vae-map/index.js', outDir: 'lib/vae-map' },
+  { entry: 'src/packages/vae-cloudmap/index.js', outDir: 'lib/vae-cloudmap' }
+]
+
+const pluginEntries = [
+  'globals',
+  'L.AnimatedMarker',
+  'L.EchartsLayer',
+  'L.FootageCalculator.Area',
+  'L.FootageCalculator.Line',
+  'L.GeoUtil',
+  'L.Glyphicon',
+  'L.MarkerClusterX',
+  'L.SafeDivOverlay',
+  'L.TileLayer.ChinaProvider',
+  'L.VuePopup',
+  'L.VueTooltip',
+  'Mixin.Map.Measure'
+].map((name) => ({
+  entry: `src/plugins/${name}/index.js`,
+  outDir: `plugins/${name}`
+}))
+
+function createViteConfig(entry, outDir) {
+  return {
+    configFile: false,
+    plugins: [vue(), vueJsx()],
+    resolve: {
+      alias: {
+        '@': path.resolve(rootDir, 'src')
+      }
+    },
+    build: {
+      outDir: path.resolve(rootDir, outDir),
+      emptyOutDir: true,
+      sourcemap: false,
+      cssCodeSplit: false,
+      lib: {
+        entry: path.resolve(rootDir, entry),
+        formats: ['es'],
+        fileName: () => 'index'
+      },
+      rollupOptions: {
+        external,
+        output: {
+          entryFileNames: 'index.js',
+          assetFileNames: ({ name }) => {
+            if (name?.endsWith('.css')) {
+              return 'style.css'
+            }
+            return 'assets/[name][extname]'
+          }
+        }
+      }
+    }
+  }
+}
+
+async function removeDirIfExists(target) {
+  await fs.rm(path.resolve(rootDir, target), { recursive: true, force: true })
+}
+
+async function buildEntry({ entry, outDir }) {
+  await build(createViteConfig(entry, outDir))
+  console.log(`built ${entry} -> ${outDir}`)
+}
+
+async function run() {
+  await removeDirIfExists('lib')
+  await removeDirIfExists('plugins')
+
+  for (const item of packageEntries) {
+    await buildEntry(item)
+  }
+
+  for (const item of pluginEntries) {
+    await buildEntry(item)
+  }
+}
+
+run().catch((error) => {
+  console.error(error)
+  process.exit(1)
+})

package/examples/App.vue

@@ -0,0 +1,18 @@
+<template>
+    <router-view />
+</template>
+
+<style lang="less">
+html,body{
+    width: 100%;
+  height: 100%;
+}
+#app {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
+}
+</style>

package/examples/index.js

@@ -0,0 +1,13 @@
+import { createApp } from 'vue'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import '@fortawesome/fontawesome-free/css/all.css'
+import App from './App.vue'
+import router from './router'
+import VaeMap from '@/packages'
+
+createApp(App)
+  .use(router)
+  .use(ElementPlus)
+  .use(VaeMap)
+  .mount('#app')

package/examples/router/index.js

@@ -0,0 +1,35 @@
+import { createRouter, createWebHashHistory } from 'vue-router'
+
+const routes = [
+  {
+    path: '/',
+    redirect: '/views/map'
+  },
+  {
+    path: '/views',
+    component: () => import('../views/index.vue'),
+    children: [
+      { path: 'amap', component: () => import('../views/amap.vue') },
+      { path: 'map', component: () => import('../views/map.vue') },
+      { path: 'lrmap', component: () => import('../views/lrmap.vue') },
+      { path: 'push-area', component: () => import('../views/push-area.vue') },
+      { path: 'push-line', component: () => import('../views/push-line.vue') },
+      { path: 'echarts', component: () => import('../views/echarts.vue') },
+      { path: 'trace', component: () => import('../views/trace.vue') },
+      { path: 'cluster', component: () => import('../views/cluster.vue') },
+      { path: 'cover', component: () => import('../views/cover.vue') },
+      { path: 'draw', component: () => import('../views/draw.vue') },
+      { path: 'draw-line', component: () => import('../views/draw-line.vue') },
+      { path: 'measure', component: () => import('../views/measure.vue') },
+      { path: 'amarker', component: () => import('../views/amarker.vue') },
+      { path: 'emarker', component: () => import('../views/emarker.vue') },
+      { path: 'buffer', component: () => import('../views/buffer.vue') },
+      { path: 'image', component: () => import('../views/image.vue') }
+    ]
+  }
+]
+
+export default createRouter({
+  history: createWebHashHistory(import.meta.env.BASE_URL),
+  routes
+})

package/examples/views/amap.vue

@@ -0,0 +1,29 @@
+<template>
+  <vae-amap :api-key="key" :options="options" @amap-ready="setOptions" @init-map="initMap" />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const amap = ref(null)
+const key = '1a346e3ea95a3227a097cabf11a901b7'
+const options = ref(null)
+
+const setOptions = async () => {
+  options.value = {
+    viewMode: '3D',
+    zoom: 8,
+    layers: [new AMap.TileLayer.Satellite(), new AMap.Buildings()]
+  }
+}
+
+const initMap = (value) => {
+  amap.value = value
+  amap.value.setZoom(12, false, 2500)
+  amap.value.setRotation(45, false, 2500)
+  amap.value.setPitch(45, false, 2500)
+  amap.value.on('zoomend', () => {
+    amap.value.setZoom(18, false, 2500)
+  }, amap.value, true)
+}
+</script>

package/examples/views/amarker.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="map-container">
+    <vae-map :base-layers="baseLayers" @init-map="initMap" />
+    <div class="tools">
+      <el-button size="small" @click="startMove">开始</el-button>
+      <el-button size="small" @click="pauseMove">暂停</el-button>
+      <el-button size="small" @click="continueMove">继续</el-button>
+      <el-button size="small" @click="stopMove">结束</el-button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const latLngs = [
+  { lat: 34.26572889446933, lng: 117.14584350585939 },
+  { lat: 34.25324367127495, lng: 117.20352172851564 },
+  { lat: 34.27083595165, lng: 117.23888397216798 },
+  { lat: 34.25920275895473, lng: 117.30411529541017 },
+  { lat: 34.288991865037524, lng: 117.35321044921876 },
+  { lat: 34.277077489205695, lng: 117.3992156982422 }
+]
+
+const map = ref(null)
+const baseLayers = ['GaoDe.Normal.Map']
+const aMarker = ref(null)
+
+const initMap = (value) => {
+  map.value = value
+  aMarker.value = L.animatedMarker({ latLngs })
+    .setLatLng(latLngs[0])
+    .setIcon(L.glyphicon({
+      icon: 'fas fa-baby',
+      color: 'black'
+    }))
+    .addTo(map.value)
+}
+
+const startMove = () => aMarker.value?.startMove()
+const pauseMove = () => aMarker.value?.pauseMove()
+const continueMove = () => aMarker.value?.continueMove()
+const stopMove = () => aMarker.value?.stopMove()
+</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/buffer.vue

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

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

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

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

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