From 9d18548ed388248acc0294b12d28661b2533f060 Mon Sep 17 00:00:00 2001
From: wangchengming <15110151257@163.com>
Date: Wed, 17 Sep 2025 23:51:08 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=AA=92=E4=BD=93=E5=9C=B0?=
=?UTF-8?q?=E5=9B=BE=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/views/mediaMap/index.vue | 47 ++++++++++++++++++------
src/views/outdoorMedia/index.vue | 61 ++++++++++++++++++++++++--------
2 files changed, 82 insertions(+), 26 deletions(-)
diff --git a/src/views/mediaMap/index.vue b/src/views/mediaMap/index.vue
index 0f6f377..d4a1efd 100644
--- a/src/views/mediaMap/index.vue
+++ b/src/views/mediaMap/index.vue
@@ -13,7 +13,7 @@
{{ item.name }}
{{
item.address
- }}
+ }}
@@ -147,7 +147,7 @@ const placeSearch = ref(null)
// 热区圆实例
const circle = ref(null);
-const circleRadius = ref(2000); // 实际半径（米）
+const circleRadius = ref(500); // 实际半径（米）
const circleHandle = ref(null); // 拖拽手柄
// 选择地点展示框
@@ -190,7 +190,7 @@ const resetQuery = () => {
distanceLable.value = '请选择'
// 选择的距离值
activeLableIndex.value = null
- circleRadius.value = 2000; // 实际半径（米）
+ circleRadius.value = 500; // 实际半径（米）
selectConfig.value = null
// 清除现有的圆形和标记
@@ -216,7 +216,7 @@ const handleViewMedia = (_mediaId) => {
mediaDetail({ mediaId: _mediaId }).then(res => {
detailForm.value = res.data
if (detailForm.value.mediaFile && detailForm.value.mediaFile.length > 0) {
- fileList.value = detailForm.value.mediaFile.filter(item => item.fileType == 6)
+ fileList.value = detailForm.value.mediaFile.filter(item => item.fileType == 6)
}
open.value = true
})
@@ -237,7 +237,7 @@ const getLocaleListList = (searchValue) => {
}
}
// 中心点选择
-const currentSelect = (val) => {
+const currentSelect = (val) => {
selectConfig.value = val
centerPointName.value = val.name
// queryParams.value.keyword = val.name
@@ -246,9 +246,9 @@ const currentSelect = (val) => {
queryParams.value.distance = circleRadius.value
// 距离显示文本
- distanceLable.value = circleRadius.value == 2000 ? '2000米' : circleRadius.value + '米'
+ distanceLable.value = circleRadius.value == 500 ? '500米' : circleRadius.value + '米'
// 选择的距离值
- activeLableIndex.value = circleRadius.value == 2000 ? 2000 : circleRadius.value
+ activeLableIndex.value = circleRadius.value == 500 ? 500 : circleRadius.value
// 清除现有的圆形和标记
if (circle.value) {
@@ -312,7 +312,7 @@ const createCircleHandle = () => {
const handlePosition = new AMap.LngLat(
center.lng + radius / (111320 * Math.cos(center.lat * Math.PI / 180)),
center.lat
- );
+ );
// 创建手柄标记
circleHandle.value = new AMap.Marker({
position: [handlePosition.lng, handlePosition.lat],
@@ -622,16 +622,31 @@ const renderMassMarks = () => {
size: new AMap.Size(18, 18)
},
];
+
+ // 初始化变量用于存储极值
+ let minLng = Infinity; // 经度的最小值（最西边）
+ let minLat = Infinity; // 纬度的最小值（最南边）
+ let maxLng = -Infinity; // 经度的最大值（最东边）
+ let maxLat = -Infinity; // 纬度的最大值（最北边）
+
// 调用接口，获取数据点
points.value = []
mediaByMap(queryParams.value).then(res => {
if (res.code == 200) {
res.data.forEach(itemPoint => {
if (itemPoint.dataScopeDeptId == 220) points.value.push({ "lnglat": [itemPoint.x, itemPoint.y], "mediaId": itemPoint.mediaId, "style": 0 })
- if (itemPoint.dataScopeDeptId == 219) points.value.push({ "lnglat": [itemPoint.x, itemPoint.y], "mediaId": itemPoint.mediaId, "style": 1 })
+ else if (itemPoint.dataScopeDeptId == 219) points.value.push({ "lnglat": [itemPoint.x, itemPoint.y], "mediaId": itemPoint.mediaId, "style": 1 })
+
+ // 同时更新极值
+ const lng = itemPoint.x;
+ const lat = itemPoint.y;
+ if (lng < minLng) minLng = lng;
+ if (lat < minLat) minLat = lat;
+ if (lng > maxLng) maxLng = lng;
+ if (lat > maxLat) maxLat = lat;
});
}
- }).then(res => {
+ }).then(res => {
// 创建MassMarks对象
massMarks.value = new AMap.MassMarks(points.value, {
opacity: 1,
@@ -644,9 +659,19 @@ const renderMassMarks = () => {
massMarks.value.setMap(mapInstance.value);
// 添加点击事件
- massMarks.value.on('click', function (e) {
+ massMarks.value.on('click', function (e) {
handleViewMedia(e.data.mediaId)
});
+
+ // ==================================================
+ // 新增：计算边界并设置地图视野
+ // ==================================================
+ const southWest = new AMap.LngLat(minLng, minLat); // 西南角
+ const northEast = new AMap.LngLat(maxLng, maxLat); // 东北角
+ const bounds = new AMap.Bounds(southWest, northEast);
+
+ // 设置地图显示范围，会自动适配最佳视图
+ mapInstance.value.setBounds(bounds);
})
}
// 隐藏Logo的函数
diff --git a/src/views/outdoorMedia/index.vue b/src/views/outdoorMedia/index.vue
index 9892d9c..62ef073 100644
--- a/src/views/outdoorMedia/index.vue
+++ b/src/views/outdoorMedia/index.vue
@@ -371,6 +371,7 @@ const getOutMediaPageList = () => {
// 在地图完全加载后执行点数据处理
renderMassMarks();
+
})
}
/** 搜索按钮操作 */
@@ -631,27 +632,57 @@ const renderMassMarks = () => {
size: new AMap.Size(18, 18)
},
];
+
+ // 初始化变量用于存储极值
+ let minLng = Infinity; // 经度的最小值（最西边）
+ let minLat = Infinity; // 纬度的最小值（最南边）
+ let maxLng = -Infinity; // 经度的最大值（最东边）
+ let maxLat = -Infinity; // 纬度的最大值（最北边）
+
// 调用接口，获取数据点
points.value = []
- outdoorMediaList.value.forEach(itemPoint => {
+ outdoorMediaList.value.forEach(itemPoint => {
if (itemPoint.dataScopeDeptId == 220) points.value.push({ "lnglat": [itemPoint.mapX, itemPoint.mapY], "name": itemPoint.mediaName, "mediaId": itemPoint.id, "style": 0 })
- if (itemPoint.dataScopeDeptId == 219) points.value.push({ "lnglat": [itemPoint.mapX, itemPoint.mapY], "name": itemPoint.mediaName, "mediaId": itemPoint.id, "style": 1 })
- });
- // 创建MassMarks对象
- massMarks.value = new AMap.MassMarks(points.value, {
- opacity: 1,
- zIndex: 111,
- cursor: 'pointer',
- style: styles
+ 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.value.setMap(mapInstance.value);
+ // 如果有点存在，则创建 MassMarks 实例
+ if (points.value.length > 0) {
+ // 创建MassMarks对象
+ massMarks.value = new AMap.MassMarks(points.value, {
+ opacity: 1,
+ zIndex: 111,
+ cursor: 'pointer',
+ style: styles
+ });
+
+ // 将海量点添加到地图
+ massMarks.value.setMap(mapInstance.value);
+
+ // 添加点击事件
+ massMarks.value.on('click', function (e) {
+ handleViewMedia(e.data.mediaId)
+ });
+
+ // ==================================================
+ // 新增：计算边界并设置地图视野
+ // ==================================================
+ const southWest = new AMap.LngLat(minLng, minLat); // 西南角
+ const northEast = new AMap.LngLat(maxLng, maxLat); // 东北角
+ const bounds = new AMap.Bounds(southWest, northEast);
+
+ // 设置地图显示范围，会自动适配最佳视图
+ mapInstance.value.setBounds(bounds);
+ }
- // 添加点击事件
- massMarks.value.on('click', function (e) {
- handleViewMedia(e.data.mediaId)
- });
}
// 隐藏Logo的函数
const hideAmapLogo = () => {