使用MapVGL实现百度地图飞线效果

最新推荐文章于 2024-07-10 08:26:58 发布
最新推荐文章于 2024-07-10 08:26:58 发布
阅读量1.2k 收藏 2
点赞数 1
文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CBB_FT/article/details/125456407
版权

首先先看效果图~

在这里插入图片描述

MapVGL介绍

  1. 简介

    • 在地图项目的开发中，往往会伴随大量的数据展示。这时候使用地图api提供的覆盖物函数绘制元素，在页面上会生成大量的DOM元素导致页面变卡
    • 为了解决大量数据展示，百度地图开发了一套处理数据可视化的框架MapVGL。使用webGL的技术在canvas中绘制图形，能有效的提高页面性能

  2. MapVGL

    • MapVGL，是一款基于WebGL的地理信息可视化库，可以用来展示大量基于3D的地理信息点线面数据。设计初衷主要是为了解决大数据量的三维地理数据展示问题及一些炫酷的三维效果

    • 其核心就是，通过地理信息数据，生成可视化图层。然后把可视化图层添加在地图上层进行管理

    • MapVGL提供了大量的模型，包括点图层、线图层、聚合类图层等等。每一种模型都提供了Demo，可以直接运行看到效果

    • 网址：MapVGL (baidu.com)

      jFT3E4.png

使用

  1. 在 html 文件中 head 头部导入需要的依赖信息

    <!-- 百度地图基础库，需要自己去百度地图官网申请ak -->
		<script src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=自己的ak"></script>
		<script src="https://mapv.baidu.com/build/mapv.min.js"></script>
		<script src="https://mapv.baidu.com/gl/examples/static/common.js"></script>
		<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.152/dist/mapvgl.min.js"></script>
		<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.152/dist/mapvgl.threelayers.min.js"></script>

  2. 进行全局样式配置

    <style>
    html,
    body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }
    #map_container {
        width: 100%;
        height: 100%;
        margin: 0;
    }
    </style>

    • 这一步非常重要，不设置的话，地图无法显示。

    • 在使用现成的模板进行改造时，一些模板不能设置高度为100%，否则整体显示就会出错，这时候可以在 map_container 外面再加一个 div ，并设置这个 div 的 height 为固定值

      <div style="width: 100%; height: 500px;margin: auto;">
    <div id="map_container"></div>
</div>

  3. 编写一个容器用于展示地图，由于 common.js 文件中已经将 id 名称固定了，所以这里不能修改，只能写 map_container

    <div id="map_container"></div>

  4. 编写 js 代码，初始化地图

    <script type="text/javascript">
	window.onload= function (){
		
		map_container.onmousewheel=function (e) {
			e= e || window.event;
			if(document.all){
				e.cancelBubble=true;
			}else{ 
				e.stopPropagation(); 
			}
		};
		
		
			/* 地图  使用ajax异步请求数据 */
			
			var map = initMap({
				tilt: 41.8,
				heading: 0,
				center: [105.552849, 28.847593],
				zoom: 6,
				style: purpleStyle
			});
			
			var citys = [
				'北京', '香港', 
				'银川', '哈尔滨', 
				'长春', '沈阳', 
				'济南', '南京',
				'合肥', '杭州',
				'南昌', '福州',
			];
			
			var randomCount = citys.length; // 模拟的飞线的数量
			
			var curve = new mapvgl.BezierCurve();
			
			var data = [];
			
			// 构造数据
			while (randomCount--) {
                /*设置起始城市，从哪个点出发向外扩散*/
				var startPoint = mapv.utilCityCenter.getCenterByCityName('乌海');
				var endPoint = mapv.utilCityCenter.getCenterByCityName(citys[randomCount]);
				var length = 0;
				var startPoint = map.lnglatToMercator(startPoint.lng, startPoint.lat);
				var endPoint = map.lnglatToMercator(endPoint.lng, endPoint.lat);
			
				curve.setOptions({
					start: [startPoint[0], startPoint[1]],
					end: [endPoint[0], endPoint[1]]
				});
				var curveModelData = curve.getPoints(60);
			
				data.push({
					geometry: {
						type: 'LineString',
						coordinates: curveModelData
					},
					properties: {
						count: Math.random()
					}
				});
			}
			
			var view = new mapvgl.View({
				effects: [
					new mapvgl.BrightEffect({
						threshold: 0,
						blurSize: 2,
						clarity: 1
					}),
				],
				map: map
			});
			
			var lineLayer = new mapvgl.LineTripLayer({
				color: 'rgb(255, 255, 204)', // 飞线动画颜色
				step: 1
			});
			view.addLayer(lineLayer);
			
			lineLayer.setData(data.map(item => {
				item.geometry.coordinates = item.geometry.coordinates.map(item => {
					item[2] += 3;
					return item;
				});
				return item;
			}));
			
			var lineLayer = new mapvgl.SimpleLineLayer({
				blend: 'lighter',
				color: 'rgb(255, 153, 0, 1)' // 飞线颜色
			});
			view.addLayer(lineLayer);
			lineLayer.setData(data);
		}
	
