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

2024-01-17 19:40
文章标签 实现 使用 百度 效果 地图 飞线 mapvgl

本文主要是介绍使用MapVGL实现百度地图飞线效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

首先先看效果图~

在这里插入图片描述

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. 提交后就可以获得自己的秘钥

这篇关于使用MapVGL实现百度地图飞线效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/617012。

相关文章

百度/小米/滴滴/京东，中台架构比较

百度/小米/滴滴/京东，中台架构比较

小米中台建设实践 01 小米的三大中台建设：业务+数据+技术 业务中台--从业务说起 在中台建设中，需要规范化的服务接口、一致整合化的数据、容器化的技术组件以及弹性的基础设施。并结合业务情况，判定是否真的需要中台。 小米参考了业界优秀的案例包括移动中台、数据中台、业务中台、技术中台等，再结合其业务发展历程及业务现状，整理了中台架构的核心方法论，一是企业如何共享服务，二是如何为业务提供便利。
阅读更多...
中文分词jieba库的使用与实景应用（一）

中文分词jieba库的使用与实景应用（一）

知识星球：https://articles.zsxq.com/id_fxvgc803qmr2.html 目录 一.定义： 精确模式（默认模式）： 全模式： 搜索引擎模式： paddle 模式（基于深度学习的分词模式）： 二 自定义词典 三.文本解析   调整词出现的频率 四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取
阅读更多...
无人叉车3d激光slam多房间建图定位异常处理方案-墙体画线地图切分方案

无人叉车3d激光slam多房间建图定位异常处理方案-墙体画线地图切分方案

墙体画线地图切分方案 针对问题：墙体两侧特征混淆误匹配，导致建图和定位偏差，表现为过门跳变、外月台走歪等 ·解决思路：预期的根治方案IGICP需要较长时间完成上线，先使用切分地图的工程化方案，即墙体两侧切分为不同地图，在某一侧只使用该侧地图进行定位 方案思路 切分原理：切分地图基于关键帧位置，而非点云。 理论基础：光照是直线的，一帧点云必定只能照射到墙的一侧，无法同时照到两侧实践考虑：关
阅读更多...
使用SecondaryNameNode恢复NameNode的数据

使用SecondaryNameNode恢复NameNode的数据

1）需求： NameNode进程挂了并且存储的数据也丢失了，如何恢复NameNode 此种方式恢复的数据可能存在小部分数据的丢失。 2）故障模拟 （1）kill -9 NameNode进程 [lytfly@hadoop102 current]$ kill -9 19886 （2）删除NameNode存储的数据（/opt/module/hadoop-3.1.4/data/tmp/dfs/na
阅读更多...
Hadoop数据压缩使用介绍

Hadoop数据压缩使用介绍

一、压缩原则 （1）运算密集型的Job，少用压缩 （2）IO密集型的Job，多用压缩 二、压缩算法比较 三、压缩位置选择 四、压缩参数配置 1）为了支持多种压缩/解压缩算法，Hadoop引入了编码/解码器 2）要在Hadoop中启用压缩，可以配置如下参数
阅读更多...
Makefile简明使用教程

Makefile简明使用教程

文章目录 规则makefile文件的基本语法：加在命令前的特殊符号：.PHONY伪目标: Makefilev1 直观写法v2 加上中间过程v3 伪目标v4 变量 make 选项-f-n-C Make 是一种流行的构建工具，常用于将源代码转换成可执行文件或者其他形式的输出文件(如库文件、文档等)。Make 可以自动化地执行编译、链接等一系列操作。 规则 makefile文件
阅读更多...
hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

利用康拓展开将一个排列映射成一个自然数，然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu
阅读更多...
使用opencv优化图片（画面变清晰）

使用opencv优化图片（画面变清晰）

文章目录 需求影响照片清晰度的因素 实现降噪测试代码 锐化空间锐化Unsharp Masking频率域锐化对比测试 对比度增强常用算法对比测试 需求 对图像进行优化，使其看起来更清晰，同时保持尺寸不变，通常涉及到图像处理技术如锐化、降噪、对比度增强等 影响照片清晰度的因素 影响照片清晰度的因素有很多，主要可以从以下几个方面来分析 1. 拍摄设备 相机传感器：相机传
阅读更多...
【C++】_list常用方法解析及模拟实现

【C++】_list常用方法解析及模拟实现

相信自己的力量，只要对自己始终保持信心，尽自己最大努力去完成任何事，就算事情最终结果是失败了，努力了也不留遗憾。💓💓💓 目录   ✨说在前面 🍋知识点一：什么是list？ •🌰1.list的定义 •🌰2.list的基本特性 •🌰3.常用接口介绍 🍋知识点二：list常用接口 •🌰1.默认成员函数 🔥构造函数（⭐） 🔥析构函数 •🌰2.list对象
阅读更多...
【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯，先赞后看哦~🎈🎈 🏆 作者简介：景天科技苑 🏆《头衔》：大厂架构师，华为云开发者社区专家博主，阿里云开发者社区专家博主，CSDN全栈领域优质创作者，掘金优秀博主，51CTO博客专家等。 🏆《博客》：Python全栈，前后端开发，小程序开发，人工智能，js逆向，App逆向，网络系统安全，数据分析，Django，fastapi
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2