飞线效果图：
脉冲线效果图：
应用场景：水环境项目，想实现水源追溯功能，即断面水源有问题，追溯其上游站点；
功能描述：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
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]
]
}
},
]
},欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）