suojin
/
physical_distribution
15
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

地图加载优化

Browse Source
main
xuechunyuan 3 years ago
parent 17c67e5a07
commit 90f0c71d7b
2 changed files with 84 additions and 72 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      src/App.vue
  2. 152
      src/views/components/pathMap.vue

4
src/App.vue
Unescape View File

@ -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;
}

152
src/views/components/pathMap.vue
Unescape View File

@ -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 = `<div style="font-size:14px;line-height:22px;padding:0 0 0 25px;">
<div style="display:flex;align-items:center;margin-bottom:20px;font-style: italic;font-size:20px;font-family: FZSK;">
<div style="color: #ffffff;margin-right:15px;">${carNo}</div>
<div style="display:inline-block;color:${res.Data.SbcStatus==3?"#ffffff":"#062766"};background:${res.Data.SbcStatus==3?"#1dd58e":"#9ab3c6"};width:50px;height:24px;line-height:24px;text-align:center;border-radius:12px;font-size:16px;">${this.locationStatus[res.Data.SbcStatus]}</div>
<div style="margin-left:45px;color: #fff;font-style: italic;font-size:20px;margin-right:15px;">${res.Data.spd}km/h</div>
let sContent = `<div style="font-size:0.14rem;line-height:0.22rem;padding:0 0.05rem 0 0.25rem;">
<div style="display:flex;align-items:center;margin-bottom:0.15rem;font-style: italic;font-size:0.2rem;font-family: FZSK;">
<div style="color: #ffffff;margin-right:0.1rem;">${carNo}</div>
<div style="display:inline-block;color:${res.Data.SbcStatus == 3 ? "#ffffff" : "#062766"};background:${res.Data.SbcStatus == 3 ? "#1dd58e" : "#9ab3c6"};width:0.65rem;height:0.24rem;line-height:0.24rem;text-align:center;border-radius:0.12rem;font-size:0.16rem;">${this.locationStatus[res.Data.SbcStatus]}</div>
<div style="margin-left:0.35rem;color: #fff;font-style: italic;font-size:0.2rem;margin-right:0.15rem;">${res.Data.spd}km/h</div>
</div>
<div style="display:flex;margin-bottom:10px;"><div style="color: #ffffff;width:80px;">设备位置：</div><div style="color: #ffffff;flex:1;">${res2.Data}</div></div>
<div style="display:flex;"><div style="color: #ffffff;width:100px;">最后定位时间：</div><div style="color: #ffffff;flex:1;">${res.Data.GPSTimeStamp.replace("T", " ")}</div></div>
<div style="text-align:center;margin:15px 0 0;"> <div style="display: inline-block;width:88px;height:30px;line-height:30px;border-radius: 15px;text-align:center;color: #1b2f57;font-style: italic;font-family: FZSK;cursor: pointer;background:#facd89;font-size:18px;font-weight:bold;" id="btnPath_${deviceId}">行车轨迹</div></div>
<div style="display:flex;margin-bottom:0.1rem;max-width:3.2rem;"><div style="color: #ffffff;">设备位置：</div><div style="color: #ffffff;flex:1;">${res2.Data}</div></div>
<div style="display:flex;"><div style="color: #ffffff;">最后定位时间：</div><div style="color: #ffffff;flex:1;">${res.Data.GPSTimeStamp.replace("T", " ")}</div></div>
<div style="text-align:center;margin:0.12rem 0 0;"> <div style="display: inline-block;width:0.88rem;height:0.3rem;line-height:0.3rem;border-radius: 0.15rem;text-align:center;color: #1b2f57;font-style: italic;font-family: FZSK;cursor: pointer;background:#facd89;font-size:0.18rem;font-weight:bold;" id="btnPath_${deviceId}">行车轨迹</div></div>
</div>`;
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;
}

Write Preview
Loading…
Cancel
Save