wangchengming/YouKeChuanMei_VUE
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化媒体地图显示

Browse Source
This commit is contained in:
wangchengming 2025-09-17 23:51:08 +08:00
parent e22f400293
commit 9d18548ed3
2 changed files with 82 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/views/mediaMap/index.vue
View File

@ -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
// 清除现有的圆形和标记
@ -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) {
@ -622,13 +622,28 @@ 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 => {
@ -647,6 +662,16 @@ const renderMassMarks = () => {
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的函数

33
src/views/outdoorMedia/index.vue
View File

@ -371,6 +371,7 @@ const getOutMediaPageList = () => {
// 在地图完全加载后执行点数据处理
renderMassMarks();
})
}
/** 搜索按钮操作 */
@ -631,12 +632,30 @@ 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 => {
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 })
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) {
// 创建MassMarks对象
massMarks.value = new AMap.MassMarks(points.value, {
opacity: 1,
@ -652,6 +671,18 @@ const renderMassMarks = () => {
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的函数
const hideAmapLogo = () => {