使 用 G e oJ so n 文 件可视化中国地图
一. 准备GeoJson文件
首先可以从百度上下载中国的GeoJson文件，一共有34个省市区（包括香港，澳门，台湾）
以下部分为台湾的GeoJson文件
{"type":"Feature","properties":{"id":34,"name":"台湾","density":640.05},"geometry":{"type":"Polygon","coordinates":
[[[121.63599694100014,25.222805080000114],[121.71851647200015,25.15200429900011],[121.89283287900003,25.113674221000167],[121.9057723320002,24.95010000200014],[121.82349694100014,24.854925848000164],[121.81495201900032,24.644354559000192],[121.85596764400032,24.550523179000123],[121.78003991000003,24.43268463700008],[121.77271569100003,24.30923086100006],[121.66285241000014,24.193101304000038],[121.60743248800014,24.07684967700004],[121.62891686300009,24.026190497000158],[121.52149498800031,23.658677476000094],[121.46216881600026,23.34300364800015],[121.4088647800001,23.254584052000126],[121.40007571700005,23.145493882000153],[121.29957116000003,22.95917389500019],[121.19027754000001,22.843166408000144],[121.14144941500001,22.741766669000185],[121.02100670700008,22.647894598000136],[120.9482528000002,22.52680084800005],[120.87501061300014,22.289252020000134],[120.87924238400001,22.055812893000052],[120.84156334700009,21.925482489000103],[120.70435631600014,21.98139069200016],[120.69695071700016,22.113226630000156],[120.62126712300017,22.29507070500017],[120.51197350400025,22.42475006700016],[120.33122806100027,22.51972077000019],[120.17554772200015,22.88410065300016],[120.17025800900024,23.013373114000046],[120.05941816500012,23.151027736000174],[120.1301491600002,23.360960244000154],[120.12426153300032,23.520020550000083],[120.18921959700026,23.774807033000116],[120.29224694100003,23.911932684000192],[120.34009850400014,24.02179596600007],[120.4931746750002,24.23065827000005],[120.57081139400032,24.404933986000202],[120.64893639400009,24.48387278900023],[120.70215905000032,24.60700104400013],[120.84750410200013,24.710842190000108],[120.90235436300031,24.836818752000056],[121.05933678500003,25.050238348000164],[121.37875410200007,25.157945054000038],[121.43628991000026,25.24144114800012],[121.53972415500004,25.28742096600007],[121.63599694100014,25.222805080000114]]]}}]}
要想在leftlet地图中使用GeoJson文件，可以将其用js文件表示，china.js如下所示. 数组中包含多个如上图所示的对象
var chinaData={
"type":"FeatureCollection","features":[
{},{},{},{}
]};
二. 地图可视化
为了提高图的实用性，本图增加展示各省市的人口密度功能。数据来源于2016年
<!DOCTYPE html>
<html>
<head>
<title>leftLetDemo</title>
<meta charset="utf-8">
</script>
<script type="text/javascript" src="js/china.js"></script>
<script type="text/javascript" src="js/leaflet.js"></script>
<link rel="stylesheet" type="text/css" href="css/leaflet.css">
</script>
<style type="text/css">
#map{
height:600px;
}
.info {
padding: 6px 8px;
font: 14px/16px Arial, Helvetica, sans-serif;
background: white;
background: rgba(255,255,255,0.8);
box-shadow: 0 0 15px rgba(0,0,0,0.2);
border-radius: 5px;
}
.info h4 {
margin: 0 0 5px;
color: #777;
}
.legend {
line-height: 18px;
color: #555;
}
.legend i {
width: 18px;
height: 18px;
float: left;
margin-right: 8px;
opacity: 0.7;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
var geojson,info;
function getColor(d) {//#800026
return d > 3000 ? '#800026' :
d > 1000 ? '#BD0026' :
d > 500 ? '#E31A1C' :
d > 200 ? '#FC4E2A' :
d > 100 ? '#FD8D3C' :
d > 50 ? '#FEB24C' :
d > 10 ? '#FED976' :
'#FFEDA0';
}
function style(feature) {//json的每个属性会执行此函数
return {
fillColor: getColor(feature.properties.density),//
weight: 2,
opacity: 1,
color: 'white',
dashArray: '3',
fillOpacity: 0.7
};
}
function highlightFeature(e) {//当鼠标拂过时高亮显示
var layer = e.target;
layer.setStyle({
weight: 5,
color: '#666',
dashArray: '',
fillOpacity: 0.7
});
if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
layer.bringToFront();
}
info.update(layer.feature.properties);
}
function resetHighlight(e) {//当鼠标退出后reset
geojson.resetStyle(e.target);// geojson要先定义
info.update();
}
function zoomToFeature(e) {//当点击时显示状态
map.fitBounds(e.target.getBounds());
}
function onEachFeature(feature, layer) {//遍历每一个数据，也就是为每一个地点加上监听器
layer.on({
mouseover: highlightFeature,
mouseout: resetHighlight,
click: zoomToFeature
});
}
var mymap = L.map('map').setView([34.76, 113.65], 4);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
maxZoom: 18
}).addTo(mymap);
geojson=L.geoJson(chinaData,{
style:style,
onEachFeature: onEachFeature
}).addTo(mymap);
info = L.control({position: 'topright'});//添加一个组件，也可以使用自己定义的组件，设置监听事件，使用float属性 或者position:absolute
info.onAdd = function (mymap) {
this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
this.update();
return this._div;
};
// method that we will use to update the control based on feature properties passed
info.update = function (props) {
this._div.innerHTML = '<h4>China Population Density</h4>' + (props ?
'<b>' + props.name + '</b><br />' + props.density + ' people / mi<sup>2</sup>'
: 'Hover over a province');
};
info.addTo(mymap);//加入图标
var legend = L.control({position: 'bottomright'});
legend.onAdd = function (map) {//onAdd函数向其中添加组件
var div = L.DomUtil.create('div', 'info legend'),
grades = [0, 10, 50, 100, 200, 500, 1000,3000],
labels = [];
// loop through our density intervals and generate a label with a colored square for each interval
for (var i = 0; i < grades.length; i++) {
div.innerHTML +=
'<i style="background:' + getColor(grades[i] + 1) + '"></i> ' +
grades[i] + (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');
}
return div;
};
legend.addTo(mymap);//加入显示比例尺
</script>
</body>
</html>
三. 结果展示
当鼠标放到不同的省份时，提示栏会显示相应省份及人口密度。
