From aaebfc583dd84fe363cba79fd7a159b344ccd559 Mon Sep 17 00:00:00 2001 From: Sliverber <2622874537@qq.com> Date: Sat, 27 Jul 2024 11:23:25 +0800 Subject: [PATCH] =?UTF-8?q?=E8=AE=A2=E5=8D=95=E8=AF=A6=E6=83=85=E4=BF=AE?= =?UTF-8?q?=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.vue | 4 +- src/components/Map/TrajectoryMap.vue | 227 ++++++++++++++++++++++++++- src/views/system/order/index.vue | 1 + 3 files changed, 227 insertions(+), 5 deletions(-) diff --git a/src/App.vue b/src/App.vue index 8f66aaf..7a71aba 100644 --- a/src/App.vue +++ b/src/App.vue @@ -27,7 +27,7 @@ export default { } - \ No newline at end of file + --> \ No newline at end of file diff --git a/src/components/Map/TrajectoryMap.vue b/src/components/Map/TrajectoryMap.vue index 1233e48..a1451cc 100644 --- a/src/components/Map/TrajectoryMap.vue +++ b/src/components/Map/TrajectoryMap.vue @@ -18,6 +18,8 @@ import AMapLoader from "@amap/amap-jsapi-loader"; import globalConfig from '@/utils/config/globalConfig' import AreaTextSelect from '@/components/AreaTextSelect/index.vue' +import { getArea } from '@/api/system/area' +import { listParking } from '@/api/system/parking' export default { name: "TrajectoryMap", components: { AreaTextSelect }, @@ -38,6 +40,10 @@ export default { type: String, default: '27.101745' }, + areaId: { + type: Number, + default: '' + }, tripRouteStr: { type: String, default: '' @@ -56,11 +62,18 @@ export default { area: { province: '福建省', city: '宁德市', - } + }, + area:{}, + parkingList:[], + noParkingList:[], + noridingList:[], + labels: [], } }, mounted() { - this.initAMap(); + console.log(this.areaId,'areaIdareaIdareaId'); + // this.initAMap(); + this.getAreas(this.areaId) }, beforeDestroy() { this.destroyMap(); @@ -75,19 +88,91 @@ export default { console.log("轨迹=====地图实例不存在，无需销毁"); } }, + 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(); + }); + } + this.show = !this.show; + const elements = document.querySelectorAll('.apiary-marker-name'); + elements.forEach(element => { + element.style.visibility = this.show ? 'hidden' : 'visible'; + }); + }, + async getAreas(areaId) { + getArea(this.areaId).then(response => { + + console.log(response,'responseresponse'); + this.area = response.data; + + + listParking({ areaId: this.area.areaId }).then(response => { + let list = response.rows; + console.log(list,'listlistlist'); + list.forEach(item => { + if (item.type == '1') { + this.parkingList.push(item); + } else if (item.type == '2') { + this.noParkingList.push(item); + } else if (item.type == '3') { + this.noridingList.push(item); + } + }); + + this.initAMap(); + }); + }); + }, initAMap() { AMapLoader.load({ key: globalConfig.aMap.key, // 申请好的Web端开发者Key，首次调用 load 时必填 version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15 plugins: ["AMap.MoveAnimation"] }).then((AMap) => { + let abb; + try { + abb = JSON.parse(this.tripRouteStr); + } catch (error) { + console.error("Error parsing tripRouteStr:", error); + return; + } + let latitude = parseFloat(abb[0][1]); + let longitude = parseFloat(abb[0][0]); this.AMap = AMap; this.map = new AMap.Map("container", { // 设置地图容器id resizeEnable: true, viewMode: "3D", // 是否为3D地图模式 zoom: 16, // 初始化地图级别 - center: [this.initLng == null ? 120.250452 : this.initLng, this.initLat == null ? 27.101745 : this.initLat], // 初始化地图中心点位置 + // center: [this.initLng == null ? 120.250452 : this.initLng, this.initLat == null ? 27.101745 : this.initLat], // 初始化地图中心点位置 + center:[longitude,latitude] + }); + this.addArea(JSON.parse( this.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"); }); this.trajectory(); //轨迹 @@ -96,6 +181,142 @@ export default { console.log(e); }); }, + 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) // 设置图标的实际显示尺寸 + }), + position: [parking.longitude, parking.latitude], + offset: new AMap.Pixel(-12.5, -36) + }); + + this.markers.push(marker); + + // console.log("title============="+title) + // 创建一个 Text 实例来显示标题 + let text = new AMap.Text({ + text: title, + 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', // 字体大小 + } + }); + + // 将文本标签添加到地图实例 + this.map.add(text); + // console.log("text=============",text) + this.labels.push(text) + }, + addParking(data, title, lon, lat) { + let polygon = new AMap.Polygon({ + path: data, + fillColor: '#ccebc5', + strokeOpacity: 1, + fillOpacity: 0.5, + strokeColor: '#3b7ed9', // 修改边界颜色为红色 + strokeWeight: 2, // 加粗边界 + strokeStyle: 'solid', + strokeDasharray: [5, 5], + }); + polygon.on('mouseover', () => { + polygon.setOptions({ + fillOpacity: 0.7, + fillColor: '#71b7cc' // 鼠标悬浮时填充颜色为红色 + }); + }); + polygon.on('mouseout', () => { + polygon.setOptions({ + fillOpacity: 0.5, + 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, // 加粗边界 + strokeStyle: 'solid', + strokeDasharray: [5, 5], + }); + polygon.on('mouseover', () => { + polygon.setOptions({ + fillOpacity: 0.7, + fillColor: '#ff0000' // 鼠标悬浮时填充颜色为红色 + }); + }); + polygon.on('mouseout', () => { + polygon.setOptions({ + fillOpacity: 0.5, + 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, // 加粗边界 + strokeStyle: 'solid', + strokeDasharray: [5, 5], + }); + polygon.on('mouseover', () => { + polygon.setOptions({ + fillOpacity: 0.7, + fillColor: '#FFEBA4FF' + }); + }); + polygon.on('mouseout', () => { + polygon.setOptions({ + fillOpacity: 0.5, + fillColor: '#ffeba4' + }); + }); + this.map.add(polygon); + }, + + addArea(data) { + let polygon = new AMap.Polygon({ + path: data, + fillColor: '#ccebc5', + strokeOpacity: 1, + fillOpacity: 0.5, + strokeColor: '#2b8cbe', + strokeWeight: 1, + 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); + }, // 显示轨迹 trajectory() { this.line = JSON.parse(this.tripRouteStr) diff --git a/src/views/system/order/index.vue b/src/views/system/order/index.vue index bb92284..1ff981a 100644 --- a/src/views/system/order/index.vue +++ b/src/views/system/order/index.vue @@ -240,6 +240,7 @@ v-if="showPlaceSearchMap" ref="map" :key="key" + :areaId="form.areaId" height="400px" :trip-route-str="form.tripRouteStr" />