vue项目总使用高德API的轨迹展示&巡航
先上效果图
刚接触高德API功能大致能实现但有些地方也不是很清楚，此文章仅做参考
官方示例：https://lbs.amap.com/demo/amap-ui/demos/amap-ui-pathsimplifier/index
index.html文件
index.html文件
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode:'申请的高德api的key', // 高德地图安全密钥，不推荐直接写死，可查看 https://lbs.amap.com/api/javascript-api/guide/abc/prepare
}
</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=申请的高德api的key"></script>
<script src="//webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script>
mapUtils.js文件
export const siteBoundsMap = () => {
const map = new AMap.Map("allmap", {
resizeEnable: true,
zoom: 5,
center: [121.47, 31.23],
// mapStyle: 'amap://styles/grey', //设置地图的显示样式
layers:[
new AMap.TileLayer({
zIndex:6,
opacity:1,
})
]
})
AMap.plugin(['AMap.ToolBar','AMap.DistrictSearch'],function(){ // 异步加载插件
var toolbar = new AMap.ToolBar({ // 地图控件
position:{ top: 0, left: 0 }
});
var districtsearch = new AMap.DistrictSearch({ // 给地图增加遮罩层，只显示出中国地图
extensions:'all',
subdistrict:0
}).search('中国',function(status,result){
// 外多边形坐标数组和内多边形坐标数组
var outer = [
new AMap.LngLat(-360,90,true),
new AMap.LngLat(-360,-90,true),
new AMap.LngLat(360,-90,true),
new AMap.LngLat(360,90,true),
];
console.log(status,result)
var holes = result.districtList[0].boundaries
var pathArray = [
outer
];
pathArray.push.apply(pathArray,holes)
var polygon = new AMap.Polygon({
pathL:pathArray,
strokeColor: '#D4C491',
strokeWeight: 1,
fillColor: 'white',
fillOpacity: 1
});
polygon.setPath(pathArray);
map.add(polygon)
})
map.addControl(toolbar,districtsearch);
}); // 地图控件
return map
}
组件中使用
<template>
<div id=" ">
<div id="allmap"></div>
</div>
</template>
<script>
var map;
import { siteBoundsMap } from "../../util/mapUtils"; // 这里我实在mapUtils.js文件中做的地图初始化
import {routeList} from "./cityList"
import img from "../../assets/img.png"
export default {
data(){
return {
navgtrSpeed:100000, //播放速度
navgtr:"",
pathLsit:"",
routePath: []
}
},
watch:{ },
created(){
},
mounted(){
this.routePath = routeList
this.init()
this.routeLine()
},
methods:{
init: () => {
map = siteBoundsMap();
},
routeLine(){
let self = this
AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], function(PathSimplifier, $) {
if (!PathSimplifier.supportCanvas) {
alert('当前环境不支持 Canvas！');
return;
}
//just some colors
var colors = [
"#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#0099c6", "#dd4477", "#66aa00",
"#b82e2e", "#316395", "#994499", "#22aa99", "#aaaa11", "#6633cc", "#e67300", "#8b0707",
"#651067", "#329262", "#5574a6", "#3b3eac"
];
var pathSimplifierIns = new PathSimplifier({
zIndex: 100,
//autoSetFitView:false,
map: map, //所属的地图实例
getPath: function(pathData, pathIndex) {
return pathData.path;
},
getHoverTitle: function(pathData, pathIndex, pointIndex) {
if (pointIndex >= 0) {
//point
return pathData.name + '，点：' + pointIndex + '/' + pathData.path.length;
}
return pathData.name + '，点数量' + pathData.path.length;
},
renderOptions: {
pathLineStyle: {
dirArrowStyle: true
},
getPathStyle: function(pathItem, zoom) {
var color = colors[pathItem.pathIndex % colors.length],
lineWidth = Math.round(4 * Math.pow(1.1, zoom - 3));
return {
pathLineStyle: {
strokeStyle: color,
lineWidth: lineWidth
},
pathLineSelectedStyle: {
lineWidth: lineWidth + 2
},
pathNavigatorStyle: {
fillStyle: color
}
};
}
}
});
window.pathSimplifierIns = pathSimplifierIns;
// $('加载数据，请稍候...').appendTo(document.body);
// $.getJSON('https://a.amap.com/amap-ui/static/data/big-routes.json', function(d) {
// console.log(self);
// $('#loadingTip').remove();
var flyRoutes = [];
for (var i = 0, len = self.routePath.length; i < len; i++) {
if (self.routePath[i].name.indexOf('乌鲁木齐') >= 0) {
// console.log('daonali',i);
// self.routePath.splice(i, 0, {
// name: '飞行 - ' + self.routePath[i].name,
// routePath: PathSimplifier.getGeodesicPath(
// self.routePath[i].routePath[0], self.routePath[i].routePath[self.routePath[i].routePath.length - 1], 100)
// });
i++;
len++;
}
}
self.routePath.push.apply(self.routePath, flyRoutes);
pathSimplifierIns.setData(self.routePath);
// initRoutesContainer(self.routePath);
// function onload() {
pathSimplifierIns.renderLater();
// }
// function onerror(e) {
// alert('图片加载失败！');
// }
//创建一个巡航器
var navg0 = pathSimplifierIns.createPathNavigator(0, {
loop: true, //循环播放
speed: 500000,
//pathNavigatorStyle: { // 路线的样式 不加 就是默认样式，见效果图
//width: 24,
//height: 24,
//使用图片时，需要现在当前页面import引入该图片
//content: PathSimplifier.Render.Canvas.getImageContent(img, onload, onerror),
//strokeStyle: null,
//fillStyle: null,
//经过路径的样式
//pathLinePassedStyle: {
//lineWidth: 6,
//strokeStyle: 'black',
//dirArrowStyle: {
//stepSpace: 15,
//strokeStyle: 'red'
//}
//}
//}
});
navg0.start();
// });
});
}
}
}
</script>
<style lang="less" scoped>
#UnmannedDrone{
width: 100%;
height: 100%;
}
</style>
routePath为起始点-终点经纬度,大体格式如下https://a.amap.com/amap-ui/static/data/big-routes.json为高德提供的经纬度地址
routeList = [
{
"name": "北京 -> 乌鲁木齐",
"path": [
[
116.405289,
39.904987
],
[
87.61792,
43.793308
]
]
}
]