leaflet读取{"y":115.9057200,"x":29.1660800,"label":0}格式的json文件,再用Leaflet的标记功能在地图上绘制簇心标记。用不同的颜色表示不同label的点
时间: 2023-11-12 22:09:20 浏览: 66
Leaflet_Example:如何使用Leaflet创建交互式地图的示例
首先,需要使用Leaflet的L.marker()函数创建标记,并将其添加到地图上。在此之前,需要从JSON文件中读取数据并将其存储在一个数组中。然后,循环遍历该数组并为每个标记设置相应的颜色。
以下是一个例子:
```javascript
// 创建地图
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
// 添加瓷砖图层
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors',
maxZoom: 18,
}).addTo(mymap);
// 从JSON文件中读取数据
$.getJSON("data.json", function(data) {
var markers = [];
// 遍历数据并创建标记
$.each(data, function(key, val) {
var marker = L.marker([val.y, val.x]);
// 根据标签设置标记颜色
if (val.label == 0) {
marker.setIcon(L.icon({
iconUrl: 'http://leafletjs.com/examples/custom-icons/leaf-red.png',
iconSize: [38, 95],
}));
} else if (val.label == 1) {
marker.setIcon(L.icon({
iconUrl: 'http://leafletjs.com/examples/custom-icons/leaf-green.png',
iconSize: [38, 95],
}));
} else {
marker.setIcon(L.icon({
iconUrl: 'http://leafletjs.com/examples/custom-icons/leaf-orange.png',
iconSize: [38, 95],
}));
}
markers.push(marker);
});
// 将所有标记添加到地图上
var group = new L.featureGroup(markers);
group.addTo(mymap);
mymap.fitBounds(group.getBounds());
});
```
在此示例中,我们假设数据存储在名为“data.json”的文件中,并且每个数据点都具有“x”、“y”和“label”属性。我们使用jQuery的getJSON()函数从文件中读取数据,并使用L.marker()函数创建标记。我们使用L.icon()函数为每个标记设置不同的图标,并根据其标签属性设置不同的颜色。最后,我们将所有标记添加到一个特征组中,并将其添加到地图上。
阅读全文