leaflet地图区域数据可视化

地图上数据的展示对于一些有要求的场景里面还是很重要的，vue是前端经常使用的开发语言，leaflet与vue能够很好地进行融合使用，对于GIS相关的数据学习我也仅仅只是停留在皮毛上面，今天主要是简单地基于leaflet地图框架来对指定区域进行可视化，这个之后需要对不同的图层进行叠加处理，今天只是基于给定的经纬度数据来实现数据的可视化展示功能。

核心代码实现如下：

<script>var obj = {'V': [[247.5, 0.0], [247.5, 100.0]], 'Z': [[[35.5737364828, 115.865867222], [35.5712313418, 115.86128216], [35.5781793935, 115.856731607], [35.5857191388, 115.853927041], [35.5866003546, 115.85933733], [35.5799057651, 115.861827085]], [[35.5712313418, 115.86128216], [35.5687260254, 115.856697384], [35.5764528061, 115.851636347], [35.58483768, 115.848516871], [35.5857191388, 115.853927041], [35.5781793935, 115.856731607]]]};//到 mapbox 官网注册并创建下面的access token都是免费的，不过有5w次的浏览限制var url = '你自己的url数据';//初始化 地图var leafletMap = L.map('mapDiv').setView([35.593571, 115.902191], 12);//将图层加载到地图上，并设置最大的聚焦还有map样式L.tileLayer(url, {maxZoom: 18,id: 'mapbox.streets'}).addTo(leafletMap);var myLayerGroup = new L.LayerGroup();leafletMap.addLayer(myLayerGroup);// 网格图层var gridLayers = new Array();serefresh();function serefresh(){var point = obj["Z"];var val = obj["V"];var color = ''var pointlength = point.length;for(var i=0; i< pointlength; i++){//对数据值进行判断===>转化为同等的颜色值if (val[i][1] >= 0 && val[i][1] <= 10) {color='#FFB6C1';gridLayers[i] = L.polygon(point[i],{fillColor: color,fillOpacity: 0.5 ,fill: true, opacity: 1, radius: 6,  weight:0.1});myLayerGroup.addLayer(gridLayers[i]);}if (val[i][1] >= 10 &&  val[i][1] <= 20) {color='#FFB6D5';gridLayers[i] = L.polygon(point[i],{fillColor: color,fillOpacity: 0.5 ,fill: true, opacity: 1, radius: 6,  weight:0.1});myLayerGroup.addLayer(gridLayers[i]);}if (val[i][1] >= 20 &&  val[i][1] <= 30) {color='#FFB6F1';gridLayers[i] = L.polygon(point[i],{fillColor: color,fillOpacity: 0.5 ,fill: true, opacity: 1, radius: 6,  weight:0.1});myLayerGroup.addLayer(gridLayers[i]);}if (val[i][1] >= 30 && val[i][1] <= 50) {color='#FF69B4';gridLayers[i] = L.polygon(point[i],{fillColor: color,fillOpacity: 0.5 ,fill: true, opacity: 1, radius: 6,  weight:0.1});myLayerGroup.addLayer(gridLayers[i]);}if (val[i][1] >= 50 &&  val[i][1] <= 100) {color='#DC143C';gridLayers[i] = L.polygon(point[i],{fillColor: color,fillOpacity: 0.5 ,fill: true, opacity: 1, radius: 6,  weight:0.1});myLayerGroup.addLayer(gridLayers[i]);}console.log(color)gridLayers[i].bindPopup("Direction: " + val[i][0] +"<br/>"+ "Value: " + val[i][1]);}}
</script>

效果截图如下：

简单地实现了一个基于区域数据值来自动选择不同深度颜色叠加到底图图层上面的小功能，记录一下！

leaflet地图区域数据可视化相关推荐

百度地图获取地区/省市县json地图区域数据
获取省市县json地图区域数据共三步: 1.打开百度api连接如下 http://lbsyun.baidu.com/jsdemo.htm#c1_10 2.复制以下代码粘贴到打开的页面的源代码编辑器中 ...
如何做好基于地图的数据可视化？
这个地图是Audubon鸟类和气候变化报告中的一部分,预测了季节变化的区域,黄色代表该地区处于夏季,蓝色代表冬季. 地图具有神奇的能力,可以给我们展示不能直接看到的东西,例如Curiosity在火星上 ...
地图可视化工具有哪些，基于地图的数据可视化软件
做数据的人都知道,每次做报告或做图表,大家最喜欢的莫过于数据可视化,可视化中最喜欢的莫过于数据地图.谁让大家都是视觉动物,而地图可视化最能唬人. 但是如何制作地图可视化,本文来分享一些技巧. 目前市场 ...
Angular + Leaflet 实现房源数据可视化(附github源码)
这是什么?租房信息展示平台宏观的租房数据可视化微观的房源信息展示多条件搜索等等链接地图搜租房来龙去脉受 @李国宝的地图搜租房启发,利用其提供的开放API,配合自己在前端和地理信息 ...
python气泡图的地图_Python数据可视化：香港地图、房价可视化，绘制气泡图
本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理. 以下文章来源于DataCharm ,作者宁海涛前言今天的推文教程使用geopandas进行空间 ...
python matplotlib 地图_Python数据可视化，看这篇就够了
说到python的常见应用,很多人会想到python的数据分析,作为数据分析中的表现层面,数据可视化都是其中必不可少的部分.但本文并非只推荐无任何数据分析需求仅需要做漂亮可视化图表的人学习python ...
快速实现地图迁移数据可视化
这两天接到一个数据可视化的需求,要求展示当前选择的省.市到其他省市的产品迁徙数据,需求并不难,而且地图的可视化也比较成熟,echarts也有对应的例子,我们先看下预览图. 预览图: 简介为什么要这篇 ...
百度地图 - 使用数据可视化MapVGL
简介在地图项目的开发中,往往会伴随大量的数据展示.这时候使用地图api提供的覆盖物函数绘制元素,在页面上会生成大量的DOM元素导致页面变卡. 为了解决大量数据展示,百度地图开发了一套处理数据可视化的 ...
vue中引入高德地图Loca数据可视化
目录引言: 关键词: 正文: 一.如何安装或者引入: 二.如何引入: 三.如何使用: 四.完整代码: 五.效果图参考: 引言: 前面我的文章介绍了vue中引入高德地图实例的,详情可以去参考,由于需 ...
html5页面热力图几十万数据,基于百度地图的数据可视化，包括大量数据的标绘以及热力图的插入...
(function(global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? ...

leaflet地图区域数据可视化

leaflet地图区域数据可视化相关推荐

最新文章

热门文章