From 345a9cee1b25744f505ade2a2158ade57becaa7e Mon Sep 17 00:00:00 2001
From: tx <2622874537@qq.com>
Date: Sat, 17 Aug 2024 13:42:10 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9C=B0=E5=9B=BE=E8=AE=BE=E5=A4=87=E9=A1=B5?=
=?UTF-8?q?=E9=9D=A2bug=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/views/system/map/index.vue | 287 ++++++++++++++++-----------------
1 file changed, 139 insertions(+), 148 deletions(-)
diff --git a/src/views/system/map/index.vue b/src/views/system/map/index.vue
index 11198b1..bc628e2 100644
--- a/src/views/system/map/index.vue
+++ b/src/views/system/map/index.vue
@@ -102,7 +102,7 @@
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import globalConfig from "@/utils/config/globalConfig";
-import { getDevice, listDevice,getDeviceLists} from '@/api/system/device'
+import { getDevice, getDeviceLists ,listDevice} from '@/api/system/device'
import { listArea, optionselect as getAreaOptionselect } from '@/api/system/area'
import { listParking } from '@/api/system/parking'
import LocationMap from '@/components/Map/location/LocationMap'
@@ -137,17 +137,17 @@ function formarStatus(status, onlineStatus) {
}
}
}
+
export default {
name: "map-view",
components: { OrderRecord, RepairRecord, ReplacementRecord, QrCode, LocationMap },
data() {
return {
AMap: null,
- map: null, // 地图实例
+ map: null,
markers: [],
labels: [],
tips: null,
- // 运营区表格数据
areaList: [],
userName: undefined,
lon: null,
@@ -162,21 +162,18 @@ export default {
cluster: null,
data: [],
show: false,
- // 详情窗口
open2: false,
- // 表单参数
form: {},
areaId: 14,
areaOptions: [],
infoWindow: null,
- // 设备表格数据
deviceList: [],
onDeviceList: [],
parkingList: [],
noParkingList: [],
noridingList: [],
type: null,
- showmap:true,
+ showmap: true,
}
},
mounted() {
@@ -189,32 +186,33 @@ export default {
this.map?.destroy();
},
methods: {
- async handleAreaChange(newAreaId) {
- console.log('newAreaId:', newAreaId);
-
- // 更新 areaId 并清空之前的列表数据
- this.areaId = newAreaId;
- this.onDeviceList = [];
- this.parkingList = [];
- this.noParkingList = [];
- this.noridingList = [];
- this.deviceList=[]
- // 销毁当前地图实例
- // if (this.map) {
- // this.map.destroy();
- // this.map = null;
- // }
- this.showmap=false
- // 重新获取区域列表并初始化地图
- await this.getAreaList(this.areaId);
-
+ async handleAreaChange(newAreaId) {
+ console.log('newAreaId:', newAreaId);
+
+ this.areaId = newAreaId;
+ this.onDeviceList = [];
+ this.parkingList = [];
+ this.noParkingList = [];
+ this.noridingList = [];
+ this.deviceList = [];
+ this.showmap = false;
+
+ if (this.map) {
+ this.map.destroy();
+ this.map = null;
+ this.cluster = null;
+ }
+
+ await this.getAreaList(this.areaId);
},
+
getAreaOptions() {
getAreaOptionselect().then(response => {
this.areaOptions = response.data;
console.log("areaOptions", this.areaOptions)
});
},
+
onMapGeo(data, lat, lng) {
console.log("onMapGeo", data)
let component = data.regeocode.addressComponent;
@@ -228,6 +226,7 @@ export default {
name: component.street + component.streetNumber
}
},
+
onSelectChange(addr) {
console.log("onSelectChange", addr)
let data = addr.selected.data;
@@ -241,22 +240,18 @@ export default {
name: data.address + data.name,
}
},
+
handleSelect(key, keyPath) {
this.activeIndex = key;
console.log(key, keyPath);
},
+
showMarkers() {
if (this.show) {
- // this.markers.forEach(marker => {
- // marker.show();
- // });
this.labels.forEach(label => {
label.show();
});
} else {
- // this.markers.forEach(marker => {
- // marker.hide();
- // });
this.labels.forEach(label => {
label.hide();
});
@@ -267,16 +262,16 @@ export default {
element.style.visibility = this.show ? 'hidden' : 'visible';
});
},
+
async getAreaList(areaId) {
listArea({ areaId: areaId }).then(response => {
this.areaList = response.rows;
- if (this.areaList.length > 0) { // 确保数组不为空
- const firstArea = this.areaList[0]; // 获取第一个元素
+ if (this.areaList.length > 0) {
+ const firstArea = this.areaList[0];
this.area = firstArea;
- // console.log('第一个区域的信息:', firstArea);
this.lon = firstArea.longitude;
this.lat = firstArea.latitude;
- // console.log("area=============" + JSON.stringify(this.area))
+
listParking({ areaId: this.area.areaId }).then(response => {
let list = response.rows;
list.forEach(item => {
@@ -288,123 +283,106 @@ export default {
this.noridingList.push(item);
}
});
- // console.log("parkingList=============" + JSON.stringify(this.parkingList));
- // console.log("noParkingList=============" + JSON.stringify(this.noParkingList));
- // console.log("noriding=============" + JSON.stringify(this.noridingList));
- setTimeout(() => {
- this.showmap=true
+
+ setTimeout(() => {
+ this.showmap = true;
this.initAMap();
}, 300);
-
});
} else {
console.log('区域列表为空');
}
});
},
+
changeMapStyle() {
- // 创建一个默认的图层组件
let defaultLayer = new AMap.TileLayer();
- // 创建一个卫星图图层组件
let satelliteLayer = new AMap.TileLayer.Satellite();
let roadNetLayer = new AMap.TileLayer.RoadNet();
- // 将默认图层添加到地图中
+
this.map.add(defaultLayer);
- // 获取当前地图显示的图层
- let currentLayer = this.map.getLayers()[0]; // 假设默认图层在第一个位置
- // 切换图层
+ let currentLayer = this.map.getLayers()[0];
if (this.type == 'default') {
- console.log(1111111)
- //获取地图图层数据
- this.map.setLayers([defaultLayer]); // 切换回默认图层
+ this.map.setLayers([defaultLayer]);
this.type = 'Satellite';
} else {
- console.log(222222)
- this.map.setLayers([satelliteLayer, roadNetLayer]); // 切换到卫星图图层
+ this.map.setLayers([satelliteLayer, roadNetLayer]);
this.type = 'default';
}
},
+
setFitView() {
this.map.setFitView(null, false, [150, 60, 100, 60]);
},
- initAMap() {
+ initAMap() {
AMapLoader.load({
- key: globalConfig.aMap.key, // 申请好的Web端开发者Key，首次调用 load 时必填
- version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+ key: globalConfig.aMap.key,
+ version: "2.0",
}).then((AMap) => {
this.map = new AMap.Map("container", {
- // 设置地图容器id
- viewMode: "3D", // 是否为3D地图模式
- zoom: 13, // 初始化地图级别
- center: [this.lon, this.lat], //初始化地图中心点位置
+ viewMode: "3D",
+ zoom: 13,
+ center: [this.lon, this.lat],
});
- // 创建信息窗体
+
this.infoWindow = new AMap.InfoWindow({
- offset: new AMap.Pixel(0, -30)
+ offset: new AMap.Pixel(0, -30),
});
- //设备点标记
- console.log("this.areaId=============" + this.areaId)
+
this.deviceMarker(this.areaId);
- //运营区边界
+
this.areaList.forEach(area => {
this.addArea(JSON.parse(area.boundaryStr) || []);
});
- //停车区
+
this.parkingList.forEach(parking => {
this.addParking(JSON.parse(parking.boundaryStr) || [], parking.parkingName, parking.longitude, parking.latitude);
this.addMarker2(parking, "https://lxnapi.ccttiot.com/FqcYf6ecsnbC0OT6YYAF5npgu-kh", parking.parkingName, "#1890ff");
});
- //禁停区
+
this.noParkingList.forEach(noparking => {
this.addNoParking(JSON.parse(noparking.boundaryStr) || []);
this.addMarker2(noparking, "https://lxnapi.ccttiot.com/FjKE5PWbnEnZUq3k-wVIvV4lv8Ab", noparking.parkingName, "#ff4444");
});
- //禁行区
+
this.noridingList.forEach(noriding => {
this.addNoriding(JSON.parse(noriding.boundaryStr) || [], noriding.parkingName, noriding.longitude, noriding.latitude);
this.addMarker2(noriding, "https://lxnapi.ccttiot.com/FmX1diEPPbFYe1vcUfKp6qbKzzh2", noriding.parkingName, "#ffcc00");
});
- // setTimeout(() => {
- // this.setFitView();
- // }, 2000);
+
}).catch((e) => {
console.log(e);
});
},
- // 刷新点标记
+
freshMarker(points) {
let that = this;
- console.log("刷新点标记====", points)
+ console.log("刷新点标记====", points);
- // 检查 points 数据格式
if (!Array.isArray(points)) {
console.error("Points data is not an array");
return;
}
- console.log("this.cluster=======", this.cluster)
- // 聚合对象存在，则修改数据
if (this.cluster) {
- console.log('加载了');
try {
this.cluster.setData(points);
} catch (error) {
console.error("Error setting cluster data: ", error);
}
} else {
- // 插件未加载的情况
this.map.plugin(["AMap.MarkerCluster"], () => {
that.cluster = new AMap.MarkerCluster(
- this.map, //地图实例
- points, //海量点数据，数据中需包含经纬度信息字段 lnglat
+ this.map,
+ points,
{
styles: this.getStyles(),
- renderMarker: this.getRenderMarker, //上述步骤的自定义非聚合点样式
+ renderMarker: this.getRenderMarker,
}
);
- // 检查 cluster 对象是否正确初始化
+
if (that.cluster) {
console.log("Cluster 初始化成功");
that.cluster.on('click', that.onClickCluster);
@@ -414,18 +392,17 @@ export default {
});
}
},
- // 点击聚合对象事件
+
onClickCluster(e) {
console.log("点击聚合点====", e)
this.onDeviceList = e.clusterData.map(item => item);
- // 如果数量 > 1，则打开列表页
if (this.onDeviceList.length > 1) {
- console.log("打开列表====", this.onDeviceList)
let content = this.generateInfoContent(this.onDeviceList);
this.infoWindow.setContent(content);
this.infoWindow.open(this.map, e.lnglat);
}
},
+
generateInfoContent(data) {
let content = `<div style="max-hight: 500px; overflow-y: auto;">
<table class="info-table">
@@ -489,30 +466,32 @@ export default {
return content;
},
+
handleInfoWindowClick(event) {
- console.log("点击详情按钮====", event)
-
+ console.log("点击详情按钮====", event);
+
const button = event.target.closest('.detail-btn');
if (button) {
const deviceId = button.getAttribute('data-device-id');
this.onClickMarker(deviceId);
}
},
- // 自定义非聚合点样式
+
getRenderMarker(context) {
+ console.log('调用了 getRenderMarker');
let device = context.data[0];
let content = `
- <div class="apiary-marker">
- <div style="visibility: ${this.show ? 'hidden' : 'visible'};" class="apiary-marker-name">${device.vehicleNum}</div>
- <image class="apiary-marker-img" src='${formarStatus(device.status, device.onlineStatus)}'/>
- </div>
- `
+ <div class="apiary-marker">
+ <div style="visibility: ${this.show ? 'hidden' : 'visible'};" class="apiary-marker-name">${device.vehicleNum}</div>
+ <image class="apiary-marker-img" src='${formarStatus(device.status, device.onlineStatus)}'/>
+ </div>
+ `;
context.marker.setContent(content);
context.marker.on("click", () => this.onClickMarker(device.deviceId));
},
- // 点击非聚合点事件
+
onClickMarker(deviceId) {
- console.log("点击非聚合点====", deviceId)
+ console.log("点击非聚合点====", deviceId);
getDevice(deviceId).then(response => {
this.open2 = true;
this.form = response.data;
@@ -520,8 +499,9 @@ export default {
this.key++;
});
},
+
openDetail(deviceId) {
- console.log("点击非聚合点====", deviceId)
+ console.log("点击非聚合点====", deviceId);
getDevice(deviceId).then(response => {
this.open2 = true;
this.form = response.data;
@@ -529,38 +509,34 @@ export default {
this.key++;
});
},
+
getStyles() {
return [
{
- //聚合量在1-10时，聚合点的样式
- url: "//a.amap.com/jsapi_demos/static/images/blue.png", //图标显示图片的地址
- size: new AMap.Size(32, 32), //图标显示图片的大小
- offset: new AMap.Pixel(-16, -16), //图标定位在地图上的位置相对于图标左上角的偏移值
- textColor: "#fff", //文字的颜色
+ url: "//a.amap.com/jsapi_demos/static/images/blue.png",
+ size: new AMap.Size(32, 32),
+ offset: new AMap.Pixel(-16, -16),
+ textColor: "#fff",
},
{
- //聚合量在11-100时，聚合点的样式
url: "//a.amap.com/jsapi_demos/static/images/green.png",
size: new AMap.Size(32, 32),
offset: new AMap.Pixel(-16, -16),
textColor: "#fff",
},
{
- //聚合量在101-1000时，聚合点的样式
url: "//a.amap.com/jsapi_demos/static/images/orange.png",
size: new AMap.Size(36, 36),
offset: new AMap.Pixel(-18, -18),
textColor: "#fff"
},
{
- //聚合量在1001-10000时，聚合点的样式
url: "//a.amap.com/jsapi_demos/static/images/red.png",
size: new AMap.Size(48, 48),
offset: new AMap.Pixel(-24, -24),
textColor: "#fff"
},
{
- //聚合量在10001-100000时，聚合点的样式
url: "//a.amap.com/jsapi_demos/static/images/red.png",
size: new AMap.Size(48, 48),
offset: new AMap.Pixel(-24, -24),
@@ -568,13 +544,14 @@ export default {
},
]
},
+
addMarker2(parking, icon, title, color) {
let marker = new AMap.Marker({
map: this.map,
icon: new AMap.Icon({
image: icon,
- size: new AMap.Size(25, 36), // 设置图标的宽高
- imageSize: new AMap.Size(25, 36) // 设置图标的实际显示尺寸
+ size: new AMap.Size(25, 36),
+ imageSize: new AMap.Size(25, 36)
}),
position: [parking.longitude, parking.latitude],
offset: new AMap.Pixel(-12.5, -36)
@@ -582,36 +559,32 @@ export default {
this.markers.push(marker);
- // console.log("title============="+title)
- // 创建一个 Text 实例来显示标题
let text = new AMap.Text({
text: title,
- anchor: 'center', // 设置文本的锚点
+ anchor: 'center',
position: [parking.longitude, parking.latitude],
offset: new AMap.Pixel(0, -50),
style: {
- 'background-color': color, // 背景颜色为蓝色
- 'border': 'none', // 边框颜色与背景一致
- 'border-radius': '5px', // 圆角 5px
- 'color': 'white', // 文字颜色为白色
- 'font-size': '12px', // 字体大小
+ 'background-color': color,
+ 'border': 'none',
+ 'border-radius': '5px',
+ 'color': 'white',
+ 'font-size': '12px',
}
});
- // 将文本标签添加到地图实例
this.map.add(text);
- // console.log("text=============",text)
- this.labels.push(text)
+ this.labels.push(text);
},
+
deviceMarker(areaId) {
this.data = [];
- console.log(areaId,'areaIdareaId');
- getDeviceLists(areaId).then(response => {
- this.deviceList = response.data;
+ listDevice({ pageNum: 1, pageSize: 999, areaId: areaId }).then(response => {
+ // getDeviceLists(areaId).then(response => {
+ this.deviceList = response.rows;
this.deviceList.forEach(device => {
- // 检查经纬度是否为空且为有效数字
if (device.longitude !== null && device.latitude !== null &&
- !isNaN(device.longitude) && !isNaN(device.latitude)) {
+ !isNaN(device.longitude) && !isNaN(device.latitude)) {
this.data.push({
lnglat: [device.longitude, device.latitude],
status: device.status,
@@ -620,24 +593,50 @@ export default {
vehicleNum: device.vehicleNum,
deviceId: device.deviceId
});
- this.addMarker(device.longitude, device.latitude, device.status, device.onlineStatus,device.sn);
} else {
console.warn(`无效的经纬度值: 经度=${device.longitude}, 纬度=${device.latitude}`);
}
});
- // 将所有标记添加到聚合器中
+ console.log(this.data,'this.datathis.datathis.data');
this.freshMarker(this.data);
}).catch(error => {
console.error('获取设备列表失败:', error);
});
},
+
addMarker(lng, lat, status, onlineStatus, title) {
+
+ let marker = new AMap.Marker({
+ map: this.map,
+ icon: new AMap.Icon({
+ image: icon,
+ size: new AMap.Size(25, 36),
+ imageSize: new AMap.Size(25, 36)
+ }),
+ position: [lng, lat],
+ offset: new AMap.Pixel(-12.5, -36)
+ });
+ this.markers.push(marker);
+ let text = new AMap.Text({
+ text: title,
+ anchor: 'center',
+ position: [lng, lat],
+ offset: new AMap.Pixel(0, -50),
+ style: {
+ 'background-color': 'color',
+ 'border': 'none',
+ 'border-radius': '5px',
+ 'color': 'white',
+ 'font-size': '12px',
+ }
+ });
+ this.map.add(text);
+ this.labels.push(text);
},
- //添加运营区边界
addArea(data) {
let polygon = new AMap.Polygon({
path: data,
@@ -649,78 +648,69 @@ export default {
strokeStyle: 'dashed',
strokeDasharray: [5, 5],
});
- // polygon.on('mouseover', () => {
- // polygon.setOptions({
- // fillOpacity: 0.7,
- // fillColor: '#7bccc4'
- // })
- // })
- // polygon.on('mouseout', () => {
- // polygon.setOptions({
- // fillOpacity: 0.5,
- // fillColor: '#ccebc5'
- // })
- // })
this.map.add(polygon);
},
+
addParking(data, title, lon, lat) {
let polygon = new AMap.Polygon({
path: data,
fillColor: '#ccebc5',
strokeOpacity: 1,
fillOpacity: 0.5,
- strokeColor: '#3b7ed9', // 修改边界颜色为红色
- strokeWeight: 2, // 加粗边界
+ strokeColor: '#3b7ed9',
+ strokeWeight: 2,
strokeStyle: 'solid',
strokeDasharray: [5, 5],
});
polygon.on('mouseover', () => {
polygon.setOptions({
fillOpacity: 0.7,
- fillColor: '#71b7cc' // 鼠标悬浮时填充颜色为红色
+ fillColor: '#71b7cc'
});
});
polygon.on('mouseout', () => {
polygon.setOptions({
fillOpacity: 0.5,
- fillColor: '#a7c1d0' // 鼠标移出时恢复填充颜色
+ fillColor: '#a7c1d0'
});
});
this.map.add(polygon);
},
+
addNoParking(data) {
let polygon = new AMap.Polygon({
path: data,
fillColor: '#ccebc5',
strokeOpacity: 1,
fillOpacity: 0.5,
- strokeColor: '#ff0000', // 修改边界颜色为红色
- strokeWeight: 2, // 加粗边界
+ strokeColor: '#ff0000',
+ strokeWeight: 2,
strokeStyle: 'solid',
strokeDasharray: [5, 5],
});
polygon.on('mouseover', () => {
polygon.setOptions({
fillOpacity: 0.7,
- fillColor: '#ff0000' // 鼠标悬浮时填充颜色为红色
+ fillColor: '#ff0000'
});
});
polygon.on('mouseout', () => {
polygon.setOptions({
fillOpacity: 0.5,
- fillColor: '#cc7b7b' // 鼠标移出时恢复填充颜色
+ fillColor: '#cc7b7b'
});
});
this.map.add(polygon);
},
+
addNoriding(data, title, lon, lat) {
let polygon = new AMap.Polygon({
path: data,
fillColor: '#ccebc5',
strokeOpacity: 1,
fillOpacity: 0.5,
- strokeColor: '#ffcc00', // 修改边界颜色为红色
- strokeWeight: 2, // 加粗边界
+ strokeColor: '#ffcc00',
+ strokeWeight: 2,
strokeStyle: 'solid',
strokeDasharray: [5, 5],
});
@@ -741,6 +731,7 @@ export default {
},
};
</script>
+
<style lang="scss" scoped>
#container {
width: 100%;