OpenLayers结合Echarts实现海量点的前端可视化

最新推荐文章于 2024-06-04 09:45:18 发布
最新推荐文章于 2024-06-04 09:45:18 发布
阅读量4.5k 收藏 15
点赞数 5
分类专栏： OpenLayers 地理数据可视化（非海洋） JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wxqqq666/article/details/102847599
版权

前言

OpenLayers这个库在前端操作地图自然是数一数二的存在，但是对于在地图上海量数据的绘制就显得有点力不从心，虽然目前Openlayers4以后地图上数据的绘制相关绘制接口已经开始基于WebGL进行封装，一定程度上决解决了数据绘制速度问题但对于海量数据绘制到客户端所带来的内存占用问题并没有得到解决，这其实也怪不得OL的开发者，人家本来就不是为了数据可视化打造的，之所以开始采用WebGL进行绘图API的封装也仅仅是为了给地图相关应用的开发起到锦上添花的作用，这时deck.gl Echarts等便可提枪上马了，目前对于前端点绘制优化相关的例子都是针对矢量地图进行的，这里采用栅格瓦片作为底图实现对于10W级别点的前端绘制

方法比较

OpenLayers4结合setInterval函数实现简单的地图动画----以溢油粒子的漂移扩散为例
这个小功能实现之后甲方提出了新要求，目前在OpenLayers加载的栅格瓦片上绘制的最大点数为72000个，在拖动时发现出现卡顿，并且又提出最终需要在地图上展示30多万个点（这尼玛这么密的点不做聚类全部展示出来有意义吗）没有办法，甲方这样要求老师说让这样整，那我就照做，初步想法有下面几种
1 Openlayers cluster实现聚类（或者有其它相关包实现聚类）
2 使用imagecanvas将绘制的点作为图片加载地图上
3 利用第三方专门做可视化的库与OpenLayers结合
1 2 都被老师华丽的否决了，那就沿着第三条路走到黑了

方法2的实现过程

其实解决前端地图拖动过程

