最近，在学习地图可视化是基于公司的项目。但公司在项目上居然用图片来代替。无语~~~
突发奇想，2016年自己就接触过地图可视化。但那是没有深入研究。只会用R语言来实现点基础。很无语，自己没有坚持下去学习。有没其他事情耽搁了。好了，废话不多说。
leaflet 官网直接给出：
但，有小白说，这不会啊。稍等。介绍官网是为了你以后自己学习使用的。
今天主要讲：
1.如何引进leaflet.js。
2.在上面如何引进其他地图。
3.如何画点。
4.如何画形状图（如多边形）
5.如何结合echarts.
好了。直接进行正题。
一、.如何引进leaflet.js
先引入css
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
再引入js
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""> </script>
这些都是在线的。主要是先不要卡在下载js这里。先体会下leaflet js而已，熟练了还是要下载引入自己的项目的。
二、如何引进其他地图。
其实已经有前辈写好了。我就不多说了直接文件leaflet.ChineseTmsProviders.js的源码放上。
接着我们就可以利用了。
<script src="leaflet.ChineseTmsProviders.js"></script>
做一个小测试。文件test.html
效果：
三、如何画点。
冒着被打死的风险。把部分数据拿出来做讲解吧。首先准备json数据
for(i=0;i<datajson.length;i++){
html_str= "<h1 ><span>课题组:</span>"+datajson[i]["课题组"]+"</h1><p><strong>合作方式:</strong>"+datajson[i]['合作方式']+"</p><p><strong>科研基地:</strong>"+datajson[i]['转化、示范点（包括科研基地）']+"</p><p><strong>合作单位:</strong>"+datajson[i]['合作单位']+"</p><p> <strong>地点:</strong>"+datajson[i]['地点']+"</p><p><strong>面积：</strong>"+datajson[i]['面积']+"亩</p><p><strong>示范技术与品种:</strong>"+datajson[i]['示范技术与品种']+"</p>"
L.marker([datajson[i]["纬度"],datajson[i]["经度"]]).addTo(map).bindPopup(html_str).openPopup();
}
接着讲下，画点其实就是一个函数：L.marker(纬度,经度)。添加到map：addTo(map)。有同学说 你还没讲test.html的map呢？通同学不用急。
创建基础图层就是：
var map = L.map("map", {
center: [22,107],//设置中心点
zoom: 5,//初始的zoom层级
layers: [normalm3],//初始的使用地图 这里normalm3是智图午夜蓝
zoomControl: false
});这样就创建最底层的基础地图。之后就是各种在上面画东西了，为什么是画？因为我们在基础图层是做不了改动的，只能自己用一张透明的图层在上面操作而已。
- 点的画法：这里的bindPopup()是要加载的点想说的话；openPopup()是自动点击打开，其实也可以不用这函数。
for(i=0;i<datajson.length;i++){
html_str= "<h1 ><span>课题组:</span>"+datajson[i]["课题组"]+"</h1><p><strong>合作方式:</strong>"+datajson[i]['合作方式']+"</p><p><strong>科研基地:</strong>"+datajson[i]['转化、示范点（包括科研基地）']+"</p><p><strong>合作单位:</strong>"+datajson[i]['合作单位']+"</p><p> <strong>地点:</strong>"+datajson[i]['地点']+"</p><p><strong>面积：</strong>"+datajson[i]['面积']+"亩</p><p><strong>示范技术与品种:</strong>"+datajson[i]['示范技术与品种']+"</p>"
L.marker([datajson[i]["纬度"],datajson[i]["经度"]]).addTo(map).bindPopup(html_str).openPopup();
}四、多边形如何画
画图的准备数据。先上个圆吧
- 圆
//画圆 L.circle//画圆
L.circle([23.09, 113.23], 500, {//[23.09, 113.23] 中心点 500半径（单位应该是米吧 ，这个倒是没有核对过）
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5
}).addTo(map).bindPopup("广州大厦欢迎你");- 多边形
//画多边形
L.polygon([
[22.92096, 113.38591],
[22.91079, 113.38676],
[22.91118, 113.3962],
[22.92014, 113.39482]]
).addTo(map).bindPopup("故宫");五、结合echart画图
画echart图 当然要引入echarts.js
<script src="jquery-1.9.1.min.js">//</script> <script src="echarts.min.js"></script>
//结合echats
var marker2 = L.marker([23.09,114.23]).addTo(map);
var content = '<div style="width: 220px; height: 220px;" id="marker' + 2 + '"></div>';
marker2.bindPopup(content, {});
marker2.on('popupopen', function(e) {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('marker' + 2));
// 指定图表的配置项和数据
option = {
tooltip: {
trigger: 'axis'
},
xAxis: [{
type: 'category',
data: ['1月', '2月', '3月', '4月']
}],
yAxis: [{
type: 'value',
name: '水量',
min: 0,
max: 50,
interval: 50,
axisLabel: {
formatter: '{value} ml'
}
}, {
type: 'value',
name: '温度',
min: 0,
max: 10,
interval: 5,
axisLabel: {
formatter: '{value} °C'
}
}],
series: [{
name: '蒸发量',
type: 'bar',
data: [2.0, 4.9, 7.0, 23.2]
}, {
name: '降水量',
type: 'bar',
data: [2.6, 5.9, 9.0, 26.4]
}, {
name: '平均温度',
type: 'line',
yAxisIndex: 1,
data: [2.0, 2.2, 3.3, 4.5]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
});