vue使用高德地图制作小车轨迹回放动画简单案例
vue使用高德地图制作小车轨迹回放动画简单案例
·
首先在根目录public中的index.html引入高德地图
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=(你的key)&plugin=AMap.MouseTool,AMap.MapType,AMap.Autocomplete,AMap.PlaceSearch,AMap.MarkerClusterer,AMap.Driving,AMap.MoveAnimation"></script>
<template>
<!-- 地图 -->
<div id="container" style="width: 100%;height: 100%"></div>
<!-- 触发按钮 -->
<div><a-button type="primary" @click="carSearch">搜索</a-button></div>
<!-- 轨迹回放控制 -->
<div class="controlBoxButton">
<div @click="startAnimation()">开始动画</div>
<div @click="pauseAnimation()">暂停动画</div>
<div @click="resumeAnimation()">继续动画</div>
<div @click="stopAnimation()">停止动画</div>
</div>
<!-- 标点弹窗 -->
<div id="mapInfoWindow">
<div>{{siteData.name}}</div>
<div>累计停留时间:{{siteData.time}}秒</div>
<div>{{siteData.startDate}}{{siteData.uploadTime}}</div>
</div>
</template>
data(){
markerIcon:{
car: require("@/assets/car.png"),
label: require("@/assets/label.png"),
},
},
mounted(){
this.initMap();
},
methods: {
//map初始化
initMap() {
this.map = new AMap.Map('container', {
resizeEnable: true,
zoom: 13,//缩放级别
center: [119.761878, 29.126898],//地图中心点
});
},
//小车线路回放
carSearch() {
let that =this;
//处理接口返回数据格式 (格式为[[经度,纬度],[经度,纬度].......])
this.lineArr = [];
res为请求接口获得的线路数据
res.result.points.map((item)=>{
this.lineArr.push([item.longitude,item.latitude])
});
//设置小车icon
let car = new AMap.Icon({
image: that.markerIcon.car,//自定义小车图形
size: new AMap.Size(140, 50),//图标大小
imageSize: new AMap.Size(80, 50),//图标所用图片大小
imageOffset: new AMap.Pixel(0, -10)//图标所用图片偏移量
});
//设置marker
let position = [res.result.points[0].longitude,res.result.points[0].latitude];
this.marker = new AMap.Marker({
position: position,//小车开始时位置
icon: car,
autoRotation: true,//自动旋转
angle:-90,//旋转角度
map:that.map
});
// 绘制轨迹
let polyline = new AMap.Polyline({
map: that.map,
path: that.lineArr,
showDir:true,//显示折线箭头
strokeColor: "#557aa6", //线颜色
// strokeOpacity: 1, //线透明度
strokeWeight: 6, //线宽
// strokeStyle: "solid" //线样式
});
let passedPolyline = new AMap.Polyline({
map: that.map,
strokeColor: "#AF5",
// strokeOpacity: 1, //线透明度
strokeWeight: 6,
// strokeStyle: "solid" //线样式
});
this.marker.on('moving', function (e) {
passedPolyline.setPath(e.passedPath);
// that.map.setCenter(e.target.getPosition(),true) //设置后地图跟随小车移动
});
this.initCarSite();//配置线路中的标点位置
//调整合适位置
this.map.setFitView();
},
//配置线路中的标点
initCarSite(){
let that = this;
//res为请求接口获得的站点数据
res.result.slowPoints.map((item)=>{
let icon = new AMap.Icon({
image: that.markerIcon.label,
size: new AMap.Size(80, 80),
imageSize: new AMap.Size(40, 40),
imageOffset: new AMap.Pixel(-10, 10)
});
let marker = new AMap.Marker({
icon: icon,
position: [item.longitude, item.latitude],
});
that.map.add(marker);
//设置信息弹窗
marker.siteData = item;
AMap.event.addListener(marker, "click", function () {
that.openInfoWindow(marker)
});
})
},
//配置信息窗口
openInfoWindow(marker) {
let that = this;
that.siteData = marker.siteData;
let content = document.getElementById("mapInfoWindow");
let infoWindow = new AMap.InfoWindow({
content: content,
offset: new AMap.Pixel(0, 0)
});
infoWindow.on("close");
infoWindow.open(that.map, marker.getPosition());
},
//控制小车的一些事件
startAnimation(){
this.marker.moveAlong(this.lineArr,800);//开始动画(800为速度)
},
pauseAnimation(){
this.marker.pauseMove();//暂停动画
},
resumeAnimation(){
this.marker.resumeMove();//继续动画
},
stopAnimation(){
this.marker.stopMove();//停止动画
},
}
更多推荐
已为社区贡献2条内容
所有评论(0)