高德地图实现脉冲线和飞线效果

已于 2022-05-09 16:39:07 修改
阅读量4.3k 收藏 18
点赞数 4
分类专栏： 高德地图 文章标签： javascript 前端 开发语言
于 2022-05-09 16:29:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42288182/article/details/124669258
版权

先看效果

飞线效果图：

脉冲线效果图：

应用场景：水环境项目，想实现水源追溯功能，即断面水源有问题，追溯其上游站点；

功能描述：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]
                                ]
                            }
                        },
                    ]
                },

songywaa
关注
  • 4
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
专栏目录
echarts结合echarts-gl实现3D飞线地球可视化
08-05
echarts结合echarts-gl实现3D飞线地球可视化，这里提供一个简单案例的实现方式，访问页面需要通过类似vscode插件之Live Server等服务器的方式打开
高德地图画线，单条多条带方向示例亲测有效，自己也在使用换成你的key就可以
08-28
高德地图画线，单条多条带方向示例亲测有效，自己也在使用换成你的key就可以 高德地图画线，单条多条带方向示例亲测有效，自己也在使用换成你的key就可以
vue3+高德地图，使用抛物线连接两点，实现线路脉冲和呼吸灯动画效果
最新发布
qq_61876792的博客
04-08 288
vue3项目使用高德地图实现抛物线连接，呼吸点动画及线路脉冲动画效果
高德map脉冲线数据格式
qq_51389137的博客
12-19 394
【代码】高德map脉冲线数据格式。
Vue中使用高德地图js api 2.0封装的一些常用工具 1.绘制城市级边阔,2.地图撒点,3.自定义点位,增加弹框,4.绘制轨迹，5.mouseTool 工具绘制多边形，6.Polyline飞线图
qq_48554377的博客
04-17 2034
基于高德地图js api 2.0封装的一些常用工具(1.绘制城市级边阔,2.地图撒点，3.自定义点位,增加弹框,4.绘制轨迹，5.mouseTool 工具绘制多边形，6.利用Polyline + Marker的轨迹回放动画实现简易的飞线图 )
高德地图可视化2.0封装（飞线，圆点，热力图）
weixin_44042792的博客
01-27 2158
1.先建个js文件 import AMapLoader from "@amap/amap-jsapi-loader"; const initMap = async (config) => { return new Promise((resolve, reject) => { AMapLoader.load({ key: "0650fbe85c708dc3388fe803d0e5d861", // key: con...
地图飞线图 echart+高德地图实现
qq_32439381的博客
05-19 2112
前提：其实这个东西已经做了很久了，但是因为昨天他突然不显示了，所以重新整了一下 实现效果： 一、引入echart的两个js和高德地图 <!-- 引入echarts --> <script src="./static/js/echarts.min.js"></script> <script src="./static/js/echarts-amap.min.js" charset="UTF-8"></script> <!-- .
高德地图和Echarts共同实现飞线图
m0_58293192的博客
01-18 1482
高德地图和Echarts共同实现飞线图
如何在Vue中使用高德地图并渲染呼吸灯和飞线
Tymarry的博客
05-27 1461
一、注册并登录高德地图开放平台，申请密钥 二、引入高德地图加载器 三、封装一个自定义地图子组件并初始化地图 四、封装定义一个父组件，并将子组件导入 五、子组件使用props接收父组件传过来的数据，并渲染呼吸灯和飞线 六、在每个呼吸灯设置打开弹窗显示一些数据 七、子组件的完整代码
高德地图:弧度飞线图层详解
m0_58293192的博客
01-18 1741
高德地图:弧度飞线图层详解
echarts地图飞线实现
06-25
echarts地图展示、地图飞线，地图线行展示，大气、简洁、好看。
PCB设计的飞线手工布局和布线详解
08-27
一个印制板的布线是否能够顺利完成，主要取决于布局，而且，布线的密度越高，布局就越重要。
使用vue引入maptalks地图及聚合效果的实现
10-14
主要介绍了使用vue引入maptalks地图及聚合效果的实现，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
波纹，脉冲图，呼吸灯效果，地图点放大图
08-23
波纹，脉冲图，呼吸灯效果，地图点放大图，波纹，脉冲图，呼吸灯效果，地图点放大图，波纹，脉冲图，呼吸灯效果，地图点放大图，波纹，脉冲图，呼吸灯效果，地图点放大图，波纹，脉冲图，呼吸灯效果，地图点放大图，波纹，脉冲图，呼吸灯效果，地图点放大图，
百度地图偏移，高德地图偏移的解决方法
05-27
百度纠偏 高德纠偏 地图纠偏 地图偏移
ECharts+高德卫星地图-飞线图效果
weixin_43096828的博客
06-07 2548
ECharts+高德地图实现卫星地图-飞线图 加载资源： https://webapi.amap.com/maps?v=1.4.15&key=申请Key（高德开放平台申请key） echarts.min.js echarts-amap.min.js或者 !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("echarts")):"function"==t
高德地图+echarts实现飞线图
weixin_42236849的博客
07-30 9353
下面是vue实现，原生html后续贴上来 前期准备： 引入amap、echarts、echarts-amap依赖，vue的话需要npm安装一下 By using script tag <!--引入高德地图JSAPI --> <script src="//webapi.amap.com/maps?v=1.4.15&key=ab99f68b8f9eac7a5287f...
echarts3d地图飞线效果
07-01
### 回答1： echarts3d地图飞线效果指的是通过使用echarts3d插件来实现地图上的飞线动画效果。echarts3d是一款基于JavaScript的可视化图表库，能够帮助用户轻松创建各种动态、交互性的图表。 要实现地图飞线效果，首先需要引入echarts3d插件，并加载相关的地图数据。然后，在echarts3d提供的配置中，设置多个起点和终点坐标，根据坐标信息绘制出对应的连线。 接下来，可以通过设置图表的样式和动画效果来实现飞线的效果。可以设置连线的颜色、粗细，以及起点和终点的标记形状和颜色等。为了实现动画效果，可以设置连线的透明度、延迟和持续时间等属性，使连线在地图上呈现出移动的效果。 此外，可以通过设置图表的交互功能，使用户可以通过鼠标移动和缩放来浏览地图，并与飞线进行交互。通过添加鼠标事件和回调函数，可以实现鼠标悬停时的高亮效果，点击时的弹出信息窗口等交互操作。 总之，echarts3d地图飞线效果通过使用echarts3d插件，绘制地图和连线，并通过配置样式和动画效果，以及添加交互功能来实现。这种飞线效果可以使地图更加生动和有趣，帮助用户更好地理解和分析地理数据。 ### 回答2： Echarts3D地图飞线效果是Echarts库中的一种可视化效果，可以展示地理关系的动态连接。该效果利用地理坐标，将各个地点通过曲线飞线的方式连接起来，形成动态的数据流动效果。 要实现Echarts3D地图飞线效果，首先需要准备好数据，包括地点的经纬度和数据的数值。然后在Echarts图表中添加地理坐标系，配置好相关参数，并引入Echarts3D插件。 通过设置地图的初始视角、地点的标记和数值，以及曲线的配置，可以使得地图上的数据点按照指定的路径飞线连接。你可以设置曲线的颜色、粗细、动画效果等参数，以使得飞线效果更加醒目动态。 此外，你还可以通过配置相关参数，使得飞线的路径和数值能够适应不同的数据需求，例如配置线条的颜色渐变、设置曲线的弯曲度、更改飞线的速度等等。这些配置参数都可以根据你的实际需求进行调整。 总之，Echarts3D地图飞线效果提供了一种直观而动态的数据展示方式，帮助我们更好地理解地理关系和数据之间的联系。通过合理配置参数和数据，我们可以创造出各种各样的地图飞线效果，将数据可视化呈现，提升数据分析和展示的效果。 ### 回答3： ECharts 是一款基于JavaScript的可视化库，提供了丰富的图表类型以及交互功能。其中 ECharts 3D 地图飞线效果是该库的一个独特的功能，可以用于展示地理数据之间的关联关系。 ECharts 3D 地图飞线效果主要包括两个部分：折线地图和飞线动画。首先，我们可以使用 ECharts 的地图类型（如 scatter3D 或 lines3D）来绘制一个折线地图，将地理数据可视化展现出来。通过设置相应的经纬度坐标以及其他数据属性，可以在地图上绘制出各个地点的标记点。 接下来，通过配置飞线动画的特效参数，可以实现地理数据之间的飞线效果。通过定义起点和终点的经纬度坐标，以及飞线的属性（如颜色、宽度、透明度等），ECharts 可以自动生成一条飞线路径，并在地图上进行动画展示。 在飞线动画中，可以通过设置飞行时间、延迟等参数来控制效果的展示和流畅度。此外，可以通过配置文本标签等样式属性，将飞线上的数据信息以文字形式展示出来，增强了地理数据之间的可视化效果和交互性。 综上所述，ECharts 3D 地图飞线效果通过折线地图和飞线动画的结合，能够直观地展示地理数据之间的关联关系。用户可以通过设置经纬度、属性参数以及动画特效等自定义地理数据的可视化呈现方式，从而实现丰富多样的数据展示效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值