1

public/maplist.json

@@ -0,0 +1,14 @@
+[
+  {
+    "label": "外部高德地图",
+    "value": "amap",
+    "url": "http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}",
+    "coordinate": "wgs84"
+  },
+  {
+    "label": "内置高德地图",
+    "value": "ggmap",
+    "url": "http://a.map.jms.gd/tile/osm/{z}/{x}/{y}.png",
+    "coordinate": "wgs84"
+  }
+]

src/view/case/draw/selectMapImage.vue

@@ -5,6 +5,21 @@
         <el-button :icon="Search" />
       </template> -->
     </el-input>
+    <!-- <el-select
+      v-model="mapType"
+      placeholder="Select"
+      size="large"
+      @change="handleMapTypeChange"
+      style="float: right;width: 150px;"
+
+    >
+      <el-option
+        v-for="item in mapOptions"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+      />
+    </el-select> -->
     <div class="rrr">
       <div class="search-result" v-show="keyword">
         <div class="search-list" v-for="item,index in keywordList" @click="hanleItem(item.name)">
@@ -43,14 +58,16 @@ import 'leaflet/dist/leaflet.css'
 import { router } from "@/router";
 export type MapImage = { blob: Blob | null; search: MapInfo | null };
 type MapInfo = { lat: number; lng: number; zoom: number; text: string; address: string; id: string };
-// const layer = L.tileLayer('http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}')
-const layer = L.tileLayer('http://a.map.jms.gd/tile/osm/{z}/{x}/{y}.png')
+const layer = L.tileLayer('http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}')
+// const layer = L.tileLayer('http://a.map.jms.gd/tile/osm/{z}/{x}/{y}.png') //内置地图
 // const layer = L.tileLayer('http://wprd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=6&x={x}&y={y}&z={z}&token=YOUR_API_KEY')
 
-
+const mapOptions = ref([])
+var baseLayers = {}
 let map: any = {}
 let clickMarker;
 const keyword = ref("");
+const mapType = ref("amap");
 const showSearch = ref(true);
 const info = ref<MapInfo>();
 const caseInfoData = ref<any>(null);
@@ -69,6 +86,14 @@ const caseId = computed(() => {
   }
 });
 onMounted(async () => {
+  
+  mapOptions.value = await fetch("/maplist.json").then((res) => res.json());
+  // layerList.map(ele => {
+  // console.log("mapOptions", layerList, L.tileLayer(ele.url));
+  // return {...ele, layer: L.tileLayer(ele.url)}
+  // })
+  // mapOptions.value = layerList
+  console.log("mapOptions", mapOptions.value);
   caseInfoData.value = await getCaseInfo(caseId.value);
   let center = [22.61, 113.05];
   if(caseInfoData.value.latAndLong){
@@ -111,6 +136,17 @@ onMounted(async () => {
     map.panTo([latitude, longitude])
     // map.add(clickMarker);
   });
+  mapOptions.value.map(ele => {
+    baseLayers[ele.label] = L.tileLayer(ele.url)
+    map.addLayer(baseLayers[ele.label])
+  })
+  L.control.layers(baseLayers).addTo(map);
+  map.on('baselayerchange', function (event) {
+      clickMarker && clickMarker.remove();
+      clickMarker = null;
+      // 这里可以添加更多的回调逻辑，比如更新界面信息等
+    });
+  handleMapTypeChange(mapType.value)
 })
 
 const resultEl = ref<HTMLDivElement>();
@@ -181,6 +217,10 @@ watchEffect(async (onCleanup) => {
     map.destroy();
   });
 });
+const handleMapTypeChange = (val) => {
+  console.log('handleMapTypeChange', val);
+  mapType.value = val;
+};
 const getMapInfo = (): MapInfo => {
     var zoom = map.getZoom(); //获取当前地图级别
     var center = map.getCenter();
@@ -276,7 +316,7 @@ defineExpose<QuiskExpose>({
 
 <style lang="scss" scoped>
 .search-layout {
-  display: inline-block;
+  // display: inline-block;
   position: relative;
   margin-bottom: 15px;
   z-index: 2;