</script>

  5. 完整代码

    <!DOCTYPE html>
<html lang="zh-CN">

	<head>

		<meta charset="utf-8">
		<title>Picman | Home</title>


		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">


		<style>
			html,
    body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }
    #map_container {
        width: 100%;
        height: 100%;
        margin: 0;
    }
    </style>



		<script type="text/javascript">
			window.onload = function() {

				map_container.onmousewheel = function(e) {
					e = e || window.event;
					if (document.all) {
						e.cancelBubble = true;
					} else {
						e.stopPropagation();
					}
				};


				/* 地图  使用ajax异步请求数据 */

				var map = initMap({
					tilt: 41.8,
					heading: 0,
					center: [105.552849, 28.847593],
					zoom: 6,
					style: purpleStyle
				});

				var citys = [
					'北京', '香港',
					'银川', '哈尔滨',
					'长春', '沈阳',
					'济南', '南京',
					'合肥', '杭州',
					'南昌', '福州',
				];

				var randomCount = citys.length; // 模拟的飞线的数量

				var curve = new mapvgl.BezierCurve();

				var data = [];

				// 构造数据
				while (randomCount--) {
					var startPoint = mapv.utilCityCenter.getCenterByCityName('乌海');
					var endPoint = mapv.utilCityCenter.getCenterByCityName(citys[randomCount]);
					var length = 0;
					var startPoint = map.lnglatToMercator(startPoint.lng, startPoint.lat);
					var endPoint = map.lnglatToMercator(endPoint.lng, endPoint.lat);

					curve.setOptions({
						start: [startPoint[0], startPoint[1]],
						end: [endPoint[0], endPoint[1]]
					});
					var curveModelData = curve.getPoints(60);

					data.push({
						geometry: {
							type: 'LineString',
							coordinates: curveModelData
						},
						properties: {
							count: Math.random()
						}
					});
				}

				var view = new mapvgl.View({
					effects: [
						new mapvgl.BrightEffect({
							threshold: 0,
							blurSize: 2,
							clarity: 1
						}),
					],
					map: map
				});

				var lineLayer = new mapvgl.LineTripLayer({
					color: 'rgb(255, 255, 204)', // 飞线动画颜色
					step: 1
				});
				view.addLayer(lineLayer);

				lineLayer.setData(data.map(item => {
					item.geometry.coordinates = item.geometry.coordinates.map(item => {
						item[2] += 3;
						return item;
					});
					return item;
				}));

				var lineLayer = new mapvgl.SimpleLineLayer({
					blend: 'lighter',
					color: 'rgb(255, 153, 0, 1)' // 飞线颜色
				});
				view.addLayer(lineLayer);
				lineLayer.setData(data);
			}
		</script>



		<!-- 地图 -->

		<!-- 百度地图基础库，需要自己去百度地图官网申请ak -->
		<script src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=***"></script>
		<script src="https://mapv.baidu.com/build/mapv.min.js"></script>
		<script src="https://mapv.baidu.com/gl/examples/static/common.js"></script>
		<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.152/dist/mapvgl.min.js"></script>
		<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.152/dist/mapvgl.threelayers.min.js"></script>

	</head>



	<body>
		<div id="map_container"></div>

	</body>
