利用GeoJSON和一些自定义控件创建一个彩色交互式美国各州人口密度分布图的案例。
数据源
GeoJSON数据(us-states.js)的每个要素结构如下:
{
"type": "Feature",
"properties": {
"name": "Alabama",
"density": 94.65
},
"geometry": ...
...
}
基础地图
使用自定义的Mapbox样式的将各州的数据展示到地图上,灰色瓦片是可视化处理时非常合适的背景色
<!DOCTYPE html>
<html>
<head>
<title>Interactive Choropleth Map</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" crossorigin="">
<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js" crossorigin=""></script>
<style>
html,body{
height: 100%;
margin: 0;
}
#map {
width: 750px;
height: 500px;
}
</style>
</head>
<body>
<div id="map"></div>