修改媒体地图，添加测距等工具

src/assets/styles/ruoyi.scss

@@ -1644,4 +1644,59 @@ h6 {
 
   background-image: url('../images/time-line-icon.png');
   background-size: cover;
+}
+
+// PPT导出样式
+.my_dialog_itemHeader {
+    width: 100%;
+    height: 36px;
+    background: #1a75e630;
+    padding: 6px 20px;
+    font-family: Microsoft YaHei;
+    font-weight: 600;
+    font-size: 18px;
+    color: #000000;
+}
+
+.chosedMediaNamsConter {
+    width: 100%;
+    min-height: 60px;
+    background: #ffffff;
+    padding: 10px 0;
+}
+
+.checkAllChose .el-checkbox__label {
+    display: inline-block;
+    font-size: var(--el-checkbox-font-size);
+    line-height: 1;
+    padding-left: 8px;
+    font-family: Microsoft YaHei;
+    font-weight: 400;
+    font-size: 16px;
+    color: #1E1E1E;
+}
+
+.checkAllChose .el-checkbox__input.is-checked .el-checkbox__inner,
+.checkAllChose .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+    background-color: #1A75E6;
+    border-color: #1A75E6;
+}
+
+.checkAllChose .el-checkbox__inner {
+    background: #ffffff;
+    border: 1px solid #ACACAC;
+    border-radius: 2px;
+    box-sizing: border-box;
+    display: inline-block;
+    height: 16px;
+    width: 16px;
+}
+
+.checkAllChose .el-checkbox__inner:after {
+    height: 8px;
+    left: 5px;
+}
+
+.checkAllChose .el-checkbox__input.is-checked+.el-checkbox__label {
+    color: #1E1E1E;
 }

src/views/mediaLibrary/index.vue

