leaflet与echart的结合的栅格图可视化

自从疫情爆发以来我就一直没有更新微信公众号的文章了,大家是不是猜想我跑路了,哈哈,生长在我伟大的祖国,是最幸福的,我是不会跑路的,只不过期间反而因项目更忙碌了。大家有没有发现疫情期间,各大平台的关于引擎的可视化系统层出不穷,其中大部分都是基于地图可视化展示。基于此我想通过后续几篇文章给大家分享地图可视化部分的示例(先介绍二维的,再分享三维的)。在此先给大家推荐一个网站,是Cesium实验室基于Cesium完成的可视化项目,同时还是开源的(不过是需要购买他们基于Cesium封装的SDK,本质上跟商业项目没什么区别),其地址如下,感兴趣的同学可以去看看。

http://ncov.earthsdk.com

言归正传,今天分享leaflet与echart的结合的栅格图可视化。

其效果如下:

leaflet与echart的结合的栅格图可视化_第1张图片

其引用核心js包括:echarts.min.js,core.supermap.min.js,leaflet.js,leaflet.css(其在线引用地址为):

代码中加载地图可以直接加载osm地图​​​​​​​

var tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {        maxZoom: 18,        attribution: '© OpenStreetMap contributors'      }),      latlng = new L.LatLng(50.5, 30.51);
    var map = new L.Map('map', {center: latlng, zoom: 15, layers: [tiles]});

echarts.min.js,core.supermap.min.js的获取请在微信公众号中输入“栅格图js”

其核心代码如下:

请关注我的微信公众号:一位更懂IT的GISER,一位更懂GIS的IT

leaflet与echart的结合的栅格图可视化_第2张图片

PS:后续小编的主要精力放到GIS理论开发知识的大众化的道路了,通过浅显易懂的语言,结合多年行业应用开发,通过微信订阅号传播(每周更新三篇文章及相关GIS编码知识),为GIS的发展尽微博之力。终极目标是让GIS不再专业,让GIS更加大众,使得GIS深入各行业应用,让每位GISER都有一股自豪感!以下是我的微信订阅号二维码,感兴趣的可以交流沟通!

 

你可能感兴趣的:(GIS,leaflet专题)