LeafletJS应用 交互式多度分色图.doc

LeafletJS应用_交互式多度分色图.docLea?etJS应用 交互式多度分***
这是一个案例研究，在 GeoJSON和一些自定义控件的帮助下，创建了彩色交互式的美国各州人口密度 图。
数据源
我们让美国人口密度的数据可视化。由于数据量不是很大，所以最简便的存储和显示数据的方法是
GeoJSON。
我们的GeoJSON数据的每个特征将是这样的：
{
"type": "Feature", "properties": {
"name": "Alabama", "density":
},
"geometry": ...
}
基本状态图
让我们用定制的Mapbox样式在地图上显示我们的状态数据
var mapboxAccessToken = {your access token here};
var map = ('map').setView([, -96], 4);
('/{id}/{z}/{x}/{y}.png?access_token=' + mapboxAccessToken, {
id: 'mapbox .li ght',
attribution: ...
}).addTo(map);
(statesData).addTo(map);
Leaflet ] Map data © QpenStreetMap cortributoFS. CC-BY-SA. Imagery © Mapbox
添加颜色
现在我们需要根据人口密度对各州进行着色。为地图选择好的颜色可能需要比较高的技巧，但有一个伟
大的工具可以帮助我们---ColorBrewer 。我们创建一个函数，使用从 ColorBrewer中得到的值，返回基 于人口密度的颜色：
function getColor(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层的样式函数，使其 时，我们还调整了外观，添加了漂亮的笔触。
function style(feature) {
return {
fillColor: getColor(), weight: 2,
opacity: 1,
color: 'white',
dashArray: 3,
fillOpacity:
};
}
(statesData, {style: style}).addTo(map);
现在看起来好多了 ！
Leaflet | Map data © OpenSireetMap contributors- CC-BY-SAs llmagery © Mapb