<!DOCTYPE html>
<html>
<head>
<title>choropleth example - leaflet</title>
<link rel="stylesheet" href="https://npmcdn.com/[email protected]/dist/leaflet.css" />
<script src="https://npmcdn.com/[email protected]/dist/leaflet.js"></script>
<style>
#map {
height: 500px;
width: 800px;
}
/* 定義info control的container中的css */
.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;
}
/* 注意這裏用<i></i>呈現圖例小方格 */
.legend {
text-align: left;
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>
<!-- 注意這裏引用geoJSON數據,statesData對象定義在裏面
<script src="../data/us-states.js"></script>
-->
<script src="http://leafletjs.com/examples/choropleth/us-states.js"></script>
<script>
var map = L.map('map').setView([37.8, -96], 4);
//token可以在https://www.mapbox.com/studio/account/tokens/查看
var mapboxAccessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';
//id看起來是定義風格的
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=' + mapboxAccessToken, {
id: 'mapbox.light'
}).addTo(map);
//創建info控件,默認位置position是'topright',這裏L.control(),而不是L.Control(),todo:搞不懂
var info = L.control();
//自定義控件需要重載onAdd方法,返回container,執行addTo(map)時會執行該方法,並將control添加到container
info.onAdd = function (map) {
//create(string tagName, string className[注:css], HTMLElement container?[注:追加到另一個container]),
this._div = L.DomUtil.create('div', 'info');
this.update();
return this._div;
}
//響應事件,更新內容
info.update = function (props) {
//原div沒有內容時,用innerHTML比較好,不必createElement->appendChild
//又一次用到'?:',非常方便
this._div.innerHTML = '<h4>US Population Density</h4>' + (props ?
'<b>' + props.name + '</b><br>' + props.density + 'people / mi<sup>2</sup>'
: 'Hover over a state');
}
info.addTo(map);
//這裏用了比較巧妙的方法,多次使用'?:',沒有使用if...else...
var getColor = function (d) {
return d > 1000 ? '#800026' :
d > 500 ? '#BD0026' :
d > 200 ? '#E31A1C' :
d > 100 ? '#FC4E2A' :
d > 50 ? '#FD8D3C' :
d > 20 ? '#FEB24C' :
d > 10 ? '#FED976' :
'#FFEDA0';
}
//定義geoJSON數據的風格,默認參數是feature,和geoJSON中type對應
var style = function (feature) {
return {
weight: 2,
opacity: 1,
color: 'white',
dashArray: '3',
fillOpacity: 0.7, //默認是0.2,不重新設置color會很淡
fillColor: getColor(feature.properties.density)
}
}
var geojson;
var highlightFeature = function (e) {
//注意獲取圖層的方式
var layer = e.target;
layer.setStyle({
weight: 5,
color: '#666',
dashArray: '',
fillOpacity: 0.7
});
//注意這裏獲取props的方法
info.update(layer.feature.properties);
}
var resetHighlight = function (e) {
//將geoJSON的style設置爲最初加載時的style,注意參數是layer
geojson.resetStyle(e.target);
info.update();
}
var zoomToFeature = function (e) {
//縮放到適合的視口,常用的方法
map.fitBounds(e.target.getBounds());
}
//geoJSON中每一個feature被create時執行
var onEachFeature = function (feature, layer) {
//監聽鼠標懸停、離開、點擊事件
layer.on({
mouseover: highlightFeature,
mouseout: resetHighlight,
click: zoomToFeature
})
}
//添加geoJSON,statesData定義在us_state.js中
geojson = L.geoJSON(statesData, {
style: style,
onEachFeature: onEachFeature
}).addTo(map);
var legend = L.control({position: 'bottomright'});
legend.onAdd = function () {
this._div = L.DomUtil.create('div', 'info legend');
var grades = [0, 10, 20, 50, 100, 200, 500, 1000],
labels = [],
from, to;
for (let i = 0; i < grades.length; i++) {
from = grades[i];
to = grades[i + 1];
//又一次用'?:',不必在麻煩的判斷grands index超出
//利用<i></i>呈現小方格,'–'是html實體符號,代表'-'(注意帶分號),注意from + 1
labels.push(
'<i style="background:' + getColor(from + 1) + '"></i>'
+ from + (to ? '–' + to : '+'));
}
//用array,然後在join能夠清楚的知道每一數據的值,也可以在for裏使用labels += ...,但累加過多
this._div.innerHTML = labels.join('<br>');
return this._div;
}
legend.addTo(map);
</script>
</body>
</html>