1

src/request/urls.ts

@@ -248,6 +248,7 @@ export const addByMediaLibrary = "/fusion/caseFiles/addByMediaLibrary";
 export const addByMediaLibrarys = "/fusion/caseFiles/addByMediaLibrarys";
 export const addmodelByMediaLibrary = "/fusion/model/addByMediaLibrary";
 export const criminalInfo = "/fusion/caseInquestCriminal/info";
+export const getMapConfig = "/fusion/notAuth/getMapConfig";
 export const saveOrUpdate = "/fusion/caseInquestCriminal/saveOrUpdate";
 export const downDocx = "/fusion/caseInquestCriminal/downDocx";
 export const getSceneList = "/service/manage/scene/list";

src/store/case.ts

@@ -1,6 +1,7 @@
 import {
   axios,
   caseInfo,
+  getMapConfig,
   caseSceneList,
   getCasePsw,
   repCaseScenes,
@@ -87,6 +88,11 @@ export const getcaseInDate = async (params) =>
   (await axios.get<string>(criminalInfo, {params})).data;
   // (await axios.get<string>(info, { params:params })).data;
 
+  export const getcaseMap = async (params) =>
+    (await axios.get<string>(getMapConfig, {params})).data;
+    // (await axios.get<string>(info, { params:params })).data;
+
+    
 export const getSceneListData = async (params) =>
   (await axios.get<string>(getSceneList, { params })).data;
   // (await axios.get<string>(info, { params:params })).data;

src/view/abstract/index.vue

@@ -263,6 +263,8 @@ const ruleForm = ref({
 const bindExample = ref({
   caseTitle: "",
   caseNum: "",
+  mapId: "",
+  mapUrl: "",
   caseCategory: "",
   crimeTime: "",
   caseRegion: [],
@@ -367,9 +369,11 @@ async function handleAdd() {
   console.log("handleAdd");
 }
 const searchAMapAddress = async () => {
-  const data = await selectMapImage({text: true});
+  const data = await selectMapImage({text: true, mapId: bindExample.value.mapId});
   console.log("searchAMapAddress", data);
   if (!data?.search) return;
+  bindExample.value.mapId = data.mapId;
+  bindExample.value.mapUrl = data.mapUrl;
   bindExample.value.caseAddress = data.search.text;
   bindExample.value.latAndLong = `${data.search.lat},${data.search.lng}`;
   bindExample.value.latAndLongs = `${data.search.lng},${data.search.lat}`;

src/view/case/draw/selectFuseImage.vue

@@ -60,7 +60,7 @@ import { QuiskExpose } from "@/helper/mount";
 import { imageCropper } from "@/view/system/quisk";
 
 export type FuseImage = { blob: Blob | null; taggings: CaseTagging[] };
-const props = defineProps<{ caseId: number }>();
+const props = defineProps<{ caseId: number, mapId: number }>();
 const ognFilesUrl = ref<string | null>(null);
 const fuseUrl = computed(() => getQuery(props.caseId, true, true));
 

src/view/case/draw/selectMapImage.vue

@@ -1,6 +1,12 @@
 <template>
   <div class="search-layout">
-    <el-input v-model="keyword" placeholder="输入名称搜索" style="width: 350px" clearable @change="onSearch">
+    <el-input
+      v-model="keyword"
+      placeholder="输入名称搜索"
+      style="width: 350px"
+      clearable
+      @change="onSearch"
+    >
       <!-- <template #append>
         <el-button :icon="Search" />
       </template> -->
@@ -22,7 +28,11 @@
     </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)">
+        <div
+          class="search-list"
+          v-for="(item, index) in keywordList"
+          @click="hanleItem(item.name)"
+        >
           {{ item.name }}
         </div>
       </div>
@@ -47,27 +57,48 @@
 <script setup lang="ts">
 import AMapLoader from "@amap/amap-jsapi-loader";
 import { Search } from "@element-plus/icons-vue";
-import { wgs84_to_gcj02 } from "./map"
-import { getTipsList, getTipsNames, getCaseInfo } from "@/store/case";
-import { ref, watchEffect, onMounted, computed  } from "vue";
+import { wgs84_to_gcj02 } from "./map";
+import {
+  getTipsList,
+  getTipsNames,
+  getCaseInfo,
+  getcaseMap,
+} from "@/store/case";
+import { ref, watchEffect, onMounted, computed } from "vue";
 import { QuiskExpose } from "@/helper/mount";
 import { debounce } from "@/util";
-import html2canvas from "html2canvas"
-import L from 'leaflet'
-import 'leaflet/dist/leaflet.css'
+import html2canvas from "html2canvas";
+import L from "leaflet";
+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}')
+export type MapImage = {
+  blob: Blob | null;
+  search: MapInfo | null;
+  mapId?: string;
+};
+type MapInfo = {
+  lat: number;
+  lng: number;
+  zoom: number;
+  text: string;
+  address: string;
+  id: string;
+};
+
 // 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 props = defineProps<{ mapId: number }>();
 
-const mapOptions = ref([])
-var baseLayers = {}
-let map: any = {}
+const mapOptions = ref([]);
+var baseLayers = {};
+let map: any = {};
 let clickMarker;
 const keyword = ref("");
 const mapType = ref("amap");
+const mapName = ref({
+  mapId: null,
+  mapUrl: null,
+});
 const showSearch = ref(true);
 const info = ref<MapInfo>();
 const caseInfoData = ref<any>(null);
@@ -86,38 +117,46 @@ const caseId = computed(() => {
   }
 });
 onMounted(async () => {
-  
-  mapOptions.value = await fetch("/maplist.json").then((res) => res.json());
+  console.log("mapId", props);
+  let list = await getcaseMap({});
+  mapOptions.value = list.map((ele) => {
+    return { ...ele, label: ele.name, mapUrl: JSON.parse(ele.mapUrl) };
+  });
   // 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);
+  mapName.value.mapId = caseInfoData.value.mapId;
+  mapName.value.mapUrl = caseInfoData.value.mapUrl;
+  const layer = L.tileLayer(
+    caseInfoData.value.mapUrl || mapOptions.value[0].mapUrl[0].tempUrl,
+
+);
+  console.log("mapOptions", mapOptions.value, caseInfoData.value);
   let center = [22.61, 113.05];
-  if(caseInfoData.value.latAndLong){
-    center = caseInfoData.value.latAndLong.split(",")
+  if (caseInfoData.value.latAndLong) {
+    center = caseInfoData.value.latAndLong.split(",");
   }
   console.log("caseInfoData", caseInfoData.value.latAndLong, center);
 
   // 'map'为HTML节点id
   map = L.map(mapEl.value, {
-    center: center,//中心坐标
-    zoom: 14,//缩放级别
+    center: center, //中心坐标
+    zoom: 14, //缩放级别
     zoomControl: true, //缩放组件
     attributionControl: false, //去掉右下角logol
-    layers: [layer],//图层
+    layers: [layer], //图层
     // center: [51.505, -0.09],
     // zoom: 13
-  })
-  
+  });
 
   map.on("click", function (e) {
     // 获取点击位置的经纬度坐标
     var latitude = e.latlng.lat;
     var longitude = e.latlng.lng;
-    console.log('click', e, [longitude, latitude]);
+    console.log("click", e, [longitude, latitude]);
 
     searchInfo.value = {
       text: "",
@@ -128,26 +167,32 @@ onMounted(async () => {
     clickMarker && clickMarker.remove();
     clickMarker = null;
     // 在地图上添加标记
-    clickMarker = L.marker([latitude, longitude],{
+    clickMarker = L.marker([latitude, longitude], {
       position: [latitude, longitude],
       title: "点击位置",
     });
     clickMarker.addTo(map);
-    map.panTo([latitude, longitude])
+    map.panTo([latitude, longitude]);
     // map.add(clickMarker);
   });
-  mapOptions.value.map(ele => {
-    baseLayers[ele.label] = L.tileLayer(ele.url)
-    map.addLayer(baseLayers[ele.label])
-  })
+  mapOptions.value.map((ele) => {
+    baseLayers[ele.label] = L.tileLayer(ele.mapUrl[0].tempUrl);
+    map.addLayer(baseLayers[ele.label]);
+  });
   L.control.layers(baseLayers).addTo(map);
-  map.on('baselayerchange', function (event) {
-      clickMarker && clickMarker.remove();
-      clickMarker = null;
-      // 这里可以添加更多的回调逻辑，比如更新界面信息等
-    });
-  handleMapTypeChange(mapType.value)
-})
+  map.on("baselayerchange", function (event) {
+    let item = mapOptions.value.find((ele) => ele.label == event.name);
+    mapName.value = {
+      mapId: item.id,
+      mapUrl: item.mapUrl[0].tempUrl,
+    };
+    console.log("layer change", mapName.value);
+    clickMarker && clickMarker.remove();
+    clickMarker = null;
+    // 这里可以添加更多的回调逻辑，比如更新界面信息等
+  });
+  handleMapTypeChange(mapType.value);
+});
 
 const resultEl = ref<HTMLDivElement>();
 const searchAMap = ref<any>();
@@ -156,53 +201,53 @@ watchEffect(async (onCleanup) => {
   if (!mapEl.value || !resultEl.value) {
     return;
   }
-//   const AMap = await AMapLoader.load({
-//     plugins: ["AMap.PlaceSearch", "AMap.Event"],
-//     key: "e661b00bdf2c44cccf71ef6070ef41b8",
-//     version: "2.0",
-//   });
+  //   const AMap = await AMapLoader.load({
+  //     plugins: ["AMap.PlaceSearch", "AMap.Event"],
+  //     key: "e661b00bdf2c44cccf71ef6070ef41b8",
+  //     version: "2.0",
+  //   });
 
-//   const map = new AMap.Map(mapEl.value, {
-//     WebGLParams: {
-//       preserveDrawingBuffer: true,
-//     },
-//     resizeEnable: true,
-//   });
-//   const placeSearch = new AMap.PlaceSearch({
-//     pageSize: 5,
-//     showCover: false,
-//     pageIndex: 1,
-//     map: map,
-//     panel: resultEl.value,
-//     autoFitView: true,
-//   });
-//   const setSearch = (data) => {
-//     console.log('setSearch', data);
-//     let city = data.cityname == data.adname? data.cityname : (data.cityname + data.adname);
-//     searchInfo.value = {
-//       text: data.pname + city + data.address,
-//       lat: data.location.lat,
-//       lng: data.location.lng,
-//       zoom: 0,
-//     };
-//   };
+  //   const map = new AMap.Map(mapEl.value, {
+  //     WebGLParams: {
+  //       preserveDrawingBuffer: true,
+  //     },
+  //     resizeEnable: true,
+  //   });
+  //   const placeSearch = new AMap.PlaceSearch({
+  //     pageSize: 5,
+  //     showCover: false,
+  //     pageIndex: 1,
+  //     map: map,
+  //     panel: resultEl.value,
+  //     autoFitView: true,
+  //   });
+  //   const setSearch = (data) => {
+  //     console.log('setSearch', data);
+  //     let city = data.cityname == data.adname? data.cityname : (data.cityname + data.adname);
+  //     searchInfo.value = {
+  //       text: data.pname + city + data.address,
+  //       lat: data.location.lat,
+  //       lng: data.location.lng,
+  //       zoom: 0,
+  //     };
+  //   };
 
-//   placeSearch.on("listElementClick", (e) => {
-//     setSearch(e.data);
-//     showSearch.value = false;
-//   });
-//   placeSearch.on("complete", function (result) {
-//     setTimeout(() => {
-//       const markers = map.getAllOverlays("marker");
-//       for (const marker of markers) {
-//         marker.on("click", () => {
-//           clickMarker && map.remove(clickMarker);
-//           clickMarker = null;
-//           setSearch(marker._data);
-//         });
-//       }
-//     }, 500);
-//   });
+  //   placeSearch.on("listElementClick", (e) => {
+  //     setSearch(e.data);
+  //     showSearch.value = false;
+  //   });
+  //   placeSearch.on("complete", function (result) {
+  //     setTimeout(() => {
+  //       const markers = map.getAllOverlays("marker");
+  //       for (const marker of markers) {
+  //         marker.on("click", () => {
+  //           clickMarker && map.remove(clickMarker);
+  //           clickMarker = null;
+  //           setSearch(marker._data);
+  //         });
+  //       }
+  //     }, 500);
+  //   });
   //绑定地图移动与缩放事件
   map.on("moveend", () => {
     info.value = getMapInfo();
@@ -218,39 +263,38 @@ watchEffect(async (onCleanup) => {
   });
 });
 const handleMapTypeChange = (val) => {
-  console.log('handleMapTypeChange', val);
+  console.log("handleMapTypeChange", val);
   mapType.value = val;
 };
 const getMapInfo = (): MapInfo => {
-    var zoom = map.getZoom(); //获取当前地图级别
-    var center = map.getCenter();
-    return {
-      text: "",
-      zoom,
-      lat: center.lat,
-      lng: center.lng,
-    };
+  var zoom = map.getZoom(); //获取当前地图级别
+  var center = map.getCenter();
+  return {
+    text: "",
+    zoom,
+    lat: center.lat,
+    lng: center.lng,
   };
+};
 const onSearch = (val) => {
   getTipsList(val).then((res) => {
-    console.log('getTipsList', res);
-    keywordList.value = res.data
+    console.log("getTipsList", res);
+    keywordList.value = res.data;
   });
-  console.log('onSearch', val, 'keyword.value', keyword.value);
-
+  console.log("onSearch", val, "keyword.value", keyword.value);
 };
 const hanleItem = (name) => {
   // keyword.value = item.name;
   getTipsNames(name).then((ress) => {
     let res = ress.data;
     // longlat = wgs84_to_gcj02(Number(res.lng),Number(res.lat))
-    keyword.value = '';
+    keyword.value = "";
     searchInfo.value = {
       ...res,
       // lng: longlat[0],
       // lat: longlat[1],
       text: res.name,
-    }
+    };
     clickMarker && clickMarker.remove();
     // let icon = L.icon({
     //   iconUrl: require('./icon.svg'),
@@ -260,27 +304,27 @@ const hanleItem = (name) => {
     clickMarker = null;
 
     // 在地图上添加标记
-    clickMarker = L.marker([res.lat, res.lng],{
+    clickMarker = L.marker([res.lat, res.lng], {
       position: [res.lat, res.lng],
       title: "点击位置",
       // icon,
     });
     clickMarker.addTo(map);
-    map.panTo([res.lat, res.lng])
-  })
+    map.panTo([res.lat, res.lng]);
+  });
   // onSearch(item.name);
-}
-var dataURLtoBlob =  function (dataurl){
-        var arr = dataurl.split(','),
-            mime = arr[0].match(/:(.*?);/)[1],
-            bstr = atob(arr[1]),
-            n = bstr.length,
-            u8arr = new Uint8Array(n);
-       while (n--) {
-           u8arr[n] = bstr.charCodeAt(n);
-       }
-       return new Blob([u8arr], { type: mime })
+};
+var dataURLtoBlob = function (dataurl) {
+  var arr = dataurl.split(","),
+    mime = arr[0].match(/:(.*?);/)[1],
+    bstr = atob(arr[1]),
+    n = bstr.length,
+    u8arr = new Uint8Array(n);
+  while (n--) {
+    u8arr[n] = bstr.charCodeAt(n);
   }
+  return new Blob([u8arr], { type: mime });
+};
 const search = debounce((keyword: string) => {
   searchAMap.value.search(keyword);
 }, 1000);
@@ -291,23 +335,24 @@ watchEffect(() => {
 defineExpose<QuiskExpose>({
   submit() {
     return new Promise<MapImage>((resolve) => {
-        console.log('searchInfo', searchInfo.value, mapEl.value);
-        if (mapEl.value) {
+      console.log("searchInfo", searchInfo.value, mapName.value);
+      if (mapEl.value) {
         const canvas = mapEl.value.querySelector("canvas") as HTMLCanvasElement;
-        console.log(canvas, 'canvas');
-        canvas && canvas.toBlob((blob) => resolve({ blob, search: searchInfo.value! }))// || resolve({ search: searchInfo.value! });
-        if(!canvas){
+        console.log(canvas, "canvas");
+        canvas &&
+          canvas.toBlob((blob) => resolve({ blob, search: searchInfo.value! })); // || resolve({ search: searchInfo.value! });
+        if (!canvas) {
           //div内容生成图片
           html2canvas(mapEl.value, {
             useCORS: true, // 添加这个选项以解决跨域问题
           }).then((canvas) => {
             let imgUrl = canvas.toDataURL("image/png");
-            let blob = dataURLtoBlob(imgUrl)
-            resolve({ blob, search: searchInfo.value! });
+            let blob = dataURLtoBlob(imgUrl);
+            resolve({ blob, search: searchInfo.value!, mapId: mapName.value.mapId, mapUrl: mapName.value.mapUrl });
           });
         }
       } else {
-        resolve({ blob: null, search: null });
+        resolve({ blob: null, search: null, mapId: mapName.value.mapId, mapUrl: mapName.value.mapUrl });
       }
     });
   },
@@ -337,7 +382,7 @@ defineExpose<QuiskExpose>({
     max-height: 450px;
     overflow-y: auto;
   }
-  .search-list{
+  .search-list {
     background: #fff;
     padding-left: 10px;
     line-height: 36px;

src/view/case/quisk.ts

@@ -8,8 +8,8 @@ import EditEshapeTable, {
 } from "./draw/editEshapeTable.vue";
 import SceneList from "./sceneList.vue";
 import SelectFuseImage, { FuseImage } from "./draw/selectFuseImage.vue";
-import SelectMapImage, { MapImage } from "./draw/selectMapImagess.vue";
-// import SelectMapImage, { MapImage } from "./draw/selectMapImage.vue";
+// import SelectMapImage, { MapImage } from "./draw/selectMapImagess.vue";
+import SelectMapImage, { MapImage } from "./draw/selectMapImage.vue";
 import { quiskMountFactory } from "@/helper/mount";
 import { nextTick } from "vue";