From 90f0c71d7b20c70b0fc2c3412d46d01c6d8cf8b3 Mon Sep 17 00:00:00 2001 From: xuechunyuan <17853500702@163.com> Date: Mon, 30 Jan 2023 15:08:22 +0800 Subject: [PATCH] =?UTF-8?q?=E5=9C=B0=E5=9B=BE=E5=8A=A0=E8=BD=BD=E4=BC=98?= =?UTF-8?q?=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.vue | 4 +- src/views/components/pathMap.vue | 152 ++++++++++++++++--------------- 2 files changed, 84 insertions(+), 72 deletions(-) diff --git a/src/App.vue b/src/App.vue index 4467e80..9403afb 100644 --- a/src/App.vue +++ b/src/App.vue @@ -23,12 +23,14 @@ } .BMap_bubble_pop{ color: #fff !important; - height:220px !important; + max-width: 3.67rem; + height:2.2rem !important; padding:0 !important; background-image: url(@/assets/images/infowindow_bg.png) !important; background-color: transparent !important; background-repeat: no-repeat; border: 0 !important; + background-size: 100% 100% !important; img{ display: none !important; } diff --git a/src/views/components/pathMap.vue b/src/views/components/pathMap.vue index 789d596..918561e 100644 --- a/src/views/components/pathMap.vue +++ b/src/views/components/pathMap.vue @@ -48,73 +48,83 @@ export default { this.baiduMap.centerAndZoom(point, 11); }, initMap() { - this.baiduMap = new BMapGL.Map('container'); var point = new BMapGL.Point(118.880278, 35.649947); - this.baiduMap.centerAndZoom(point, 11); - this.baiduMap.enableScrollWheelZoom(true); - // this.baiduMap.setMapStyleV2({ - // styleId: 'ec6ebc8ad35bcfbd56a424a29f325360'//'ef4f05652d24d0f23332710fbacad245'// - // }); - this.baiduMap.setMapStyleV2({ - styleJson - }) - // this.view = new mapvgl.View({ - // map: this.baiduMap - // }); - var bdary = new BMapGL.Boundary(); - bdary.get("日照市莒县", rs => { - var count = rs.boundaries.length; - for (var i = 0; i < count; i++) { - var xyArr = rs.boundaries[i].split(';'); - var ptArr = []; - for (var j = 0; j < xyArr.length; j++) { - var tmp = xyArr[j].split(','); - var pt = new BMapGL.Point(tmp[0], tmp[1]); - ptArr.push(pt); + if (this.baiduMap) { + this.baiduMap.centerAndZoom(point, 11); + } + else { + this.baiduMap = new BMapGL.Map('container'); + this.baiduMap.centerAndZoom(point, 11); + this.baiduMap.enableScrollWheelZoom(true); + // this.baiduMap.setMapStyleV2({ + // styleId: 'ec6ebc8ad35bcfbd56a424a29f325360'//'ef4f05652d24d0f23332710fbacad245'// + // }); + this.baiduMap.setMapStyleV2({ + styleJson: styleJson + }) + alert('自定义样式') + // this.view = new mapvgl.View({ + // map: this.baiduMap + // }); + var bdary = new BMapGL.Boundary(); + bdary.get("日照市莒县", rs => { + var count = rs.boundaries.length; + for (var i = 0; i < count; i++) { + var xyArr = rs.boundaries[i].split(';'); + var ptArr = []; + for (var j = 0; j < xyArr.length; j++) { + var tmp = xyArr[j].split(','); + var pt = new BMapGL.Point(tmp[0], tmp[1]); + ptArr.push(pt); + } + // var mapmask = new BMapGL.MapMask(ptArr, { + // isBuildingMask: true, + // isPoiMask: true, + // isMapMask: true, + // showRegion: 'inside', + // topFillColor: '#5679ea', + // topFillOpacity: 0.5, + // sideFillColor: '#5679ea', + // sideFillOpacity: 0.9 + // }); + // this.baiduMap.addOverlay(mapmask); + var border = new BMapGL.Polyline(ptArr, { + strokeColor: '#0e94eb', + strokeWeight: 3, + strokeOpacity: 1 + }); + this.baiduMap.addOverlay(border); + // var ply = new BMapGL.Polygon(rs.boundaries[i], { strokeWeight: 2, strokeColor: "#0e94eb", fillColor: '', fillOpacity: 0, }); //建立多边形覆盖物 + // this.baiduMap.addOverlay(ply); //添加覆盖物 } - // var mapmask = new BMapGL.MapMask(ptArr, { - // isBuildingMask: true, - // isPoiMask: true, - // isMapMask: true, - // showRegion: 'inside', - // topFillColor: '#5679ea', - // topFillOpacity: 0.5, - // sideFillColor: '#5679ea', - // sideFillOpacity: 0.9 - // }); - // this.baiduMap.addOverlay(mapmask); - var border = new BMapGL.Polyline(ptArr, { - strokeColor: '#0e94eb', - strokeWeight: 3, - strokeOpacity: 1 - }); - this.baiduMap.addOverlay(border); - // var ply = new BMapGL.Polygon(rs.boundaries[i], { strokeWeight: 2, strokeColor: "#0e94eb", fillColor: '', fillOpacity: 0, }); //建立多边形覆盖物 - // this.baiduMap.addOverlay(ply); //添加覆盖物 - } - }) - this.baiduMap.addEventListener('tilesloaded', () => { - this.carList.map((item, index) => { - this.markList.map(mark => { - this.baiduMap.removeOverlay(mark); - }) - this.markList = []; - this.queryLunz(item.deviceId, item.key, item.cardNo, index); }) - this.setInterval = setInterval(() => { - // this.view.removeAllLayers(); - this.markList.map(mark => { - this.baiduMap.removeOverlay(mark); - }) - this.markList = []; - // this.viewData = []; - this.carList.map((item, index) => { - this.queryLunz(item.deviceId, item.key, item.cardNo, index); + this.baiduMap.removeEventListener('tilesloaded', this.handleEvent); + console.log('removeEventListener'); + this.baiduMap.addEventListener('tilesloaded', this.handleEvent); + } - }) - }, 20 * 1000) + }, + handleEvent() { + console.log('addEventListener'); + this.carList.map((item, index) => { + this.markList.map(mark => { + this.baiduMap.removeOverlay(mark); + }) + this.markList = []; + this.queryLunz(item.deviceId, item.key, item.cardNo, index); }) + this.setInterval = setInterval(() => { + // this.view.removeAllLayers(); + this.markList.map(mark => { + this.baiduMap.removeOverlay(mark); + }) + this.markList = []; + // this.viewData = []; + this.carList.map((item, index) => { + this.queryLunz(item.deviceId, item.key, item.cardNo, index); + }) + }, 20 * 1000) }, //单个设备定位聚焦放大 queryDingwei(deviceId) { @@ -150,17 +160,17 @@ export default { // objdata: { carNo: carNo, deviceId: key, resData: res.Data, res2Data: res2.Data } // }) this.markList.push(marker); - let sContent = `
-
-
${carNo}
-
${this.locationStatus[res.Data.SbcStatus]}
-
${res.Data.spd}km/h
+ let sContent = `
+
+
${carNo}
+
${this.locationStatus[res.Data.SbcStatus]}
+
${res.Data.spd}km/h
-
设备位置：
${res2.Data}
-
最后定位时间：
${res.Data.GPSTimeStamp.replace("T", " ")}
-
行车轨迹
+
设备位置：
${res2.Data}
+
最后定位时间：
${res.Data.GPSTimeStamp.replace("T", " ")}
+
行车轨迹
`; - let infoWindow = new BMapGL.InfoWindow(sContent,{width:367,height:220}); + let infoWindow = new BMapGL.InfoWindow(sContent, { width: '3.67rem', height: '2.2rem' }); // marker添加点击事件 infoWindow.addEventListener('open', () => { document.getElementById('btnPath_' + deviceId).addEventListener('click', () => { @@ -264,7 +274,7 @@ export default { this.polyline = new BMapGL.Polyline(point, { strokeColor: '#ffe954', strokeWeight: 4, strokeOpacity: 1, }) this.baiduMap.addOverlay(this.polyline); //终点标注maker - if(this.endPointMarker){ + if (this.endPointMarker) { this.baiduMap.removeOverlay(this.endPointMarker); this.endPointMarker = null; }