Leaflet是适用于桌面端和移动端交互地图的开源JavaScript类库。JS库的大小经过压缩后有38k左右,拥有开发者需要的全部地图功能。
Leaflet保持着简单、性能和实用性的设计思想。可以在所有主要的桌面和移动端平台上高效的运转,可以扩展插件,它有一个漂亮、易用和文档清晰的API,有一个简单、易读的源代码
Leaflet可以通过加载GeoJSON数据,批量加载点、线、面数据,并转化为相应的特征对象,实现数据显示,弹出数据信息管理。
下边通过一个GeoJSON加载点数据,显示为图标进行说明:
//循环遍历每一个feature,绑定弹出气泡和提示信息
function onEachFeature(feature, layer) {
if(feature.properties && feature.properties.name) {
layer.bindTooltip(feature.properties.name);
layer.bindPopup(feature.properties.address);
}
}
//设置图标样式
var baseballIcon = L.icon({
iconUrl: 'img/leaflet/school_icon.png',
iconSize: [24, 27],
iconAnchor: [12, 27],
popupAnchor: [0, -28],
tooltipAnchor: [0, -20]
});
//加载json数据
$.getJSON('sampledata/ta_school_point.json', function(data) {
//通过geojson创建图层
schoollayer =
L.geoJSON(data, {
onEachFeature: onEachFeature,
//循环设置图标样式
pointToLayer: function(feature, latlng) {
return L.marker(latlng, {
icon: baseballIcon
});
}
});
//添加到地图,并定位
schoollayer.addTo(map);
map.fitBounds(schoollayer.getBounds());
});