diff --git a/src/assets/images/dragTool.png b/src/assets/images/dragTool.png new file mode 100644 index 0000000..a8daccd Binary files /dev/null and b/src/assets/images/dragTool.png differ diff --git a/src/assets/images/mapArea.png b/src/assets/images/mapArea.png new file mode 100644 index 0000000..596a213 Binary files /dev/null and b/src/assets/images/mapArea.png differ diff --git a/src/assets/images/mapAreaHover.png b/src/assets/images/mapAreaHover.png new file mode 100644 index 0000000..76313e7 Binary files /dev/null and b/src/assets/images/mapAreaHover.png differ diff --git a/src/assets/images/mapCircle.png b/src/assets/images/mapCircle.png new file mode 100644 index 0000000..1f1e249 Binary files /dev/null and b/src/assets/images/mapCircle.png differ diff --git a/src/assets/images/mapCircleHover.png b/src/assets/images/mapCircleHover.png new file mode 100644 index 0000000..7c5fc53 Binary files /dev/null and b/src/assets/images/mapCircleHover.png differ diff --git a/src/assets/images/mapClearAll.png b/src/assets/images/mapClearAll.png new file mode 100644 index 0000000..4d95691 Binary files /dev/null and b/src/assets/images/mapClearAll.png differ diff --git a/src/assets/images/mapClearAllHover.png b/src/assets/images/mapClearAllHover.png new file mode 100644 index 0000000..04c8da9 Binary files /dev/null and b/src/assets/images/mapClearAllHover.png differ diff --git a/src/assets/images/mapLine.png b/src/assets/images/mapLine.png new file mode 100644 index 0000000..389f4e4 Binary files /dev/null and b/src/assets/images/mapLine.png differ diff --git a/src/assets/images/mapLineHover.png b/src/assets/images/mapLineHover.png new file mode 100644 index 0000000..c711c92 Binary files /dev/null and b/src/assets/images/mapLineHover.png differ diff --git a/src/assets/images/mapPoint.png b/src/assets/images/mapPoint.png new file mode 100644 index 0000000..47d71ec Binary files /dev/null and b/src/assets/images/mapPoint.png differ diff --git a/src/assets/images/mapPointHover.png b/src/assets/images/mapPointHover.png new file mode 100644 index 0000000..f9d98b5 Binary files /dev/null and b/src/assets/images/mapPointHover.png differ diff --git a/src/assets/images/mapRanging.png b/src/assets/images/mapRanging.png new file mode 100644 index 0000000..d44b8e9 Binary files /dev/null and b/src/assets/images/mapRanging.png differ diff --git a/src/assets/images/mapRanginghover.png b/src/assets/images/mapRanginghover.png new file mode 100644 index 0000000..1d9add6 Binary files /dev/null and b/src/assets/images/mapRanginghover.png differ diff --git a/src/assets/images/mapRect.png b/src/assets/images/mapRect.png new file mode 100644 index 0000000..8e31e32 Binary files /dev/null and b/src/assets/images/mapRect.png differ diff --git a/src/assets/images/mapRectHover.png b/src/assets/images/mapRectHover.png new file mode 100644 index 0000000..9322701 Binary files /dev/null and b/src/assets/images/mapRectHover.png differ diff --git a/src/assets/styles/ruoyi.scss b/src/assets/styles/ruoyi.scss index 899aaa0..e69f49c 100644 --- a/src/assets/styles/ruoyi.scss +++ b/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; } \ No newline at end of file diff --git a/src/views/mediaLibrary/index.vue b/src/views/mediaLibrary/index.vue index d0ac43b..4b89dce 100644 --- a/src/views/mediaLibrary/index.vue +++ b/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; -} \ No newline at end of file diff --git a/src/views/mediaMap/index.vue b/src/views/mediaMap/index.vue index 71c0afa..86ecc58 100644 --- a/src/views/mediaMap/index.vue +++ b/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%; diff --git a/src/views/outdoorMedia/index.vue b/src/views/outdoorMedia/index.vue index 62ef073..1bdd617 100644 --- a/src/views/outdoorMedia/index.vue +++ b/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;