liubiao/dyf-vue-ui
1
0
Fork 0
forked from dyf/dyf-vue-ui
Code Pull Requests Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

184
src/api/largeScreen/mapOpt.ts
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
}

130
src/views/homeIndex/components/MapComponent.vue
View File

@ -7,32 +7,46 @@
<div class="vertiLine"></div>
<div class="input" @click.stop="showCheck('showCheckGroup')">
<div>{{ groupName }}</div>
<div>
<el-icon v-show="!Status.showCheckGroup"><CaretBottom /></el-icon>
<el-icon v-show="Status.showCheckGroup"><CaretTop /></el-icon>
<div class="iconContent">
<div class="arrow">
<el-icon v-show="!Status.showCheckGroup"><CaretBottom /></el-icon>
<el-icon v-show="Status.showCheckGroup"><CaretTop /></el-icon>
</div>
<div class="clear" @click.stop="search.groupId=''">
<el-icon ><CloseBold /></el-icon>
</div>
</div>
</div>
<div class="ul" :class="Status.showCheckGroup ? '' : 'displayNone'">
<div class="li" @click.stop="checkItem(item, 'groupId')"
:class="item.value === search.groupId ? 'active' : ''"
v-for="item in groups"
:style="{ paddingLeft: `${(item.level - 1) * 16}px` }"
<div
class="li"
@click.stop="checkItem(item, 'groupId')"
:class="item.value === search.groupId ? 'active' : ''"
v-for="item in groups"
:style="{ paddingLeft: `${(item.level - 1) * 16}px` }"
>
{{ item.label }}
</div>
</div>
</div>
<div class="form-item">
<div class="vertiLine"></div>
<div class="input" @click.stop="showCheck('showCheckType')">
<div>{{ devType }}</div>
<div>
<el-icon v-show="!Status.showCheckType"><CaretTop /></el-icon>
<el-icon v-show="Status.showCheckType"><CaretBottom /></el-icon>
<div class="iconContent">
<div class="arrow">
<el-icon v-show="!Status.showCheckType"><CaretBottom /></el-icon>
<el-icon v-show="Status.showCheckType"><CaretTop /></el-icon>
</div>
<div class="clear" @click.stop="search.deviceType=''">
<el-icon ><CloseBold /></el-icon>
</div>
</div>
</div>
<div class="ul" :class="Status.showCheckType ? '' : 'displayNone'">
<div
@ -300,17 +314,19 @@ function getPoints() {
method: 'get'
});
let fakeData = getFakeData();
// let fakeData = getFakeData();
promise
.then((res) => {
map.clearOverLays();
if (res) {
if (res.code && res.code == 200) {
var array = res.data;
if (!array.length) {
ElMessage.error('未查询到任何数据,以下展示假数据,仅供查看效果,正式上线时取消');
array = fakeData;
}
// if (!array.length) {
// // ElMessage.error('未查询到任何数据,以下展示假数据,仅供查看效果,正式上线时取消');
// // array = fakeData;
// // return;
// }
let promise = [];
for (let i = 0; i < array.length; i++) {
let v = array[i];
@ -332,21 +348,24 @@ function getPoints() {
}
points.value.push(json);
map.AddPoint(json, '', null, null, json.isAlarming ? mapWarn : mapPoint);
promise.push(map.AddPoint(json, '', null, null, json.isAlarming ? mapWarn : mapPoint));
}
if (fens.value && fens.value.length > 0) {
for (let i = 0; i < fens.value.length; i++) {
let f = fens.value[i];
if (f.areaType === 0) {
map.DrawPoy(f);
promise.push(map.DrawPoy(f));
} else {
map.DrawCicle(f, f.radius, null);
promise.push(map.DrawCicle(f, f.radius, null));
}
}
}
map.setFitView();
Promise.allSettled(promise).then((res) => {
// map.setFitView();
let center=map.calcCenter();
map.setCenter(center.lng,center.lat);
});
} else {
console.error('接口getDeviceLocationInfo出现了未知的异常', res);
}
@ -424,36 +443,32 @@ function getGroups() {
promise.then((res) => {
if (res && res.code && res.code == 200) {
let arr = res.data;
arr = flattenTree(arr);
if (arr.length) {
groups.value = arr.map((v) => {
return {
value: v.id,
label: v.groupName,
level: v.level
};
});
} else
{
let array=[];
let arr = res.data;
arr = flattenTree(arr);
if (arr.length) {
groups.value = arr.map((v) => {
return {
value: v.id,
label: v.groupName,
level: v.level
};
});
} else {
let array = [];
for (let i = 0; i < 5; i++) {
array.push({
value: i,
label: '假数据' + (i + 1),
level:i%3+1
level: (i % 3) + 1
});
}
groups.value=array;
groups.value = array;
}
}
});
}
function checkItem(item, type) {
if (search.value[type] === item.value) {
return;
@ -464,7 +479,6 @@ function checkItem(item, type) {
}
var groupName = computed(() => {
if (search.value.groupId) {
let f = groups.value.find((v) => {
return v.value === search.value.groupId;
@ -478,7 +492,6 @@ var groupName = computed(() => {
});
var devType = computed(() => {
if (search.value.deviceType) {
let f = types.value.find((v) => {
return v.value === search.value.deviceType;
@ -497,17 +510,17 @@ function hideCheck() {
}
function showCheck(type) {
if(type=='showCheckGroup'){
if (type == 'showCheckGroup') {
Status.showCheckType = false;
}else{
Status.showCheckGroup = false;
} else {
Status.showCheckGroup = false;
}
Status[type] = !Status[type];
}
onMounted(() => {
map.initMap(hideCheck).then((res) => {
getPoints();
setInterval(getPoints,300000);
});
getTypes();
@ -520,8 +533,8 @@ onMounted(() => {
width: 100vw;
height: 100vh;
}
.el-icon{
color: #007EFF;
.el-icon {
color: #007eff;
font-size: 1vw;
}
@ -555,14 +568,13 @@ onMounted(() => {
:deep .el-select__wrapper,
:deep .el-input__wrapper {
border: none;
height: 7vh;
height: 7vh;
}
:deep .el-select__wrapper,
:deep .el-input__wrapper,
.topTool .form-item {
background: url(@/assets/homeIndex/select.png) no-repeat;
}
.topTool .form {
width: 43%;
@ -610,7 +622,7 @@ onMounted(() => {
border: none;
box-sizing: border-box;
padding: 0px 10px;
line-height: 4vh;
line-height: 4.5vh;
outline: none;
font-family: MicrosoftYaHei;
font-size: 15px;
@ -628,7 +640,7 @@ onMounted(() => {
font-family: MicrosoftYaHei;
font-size: 15px;
color: #deefff;
line-height: 4vh;
line-height: 4vh;
}
.topTool .form-item input:focus {
outline: none;
@ -678,4 +690,16 @@ onMounted(() => {
.displayNone {
display: none !important;
}
.iconContent:hover .arrow{
display: none;
}
.iconContent .clear{
display: none;
}
.iconContent:hover .clear{
display: block;
}
</style>