百度地图结合echarts实现飞线

目前很流行的地图轨迹飞线图，咱也来实现一个，使用百度地图和echarts图表实现，示例如下，（其实百度地图api有一个位置数据可视化MapV GL也可实现，需要的小伙伴自行研究）

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>飞线</title><style type="text/css">body {margin: 0;border: 0;overflow: hidden;}#map_canvas {width: 100%;height: 100%;position: absolute;}</style></head><body><div id="container" style="height: 100%"></div><script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script><!--百度地图 引入 --><script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=5cmZ1GRfgYHiXDymUo7AC4FDOvBl0cK0"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script><script>var dom = document.getElementById("container");var myChart = echarts.init(dom);var option=null;var startPoint = {x: 104.114129,y: 37.550339};// 地图var bmap = {center: [startPoint.x, startPoint.y],zoom: 5,roam: true,//mapStyleV2: {//设置地图自定义样式// styleId: "1c9508432f1bd060b4485d79045d5bdd",//  },}//飞线图标var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';var series = [//飞线数据{name: 'wha Top2', //飞线名称type: 'lines',coordinateSystem: 'bmap',zlevel: 2,effect: {show: true,period: 6,trailLength: 0,symbol: planePath,symbolSize: 25},lineStyle: {normal: {color: '#a6c84c',width: 2,opacity: 0.8, //curveness: 0.8 //飞线弯曲度}},data: [{fromName: "起点1",toName: "终点1",coords:[[116.4551, 40.2539],[121.4648, 31.2891]]},{fromName: "起点2",toName: "终点2",coords:[[111.4551, 22.2539],[121.4648, 31.2891]]}]},];option = {bmap: bmap,tooltip: {trigger: 'item'},series: series};myChart.setOption(option);</script></body></html>

百度地图结合echarts实现飞线相关推荐

百度地图可视化之实现飞线动画
此文章最终实现的效果如下图: 使用mapv和mapvgl两个框架来实现百度地图的可视化. Mapv 是一款地理信息可视化开源库,可以用来展示大量地理信息数据,点.线.面的数据,每种数据也有不 ...
百度地图MapV实现海量数据画线、点聚合等功能
前言 MapVGL,是一款基于WebGL的地理信息可视化库,可以用来展示大量基于3D的地理信息点线面数据.设计初衷主要是为了解决大数据量的三维地理数据展示问题及一些炫酷的三维效果. 官网地址:MapV ...
百度地图结合echarts地图运历图
百度地图结合echarts地图运历图关于各省显示车辆发车数量引入部分 <script src="~/Scripts/Echarts/Js/esl.js"></ ...
高德地图+echarts实现飞线图
下面是vue实现: 前期准备: 引入amap.echarts.echarts-amap依赖,vue的话需要npm安装一下 By using script tag <!--引入高德地图JSAPI ...
echarts切换飞线图未清空_echarts做飞线图
飞线图 height:100%; } body{ height:100%; margin:0; padding:0; background-color:#2F4056; } const xhr= ne ...
百度地图API——多点路径连线问题
本文系作者 chaoCode原创,转载请私信并在文章开头附带作者和原文地址链接. 违者,作者保留追究权利. 前言本文是对于在项目应用有遇到的多点连线问题,我的一些解决方式,以及对于之前所学习的一些百 ...
百度地图 - 自定义ECharts覆盖物
简介在开发地图可视化页面时,产品想在城市的对应位置展示一个统计图.这时候先不要慌,大声的说你是在哪抄的这个需求.好看到页面了,就没有前端人不会(抄的)开发的.研究后发现使用的是,百度地图api自定义 ...
百度地图坐标点轨迹画线php,百度地图绘制轨迹点
没有后台获取事实信息都是伪数据- -轨迹信息做不到事实导航. 控件可以根据自己的需求添加位置通过offset:new BMAP.Size(x,y)进行微调事实路况信息需要通过引没有后台获取事实信 ...
百度地图JavaScript简单标点连线
背景最近在研究轨迹数据的挖掘,第一步就是把轨迹数据在地图上可视化出来,然后再进行后续的算法研究.从一开始懵懂知道百度地图有免费的 API 可以调用,到后面知道还要上传鹰眼轨迹,最后还要从 Web 端 ...

百度地图结合echarts实现飞线

百度地图结合echarts实现飞线

百度地图结合echarts实现飞线相关推荐

最新文章

热门文章