</html>

申请百度地图的ak

  1. 首先登录百度地图开放平台，登录后选择开发文档 -> JavaScript API

    jF7TeO.png

  2. 选择开发指南 -> 账号和获取秘钥 ->按照提示依次完成即可

    jF7jSI.png

  3. 申请ak时，应用类型要选择浏览器端

    jFHpm8.png

  4. 提交后就可以获得自己的秘钥

百度地图飞线效果
虎康的博客
03-19 847
文章目录一、第一步二、第二步三、第三步四、源码分析1、地图的初始化2、构造并生成数据3、可视化图层五、案例 上一篇：echarts 快速上手 一、第一步 点击链接跳转到Map地理信息可视化库官网，学习相关应用知识，此处要添加的AK信息在第三步中有讲到 http://mapv.baidu.com/gl/docs/index.html 二、第二步 搜索百度地图开发 三、第三步 进入SDK官网之后进行创建应用 四、源码分析 https://www.bilibili.com/video/
百度地图可视化之实现飞线动画
打屁屁的小痘痘
10-09 3559
此文章最终实现的效果如下图： 使用mapv和mapvgl两个框架来实现百度地图的可视化。 Mapv 是一款地理信息可视化开源库，可以用来展示大量地理信息数据，点、线、面的数据，每种数据也有不同的展示类型，如直接打点、热力图、网格、聚合等方式展示数据。 MapVGL，是一款基于WebGL的地理信息可视化库，可以用来展示大量基于3D的地理信息点线面数据。设计初衷主要是为了解决大数据量的三维地理数据展示问题及一些炫酷的三维效果。 绘制飞线动画，需要用到mapvgl...
百度地图开发入门（5）：飞线动画示例
--Joern的物联领域--
06-14 1806
讲解另一种常见应用-飞线动画，主要用于展示数据流向https://lbsyun.baidu.com/solutions/mapvdata这里曲线的绘制可以借助百度的曲线生成器：https://lbsyun.baidu.com/solutions/mapvdata 这里其实mapv（mapvgl的前身）有很多很好的飞线图案例可以参考，不过官方已经不维护了，但是我们还是可以去学习一下，例如这里：http://mapv.baidu.com/examples/#baidu-map-forceEdgeBundli
百度地图之飞线动画（一）
李 克 鹏 的 博客
03-28 874
引入库 <script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.140/dist/mapvgl.threelayers.min.js"> </script> 总体结构与散点图类似 初始化百度地图 function initBMap() { var cityCenter = mapv.utilCityCenter.getCenterByCityName('上海') var map = init
百度地图之飞线动画（边绑定）
李 克 鹏 的 博客
03-28 551
与前两篇飞线动画不同的是准备数据源部分 function initData() { var data = []; // 生成贝塞尔曲线坐标集 var cities = ['济南','临沂','潍坊','东营','滨州','青岛','威海','枣庄','德州','淄博','烟台']; // 1、实例化贝塞尔曲线对象 var targetCity = mapv.utilCityCenter.getCenterByCityName('济南') var node
百度地图结合echarts实现飞线
芳
10-23 1061
百度地图结合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" />
如何快速制作百度地图可视化？（教你获取ak与地图初始化以及地图飞线层的实现,有demo）
Chen__FY的博客
04-21 1199
7.完成后如果VScode里有Live Server这个插件的就可以直接在本地上运行了，如果没有的话记得安装一下哦~，我先默认没安装。8.安装好后右键点击Open with Live Server在本地运行结果。11.运行结果如下：飞线从广州到福州,成功运行！5.把body下面的script里的内容删掉。1.首先进入百度地图开发平台（1.打开MapVGL官网。
echarts百度地图上绘制飞行线
sdad2154的博客
03-16 1063
【代码】echarts百度地图上绘制飞行线。
百度地图之飞线动画（二）
李 克 鹏 的 博客
03-28 589
绘制数据源 其他部分与飞线动画（一）一致 var linePointLayer = new mapvgl.LinePointLayer({ size:10, // 点的大小 speed:50, // 点运动速度 color: 'rgba(255,255,0,0.6)', // animationType: mapvgl.LinePointLayer.ANIMATION_TYPE_UNIFORM_SPEED, animationType: mapvg
百度地图 - 使用Echarts绘制飞线图
小小的前端
02-14 6395
简介 为了更好的理解Echarts，把配置项看完是有必要的。但是看完了也不一定记得住，比如说我。一天看一些，当看完后觉得Echarts好强大。然后除了觉得Echarts强大外，其他的基本忘了。所以动手写一些DEMO也是很有必要的。下面来了解一下如何在地图上使用Echarts绘制飞线图。 引入 Api 通过<script>标签引入地图api地址、echarts地址、扩展插件地址，这里的ak是你在地图服务中心注册的。不了解ak的点击 这里 。不了解地图扩展插件的点击 这里 。 <!--
百度地图集成echarts实现迁徙(航线)动画特效.rar
09-30
echarts实现迁徙(航线)动画效果，可与百度地图集成，也可单独使用echarts实现
百度地图+eChart实现动态迁徙图
05-29
具体效果详见本人博客文章。
mapvgl.min.js（位置数据可视化用到的js文件）
05-30
（百度地图）位置数据可视化用到的js文件（普通点图、点聚合图等等） https://mapv.baidu.com/gl/examples/static/common.js https://mapv.baidu.com/build/mapv.min.js https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.55/dist/mapvgl.min.js
根据百度迁徙图改编的飞线图，具体效果见博客
03-09
html中实现飞线图效果，根据百度迁徙图改编，代码可以直接运行，包含echarts.js、china.js、data.json、jquery.min.js及代码文件index.html，具体效果可参考博客文章：https://blog.csdn.net/qq_16497617/article/details/129436162查看，可以设置地图背景颜色，涟漪特效，波纹方式，动画时间及缩放比例，可以设置点的移动速度，移动点的图标样式，线的宽度、颜色、透明度及完全程度。
echarts地图飞线实现
06-25
echarts地图展示、地图飞线，地图线行展示，大气、简洁、好看。
基于vue的地图特效（飞线和标注）
最新发布
weixin_66547608的博客
07-10 1113
地图图表，并配置了相关的地理数据、散点数据、线条数据以及样式效果，最后在指定的。这段代码的主要功能是在页面加载完成后，初始化一个。需要再vue中的框架实现，不能单独直接运行。
基于百度地图与echarts的飞线数据图
前端，请指教
08-18 421
<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; bor
echarts+百度地图，实现坐标打点+飞线图
王也的博客
03-31 1477
echarts+百度地图，实现坐标打点+飞线图，先上效果图。
vue百度地图结合echarts飞线图进行打点及标注
qq_35478008的博客
03-31 1954
打点的图标，可以使用默认的图标，也可以使用自定义的图标，在symbol项里，常用的默认有'circle','pin'，如果用下载的图片symbol: 'image://'+require('@/assets/map/img1.png'),图标大小使用symbolSize来设置。飞线图和起始点的数据不是同一组数据，需要分别处理一下，所以在echarts的series中分别处理和配置。formatter: '{b}', //展示的数据及格式在这里设置。position: 'right', // 展示的位置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值