vue高德地图(amap-jsapi-loader)页面与组件使用(AMapUI 组件库)
AMapUI 组件库:https://lbs.amap.com/api/amap-ui/intro引入amap-jsapi-loader:https://blog.csdn.net/qq_32707555/article/details/123063459效果图参考高德地图UI组件示例:https://lbs.amap.com/demo/amap-ui/demos/amap-ui-pathsimp
AMapUI 组件库:https://lbs.amap.com/api/amap-ui/intro
引入amap-jsapi-loader:https://blog.csdn.net/qq_32707555/article/details/123063459
效果图参考高德地图UI组件示例:https://lbs.amap.com/demo/amap-ui/demos/amap-ui-pathsimplifier/simple-demo
getHoverTitle事件对应的就是显示鼠标移到轨迹线上,显示的文字。就像上图 路线0,点数量12
setData()设置轨迹数据,path的第一个坐标是起点坐标,最后一个是终点坐标,中间是途径坐标,如果你要轨迹显示2点的直线,那么只要起点和终点坐标就可以。
start()是创建一个巡航器,简单来说就是开始跑轨迹。
setData()设置的是一个数组,可以创建多条轨迹路线,上图第一个红框的0就是选择数据里的第一个对象进行创建,有多个的话,就可以创建多条。
ps:怎么引入具体看上面的链接
init(){
let that = this
AMapLoader.load({
key: '', // 申请好的Web端开发者Key,首次调用 load 时必填
version: '1.4.15', // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
plugins: ['AMap.PlaceSearch',
'AMap.Geocoder', 'AMap.Driving'
], // 需要使用的的插件列表,如比例尺'AMap.Scale'等
Loca: {//这个是数据可视化
version: '1.3.2',
},
AMapUI: {//重点就是这个
version: '1.0',
plugins: ['misc/PathSimplifier','overlay/SimpleMarker']//SimpleMarker设置自定义图标,PathSimplifier轨迹展示组件
}
}).then((AMap)=>{
var map = new AMap.Map('container', {
mapStyle: 'amap://styles/midnight',//这个是设置地图模块,没有项目要求就这样
zoom: 11.5,//初始地图级别
//center: center,//设置地图的中心点
features: ['bg', 'road', 'point'], //point 显示出地图的省市区名称
// viewMode: '3D', //高德地图JS API UI组件库-海量点展示、轨迹展示不支持3D地图
})
AMapUI.loadUI(['misc/PathSimplifier','overlay/SimpleMarker'],function(PathSimplifier,SimpleMarker){
var lngLatsa = map.getCenter()//获取中心点的经纬度
new SimpleMarker({
//自定义图标地址
iconStyle:{
src:"",//网络地址路径,本地不行
style:{
width:'80px',
height:'80px'
}
},
//设置基点偏移
offset: new AMap.Pixel(0, 0),
anchor:'center',
map: map,
showPositionPoint: false,
position: lngLatsa,
zIndex: 100
});
})
//开始轨迹
var emptyLineStyle = {
lineWidth: 0,
fillStyle: null,
strokeStyle: null,
borderStyle: null
};
var pathSimplifierIns = new PathSimplifier({
zIndex: 100,
map: map, //所属的地图实例
getPath: function(pathData, pathIndex) {
return pathData.path;
},
getHoverTitle: function(pathData, pathIndex, pointIndex) {
return null;
},
//这些参数详情查看 https://lbs.amap.com/api/amap-ui/reference-amap-ui/mass-data/pathsimplifier
renderOptions: {
//将点、线相关的style全部置emptyLineStyle
pathLineStyle: emptyLineStyle,
pathLineSelectedStyle: emptyLineStyle,
pathLineHoverStyle: emptyLineStyle,
keyPointStyle: emptyLineStyle,
startPointStyle:emptyLineStyle,
endPointStyle: emptyLineStyle,
keyPointHoverStyle: emptyLineStyle,
keyPointOnSelectedPathLineStyle: emptyLineStyle
}
});
//设置轨迹数据 that.lines是我项目的数据,具体根据自身项目设置
pathSimplifierIns.setData(that.lines);
//因为可能存在多条路径,所以循环设置
that.lines.forEach((item,index)=>{
//创建巡航器 移动轨迹 index是重点
let navg = pathSimplifierIns.createPathNavigator(index, {
loop: true,
speed: 10000,//轨迹的速度 单位是km/h
pathNavigatorStyle: {
width: 24,
height: 24,
strokeStyle: null,
fillStyle: null,
//经过路径的样式
pathLinePassedStyle: {
lineWidth: 2,
strokeStyle: 'orange',//轨迹线的颜色
},
},
});
navg.start();
//到这边就完成了
})
})
}
个人本身不怎么擅长语言编辑,有一些词大概意思懂了就行。参数的话,不懂的可以查下高德或者百度下。
更多推荐
所有评论(0)