vue使用高德地图做车辆轨迹展示
<template>
<!-- <div id="map-location"></div> -->
<div class="app">
<div ref="map" id="map" style="width: 100%; height: 600PX;"></div>
</div>
</template>
<script>
//引入高德地图ui组件
import { lazyAMapApiLoaderInstance } from "vue-amap";
import carUrl from "../../assets/images/";
var map;
export default {
data() {
return {
navgtrSpeed:100000, //播放速度
navgtr:"",
pathLsit:""
};
},
mounted() {
},
created(){
},
props: ["linePath", "mapType", "status"],
watch:{
// 'linePath':function(){
// ();
// },
linePath: function (newVal, oldVal) {
this.polylinePath=[]
this.polylinePath = newVal;
if (this.polylinePath.length > 1) {
// ();
}
},
},
methods: {
//初始化地图插件
init(pathLsit) {
// 这里是调用初始化地图插件的时候传入的坐标参数
this.pathLsit=pathLsit
let self = this;
//声明一个一个arr用于存储需要渲染的坐标点
let path = []
this.pathLsit.forEach(res => {
//将后台返回的数据变更成高德需要的数据格式 [113.565655 ,30.25524]经度在前纬度在后
path.push([res.lng, res.lat,res.address]);
});
lazyAMapApiLoaderInstance.load().then(() => {
//初始化地图
map = new AMap.Map("map", {
resizeEnable: true,//是否监控地图容器尺寸变化，默认值为false
zoom: 35, //地图显示的缩放级别
//地图中心点坐标值
center: new AMap.LngLat(this.pathLsit[0].lng, this.pathLsit[0].lat) //
});
this.PathSimplifier()
this.initPathSimplifier(path)
});
},
//初始化一个点标记position 是定位点的中心
PathSimplifier(){
//这个是添加AMapUI的点标注
//"overlay/SimpleMarker" 简单的标注
AMapUI.loadUI(["overlay/SimpleMarker"], PathSimplifier => {
const marker = new PathSimplifier({
iconLabel: "起",//文字描述
iconStyle: "red", // //图标主题
color: "#fffff",
//...其他Marker选项...，不包括content
map: map,
radius: 5,
position: [this.pathLsit[0].lng, this.pathLsit[0].lat],
iconStyle: {
src: "///theme/v1.3/markers/b/mark_b.png",
style: {
width: "20px",
height: "30px",
color: "#f5f5f5"
}
}
});
});
},
initPathSimplifier(path) {
let obj = {
}
//ui/misc/PathSimplifier 轨迹展示组件
AMapUI.load(["ui/misc/PathSimplifier", "lib/$"], (PathSimplifier, $ ) =>{
if (!PathSimplifier.supportCanvas) {
alert("当前环境不支持 Canvas！");
return;
}
var defaultRenderOptions = {
//设置颜色
renderAllPointsIfNumberBelow: 1000, //绘制路线节点，如不需要可设置为-1
pathTolerance: 0,
keyPointTolerance: 0,
pathLineStyle: {
//设置显示路线的颜色
lineWidth: 6,
strokeStyle: "#3399FF",
borderWidth: 1,
borderStyle: "#eeeeee",
dirArrowStyle: true
},
keyPointStyle: {
//设置定位点的颜色
radius: 3,
fillStyle: "#ffffff",
lineWidth: 1,
strokeStyle: "#ff5252"
},
pathLineSelectedStyle: {
//设置鼠标悬停的颜色
lineWidth: 6,
strokeStyle: "#f1ff1b",
borderWidth: 1,
borderStyle: "#f01515",
dirArrowStyle: true
},
dirArrowStyle: {
stepSpace: 35,
strokeStyle: "#ffffff",
lineWidth: 2
},
pathNavigatorStyle: {
initRotateDegree: 0,
width: 20,
height: 40,
autoRotate: true,
lineJoin: "round",
content: PathSimplifier.Render.Canvas.getImageContent(
carUrl,
onload,
onerror
),
fillStyle: "#159ef0",
strokeStyle: "#1b9deb",
lineWidth: 1,
pathLinePassedStyle: {
//设置轨迹颜色
lineWidth: 3,
strokeStyle: "#66CCFF",
borderWidth: 1,
borderStyle: "#eeeeee",
dirArrowStyle: true
}
}
};
//核心功能
var pathSimplifierIns = new PathSimplifier({
zIndex: 100,
//autoSetFitView:false,
map: map, //所属的地图实例
//具体什么作用不知道.官方只说是返回路线坐标点
getPath: function(pathData, pathIndex) {
return pathData.path;
},
//返回鼠标悬停时显示的信息 坐标点的描述
getHoverTitle: function(pathData, pathIndex, pointIndex) {
// (pathData)
if (pointIndex >= 0) {
//point
return (
// +
// "，点：" +
// pointIndex +
// "/" +
// [2]
// +
"经点" +
pointIndex +
"：" +
pathData.path[pointIndex][2]
);
}
// return + "，点数量" + ;
},
renderOptions: defaultRenderOptions
});
// 这里是设置数据
pathSimplifierIns.setData([
{
name: "路线0",
path: path
}
]);
//对第一条线路（即索引 0）创建一个巡航器
this.navgtr = pathSimplifierIns.createPathNavigator(0, {
loop: false, //循环播放
speed: this.navgtrSpeed //巡航速度，单位千米/小时
});
this.navgtr.start();
});
},
//播放的方法
play(){
this.navgtr.start();
},
//暂停的方法
suspend(){
this.navgtr.pause()
},
// 恢复的方法
recover(){
this.navgtrSpeed = 100000
this.navgtr.resume();
},
//倍数的方法
add(val){
if(val){
this.navgtrSpeed = 100000 * val
}
console.log(this.navgtrSpeed)
this.navgtr.setSpeed(this.navgtrSpeed)
}
}
}
</script>
<style>
#map-location {
width: 100%;
height: 500px;
}
</style>