最低0.47元/天 解锁文章
wxqqq666
关注
  • 5
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
40-OpenLayers6入门，使用webgl图层叠加大量Point点要素，解决叠加超过一百万数据量点位导致浏览器卡住变慢的问题
fxshy的博客
06-02 52
40-OpenLayers6入门，使用webgl图层叠加大量Point点要素，解决叠加超过一百万数据量点位导致浏览器卡住变慢的问题
前端js运用echarts生成县市独立地图可自定义标签海量点不卡
02-10
运用echarts实现县市地、图输入县市名字，打开该县市独立行政地图，将带坐标的标记点传到前端，可在地图上标记，可自定义标签样式。可点击标注打开自定义内容面板。已经优化海量点不卡。
webgis开发参考资料
u012320231的博客
03-23 1294
一、ArcGIS相关 1、ArcGIS for Server 10.3.X 新型紧凑型缓存的解读和应用 http://zhihu.geoscene.cn/article/1038 2、arcgis server 紧促（bundle）格式缓存文件的读取 https://blog.csdn.net/abc553226713/article/details/8668839 3、ArcGIS 10.0紧凑型切片读写方法 https://www.cnblogs.com/yuantf/p/3320876.html 4、
数据可视化利器：OpenLayers 示例集锦
最新发布
gitblog_00036的博客
06-04 335
数据可视化利器：OpenLayers 示例集锦 项目地址:https://gitcode.com/QingyaFan/data-visualization 1. 项目介绍 在大数据时代，数据可视化成为理解和探索信息的关键工具。为此，我们带来了这个开源项目 —— Data Visualization，它是一个集合了多种基于 OpenLayers 和 MapboxGL 的数据可视化示例。该项目由资深开...
openlayers海量点渲染（2w点左右）
我灰灰凭啥输
05-27 6211
效果图 此处用到了openlayers的webgl属性 import GeoJSON from 'ol/format/GeoJSON'; //用来加载矢量数据 import WebGLPointsLayer from 'ol/layer/WebGLPoints'; //使用webgl渲染 初始化矢量图层，从文件加载点的地理信息 this.vectorSource = new Vector({ url: 'http://localhost:9528/data.ge
Openlayers加载海量数据之WebGL
qq_41283814的博客
01-30 4053
openlayer中使用webGL渲染海量点或面图层基本方法（提示：openlayer 6 以上的版本才支持webGL渲染）
点击echarts地图，高德地图跳转对应位置(显示海量点标志和信息窗体)
m0_46581222的博客
02-26 1586
工作记录 echarts地图: 默认安装了echarts和引入四川的地图json getShowMan <template> <div class="app-container"> <div id="main"></div> </div> </template> <script> import * as echarts from "echarts"; import sichuan from '@/utils/
基于openlayers和canvas绘制海量数据的实现
01-26
总之，"基于openlayers和canvas绘制海量数据的实现"是一个高效处理和展示地理信息的技术方案，它结合了OpenLayers的灵活性和Canvas的高性能渲染能力，为开发者提供了强大的工具来应对大数据挑战。通过理解和掌握这些...
vue openlayers 大屏 可视化 基础模版
10-18
Vue OpenLayers 大屏可视化基础模版是一款专为构建大规模数据可视化应用而设计的模板，它结合了Vue.js的组件化开发方式与OpenLayers的强大地图渲染能力，为开发者提供了一个高效、易用的起点。这个模板允许开发者...
前端可视化开发-地图js、json文件
03-16
总的来说，前端JavaScript和JSON文件在地图可视化中的结合，使得开发者能够创建出交互性强、表现力丰富的地图应用。无论是简单的地理位置标注，还是复杂的地理数据分析和展示，都能通过这种方式实现。对于初学者来说...
在openlayers3上与echarts结合使用示例
03-06
OpenLayers 是一个专为Web GIS 客户端开发提供的JavaScript 类库包，用于实现标准格式发布的地图数据访问，echarts是百度的开源js图表库，该示例实现了在openlayers的地图‘贴’上echarts的图表，具体可参见我的博客...
Openlayers扩展H5绘制10W+数据
08-14
NULL 博文链接：https://jjxliu306.iteye.com/blog/2317352
前端数据可视化图表案例合集.zip
05-22
可视化方面的库：原生三件套（HTML+CSS+JS）、ECharts、百度地图、OpenLayers、ThreeJs、FabricJS，前端数据可视化图表案例合集源码案例，本项目是我8年工作和学习中整理出来的前端可视化demo，代码会有详细注释。...
openlayers学习——14、openlayers结合echarts图表和地图
记录生活点滴
01-26 5550
openlayers结合echarts图表和地图一、普通饼图、柱图二、加载炫酷地图标记 前言：基于Vue，学习openlayers，根据官网demo，记录常用功能写法。 本人不是专业GIS开发，只是记录，方便后续查找。 参考资料： openlayers官网：https://openlayers.org/ geojson下载网站：https://datav.aliyun.com/portal/school/atlas/area_selector 地图坐标拾取网站：https://api.map.b
OpenLayers6入门，OpenLayers如何加载百万数据量的GeoJson点数据并叠加到webgl渲染图层上，百万海量点数据叠加不卡
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
07-24 1371
上一章中《OpenLayers入门，OpenLayers如何加载GeoJson数据并叠加到OpenLayers矢量图层上》，我们讲解了少量数据加载并叠加到OpenLayers矢量图层上，如果数量特别大，浏览器就会很卡，所以需要用到webgl图层进行加载，本章就讲解使用webgl图层叠加海量GeoJson点数据。
vue 高德地图 多个标记点_react+高德地图实现热力地图及海量点加载
weixin_39929138的博客
12-12 740
之前研究过研究过百度地图配合echarts实现热力地图和大量标注点加载，有兴趣可查看博客https://www.cnblogs.com/class1/p/13691867.html。结果效果不是太理想，进而转战高德地图。最终效果图先展示一波。图上效果图的实现主要有五点：一，高德地图的引入。引入地图，和百度地图一样，还是要申请自己使用的key值，网上讲解很多，这里不再细述。有了key值以后，在全局的...
049：vue+openlayers 鼠标pointermove显示城市名片
大剑师兰特的GIS世界
08-14 2004
本示例的目的是介绍演示如何在vue+openlayers中采用overlay实现城市名片的效果，移动鼠标到相应的位置点，出现城市的信息。
Openlayers实战：显示海量数据
大剑师兰特的GIS世界
07-10 787
Openlayers地图中通常的加载方式是canvas，另外还一种加载方式是webGL，在绘制海量数据时，使用GPU进行绘制可有效减少CPU的负载，提升绘制时的速度在浏览器中，可以使用WebGL的方式与GPU交互。在本实战中，使用WebGLPoints显示海量数据。
OpenLayers使用
Pluto_fxy的博客
08-13 3201
最近项目有用到ol来加载地图并进行一些常规的操作，ol的官网以api的格式来写的，而且全英文，对新手来说简直太不友好了（碎碎念）所以写个文章来记录一下，以备不时之需。
使用openlayers加载气象战点数据实现可视化
04-07
OpenLayers是一个开源的JavaScript库，用于在Web浏览器中显示交互式地图。OpenLayers可以加载各种类型的地图数据，包括矢量数据、栅格数据、WMS服务等。下面是实现可视化的步骤： 1. 准备气象战点数据，可以是CSV、JSON等格式的文件。 2. 在HTML页面中添加OpenLayers的引用： ``` <script src="https://cdn.jsdelivr.net/npm/ol@6.4.3/dist/ol.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@6.4.3/dist/ol.css" /> ``` 3. 创建一个地图容器： ``` <div id="map" style="width: 100%; height: 600px;"></div> ``` 4. 创建一个OpenLayers地图对象： ``` var map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: ol.proj.fromLonLat([120, 30]), zoom: 8 }) }); ``` 5. 加载气象战点数据： ``` var features = []; // 读取CSV文件中的数据 d3.csv("data.csv", function(data) { data.forEach(function(d) { // 将数据转换为OpenLayers要求的格式 var feature = new ol.Feature({ geometry: new ol.geom.Point(ol.proj.fromLonLat([+d.lng, +d.lat])), name: d.name, value: +d.value }); features.push(feature); }); // 创建矢量图层 var vectorLayer = new ol.layer.Vector({ source: new ol.source.Vector({ features: features }), style: function(feature) { // 根据value的值设置点的颜色和大小 var color = 'rgba(255, 0, 0, 0.5)'; var size = 10; if (feature.get('value') > 10) { color = 'rgba(0, 255, 0, 0.5)'; size = 20; } return new ol.style.Style({ image: new ol.style.Circle({ radius: size, fill: new ol.style.Fill({ color: color }) }) }); } }); // 将矢量图层添加到地图中 map.addLayer(vectorLayer); }); ``` 6. 根据需要设置地图的样式和交互功能。 以上就是使用OpenLayers加载气象战点数据实现可视化的步骤。需要注意的是，代码中使用了d3.csv方法读取CSV文件中的数据，因此需要在HTML页面中添加d3.js的引用。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值