![](https://i-blog.csdnimg.cn/blog_migrate/151208a5149d6eacb2eb6c2efaa31acd.png)
<template>
<div>
<div class="head">
<breadcrumb></breadcrumb>
</div>
<div class="rightcenter clearfix">
<div class="box">
<div class="right1">
<div id="amap" style="width:98%;height:780px;"></div>
</div>
</div>
</div>
</div>
</template>
export default {
name: 'vehicle',
data() {
return {
tableData: [], //列表数据
lineArrLx:[],//路线线描点
lineArrLxmd:[],//管网线描点
endMarker:null,//终点
startMarker:null,//起点
lineArrLxGj:[],//路线线描点
lineArrLxGjmd:[],//管网线描点
endMarkerGj:null,//终点
startMarkerGj:null,//起点
map: null,
};
},
mounted() {
this.leibiao(this.pageNum, this.pagesize);
},
watch: {},
methods: {
// 获取列表数据
leibiao(pageNum, pagesize) {
// 请求数据接口
that.tableData = [{
"planRoute": "114.473232,38.007664;114.48542,38.010437;114.512371,38.016252;114.526447,38.023149;114.54533,38.023825",
"trajectory": "114.473232,38.007664;114.48542,38.010437;114.512371,38.016252",
}, {
"planRoute": "114.473232,38.007664;114.48542,38.010437;114.512371,38.016252;114.526447,38.023149;114.54533,38.023825",
"trajectory": "114.473232,38.007664;114.48542,38.010437;114.512371,38.016252",
}];
that.total = Number(res.data.total);
let maplx= res.data.list;
maplx.forEach(function(v,i) {
if(v.planRoute != null){
v.planRoute=v.planRoute.split(";")
v.trajectory=v.trajectory.split(";")
}
});
that.initMap()
that.xianmap(maplx); //规划的行车路线
that.xianGjMap(maplx); //规划的行车路线
},
/*
* 地图绘制
* */
//绘制地图
// 标准 normal 幻影黑 dark 月光银 light 远山黛 whitesmoke 草色青 fresh 雅士灰 grey 涂鸦 graffiti 马卡龙 macaron 靛青蓝blue 极夜蓝 darkblue 酱籽 wine
//绘制地图
// 标准 normal 幻影黑 dark 月光银 light 远山黛 whitesmoke 草色青 fresh 雅士灰 grey 涂鸦 graffiti 马卡龙 macaron 靛青蓝blue 极夜蓝 darkblue 酱籽 wine
initMap() {
let that=this;
let mapys='amap://styles/macaron';
let mapcenter=[114.473232,38.007664];
//初始化地图
this.map = new AMap.Map('amap', {
resizeEnable: true,
center: mapcenter,
zoom: 13,
viewMode: "2D", //使用3D视图
mapStyle: mapys, //设置地图的显示样式
});
this.map.clearMap(); // 清除地图覆盖物
},
//生成线数组
xianmap(gwarry){
let that=this
gwarry.forEach(function(v,i) {
if(v.planRoute != null){
that.mpaxian(v.planRoute,v,'#00aaff')
}
});
},
mpaxian(maplineArr,v,color){
//坐标集
let lineArr=[]
maplineArr.forEach(function(q,w) {
lineArr.push(onezhuan(q))
})
function onezhuan(m){
return m.split(',')
};
// 坐标总数,起终点坐标
var last = lineArr[0];
//路线折线
var polyline = new AMap.Polyline({
map: this.map,
path: lineArr,
lineJoin: 'round',
strokeColor: color,
strokeOpacity: 1,
strokeWeight: 3,
strokeStyle: "solid"
});
this.map.add(polyline);
this.lineArrLx.push(polyline);
this.startMarker = new AMap.Marker({
map: this.map,
position: lineArr[0], //起点经纬度
icon: new AMap.Icon({
size: new AMap.Size(25, 34),
image: require('@/assets/images/dir-marker.png'),
imageSize: new AMap.Size(135, 40),
imageOffset: new AMap.Pixel(-9, -3)
}), //起点ico
offset: new AMap.Pixel(-10, -30),
autoRotation: true,
});
this.endMarker = new AMap.Marker({
map: this.map,
position: lineArr[lineArr.length-1], //终点经纬度
icon: new AMap.Icon({
// 图标尺寸
size: new AMap.Size(25, 34),
// 图标的取图地址
image: require('@/assets/images/dir-marker.png'),
// 图标所用图片大小
imageSize: new AMap.Size(135, 40),
// 图标取图偏移量
imageOffset: new AMap.Pixel(-95, -3)
}), //终点ico
offset: new AMap.Pixel(-5, -30),
autoRotation: true,
});
this.map.add([this.startMarker,this.endMarker]);
},
xianGjMap(gwarry){
let that=this
gwarry.forEach(function(v,i) {
if(v.trajectory != null){
that.mpaxianGj(v.trajectory,v,'#0fcb14')
}
});
},
mpaxianGj(maplineArr,v,color){
//坐标集
let lineArrGj=[]
maplineArr.forEach(function(q,w) {
lineArrGj.push(onezhuan(q))
})
function onezhuan(m){
return m.split(',')
};
// 坐标总数,起终点坐标
var last = lineArrGj[0];
//路线折线
var polylineGj = new AMap.Polyline({
map: this.map,
path: lineArrGj,
lineJoin: 'round',
strokeColor: color,
strokeOpacity: 1,
strokeWeight: 3,
strokeStyle: "solid"
});
this.map.add(polylineGj);
this.lineArrLxGj.push(polylineGj);
//起点和终点
this.startMarkerGJ = new AMap.Marker({
map: this.map,
position: lineArrGj[0], //起点经纬度
icon: new AMap.Icon({
size: new AMap.Size(32, 32),
image: require('@/assets/images/dir-car.png'),
imageSize: new AMap.Size(32, 32),
}),//起点ico
offset: new AMap.Pixel(0, 0),
autoRotation: true,
// angle:-90,
});
this.endMarkerGJ = new AMap.Marker({
map: this.map,
position: lineArrGj[lineArrGj.length-1], //终点经纬度
icon: new AMap.Icon({
// 图标尺寸
size: new AMap.Size(32, 32),
// 图标的取图地址
image: require('@/assets/images/dir-car.png'),
// 图标所用图片大小
imageSize: new AMap.Size(32, 32),
}), //终点ico
offset: new AMap.Pixel(0, 0),
autoRotation: true,
});
this.map.add([this.startMarkerGJ,this.endMarkerGJ]);
},
}
};
![](https://i-blog.csdnimg.cn/blog_migrate/132b74d1bb72177be51c0f50c37a38fa.png)
![](https://i-blog.csdnimg.cn/blog_migrate/c23a9bfb4cd067e02792a25ef27b99c8.png)