1
0
forked from dyf/dyf-vue-ui

修改地图后端有真实数据后跟假想的数据字段名称不一致导致的地图假死问题

This commit is contained in:
liub
2025-09-29 16:49:25 +08:00
parent 28aa794e3f
commit 13f72a49ae
3 changed files with 212 additions and 112 deletions

View File

@ -1,5 +1,5 @@
var map = null;
var layPoints = [];
function initMap(click) {
// let key = '90bc158992feb8ccd0145e168cab1307';
@ -7,12 +7,12 @@ function initMap(click) {
map = new AMap.Map("map", {
viewMode: '2D', //默认使用 2D 模式
zoom: 11, //地图级别
center: [114.420739, 30.487514], //地图中心点
center: [116.396477 , 39.909278], //地图中心点
mapStyle: "amap://styles/darkblue"
});
map.on('click', function (evt) {
// alert('您点击的位置:'+evt.lnglat.longitude+' , '+ evt.lnglat.latitude);
map.on('click', function (evt) {
// alert('您点击的位置:'+evt.lnglat.lng+' , '+ evt.lnglat.lat);
if (click) {
click(evt.lnglat);
}
@ -38,7 +38,17 @@ function AddPoint(point, index, dragEnd, click, iconImg) {
return new Promise((resolve, reject) => {
try {
let center = point ? new AMap.LngLat(point.longitude, point.latitude) : map.getCenter();
if (!point) {
reject("point不可用")
return;
}
if (!point.longitude || !point.latitude) {
reject("point的经纬度不可用")
return;
}
layPoints.push({ lng: point.longitude, lat: point.latitude });
let center = new AMap.LngLat(point.longitude, point.latitude);
let icon = new AMap.Icon({
size: new AMap.Size(45, 45), //图标尺寸
@ -89,72 +99,135 @@ function setCenter(lon, latitude) {
map.setCenter(position); //简写 设置地图中心点
}
function calcCenter() {
if (!layPoints || layPoints.length === 0) {
throw new Error("坐标数组不能为空");
}
// 计算所有经度和纬度的总和
const total = layPoints.reduce((sum, point) => {
return {
lng: sum.lng + parseFloat(point.lng),
lat: sum.lat + parseFloat(point.lat)
};
}, { lng: 0, lat: 0 });
// 计算平均值得到中心点
const center = {
lng: total.lng / layPoints.length,
lat: total.lat / layPoints.length
};
return center;
}
//画多边形
function DrawPoy(points) {
if (!map) {
return;
}
if (!points) {
return;
}
let path = [];
let path1 = [];
setTimeout(() => {
points.coordinates.filter(v => {
path.push(new AMap.LngLat(v.longitude, v.latitude));
path1.push(new AMap.LngLat(v.longitude * 0.5, v.latitude * 0.5));
return true;
});
return new Promise((resolve, reject) => {
if (!map) {
reject("map未初始化");
return;
}
if (!points) {
reject("points未初始化");
return;
}
if (!points.coordinates) {
reject("coordinates未初始化");
return;
}
let polygon = new AMap.Polygon({
path: path,
fillColor: '#F00C0C',
fillOpacity: 0.03,
strokeOpacity: 0.1,
strokeColor: '#F00C0C',
if (!Array.isArray(points.coordinates)) {
points.coordinates = JSON.parse(points.coordinates);
}
let path = [];
setTimeout(() => {
points.coordinates.filter(v => {
if (v.lng && v.lat) {
path.push(new AMap.LngLat(v.lng, v.lat));
layPoints.push({ lng: v.lng, lat: v.lat });
return true;
}
return false;
});
if (!path.length) {
reject("path为空");
}
let polygon = new AMap.Polygon({
path: path,
fillColor: '#F00C0C',
fillOpacity: 0.03,
strokeOpacity: 0.1,
strokeColor: '#F00C0C',
strokeWeight: 3,
strokeStyle: 'dashed',
// strokeDasharray: [50,50,50],
extData: points
});
map.add(polygon);
resolve("添加多边形成功");
}, 0);
});
strokeWeight: 3,
strokeStyle: 'dashed',
// strokeDasharray: [50,50,50],
extData: points
});
map.add(polygon);
}, 0);
}
//画圆形
function DrawCicle(points, raduis, dragEnd) {
if (!map) {
return;
}
return new Promise((resolve, reject) => {
if (!map) {
reject("map未初始化");
return;
}
if (!points) {
reject("points未初始化");
return;
}
if (!points.coordinates) {
reject("coordinates未初始化");
return;
}
if (!Array.isArray(points.coordinates)) {
points.coordinates = JSON.parse(points.coordinates);
}
if (!(points.coordinates[0].lng && points.coordinates[0].lat)) {
reject("圆的中心点不正确")
return;
}
layPoints.push({ lng: coordinates[0].lng, lat: points.coordinates[0].lat });
let circle = new AMap.Circle({
center: [points.coordinates[0].lng, points.coordinates[0].lat],
radius: raduis ? raduis : 1000, //半径
borderWeight: 3,
strokeColor: "#F00C0C",
strokeWeight: 1,
strokeOpacity: 0.2,
fillOpacity: 0.4,
strokeStyle: 'dashed',
strokeDasharray: [10, 10],
// 线样式还支持 'dashed'
fillColor: '#1791fc',
zIndex: 50,
})
map.add(circle);
resolve("添加圆成功");
});
let circle = new AMap.Circle({
center: [points.coordinates[0].longitude, points.coordinates[0].latitude],
radius: raduis ? raduis : 1000, //半径
borderWeight: 3,
strokeColor: "#F00C0C",
strokeWeight: 1,
strokeOpacity: 0.2,
fillOpacity: 0.4,
strokeStyle: 'dashed',
strokeDasharray: [10, 10],
// 线样式还支持 'dashed'
fillColor: '#1791fc',
zIndex: 50,
})
map.add(circle);
// 缩放地图到合适的视野级别
}
//清除所有
function clearOverLays() {
map && map.clearMap();
layPoints = [];
}
@ -177,6 +250,7 @@ export default {
DrawCicle: DrawCicle,
clearOverLays: clearOverLays,
removeOverLay: removeOverLay,
setCenter: setCenter,
calcCenter: calcCenter,
setFitView: setFitView
}