@@ -663,57 +663,4 @@ onMounted(() => {
     color: #ffffff90;
 }
 
-.my_dialog_itemHeader {
-    width: 100%;
-    height: 36px;
-    background: #1a75e630;
-    padding: 6px 20px;
-    font-family: Microsoft YaHei;
-    font-weight: 600;
-    font-size: 18px;
-    color: #000000;
-}
-
-.chosedMediaNamsConter {
-    width: 100%;
-    min-height: 60px;
-    background: #ffffff;
-    padding: 10px 0;
-}
-
-.checkAllChose .el-checkbox__label {
-    display: inline-block;
-    font-size: var(--el-checkbox-font-size);
-    line-height: 1;
-    padding-left: 8px;
-    font-family: Microsoft YaHei;
-    font-weight: 400;
-    font-size: 16px;
-    color: #1E1E1E;
-}
-
-.checkAllChose .el-checkbox__input.is-checked .el-checkbox__inner,
-.checkAllChose .el-checkbox__input.is-indeterminate .el-checkbox__inner {
-    background-color: #1A75E6;
-    border-color: #1A75E6;
-}
-
-.checkAllChose .el-checkbox__inner {
-    background: #ffffff;
-    border: 1px solid #ACACAC;
-    border-radius: 2px;
-    box-sizing: border-box;
-    display: inline-block;
-    height: 16px;
-    width: 16px;
-}
-
-.checkAllChose .el-checkbox__inner:after {
-    height: 8px;
-    left: 5px;
-}
-
-.checkAllChose .el-checkbox__input.is-checked+.el-checkbox__label {
-    color: #1E1E1E;
-}
 </style>

src/views/mediaMap/index.vue

@@ -227,6 +227,7 @@ import AMapLoader from "@amap/amap-jsapi-loader";  // 引入地图服务
 import { sysMediaTypeListByPid } from "@/api/system/mediaType"
 import { useBackgroundStore } from '@/store/modules/background'
 import otherbg from '@/assets/images/otherbg.png'
+import dragTool from '@/assets/images/dragTool.png'
 
 import { mediaByMap, mediaDetail } from "@/api/mediaLibrary"
 import { pptTemplatePage } from "@/api/system/pptTemplate"
@@ -256,6 +257,8 @@ const previewImg = ref([])
 const mapInstance = ref(null)
 const massMarks = ref(null)
 const centerMarker = ref(null)
+// 当前激活的工具实例
+const activeTool = ref(null)
 // 当前地图模式（2D/3D）
 const mapMode = ref('2D')
 // 是否全屏状态
@@ -407,20 +410,20 @@ const currentSelect = (val) => {
 
 
 }
-// 创建中心点标记
-const addCenterMark = (val) => {
-    if (centerMarker.value) mapInstance.value.remove(centerMarker.value);
-    centerMarker.value = new AMap.Marker({
-        position: [val.x, val.y],
-        title: val.mediaName,
-        zIndex: 100,
-        draggable: false,  // 是否可以拖拽
-        cursor: 'move'
-    });
-    // 将点添加到地图 
-    mapInstance.value.add(centerMarker.value);
-    mapInstance.value.setFitView(centerMarker.value);
-}
+// // 创建中心点标记
+// const addCenterMark = (val) => {
+//     if (centerMarker.value) mapInstance.value.remove(centerMarker.value);
+//     centerMarker.value = new AMap.Marker({
+//         position: [val.x, val.y],
+//         title: val.mediaName,
+//         zIndex: 100,
+//         draggable: false,  // 是否可以拖拽
+//         cursor: 'move'
+//     });
+//     // 将点添加到地图 
+//     mapInstance.value.add(centerMarker.value);
+//     mapInstance.value.setFitView(centerMarker.value);
+// }
 // 创建圆形热区
 const createCircle = (val) => {
     // 创建圆形覆盖物
@@ -459,8 +462,7 @@ const createCircleHandle = () => {
         position: [handlePosition.lng, handlePosition.lat],
         icon: new AMap.Icon({
             size: new AMap.Size(20, 20),
-            // image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
-            image: otherbg,
+            image: dragTool,
             imageSize: new AMap.Size(20, 20)
         }),
         offset: new AMap.Pixel(-10, -10),
@@ -543,7 +545,7 @@ const loadMap = () => {
         };
         AMapLoader.load({
             key: apiKey,
-            plugins: ["AMap.PlaceSearch"],
+            plugins: ["AMap.PlaceSearch", "AMap.MouseTool"],
             version: '2.0',       // 指定API版本
             AMapUI: {
                 plugins: []
@@ -596,6 +598,13 @@ const loadMap = () => {
     });
 }
 
+// 辅助函数：结束当前正在使用的鼠标工具
+const stopActiveTool = () => {
+    if (activeTool.value !== null) {
+        clearAll()
+        activeTool.value = null;      // 释放引用以便垃圾回收
+    }
+};
 // 添加自定义控件
 const addCustomControls = (AMap) => {
     // 创建控件容器
@@ -612,8 +621,51 @@ const addCustomControls = (AMap) => {
     fullscreenBtn.className = isFullscreen.value === true ? 'map-control-btn map-full-screen' : 'map-control-btn map-nofull-screen';
     fullscreenBtn.onclick = toggleFullscreen;
 
+    // 工具箱测距按钮
+    const toolRangingBtn = document.createElement('div');
+    toolRangingBtn.className = 'map-control-btn map-ranging';
+    toolRangingBtn.onclick = startRuler;
+
+    // 工具箱测面积按钮
+    const toolMeasureAreaBtn = document.createElement('div');
+    toolMeasureAreaBtn.className = 'map-control-btn map-measureAreaBtn';
+    toolMeasureAreaBtn.onclick = startMeasureArea;
+
+    // 工具箱添加点按钮
+    const toolPointBtn = document.createElement('div');
+    toolPointBtn.className = 'map-control-btn map-addPointBtn';
+    toolPointBtn.onclick = startDrawMarker;
+
+    // 工具箱添加折线按钮
+    const toolLineBtn = document.createElement('div');
+    toolLineBtn.className = 'map-control-btn map-addLineBtn';
+    toolLineBtn.onclick = startDrawPolyline;
+
+    // 工具箱添加圆按钮
+    const toolCircleBtn = document.createElement('div');
+    toolCircleBtn.className = 'map-control-btn map-addCircleBtn';
+    toolCircleBtn.onclick = startDrawCircle;
+
+    // 工具箱添加矩形按钮
+    const toolRactBtn = document.createElement('div');
+    toolRactBtn.className = 'map-control-btn map-addRactBtn';
+    toolRactBtn.onclick = startDrawRectangle;
+
+    // 工具箱清除按钮
+    const toolClearAllBtn = document.createElement('div');
+    toolClearAllBtn.className = 'map-control-btn map-clearAllBtn';
+    toolClearAllBtn.onclick = clearAll;
+
     controlContainer.appendChild(toggle2D3DBtn);
     controlContainer.appendChild(fullscreenBtn);
+    controlContainer.appendChild(toolRangingBtn);
+    controlContainer.appendChild(toolMeasureAreaBtn);
+    controlContainer.appendChild(toolPointBtn);
+    controlContainer.appendChild(toolLineBtn);
+    controlContainer.appendChild(toolCircleBtn);
+    controlContainer.appendChild(toolRactBtn);
+    controlContainer.appendChild(toolClearAllBtn);
+
 
     // 添加到地图容器
     document.getElementById('mapContainer').appendChild(controlContainer);
@@ -665,6 +717,101 @@ const toggleFullscreen = () => {
         }
     }
 }
+// 测距方法
+const startRuler = () => {
+    if (!mapInstance.value) return;
+    stopActiveTool();
+    activeTool.value = new AMap.MouseTool(mapInstance.value);
+    activeTool.value.rule({
+        startMarkerOptions: {//可缺省
+            icon: new AMap.Icon({
+                size: new AMap.Size(19, 31),//图标大小
+                imageSize: new AMap.Size(19, 31),
+                image: "//webapi.amap.com/theme/v1.3/markers/b/start.png"
+            }),
+            offset: new AMap.Pixel(-9, -31)
+        },
+        endMarkerOptions: {//可缺省
+            icon: new AMap.Icon({
+                size: new AMap.Size(19, 31),//图标大小
+                imageSize: new AMap.Size(19, 31),
+                image: "//webapi.amap.com/theme/v1.3/markers/b/end.png"
+            }),
+            offset: new AMap.Pixel(-9, -31)
+        },
+        midMarkerOptions: {//可缺省
+            icon: new AMap.Icon({
+                size: new AMap.Size(19, 31),//图标大小
+                imageSize: new AMap.Size(19, 31),
+                image: "//webapi.amap.com/theme/v1.3/markers/b/mid.png"
+            }),
+            offset: new AMap.Pixel(-9, -31)
+        },
+        lineOptions: {//可缺省
+            strokeStyle: "solid",
+            strokeColor: "#FF33FF",
+            strokeOpacity: 1,
+            strokeWeight: 2
+        }
+    });
+}
+// 测面积方法
+const startMeasureArea = () => {
+    if (!mapInstance.value) return;
+    stopActiveTool();
+    activeTool.value = new AMap.MouseTool(mapInstance.value);
+    activeTool.value.measureArea({
+        strokeColor: '#80d8ff',
+        fillColor: '#80d8ff',
+        fillOpacity: 0.3
+        //同 Polygon 的 Option 设置
+    });
+}
+// 添加点
+const startDrawMarker = () => {
+    if (!mapInstance.value) return;
+    stopActiveTool();
+    activeTool.value = new AMap.MouseTool(mapInstance.value);
+    activeTool.value.marker({
+        //同Marker的Option设置
+    });
+}
+// 添加线
+const startDrawPolyline = () => {
+    if (!mapInstance.value) return;
+    stopActiveTool();
+    activeTool.value = new AMap.MouseTool(mapInstance.value);
+    activeTool.value.polyline({
+        strokeColor: '#80d8ff'
+        //同Polyline的Option设置
+    });
+}
+// 添加圆
+const startDrawCircle = () => {
+    if (!mapInstance.value) return;
+    stopActiveTool();
+    activeTool.value = new AMap.MouseTool(mapInstance.value);
+    activeTool.value.circle({
+        fillColor: '#00b0ff',
+        strokeColor: '#80d8ff'
+        //同Circle的Option设置
+    });
+}
+// 画矩形
+const startDrawRectangle = () => {
+    if (!mapInstance.value) return;
+    stopActiveTool();
+    activeTool.value = new AMap.MouseTool(mapInstance.value);
+    activeTool.value.rectangle({
+        fillColor: '#00b0ff',
+        strokeColor: '#80d8ff'
+        //同Polygon的Option设置
+    });
+}
+// 清除
+const clearAll = () => {
+    activeTool.value.close(true)//关闭，并清除覆盖物
+}
 // 监听全屏变化事件
 document.addEventListener('fullscreenchange', () => {
     if (!document.fullscreenElement) {
@@ -824,7 +971,6 @@ const showContextMenu = (pixel) => {
     };
     contextMenuVisible.value = true;
 }
-
 const hideContextMenu = () => {
     contextMenuVisible.value = false;
 }
@@ -887,6 +1033,7 @@ const handleCloseTag = (tag) => {
     multipleChoseArr.value.splice(rowIndex, 1)
 }
 onUnmounted(() => {
+    stopActiveTool()
     if (mapInstance.value) {
         mapInstance.value.destroy();
     }
@@ -1077,6 +1224,78 @@ onMounted(() => {
     background: url('../../assets/images/icon-map-nofull-screen-active.png');
 }
 
+.map-ranging {
+    width: 40px;
+    height: 40px;
+    background: url('../../assets/images/mapRanging.png');
+}
+
+.map-ranging:hover {
+    width: 40px;
+    height: 40px;
+    background: url('../../assets/images/mapRanginghover.png');
+}
+
+.map-measureAreaBtn {
+    width: 40px;
+    height: 40px;
+    background: url('../../assets/images/mapArea.png');
+}
+
+.map-measureAreaBtn:hover {
+    background: url('../../assets/images/mapAreaHover.png');
+}
+
+.map-addPointBtn {
+    width: 40px;
+    height: 40px;
+    background: url('../../assets/images/mapPoint.png');
+}
+
+.map-addPointBtn:hover {
+    background: url('../../assets/images/mapPointHover.png');
+}
+
+.map-addLineBtn {
+    width: 40px;
+    height: 40px;
+    background: url('../../assets/images/mapLine.png');
+}
+
+.map-addLineBtn:hover {
+    background: url('../../assets/images/mapLineHover.png');
+}
+
+.map-addCircleBtn {
+    width: 40px;
+    height: 40px;
+    background: url('../../assets/images/mapCircle.png');
+}
+
+.map-addCircleBtn:hover {
+    background: url('../../assets/images/mapCircleHover.png');
+}
+
+.map-addRactBtn {
+    width: 40px;
+    height: 40px;
+    background: url('../../assets/images/mapRect.png');
+}
+
+.map-addRactBtn:hover {
+    background: url('../../assets/images/mapRectHover.png');
+}
+
+.map-clearAllBtn {
+    width: 40px;
+    height: 40px;
+    background: url('../../assets/images/mapClearAll.png');
+}
+
+.map-clearAllBtn:hover {
+    background: url('../../assets/images/mapClearAllHover.png');
+}
+
 /* 全屏样式 */
 .mapContainer:-webkit-full-screen {
     width: 100% !important;
@@ -1098,11 +1317,6 @@ onMounted(() => {
     height: 100% !important;
 }
 
-// .one-text {
-//     height: 50px;
-//     padding-top: 4px;
-// }
-
 // 分割线
 .splineBar {
     width: 100%;

src/views/outdoorMedia/index.vue

@@ -212,12 +212,19 @@ const { queryParams } = toRefs(data)
 // map实例
 const mapInstance = ref(null)
 const massMarks = ref(null)
+// 当前激活的工具实例
+const activeTool = ref(null)
 // 当前地图模式（2D/3D）
 const mapMode = ref('2D')
 // 是否全屏状态
 const isFullscreen = ref(false)
 // 地图数据点
 const points = ref([])
+// 初始化变量用于存储极值
+let minLng = Infinity; // 经度的最小值（最西边）
+let minLat = Infinity; // 纬度的最小值（最南边）
+let maxLng = -Infinity; // 经度的最大值（最东边）
+let maxLat = -Infinity; // 纬度的最大值（最北边）
 
 // 导出提交信息
 const exportForm = ref({
@@ -362,16 +369,27 @@ const handleFlod = () => {
 const getOutMediaPageList = () => {
     loading.value = true
     outMediaPageList(queryParams.value).then(res => {
-        res.data.rows.forEach(element => {
-            element.currentImageSrc = defaultImageSrc.value;
+        points.value = []
+        res.data.rows.forEach(itemPoint => {
+            itemPoint.currentImageSrc = defaultImageSrc.value;
+
+            if (itemPoint.dataScopeDeptId == 220) points.value.push({ "lnglat": [itemPoint.mapX, itemPoint.mapY], "name": itemPoint.mediaName, "mediaId": itemPoint.id, "style": 0 })
+            else if (itemPoint.dataScopeDeptId == 219) points.value.push({ "lnglat": [itemPoint.mapX, itemPoint.mapY], "name": itemPoint.mediaName, "mediaId": itemPoint.id, "style": 1 })
+
+            // 同时更新极值
+            const lng = itemPoint.mapX;
+            const lat = itemPoint.mapY;
+            if (lng < minLng) minLng = lng;
+            if (lat < minLat) minLat = lat;
+            if (lng > maxLng) maxLng = lng;
+            if (lat > maxLat) maxLat = lat;
         });
         outdoorMediaList.value = res.data.rows
         total.value = res.data.total
         loading.value = false
-
+    }).then(res => {
         // 在地图完全加载后执行点数据处理
         renderMassMarks();
-
     })
 }
 /** 搜索按钮操作 */
@@ -426,7 +444,8 @@ const loadMap = () => {
 
         AMapLoader.load({
             key: apiKey,
-            plugins: ["AMap.PlaceSearch"],
+            plugins: ["AMap.PlaceSearch", "AMap.MouseTool"],
+            version: '2.0',       // 指定API版本
             AMapUI: {
                 plugins: []
             }
@@ -480,6 +499,13 @@ const handleZoomChange = () => {
         return;
     }
 }
+// 辅助函数：结束当前正在使用的鼠标工具
+const stopActiveTool = () => {
+    if (activeTool.value !== null) {
+        clearAll()
+        activeTool.value = null;      // 释放引用以便垃圾回收
+    }
+};
 // 添加自定义控件
 const addCustomControls = (AMap) => {
     // 创建控件容器
@@ -496,8 +522,50 @@ const addCustomControls = (AMap) => {
     fullscreenBtn.className = isFullscreen.value === true ? 'map-control-btn map-full-screen' : 'map-control-btn map-nofull-screen';
     fullscreenBtn.onclick = toggleFullscreen;
 
+    // 工具箱测距按钮
+    const toolRangingBtn = document.createElement('div');
+    toolRangingBtn.className = 'map-control-btn map-ranging';
+    toolRangingBtn.onclick = startRuler;
+
+    // 工具箱测面积按钮
+    const toolMeasureAreaBtn = document.createElement('div');
+    toolMeasureAreaBtn.className = 'map-control-btn map-measureAreaBtn';
+    toolMeasureAreaBtn.onclick = startMeasureArea;
+
+    // 工具箱添加点按钮
+    const toolPointBtn = document.createElement('div');
+    toolPointBtn.className = 'map-control-btn map-addPointBtn';
+    toolPointBtn.onclick = startDrawMarker;
+
+    // 工具箱添加折线按钮
+    const toolLineBtn = document.createElement('div');
+    toolLineBtn.className = 'map-control-btn map-addLineBtn';
+    toolLineBtn.onclick = startDrawPolyline;
+
+    // 工具箱添加圆按钮
+    const toolCircleBtn = document.createElement('div');
+    toolCircleBtn.className = 'map-control-btn map-addCircleBtn';
+    toolCircleBtn.onclick = startDrawCircle;
+
+    // 工具箱添加矩形按钮
+    const toolRactBtn = document.createElement('div');
+    toolRactBtn.className = 'map-control-btn map-addRactBtn';
+    toolRactBtn.onclick = startDrawRectangle;
+
+    // 工具箱清除按钮
+    const toolClearAllBtn = document.createElement('div');
+    toolClearAllBtn.className = 'map-control-btn map-clearAllBtn';
+    toolClearAllBtn.onclick = clearAll;
+
     controlContainer.appendChild(toggle2D3DBtn);
     controlContainer.appendChild(fullscreenBtn);
+    controlContainer.appendChild(toolRangingBtn);
+    controlContainer.appendChild(toolMeasureAreaBtn);
+    controlContainer.appendChild(toolPointBtn);
+    controlContainer.appendChild(toolLineBtn);
+    controlContainer.appendChild(toolCircleBtn);
+    controlContainer.appendChild(toolRactBtn);
+    controlContainer.appendChild(toolClearAllBtn);
 
     // 添加到地图容器
     document.getElementById('mapContainer').appendChild(controlContainer);
@@ -549,6 +617,101 @@ const toggleFullscreen = () => {
         }
     }
 }
+// 测距方法
+const startRuler = () => {
+    if (!mapInstance.value) return;
+    stopActiveTool();
+    activeTool.value = new AMap.MouseTool(mapInstance.value);
+    activeTool.value.rule({
+        startMarkerOptions: {//可缺省
+            icon: new AMap.Icon({
+                size: new AMap.Size(19, 31),//图标大小
+                imageSize: new AMap.Size(19, 31),
+                image: "//webapi.amap.com/theme/v1.3/markers/b/start.png"
+            }),
+            offset: new AMap.Pixel(-9, -31)
+        },
+        endMarkerOptions: {//可缺省
+            icon: new AMap.Icon({
+                size: new AMap.Size(19, 31),//图标大小
+                imageSize: new AMap.Size(19, 31),
+                image: "//webapi.amap.com/theme/v1.3/markers/b/end.png"
+            }),
+            offset: new AMap.Pixel(-9, -31)
+        },
+        midMarkerOptions: {//可缺省
+            icon: new AMap.Icon({
+                size: new AMap.Size(19, 31),//图标大小
+                imageSize: new AMap.Size(19, 31),
+                image: "//webapi.amap.com/theme/v1.3/markers/b/mid.png"
+            }),
+            offset: new AMap.Pixel(-9, -31)
+        },
+        lineOptions: {//可缺省
+            strokeStyle: "solid",
+            strokeColor: "#FF33FF",
+            strokeOpacity: 1,
+            strokeWeight: 2
+        }
+    });
+}
+// 测面积方法
+const startMeasureArea = () => {
+    if (!mapInstance.value) return;
+    stopActiveTool();
+    activeTool.value = new AMap.MouseTool(mapInstance.value);
+    activeTool.value.measureArea({
+        strokeColor: '#80d8ff',
+        fillColor: '#80d8ff',
+        fillOpacity: 0.3
+        //同 Polygon 的 Option 设置
+    });
+}
+// 添加点
+const startDrawMarker = () => {
+    if (!mapInstance.value) return;
+    stopActiveTool();
+    activeTool.value = new AMap.MouseTool(mapInstance.value);
+    activeTool.value.marker({
+        //同Marker的Option设置
+    });
+}
+// 添加线
+const startDrawPolyline = () => {
+    if (!mapInstance.value) return;
+    stopActiveTool();
+    activeTool.value = new AMap.MouseTool(mapInstance.value);
+    activeTool.value.polyline({
+        strokeColor: '#80d8ff'
+        //同Polyline的Option设置
+    });
+}
+// 添加圆
+const startDrawCircle = () => {
+    if (!mapInstance.value) return;
+    stopActiveTool();
+    activeTool.value = new AMap.MouseTool(mapInstance.value);
+    activeTool.value.circle({
+        fillColor: '#00b0ff',
+        strokeColor: '#80d8ff'
+        //同Circle的Option设置
+    });
+}
+// 画矩形
+const startDrawRectangle = () => {
+    if (!mapInstance.value) return;
+    stopActiveTool();
+    activeTool.value = new AMap.MouseTool(mapInstance.value);
+    activeTool.value.rectangle({
+        fillColor: '#00b0ff',
+        strokeColor: '#80d8ff'
+        //同Polygon的Option设置
+    });
+}
+// 清除
+const clearAll = () => {
+    activeTool.value.close(true)//关闭，并清除覆盖物
+}
 // 监听全屏变化事件
 document.addEventListener('fullscreenchange', () => {
     if (!document.fullscreenElement) {
@@ -633,29 +796,8 @@ const renderMassMarks = () => {
         },
     ];
 
-    // 初始化变量用于存储极值
-    let minLng = Infinity; // 经度的最小值（最西边）
-    let minLat = Infinity; // 纬度的最小值（最南边）
-    let maxLng = -Infinity; // 经度的最大值（最东边）
-    let maxLat = -Infinity; // 纬度的最大值（最北边）
-
-    // 调用接口，获取数据点
-    points.value = []
-    outdoorMediaList.value.forEach(itemPoint => {
-        if (itemPoint.dataScopeDeptId == 220) points.value.push({ "lnglat": [itemPoint.mapX, itemPoint.mapY], "name": itemPoint.mediaName, "mediaId": itemPoint.id, "style": 0 })
-        else if (itemPoint.dataScopeDeptId == 219) points.value.push({ "lnglat": [itemPoint.mapX, itemPoint.mapY], "name": itemPoint.mediaName, "mediaId": itemPoint.id, "style": 1 })
-
-        // 同时更新极值
-        const lng = itemPoint.mapX;
-        const lat = itemPoint.mapY;
-        if (lng < minLng) minLng = lng;
-        if (lat < minLat) minLat = lat;
-        if (lng > maxLng) maxLng = lng;
-        if (lat > maxLat) maxLat = lat;
-    });
-
     // 如果有点存在，则创建 MassMarks 实例
-    if (points.value.length > 0) {
+    if (points.value.length > 0 && mapInstance.value) {
         // 创建MassMarks对象
         massMarks.value = new AMap.MassMarks(points.value, {
             opacity: 1,
@@ -695,6 +837,7 @@ const hideAmapLogo = () => {
 }
 
 onUnmounted(() => {
+    stopActiveTool()
     if (mapInstance.value) {
         mapInstance.value.destroy();
     }
@@ -782,6 +925,78 @@ onMounted(() => {
     background: url('../../assets/images/icon-map-nofull-screen-active.png');
 }
 
+.map-ranging {
+    width: 40px;
+    height: 40px;
+    background: url('../../assets/images/mapRanging.png');
+}
+
+.map-ranging:hover {
+    width: 40px;
+    height: 40px;
+    background: url('../../assets/images/mapRanginghover.png');
+}
+
+.map-measureAreaBtn {
+    width: 40px;
+    height: 40px;
+    background: url('../../assets/images/mapArea.png');
+}
+
+.map-measureAreaBtn:hover {
+    background: url('../../assets/images/mapAreaHover.png');
+}
+
+.map-addPointBtn {
+    width: 40px;
+    height: 40px;
+    background: url('../../assets/images/mapPoint.png');
+}
+
+.map-addPointBtn:hover {
+    background: url('../../assets/images/mapPointHover.png');
+}
+
+.map-addLineBtn {
+    width: 40px;
+    height: 40px;
+    background: url('../../assets/images/mapLine.png');
+}
+
+.map-addLineBtn:hover {
+    background: url('../../assets/images/mapLineHover.png');
+}
+
+.map-addCircleBtn {
+    width: 40px;
+    height: 40px;
+    background: url('../../assets/images/mapCircle.png');
+}
+
+.map-addCircleBtn:hover {
+    background: url('../../assets/images/mapCircleHover.png');
+}
+
+.map-addRactBtn {
+    width: 40px;
+    height: 40px;
+    background: url('../../assets/images/mapRect.png');
+}
+
+.map-addRactBtn:hover {
+    background: url('../../assets/images/mapRectHover.png');
+}
+
+.map-clearAllBtn {
+    width: 40px;
+    height: 40px;
+    background: url('../../assets/images/mapClearAll.png');
+}
+
+.map-clearAllBtn:hover {
+    background: url('../../assets/images/mapClearAllHover.png');
+}
+
 /* 全屏样式 */
 .mapContainer:-webkit-full-screen {
     width: 100% !important;