feat(gis): 抽取整理通用Gis方法

src/components/VanillaJsonEditor.vue

@@ -77,7 +77,7 @@ const documentProperties = computed<{
   content?: string
   size?: string
 }>(() => {
-  if (showDocumentProperties) {
+  if (showDocumentProperties.value) {
     const data = jsonEditor.get()
     let content
     let code

src/main.ts

@@ -1,5 +1,4 @@
 import config from './config'
-import EventBus from '@/plugins/EventBus.js'
 import App from '@/App.vue'
 import axios from '@/plugins/Axios'
 import { createPiniaPersist } from '@/plugins/PiniaPersist'
@@ -13,10 +12,6 @@ const $apiBase = import.meta.env.PROD ? config.apiOrigin : (import.meta.env.VITE
   const pinia = createPinia()
   const app = createApp(App)
 
-  app.config.globalProperties.$axios = axios
-  app.config.globalProperties.$eventBus = EventBus
-  app.provide('$axios', axios)
-  app.provide('$eventBus', EventBus)
   axios.$apiBase = $apiBase
 
   const piniaPersistPlugin = await createPiniaPersist({

src/tools/3dView/3dView.vue

@@ -86,6 +86,7 @@ const rootPath = computed(() => {
     const path = rootFile.value.webkitRelativePath || rootFile.value.name
     return path.replace(fileName.value || '', '')
   }
+  return ''
 })
 
 function initScene() {

src/tools/geoJson/child/addService.vue → src/tools/geoJson/child/AddService.vue

@@ -1,11 +1,10 @@
 <script setup lang="ts">
-import type { Layer } from 'leaflet'
-import { CRS, tileLayer } from 'leaflet'
-import { dynamicMapLayer as esriDynamicMapLayer, tiledMapLayer as esriTiledMapLayer } from 'esri-leaflet'
+import type { Layer, Map } from 'leaflet'
 import { v4 as uuid } from 'uuid'
-import { tiledMapLayer } from '@/utils/iclient-leaflet'
 import $event from '@/plugins/EventBus'
+import { addLayer, removeLayer } from '@/utils/gisUtils'
 
+let _map: Map
 const data: {
   count: number
   name: string
@@ -25,50 +24,31 @@ const data: {
   layers: [],
 })
 
+onMounted(() => {
+  $event.emit('getMap', (map: Map) => {
+    _map = map
+  })
+})
+
 function addService() {
   const serviceUrl = data.url
   const serviceType = data.type
   const serviceName = data.name
   data.count++
   data.name = `服务 ${data.count}`
-  let layer
+  let layer: Layer
   try {
-    switch (serviceType) {
-      case 'supermap_rest':
-      case 'supermap_tile': {
-        layer = tiledMapLayer(serviceUrl, {
-          prjCoordSys: { epsgCode: 3857 },
-          crs: CRS.EPSG3857,
-        })
-        break
-      }
-      case 'arcgis_rest': {
-        layer = esriDynamicMapLayer({
-          url: serviceUrl,
-          f: 'image',
-        })
-        break
-      }
-      case 'arcgis_tile': {
-        layer = esriTiledMapLayer({
-          url: serviceUrl,
-        })
-        break
-      }
-      case 'tms': {
-        layer = tileLayer(serviceUrl)
-        break
-      }
-      default:
-        break
-    }
+    layer = addLayer(_map, {
+      name: serviceName,
+      type: serviceType,
+      url: serviceUrl,
+    })
   }
   catch (e) {
     ElMessage.error('添加服务失败')
     return
   }
   if (layer) {
-    $event.emit('addLayer', layer, serviceName)
     data.layers.push({
       name: serviceName,
       url: serviceUrl,
@@ -77,9 +57,9 @@ function addService() {
     })
   }
 }
-function removeLayer(index: number) {
+function remove(index: number) {
   if (data.layers[index]?.layer) {
-    $event.emit('removeLayer', data.layers[index].layer)
+    removeLayer(_map, data.layers[index].layer)
     data.layers.splice(index, 1)
   }
 }
@@ -105,7 +85,7 @@ function removeLayer(index: number) {
         >
           {{ item.url }}
         </div>
-        <el-button @click="removeLayer(index)">
+        <el-button @click="remove(index)">
           移除
         </el-button>
       </div>

src/tools/geoJson/child/geoJsonEditor.vue → src/tools/geoJson/child/Editor.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { debounce } from 'lodash-es'
-import $eventBus from '@/plugins/EventBus.js'
+import $eventBus from '@/plugins/EventBus'
 import VanillaJsonEditor from '@/components/VanillaJsonEditor.vue'
 import type { EditorValue } from '@/types/editor'
 

src/tools/geoJson/child/leafletMap.vue → src/tools/geoJson/child/MainMap.vue

@@ -1,58 +1,58 @@
 <script setup lang="ts">
 import 'leaflet/dist/leaflet.css'
 import type {
-  Control,
   GeoJSON,
-  Layer,
   Map,
 } from 'leaflet'
 import {
   Icon,
   Marker,
-  geoJSON,
-  marker,
 } from 'leaflet'
 import type { Feature, GeoJsonObject } from 'geojson'
 import $eventBus from '@/plugins/EventBus'
-import '@geoman-io/leaflet-geoman-free'
-import '@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css'
-import { createMap, getMapStatus } from '@/utils/mapUtils'
+import {
+  addDefaultBaseLayers,
+  addOverlay,
+  createMap,
+  getGeoJsonLayer,
+  initDrawLayer,
+  initDrawMap,
+} from '@/utils/gisUtils'
 
 const defaultIcon = new Icon.Default()
-const yellowIcon = new Icon({
-  ...Icon.Default.prototype.options,
-  iconUrl: 'https://jsdelivr.cdn.iszy.xyz/gh/zvonimirsun/leaflet-color-markers@master/img/marker-icon-yellow.png',
-  iconRetinaUrl: 'https://jsdelivr.cdn.iszy.xyz/gh/zvonimirsun/leaflet-color-markers@master/img/marker-icon-2x-yellow.png',
+const yellowIcon = new Icon.Default({
+  iconUrl: 'marker-icon-yellow.png',
+  iconRetinaUrl: 'marker-icon-2x-yellow.png',
 })
 
-let geoJsonLayer: GeoJSON, _map: Map, layerControl: Control.Layers
+let geoJsonLayer: GeoJSON, _map: Map
 
 const selectedFeature = ref<Feature>()
 const mapContainer = ref<HTMLDivElement>()
 const propertyPopup = ref<HTMLDivElement>()
 
 onMounted(() => {
-  $eventBus.on('locationGeo', locationGeo)
+  $eventBus.on('getMap', getMap)
   $eventBus.on('updateGeojsonLayer', updateGeojsonLayer)
   $eventBus.on('getGeoJson', getGeoJson)
-  $eventBus.on('addLayer', addLayer)
-  $eventBus.on('removeLayer', removeLayer)
   $eventBus.on('selectFeature', selectFeature)
   initMap()
 })
 
 onBeforeUnmount(() => {
-  $eventBus.off('locationGeo', locationGeo)
+  $eventBus.off('getMap', getMap)
   $eventBus.off('updateGeojsonLayer', updateGeojsonLayer)
   $eventBus.off('getGeoJson', getGeoJson)
-  $eventBus.off('addLayer', addLayer)
-  $eventBus.off('removeLayer', removeLayer)
   $eventBus.off('selectFeature', selectFeature)
   if (_map) {
     _map.remove()
   }
 })
 
+function getMap() {
+  return _map
+}
+
 function initMap() {
   if (!mapContainer.value) {
     return
@@ -64,42 +64,29 @@ function initMap() {
       center: [35, 105],
       zoom: 4,
     },
-    controls: {
-      layers: true,
-    },
   })
+  addDefaultBaseLayers(_map)
   // 添加GeoJson图层
-  geoJsonLayer = geoJSON(undefined, {
+  geoJsonLayer = getGeoJsonLayer({
     onEachFeature,
-    pointToLayer: (feature, latLng) => {
-      return marker(latLng).addTo(_map)
-    },
   }).addTo(_map)
   // 添加底图、图层控制
-  layerControl = getMapStatus(_map).controls.layers as Control.Layers
-  layerControl.addOverlay(geoJsonLayer, '图形')
-  _map.pm.setLang('zh')
-  _map.pm.setGlobalOptions({
-    layerGroup: geoJsonLayer,
-  })
-  _map.pm.addControls({
-    position: 'topright',
-    drawCircleMarker: false,
-    drawText: false,
-    rotateMode: true,
+  addOverlay(_map, {
+    name: '图形',
+    layer: geoJsonLayer,
   })
-
-  _map.on('pm:create pm:remove pm:cut', (e) => {
-    updateEditor()
-    if (e.type === 'pm:create') {
-      onEachFeature(e.layer.toGeoJSON() as Feature, e.layer)
-    }
+  initDrawMap(_map, geoJsonLayer, {
+    onChange() {
+      updateEditor()
+    },
   })
 }
 
 function onEachFeature(feature: Feature, layer: GeoJSON | Marker) {
-  layer.on('pm:change', () => {
-    updateEditor()
+  initDrawLayer(layer, {
+    onChange: () => {
+      updateEditor()
+    },
   })
   if (!feature.properties) {
     feature.properties = {}
@@ -134,14 +121,6 @@ function onEachFeature(feature: Feature, layer: GeoJSON | Marker) {
   })
 }
 
-function locationGeo(geoJson: GeoJsonObject) {
-  try {
-    const layer = geoJSON(geoJson)
-    _map.fitBounds(layer.getBounds())
-  }
-  catch (e) {
-  }
-}
 function updateGeojsonLayer(geoJson: GeoJsonObject) {
   geoJsonLayer.clearLayers()
   try {
@@ -156,16 +135,6 @@ function getGeoJson(callback: (geoJson: GeoJsonObject) => void) {
   callback(geoJsonLayer?.toGeoJSON())
 }
 
-function addLayer(layer: Layer, serviceName: string) {
-  layer.addTo(_map)
-  layerControl.addOverlay(layer, serviceName)
-}
-
-function removeLayer(layer: Layer) {
-  _map.removeLayer(layer)
-  layerControl.removeLayer(layer)
-}
-
 function updateEditor() {
   if (geoJsonLayer.getLayers().length === 0) {
     $eventBus.emit('updateEditor', {
@@ -262,10 +231,6 @@ function selectFeature(index: number) {
         height: 20rem;
         overflow-y: auto;
 
-        * {
-          //box-sizing: border-box;
-        }
-
         .title {
           display: flex;
           width: 100%;

src/tools/geoJson/geoJson.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import LeafletMap from './child/leafletMap.vue'
-import GeoJsonEditor from './child/geoJsonEditor.vue'
-import PropertyTable from './child/propertyTable.vue'
-import AddService from './child/addService.vue'
+import MainMap from './child/MainMap.vue'
+import GeoJsonEditor from './child/Editor.vue'
+import PropertyTable from './child/PropertyTable.vue'
+import AddService from './child/AddService.vue'
 import ControlMenu from './child/ControlMenu.vue'
 
 const currentTab = ref('geoJson')
@@ -23,7 +23,7 @@ const wrapperHeight = computed(() => {
     ref="wrapper"
     class="wrapper"
   >
-    <LeafletMap />
+    <MainMap />
     <el-tabs
       v-model="currentTab"
       type="card"

src/tools/imageBase64.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import type { AxiosStatic } from 'axios'
+import $axios from '@/plugins/Axios'
 
 const dataUrl = ref('')
-const $axios: AxiosStatic = inject('$axios') as AxiosStatic
 const imgPreview = ref<HTMLImageElement>()
 const imageSize = ref({
   width: '',