先看效果
飞线效果图：
脉冲线效果图：
应用场景：水环境项目，想实现水源追溯功能，即断面水源有问题，追溯其上游站点；
功能描述：1）脉冲线方向代表 追溯方向，有动画可明显看出方向；2）俩点之间可自定义线的颜色，代表水质等级或其他；3）脉冲线宽度可自定义，代表水流量或其他；
注意事项：1）高德地图和loca API 版本；2）俩种引入方式编码时区别；3）脉冲线/飞线数据格式在文章末补充；
具体实现：使用高德地图2.0版本提供的?loca API 2.0?中??new Loca.ZMarkerLayer?的方法；
1、引入高德地图、loca、UI组件文件
? ? ?1）csdn方式（在public/index.html文件中），注意修改自己的key
<script?type="text/javascript"?src="//webapi.amap.com/maps?v=2.0&key=自己的key&plugin=AMap.DistrictSearch&plugin=AMap.ToolBar">
</script>
<script?type="text/javascript"?src="https://webapi.amap.com/loca?v=2.0.0&key=自己的key"></script>
<script?type="text/javascript"?src="https://webapi.amap.com/ui/1.1/main.js?v=1.1"></script>? ? 2）npm 安装包方式
? ?安装
npm?i?@amap/amap-jsapi-loader? ?使用
import?AMapLoader?from?'@amap/amap-jsapi-loader'? ?加载地图api文件、渲染ui组件，加载完成回调函数中调用 初始化地图方法loadMap
//加载地图api文件，修改自己高德地图key，版本不用调整，若调整请查看浏览器中会不会报错
initMap(){
????AMapLoader.load({
?????????key:?'a174a1cd3299a20dff08de1679760e12',//高德地图key，实际应用做到配置文件中
?????????version:?'2.0',
?????????AMapUI:?{
??????????????version:?'1.1',
??????????????plugins:?['overlay/SimpleMarker']
?????????},
?????????Loca:?{?//?是否加载?Loca，?缺省不加载
?????????????version:?'2.0.0'
?????????},
?????????plugins:['AMap.DistrictSearch','AMap.ToolBar']
????}).then(()?=>?{
?????????this.loadMap()?//实例化地图
????})
},总结：?
? ? ?若使用csdn方式：代码中则直接调用loadMap方法去初始化地图即可；
? ? ?若使用npm方式：需要先加载渲染api 和ui组件，再初始化地图；
2、初始化地图（注意mapStyle调整成自己的）
//?初始化地图
loadMap?()?{
?????let?_this?=?this;
?????let?map?=?new?AMap.Map('myMap',?{
???????????zoom:?_this.mapConfig.zoom?||?12,
???????????center:?_this.mapConfig.lnglats?||?[115.4983,38.8503],
???????????viewMode:?'3D',?//?使用3D视图
???????????//?pitch:?80,?//?地图倾斜
???????????//?rotation:?205,
???????????showLabel:true,
???????????buildingAnimation:?true,?//?楼块出现是否带动画
???????????//?mapStyle:?'amap://styles/7c566882aba16529e032d59badb80175',?//设置地图的显示样式?darkblue/fresh
???????????mapStyle:?'amap://styles/6db8d052bf76e2644af48a354749783e',
?????})
?????_this.myMap?=?map;
?????_this.myMap.on('complete',?()=>?{
??????????_this.$nextTick(()=>{
???????????????_this.getDataList();
??????????})
??????});
??????map.on('zoomend',?_this.resetMarkerSize);
??????this.initLoca();
}3、初始化loca?
????new Loca.Container(opts: LocaOptions)?Loca 的核心控制类，可以控制光照、视角变换、图层渲染等
? ??new Loca.GeoJSONSource(opts: LayerOptions)：
????geojson 格式的数据源，一个数据源可以给多个图层同时提供数据。
????一个geojson数据源可以同时拥有点、线、面的数据类型，每个图层绘制的时候会自动获取 合适的数据类型进行渲染。
? ?new?Loca.GeoJSONSource俩种初始化数据源方式：
?????1）data：数据对象。如果你不想使用?url?方式请求数据，可以直接填写请求好的?geojson?对象?
?????2）url:数据源的链接地址，一般是接口地址，返回的数据必须是?geojson?格式。
????var?geoSource?=?new?Loca.GeoJSONSource({????
????????//?data:?{//?geojson?对象},????
????????url:?'./example.geojson',
????})
//注意地图实例对象this.myMap改为自己的实例，this.pLineData数据格式改为自己的数据源，其他可直接调用
initLoca(){
????????//?创建loca
????this.loca?=?new?Loca.Container({
?????????map:?this.myMap?//地图实例
????})
????this.pLineSource?=?new?Loca.GeoJSONSource({
?????????data:this.pLineData?//数据格式在文章末尾有补充
????})
????this.initPulseLine();//?脉冲线
????this.loca.animate.start();
}4、画脉冲线
//?脉冲线方法，可直接调用，根据需要调整颜色即可；
initPulseLine()?{
?????this.pLinelayer?=?new?Loca.PulseLineLayer({
??????????//?loca,
??????????zIndex:?11,
??????????opacity:?1,
??????????visible:?true,
??????????zooms:?[2,?22]
??????})
??????const?headColors?=?['#4da2e3',?'#066bb3',?'#07b989',?'#d0b23b',?'#ff7700',?'#c80303',?'#5d5d5d','#ae54ff']
??????const?trailColors?=?[
???????????'rgba(77,162,227,?0.2)',
???????????'rgba(6,107,179,?0.2)',
???????????'rgba(7,185,137,?0.2)',
???????????'rgba(208,178,59,?0.2)',
???????????'rgba(255,119,0,?0.2)',
???????????'rgba(200,3,3,?0.2)',
???????????'rgba(94,94,94,?0.2)',
???????????'rgba(174,84,255,?0.5)',
???????]
??????this.pLinelayer.setStyle({
???????????altitude:?0,
???????????lineWidth:?(_,?feature)?=>?feature.properties.lineWidthRatio?*?1?+?3,//线的宽度
???????????headColor:?(_,?feature)?=>?headColors[feature.properties.type],//线头部颜色，数据中type字段
???????????trailColor:?(_,?feature)?=>?trailColors[feature.properties.type],//线尾部颜色
???????????interval:?0.25,
???????????duration:?3000
??????})
??????this.pLinelayer.setSource(this.pLineSource)
??????this.loca.add(this.pLinelayer)
},5、高德地图画飞线（飞线效果，线条展示有弧度需要初始化地图时开启地图3D效果）
viewMode:?"3D",//?使用3D视图
pitch:?30,?//?地图倾斜可自行调整地图倾斜角度，选择渲染效果；
//使用与脉冲线一样的数据结构，可直接粘贴使用此方法
initPulseLink()?{
????const?linkLayer?=?new?Loca.PulseLinkLayer({
???????loca:?this.loca,
???????zooms:?[2,?22],
???????zIndex:?2,
???????visible:?true,
???????opacity:?1,
???????depth:?true
????})
????const?headColors?=?['#4da2e3',?'#066bb3',?'#07b989',?'#d0b23b',?'#ff7700',?'#c80303',?'#5d5d5d','#ae54ff']
????const?trailColors?=?[
???????'rgba(77,162,227,?0.2)',
???????'rgba(6,107,179,?0.2)',
???????'rgba(7,185,137,?0.2)',
???????'rgba(208,178,59,?0.2)',
???????'rgba(255,119,0,?0.2)',
???????'rgba(200,3,3,?0.2)',
???????'rgba(94,94,94,?0.2)',
???????'rgba(174,84,255,?0.5)',
????]
????linkLayer.setSource(this.pLineSource)
????linkLayer.setStyle({
???????unit:?'px',
???????//?dash:?[300,?0,?300,?0],
???????lineWidth:?function()?{
???????????return?[5,?3]
???????},
???????height:?function(index,?feat)?{
???????????return?feat.distance?/?3?+?10
???????},
???????smoothSteps:?20,
???????speed:?function(index,?prop)?{
???????????//?return?5?*?index?+?Math.random()?*?20
????????????????????????return?index?*?10
???????},
???????lineColors:?function(index,?feat)?{
???????????return?[headColors[feat.link.properties.type],headColors[feat.link.properties.type],trailColors[feat.link.properties.type]]
???????},
???????maxHeightScale:?0.5,?//?弧顶位置比例
???????flowLength:?10,
???????headColor:?'rgba(255,?255,?204,?1)',?//
???????trailColor:?'rgba(255,?255,?255,?1.0)'
????})
},?补充：脉冲线数据格式??
return:{
????????????????loca:'',
????????????????pLineSource:?'',
????????????????pLineData:{
????????????????????"type":?"FeatureCollection",
????????????????????"features":?[
????????????????????????{
????????????????????????????"type":?"Feature",
????????????????????????????"properties":?{
????????????????????????????????"type":?0,
????????????????????????????????"ratio":?0.035,
????????????????????????????????"lineWidthRatio":?0.9447674418604651
????????????????????????????},
????????????????????????????"geometry":?{
????????????????????????????????"type":?"LineString",
????????????????????????????????"coordinates":?[
????????????????????????????????????[116.447982,?40.146414],
????????????????????????????????????[116.463436,?40.146576]
????????????????????????????????]
????????????????????????????}
????????????????????????},
????????????????????????{
????????????????????????????"type":?"Feature",
????????????????????????????"properties":?{
????????????????????????????????"type":?3,
????????????????????????????????"ratio":?0.035,
????????????????????????????????"lineWidthRatio":?2
????????????????????????????},
????????????????????????????"geometry":?{
????????????????????????????????"type":?"LineString",
????????????????????????????????"coordinates":?[
????????????????????????????????????[116.447982,?40.146414],
????????????????????????????????????[116.448684,?40.126794]
???????????????????????????????????
????????????????????????????????]
????????????????????????????}
????????????????????????},
????????????????????????{
????????????????????????????"type":?"Feature",
????????????????????????????"properties":?{
????????????????????????????????"type":?2,
????????????????????????????????"ratio":?0.035,
????????????????????????????????"lineWidthRatio":?0.9447674418604651
????????????????????????????},
????????????????????????????"geometry":?{
????????????????????????????????"type":?"LineString",
????????????????????????????????"coordinates":?[
????????????????????????????????????[116.467927,?40.124431],
????????????????????????????????????[116.475265,?40.131355]
????????????????????????????????]
????????????????????????????}
????????????????????????},
????????????????????????{
????????????????????????????"type":?"Feature",
????????????????????????????"properties":?{
????????????????????????????????"type":?5,
????????????????????????????????"ratio":?0.035,
????????????????????????????????"lineWidthRatio":?0.9447674418604651
????????????????????????????},
????????????????????????????"geometry":?{
????????????????????????????????"type":?"LineString",
????????????????????????????????"coordinates":?[
????????????????????????????????????[116.467927,?40.124431],
????????????????????????????????????[116.464772,?40.115587]
????????????????????????????????]
????????????????????????????}
????????????????????????},
????????????????????????{
????????????????????????????"type":?"Feature",
????????????????????????????"properties":?{
????????????????????????????????"type":?4,
????????????????????????????????"ratio":?0.035,
????????????????????????????????"lineWidthRatio":?0.9447674418604651
????????????????????????????},
????????????????????????????"geometry":?{
????????????????????????????????"type":?"LineString",
????????????????????????????????"coordinates":?[
????????????????????????????????????[116.467927,?40.124431],
????????????????????????????????????[116.485608,?40.111468]
????????????????????????????????]
????????????????????????????}
????????????????????????},
????????????????????????//河流
????????????????????????{
????????????????????????????"type":?"Feature",
????????????????????????????"properties":?{
????????????????????????????????"type":?7,
????????????????????????????????"ratio":?0.0369,
????????????????????????????????"lineWidthRatio":?5
????????????????????????????},
????????????????????????????"geometry":?{
????????????????????????????????"type":?"LineString",
????????????????????????????????"coordinates":?[
????????????????????????????????????[116.490744,?40.090513],
????????????????????????????????????[116.48963,?40.117289]
????????????????????????????????]
????????????????????????????}
????????????????????????},
????????????????????????{
????????????????????????????"type":?"Feature",
????????????????????????????"properties":?{
????????????????????????????????"type":?7,
????????????????????????????????"ratio":?0.0148,
????????????????????????????????"lineWidthRatio":?5
????????????????????????????},
????????????????????????????"geometry":?{
????????????????????????????????"type":?"LineString",
????????????????????????????????"coordinates":?[
????????????????????????????????????[116.48963,?40.117289],
????????????????????????????????????[116.467927,?40.124431]
????????????????????????????????]
????????????????????????????}
????????????????????????},
????????????????????????{
????????????????????????????"type":?"Feature",
????????????????????????????"properties":?{
????????????????????????????????"type":?7,
????????????????????????????????"ratio":?0.0148,
????????????????????????????????"lineWidthRatio":?5
????????????????????????????},
????????????????????????????"geometry":?{
????????????????????????????????"type":?"LineString",
????????????????????????????????"coordinates":?[
????????????????????????????????????[116.467927,?40.124431],
????????????????????????????????????[116.457208,?40.134957]
????????????????????????????????]
????????????????????????????}
????????????????????????},
????????????????????????{
????????????????????????????"type":?"Feature",
????????????????????????????"properties":?{
????????????????????????????????"type":?7,
????????????????????????????????"ratio":?0.0148,
????????????????????????????????"lineWidthRatio":?5
????????????????????????????},
????????????????????????????"geometry":?{
????????????????????????????????"type":?"LineString",
????????????????????????????????"coordinates":?[
????????????????????????????????????[116.457208,?40.134957],
????????????????????????????????????[116.447982,?40.146414]
????????????????????????????????]
????????????????????????????}
????????????????????????},
????????????????????]
????????????????},
