百度地图MapV实现海量数据画线、点聚合等功能

已于 2022-09-15 17:08:36 修改
阅读量3.6k 收藏 5
点赞数 2
分类专栏： 百度地图 MapV 文章标签： 前端 vue.js
于 2022-09-15 17:07:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/coderNoWhy/article/details/126873706
版权

前言

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

官网地址：MapV开发文档

公司项目中针对地图上的数据展示效果，由于数据量过大，有些是路段展示，有些是点展示，用百度地图原本的地图画线、打点功能也能实现，但是交互效果不是很好，首次加载很慢且拖动地图会卡，用到mapV这个类似可以解决海量数据展示问题。

一、使用步骤

1、前期准备

首先vue项目下要在html页面引入几个官方js文件，马赛克的是百度ak 需要自己去申请。

js文件引入过后 在页面就可以开始用mapv可视化 实现想要的地图效果了 ↓↓↓↓

2、开始开发

首先初始化百度地图， 然后定义mapView实例， 我在全局定义了一个，方便后面能直接拿到，

画线功能↓↓

mapData是后端返回的要展示的数据，这个根据数据结构来筛选要的经纬度集合，因为是画线，coordinates这个对应的是每个线段的经纬度集合，new mapvgl.LineLayer后面对象里面就是对线条的一些样式大，data把所有要展示的线条赋值就行，onClick鼠标点击线条触发，可以做一些交互的效果 也有右击onRightClick ，最后把创建的实例添加到全局mapView.addLayer(this.lineLayer)

点聚合功能↓↓

和画线功能类似，只不过coordinates对应是点的经纬度，因为点聚合最后的地图级别显示的是点，点的样式可以自行设置 icon，  后面的属性都大差不差了。

最后给大家看看效果~~~

 3、补充

官网有些文档写的还算详细的，有些图层类的操作也能用到

removeAllLayers： 删除所有图层

hideLayer：隐藏对应图层

showLayer：显示对应图层

总结

加油呀！！！   有问题可以多多沟通交流哈 小白还请大家多多指教

