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

地图更换版本

Browse Source
main
xuechunyuan 3 years ago
parent d1b9550b87
commit 5948d7294a
3 changed files with 81 additions and 52 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. 3
      public/index.html
  2. 56
      src/App.vue
  3. 74
      src/views/components/pathMap.vue

3
public/index.html
Unescape View File

@ -7,9 +7,10 @@
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<!-- <script src="//mapopen.bj.bcebos.com/github/BMapGLLib/TrackAnimation/src/TrackAnimation.min.js"></script> -->
<script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=FLPUL1102GNBvV2nVDy5kDIjYM9VGyYl"></script>
<!-- <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=FLPUL1102GNBvV2nVDy5kDIjYM9VGyYl"></script> -->
<!-- <script src="//mapv.baidu.com/build/mapv.min.js"></script> -->
<!-- <script src="https://unpkg.com/mapvgl@1.0.0-beta.168/dist/mapvgl.min.js"></script> -->
<script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=FLPUL1102GNBvV2nVDy5kDIjYM9VGyYl"></script>
<style>
*{
padding: 0;

56
src/App.vue
Unescape View File

@ -15,33 +15,63 @@
color: #2c3e50;
overflow: hidden;
}
.el-message{
padding:0.2rem !important;
.el-message {
padding: 0.2rem !important;
}
.el-message__icon,
.el-message__content {
font-size: 16px !important;
}
.el-message__icon,.el-message__content{
font-size: 16px !important;
.BMap_pop {
margin-top: 0.5rem;
div{
border: 0 !important;
background-color: transparent !important;
}
div{
img{
display: none;
}
}
.BMap_center{
top: -0.2rem !important;
height: 2.2rem !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;
}
}
.BMap_bubble_pop{
.BMap_bubble_pop {
color: #fff !important;
max-width: 3.67rem;
height:2.2rem !important;
padding:0 !important;
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{
img {
display: none !important;
}
}
.BMap_bubble_buttons{
div{
color:#fff !important;
font-size:0.4rem !important;
.BMap_bubble_buttons {
div {
color: #fff !important;
font-size: 0.4rem !important;
}
}
.BMap_cpyCtrl,.anchorBL{
.BMap_cpyCtrl,
.anchorBL {
opacity: 0 !important;
}
</style>

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

@ -23,50 +23,48 @@ export default {
}
},
beforeDestroy() {
if (this.setInterval) {
clearInterval(this.setInterval);
}
clearInterval(this.setInterval);
console.log('销毁');
},
beforeCreate() {
if (this.setInterval) {
clearInterval(this.setInterval);
}
clearInterval(this.setInterval);
},
mounted() {
this.initMap();
window.addEventListener('resize', () => {
if (this.setInterval) {
clearInterval(this.setInterval);
// if (this.setInterval) {
// clearInterval(this.setInterval);
// }
// this.initMap();
if (this.baiduMap) {
this.baiduMap.centerAndZoom(point, 11);
}
this.initMap();
});
},
methods: {
//回到原中心点
backMap() {
var point = new BMapGL.Point(118.880278, 35.649947);
var point = new BMap.Point(118.880278, 35.649947);
this.baiduMap.centerAndZoom(point, 11);
},
initMap() {
var point = new BMapGL.Point(118.880278, 35.649947);
var point = new BMap.Point(118.880278, 35.649947);
if (this.baiduMap) {
this.baiduMap.centerAndZoom(point, 11);
}
else {
this.baiduMap = new BMapGL.Map('container');
this.baiduMap = new BMap.Map('container');
this.baiduMap.centerAndZoom(point, 11);
this.baiduMap.enableScrollWheelZoom(true);
this.baiduMap.setMapStyle({style:'midnight'});
// this.baiduMap.setMapStyleV2({
// styleId: 'ec6ebc8ad35bcfbd56a424a29f325360'//'ef4f05652d24d0f23332710fbacad245'//
// });
this.baiduMap.setMapStyleV2({
styleJson: styleJson
})
// styleJson: styleJson
// })
// alert('自定义样式')
// this.view = new mapvgl.View({
// map: this.baiduMap
// });
var bdary = new BMapGL.Boundary();
var bdary = new BMap.Boundary();
bdary.get("日照市莒县", rs => {
var count = rs.boundaries.length;
for (var i = 0; i < count; i++) {
@ -74,10 +72,10 @@ export default {
var ptArr = [];
for (var j = 0; j < xyArr.length; j++) {
var tmp = xyArr[j].split(',');
var pt = new BMapGL.Point(tmp[0], tmp[1]);
var pt = new BMap.Point(tmp[0], tmp[1]);
ptArr.push(pt);
}
// var mapmask = new BMapGL.MapMask(ptArr, {
// var mapmask = new BMap.MapMask(ptArr, {
// isBuildingMask: true,
// isPoiMask: true,
// isMapMask: true,
@ -88,18 +86,17 @@ export default {
// sideFillOpacity: 0.9
// });
// this.baiduMap.addOverlay(mapmask);
var border = new BMapGL.Polyline(ptArr, {
var border = new BMap.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, }); //建立多边形覆盖物
// var ply = new BMap.Polygon(rs.boundaries[i], { strokeWeight: 2, strokeColor: "#0e94eb", fillColor: '', fillOpacity: 0, }); //建立多边形覆盖物
// this.baiduMap.addOverlay(ply); //添加覆盖物
}
})
this.baiduMap.removeEventListener('tilesloaded', this.handleEvent);
console.log('removeEventListener');
this.baiduMap.addEventListener('tilesloaded', this.handleEvent);
}
@ -113,6 +110,7 @@ export default {
this.markList = [];
this.queryLunz(item.deviceId, item.key, item.cardNo, index);
})
clearInterval(this.setInterval);
this.setInterval = setInterval(() => {
// this.view.removeAllLayers();
this.markList.map(mark => {
@ -131,7 +129,7 @@ export default {
lunzApi.getCurrentDeviceInfoByIMEI(this.appKey, deviceId).then(res => {
let lng = res.Data.BaiduLng;
let lat = res.Data.BaiduLat;
let pt = new BMapGL.Point(lng, lat);
let pt = new BMap.Point(lng, lat);
this.baiduMap.centerAndZoom(pt, 18);
})
},
@ -141,13 +139,13 @@ export default {
// let carInfo = res1.Data;
lunzApi.getCurrentDeviceInfoByIMEI(this.appKey, deviceId).then(res => {
// 创建小车图标
var myIcon = new BMapGL.Icon(require("@/assets/images/car.png"), new BMapGL.Size(25, 25));
var myIcon = new BMap.Icon(require("@/assets/images/car.png"), new BMap.Size(25, 25));
lunzApi.getBaiduNear(this.appKey, res.Data.BaiduLat, res.Data.BaiduLng).then(res2 => {
// 创建Marker标注，使用小车图标
let lng = res.Data.BaiduLng;
let lat = res.Data.BaiduLat;
let pt = new BMapGL.Point(lng, lat);
var marker = new BMapGL.Marker(pt, {
let pt = new BMap.Point(lng, lat);
var marker = new BMap.Marker(pt, {
icon: myIcon
});
// 将标注添加到地图
@ -163,14 +161,14 @@ export default {
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="display:inline-block;color:${res.Data.SbcStatus == 3 ? "#ffffff" : "#062766"};background:${res.Data.SbcStatus == 3 ? "#1dd58e !important" : "#9ab3c6 !important"};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: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;max-width:3.25rem;"> <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 style="text-align:center;margin:0.12rem 0 0;max-width:3.25rem;"> <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 !important;font-size:0.18rem;font-weight:bold;" id="btnPath_${deviceId}">行车轨迹</div></div>
</div>`;
let infoWindow = new BMapGL.InfoWindow(sContent, { width: '3.67rem', height: '2.2rem' });
let infoWindow = new BMap.InfoWindow(sContent, { width: 367, height: 220 });
// marker添加点击事件
infoWindow.addEventListener('open', () => {
document.getElementById('btnPath_' + deviceId).addEventListener('click', () => {
@ -209,7 +207,7 @@ export default {
// let obj = e.dataItem.objdata;
// let lng = obj.resData.BaiduLng;
// let lat = obj.resData.BaiduLat;
// let pt = new BMapGL.Point(lng, lat);
// let pt = new BMap.Point(lng, lat);
// let sContent = `<div style="padding:0 10px 10px;font-size:14px;line-height:22px;">
// <div>车牌号：${obj.carNo}</div>
// <div>设备位置：${obj.res2Data}</div>
@ -235,7 +233,7 @@ export default {
},
//信息窗口
openWindow(sContent, pt, DeviceNumber) {
let infoWindow = new BMapGL.InfoWindow(sContent);
let infoWindow = new BMap.InfoWindow(sContent);
// marker添加点击事件
infoWindow.addEventListener('open', () => {
document.getElementById('btnPath_' + DeviceNumber).addEventListener('click', () => {
@ -272,33 +270,33 @@ export default {
}
let point = [];
res.Data.Locations.map(item => {
point.push(new BMapGL.Point(item.Lng, item.Lat));
point.push(new BMap.Point(item.Lng, item.Lat));
});
if (this.polyline) {
this.baiduMap.removeOverlay(this.polyline);
this.polyline = null;
}
this.polyline = new BMapGL.Polyline(point, { strokeColor: '#ffe954', strokeWeight: 4, strokeOpacity: 1, })
this.polyline = new BMap.Polyline(point, { strokeColor: '#ffe954', strokeWeight: 4, strokeOpacity: 1, })
this.baiduMap.addOverlay(this.polyline);
//终点标注maker
if (this.endPointMarker) {
this.baiduMap.removeOverlay(this.endPointMarker);
this.endPointMarker = null;
}
// var myIcon = new BMapGL.Icon(require("@/assets/images/end_point_icon.png"), new BMapGL.Size(37, 44));
// this.endPointMarker = new BMapGL.Marker(point[point.length-1], {
// var myIcon = new BMap.Icon(require("@/assets/images/end_point_icon.png"), new BMap.Size(37, 44));
// this.endPointMarker = new BMap.Marker(point[point.length-1], {
// icon: myIcon
// });
// console.log('最后一个坐标',point[point.length-1])
// this.baiduMap.addOverlay(this.endPointMarker);
this.baiduMap.centerAndZoom(point[0], 15);
this.baiduMap.closeInfoWindow();
// this.polyline = new BMapGL.Polyline(point, {
// this.polyline = new BMap.Polyline(point, {
// strokeColor: '#F5533D',
// strokeWeight: 5,
// strokeOpacity: 1,
// });
// let trackAni = new BMapGLLib.TrackAnimation(this.baiduMap, this.polyline, {
// let trackAni = new BMapLib.TrackAnimation(this.baiduMap, this.polyline, {
// overallView: true,
// tilt: 30,
// duration: 20000,

Write Preview
Loading…
Cancel
Save