feature：代码初始化。

src/views/components/map/latLngSelect.vue

@@ -0,0 +1,144 @@
+<template>
+  <el-dialog v-model="dialogShow" @close="cancel" title="经纬度选择" append-to-body>
+    <div>当前经纬度：{{ lngLat }}</div>
+    <div class="map" id="container"></div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { Scene, RasterLayer, Marker, MarkerLayer, Scale, Zoom } from '@antv/l7'
+import { Map } from '@antv/l7-maps'
+import { ElMessage } from 'element-plus'
+
+const props = defineProps({
+  dialogVisible: {
+    type: Boolean,
+    default: false
+  },
+  lonLat: {
+    type: String,
+    default: ''
+  }
+})
+
+const emit = defineEmits(['update:dialogVisible', 'updateLngLat', 'closeDialog'])
+const dialogShow = computed({
+  get: () => props.dialogVisible,
+  set: (val) => {
+    emit('update:dialogVisible', val)
+  }
+})
+
+watch(dialogShow, (val) => {
+  if (val) {
+    lngLat.value = props.lonLat
+    nextTick(() => {
+      initMap()
+    })
+  }
+})
+
+const scene = ref(null)
+const markerLayer = ref(null)
+const lngLat = ref('')
+
+const initMap = () => {
+  scene.value = new Scene({
+    id: 'container',
+    logoVisible: false,
+    map: new Map({
+      zoom: 13,
+      minZoom: 4,
+      maxZoom: 18,
+      pitch: 0,
+      center: lngLat.value ? lngLat.value.split(',') : ['120.43325056066504', '36.183868828044005'],
+      logoVisible: false
+    })
+  })
+
+  const layer = new RasterLayer({ zIndex: 1, name: 'baseLayer' })
+  const annotionLayer = new RasterLayer({
+    zIndex: 2,
+    name: 'annotionLayer'
+  })
+
+  layer.source('https://t1.tianditu.gov.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}&tk=85c9d12d5d691d168ba5cb6ecaa749eb', {
+    parser: {
+      type: 'rasterTile',
+      tileSize: 256,
+      format: async (data) => {
+        console.log(data)
+      }
+    }
+  })
+  annotionLayer.source('https://t1.tianditu.gov.cn/DataServer?T=cva_w&X={x}&Y={y}&L={z}&tk=85c9d12d5d691d168ba5cb6ecaa749eb', {
+    parser: {
+      type: 'rasterTile',
+      tileSize: 256
+    }
+  })
+
+  scene.value.on('loaded', () => {
+    scene.value.addLayer(layer)
+    scene.value.addLayer(annotionLayer)
+
+    const scale = new Scale({
+      zoomInTitle: '放大',
+      zoomOutTitle: '缩小'
+    })
+    scene.value.addControl(scale)
+
+    const zoom = new Zoom({
+      zoomInTitle: '放大',
+      zoomOutTitle: '缩小'
+    })
+    scene.value.addControl(zoom)
+    if (lngLat.value) {
+      createMarkerLayer(lngLat.value.split(','))
+    }
+  })
+
+  scene.value.on('click', (ev) => {
+    console.log('markerLayer.value', markerLayer.value)
+    if (markerLayer.value) {
+      scene.value.removeMarkerLayer(markerLayer.value)
+    }
+    createMarkerLayer([ev.lngLat.lng, ev.lngLat.lat])
+    lngLat.value = `${ev.lngLat.lng},${ev.lngLat.lat}`
+  })
+}
+
+const createMarkerLayer = (lngLatArr) => {
+  const marker = new Marker().setLnglat(lngLatArr)
+  markerLayer.value = new MarkerLayer({ zIndex: 100 })
+  markerLayer.value.addMarker(marker)
+  scene.value.addMarkerLayer(markerLayer.value)
+}
+
+const submitForm = () => {
+  if (!lngLat.value) {
+    ElMessage({ type: 'warning', message: '您没有选择位置' })
+  } else {
+    emit('updateLngLat', lngLat.value)
+  }
+  cancel()
+}
+
+const cancel = () => {
+  markerLayer.value && scene.value.removeMarkerLayer(markerLayer.value)
+  emit('closeDialog')
+}
+</script>
+
+<style>
+.map {
+  width: 100%;
+  height: 500px;
+}
+</style>