leaflet分级设色地图代码实例
时间: 2023-10-09 13:09:43 浏览: 86
非常感谢您的提问,以下是一个基于leaflet的分级设色地图代码实例:
```javascript
// 创建地图对象
var map = L.map('map').setView([51.505, -0.09], 13);
// 添加地图瓦片图层
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
maxZoom: 18,
}).addTo(map);
// 定义色阶数组
var colors = ['#ffffcc', '#c2e699', '#78c679', '#31a354', '#006837'];
// 定义分级设色函数
function getColor(d) {
return d > 1000 ? colors[4] :
d > 500 ? colors[3] :
d > 200 ? colors[2] :
d > 100 ? colors[1] :
colors[0];
}
// 定义GeoJSON数据
var geojson = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-0.09, 51.505]
},
"properties": {
"name": "London",
"population": 8673719
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-73.935242, 40.730610]
},
"properties": {
"name": "New York",
"population": 8622698
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [139.691706, 35.689487]
},
"properties": {
"name": "Tokyo",
"population": 13929286
}
}
]
};
// 添加GeoJSON图层
L.geoJSON(geojson, {
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, {
radius: Math.sqrt(feature.properties.population) / 100,
fillColor: getColor(feature.properties.population),
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8
}).bindPopup(feature.properties.name + "<br>Population: " + feature.properties.population);
}
}).addTo(map);
```
希望这个代码实例对您有所帮助!
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)