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();
				//到这边就完成了
			})
	})
}

个人本身不怎么擅长语言编辑,有一些词大概意思懂了就行。参数的话,不懂的可以查下高德或者百度下。

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