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

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

http://ncov.earthsdk.com

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

其效果如下：

其引用核心js包括：echarts.min.js，core.supermap.min.js，leaflet.js,leaflet.css（其在线引用地址为）：

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" /><script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet-src.js" ></script>

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

var tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {        maxZoom: 18,        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> 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

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