我快碎掉了
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
百度地图点聚合解决方案
嗨
04-21 7575
我与地图的那些事（百度）这个地图系列，主要是最近接触了新的行业–车载视频监控与位置定位，我们的客户也是天南地北到处都有，每个客户要求的地图都不一样，所以这短短一个月我接触到了各种地图，但是也不知道以后会不会再用到，所以就写点东西记录下。 本系列主要记录相关地图的java script api版本，以及相关其它一些有趣的东西。 百度地图相关介绍说明 我的学习笔记 百度地图相关介绍说明百度地图历史简介
mapv优化海量图标(百度地图)
04-07
总的来说，通过合理筛选视图内的坐标，利用mapv的点聚合功能，并根据地图级别动态调整聚合策略，我们可以有效优化百度地图上海量图标显示的性能，提供流畅的地图体验。在开发过程中，不断测试和优化，以找到最适合...
vue项目中：百度地图引用mapV，实现两点间的曲线，及曲线上点的流动。
06-23
vue项目中：百度地图引用mapV，实现两点间的曲线，及曲线上点的流动；详解请见：https://blog.csdn.net/Hei_lovely_cat/article/details/106919514
探索MapV：一款强大的地图可视化库
gitblog_00093的博客
03-23 367
探索MapV：一款强大的地图可视化库 项目地址:https://gitcode.com/huiyan-fe/mapv 引言 在数据可视化领域，地图是一种极其有效的工具，它能让复杂的地理信息变得直观易懂。MapV 是一个由华为云团队开发的地图渲染库，专门用于大规模地理数据的视觉呈现。本文将深入剖析MapV的技术特性、应用场景和优势，引领你走进地图可视化的奇妙世界。 技术分析 MapV基于D3.js ...
vue3+mapv实现百度地图路书功能
最新发布
黄钢的博客
05-23 974
前期写了一篇，介绍在vue项目中如何使用mapv说实话，在vue项目中使用mapv是一如既往的艰难，我在使用vue开发电子地图相关项目时，一般都会用这个开源包，确实提供了不少便利，但有一说一，目前还有很多bug，而且百度官方提供的很多可视化功能中，这个包并没有提供现在，我想在百度地图上显示车辆的动态轨迹，百度js api已经提供了，但总感觉原生的效果不怎么理想，mapv提供了效果炫酷的，效果就是我想要的，但前面提到，想要在vue中使用mapv，确实不容易折腾了一上午，总算把效果实现了，记录一下过程。
使用百度地图绘制点、线、面 | Javascript
this_zq的博客
05-09 4793
写在前面： 本文为百度地图开发系列文章之一， 前期回顾： webGIS，基于百度地图的HelloWord实现 如何使用前端css代码去掉百度地图左下角的图标 使用百度地图绘制点、线、面 | Javascript（本篇讲解） 百度地图开发系列之个性化地图使用的2种方法 以上对应视频教程（博客与视频前面的序号是一一对应的）： 百度地图开发从零开始00初始化地图创建helloWorld 百度地图开发从零开始01去地图左下角图标 个人前端网站：zhangqiang.hk.cn 欢迎加入博主的前端
百度地图Mapv 解决浏览器缩小后 右侧和下方残影问题
dandan__666的博客
06-19 483
context.canvas.width 和 context.canvas.height 与容器实际的宽度高度不相等，所以导致页面右侧和下方残留上次的影像。解决办法也很简单，给clearRect传入正确的容器宽高度即可。项目中遇到一个难题，当浏览器缩小时，百度地图右侧和下方残留重影。
mapv使用（基于mapbox）
qq_42038997的博客
02-27 274
【代码】mapv使用（基于mapbox）
百度地图mapv 地图扩散波纹效果
04-24
数据可视化，我们常见的有表格、图标、图表、柱状图、折线图、雷达图、漏斗图、等值面图、等值线图、GIS地图、蜂窝图、格点数据、热力图、柱状图、饼图、散点图、地理坐标/地图、K 线图、雷达图、盒须图、热力图、...
mapv实例下载（解决百度地图大量数据）
10-29
Mapv 是一款基于百度地图的大数据可视化开源库，可以用来展示大量的点、线、面的数据，每种数据也有不同的展示类型，如直接打点、热力图、网格、聚合等方式展示数据。 git 地址：...
VUE百度地图加载3D模型(MapVThreeGallery)-点击弹出模型信息
qq_34925033的博客
10-20 5554
百度地图加载3D模型
mapvdemo 应用程序
08-20
mapvdemo 应用程序地图应用源代码
百度地图的划线小工具
10-13
百度地图的划线小工具。
MapV开源代码
04-03
本资源为MapV开源代码，在GitHub上下载容易丢包，并且网速较慢
百度地图画直线
有一种信仰叫海阔天空
07-10 4512
在写百度地图的时候，有个需求是将地图中的一些点用直线连接起来(每两个点之间是直线)。官方提供的api是弧线，没有单独提供直线，但是提供了一个折线(PolyLine)，我们可以利用画着线来画直线，这样就可以实现画直线的需求了。 一下是html示例代码： 添加直线 html,body{ width:100%; height:100%; margin
百度地图Polyline画直线BUG
萌萌的It人 www.itmmd.com
06-18 1万+
百度地图画直线时有个BUG，取三个坐标点测试， var point1= new BMap.Point( 113.33765, 23.150435); var point2= new BMap.Point( 113.347655, 23.160435); var point3= new BMap.Point( 113.357655, 23.170435);
js使用百度地图仅显示中国区域，实现大数据热点图
热门推荐
VcStrong的专栏
06-19 3万+
马上又到年底PPT环节了，各位实现效果之后，麻烦留言点赞。。 需求：领导需要在年会上展示我们的用户ip实时数据，做一个网页版的地图，仅仅显示中国区域。 技术分析：echart，hchart等网站都有地图版的，百度地图有热点实例，经过对比，我选用了百度地图，但是百度地图无法只显示中国区域，这个时候就需要我来动动手解决掉最后一关。 应评论的各位想要源码，页面源码包含websocket+ma...
vue引入maptalks地图及聚合效果
liona_koukou的博客
11-21 1万+
  1、安装maptalks.js npm install maptalks --save 2、安装聚合mapkercluster npm install maptalks.markercluster 3、vue页面引入 import * as maptalks from 'maptalks' import {ClusterLayer} from 'maptalks.marker...
百度地图画地铁线
柠檬酸
03-28 2191
点击画出对应地铁线，但是百度api没有画地铁线的方法，有查询公交地铁线的方法 ，可自行查阅https://lbsyun.baidu.com/jsdemo.htm#tBusSubwayRoute 效果图 html部分 <div class="adrMapHouse"> <div id="map_house"></div> </div> <ul class="subwayText"> <li type="1" name="1号线.
Android Studio实现百度地图及定位
06-07
以下是一个简单的Android Studio实现百度地图及定位的代码示例： 1. 在build.gradle文件中添加以下依赖： ``` implementation 'com.baidu.android:location:7.6.0' implementation 'com.baidu.lbsapi:baseutils:1.1.9' implementation 'com.baidu.lbsapi:search:7.6.0' implementation 'com.baidu.lbsapi:mapv4-sdk:5.2.0' ``` 2. 在布局文件中添加MapView组件： ``` <com.baidu.mapapi.map.MapView android:id="@+id/mapView" android:layout_width="match_parent" android:layout_height="match_parent" /> ``` 3. 在Activity中声明MapView和BaiduMap对象： ``` private MapView mapView; private BaiduMap baiduMap; ``` 4. 在onCreate()方法中初始化MapView和BaiduMap： ``` @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_maps); mapView = (MapView) findViewById(R.id.mapView); baiduMap = mapView.getMap(); baiduMap.setMapType(BaiduMap.MAP_TYPE_NORMAL); baiduMap.setMyLocationEnabled(true); } ``` 5. 在Activity中声明LocationClient和BDLocationListener对象： ``` private LocationClient locationClient; private BDLocationListener locationListener; ``` 6. 在onCreate()方法中初始化LocationClient和BDLocationListener，实现位置信息回调： ``` locationClient = new LocationClient(getApplicationContext()); locationListener = new BDLocationListener() { @Override public void onReceiveLocation(BDLocation location) { if (location == null || mapView == null) { return; } MyLocationData myLocationData = new MyLocationData.Builder() .accuracy(location.getRadius()) .direction(location.getDirection()) .latitude(location.getLatitude()) .longitude(location.getLongitude()) .build(); baiduMap.setMyLocationData(myLocationData); LatLng latLng = new LatLng(location.getLatitude(), location.getLongitude()); MapStatusUpdate mapStatusUpdate = MapStatusUpdateFactory.newLatLngZoom(latLng, 18); baiduMap.animateMapStatus(mapStatusUpdate); } }; locationClient.registerLocationListener(locationListener); LocationClientOption option = new LocationClientOption(); option.setScanSpan(1000); option.setCoorType("bd09ll"); option.setOpenGps(true); locationClient.setLocOption(option); locationClient.start(); ``` 7. 在onResume()方法中启动地图： ``` @Override protected void onResume() { super.onResume(); mapView.onResume(); } ``` 8. 在onPause()方法中暂停地图： ``` @Override protected void onPause() { super.onPause(); mapView.onPause(); } ``` 9. 在onDestroy()方法中销毁地图： ``` @Override protected void onDestroy() { super.onDestroy(); mapView.onDestroy(); locationClient.stop(); baiduMap.setMyLocationEnabled(false); } ``` 这样，就可以在Android Studio中实现百度地图及定位功能了。当用户位置发生变化时，会在地图上显示当前位置的标记，并自动调整地图视角。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值