leaflet的一些常用用法及插件用法(持续更新)
程序员文章站
2024-01-22 19:53:22
...
首先创建地图
var map = L.map('map'.setView([35, 105], 5)
实现定位
map.setView([31.99, 120.26], 13)
定义地图事件
map.off('click');//取消点击事件
map.on('click', '方法名'); //点击地图
map.on('dblclick', '方法名'); //双击完成
map.on('mousemove', '方法名');//地图移动
确定屏幕四角坐标
map.getBounds().getSouthWest().lng + ' ' + map.getBounds().getSouthWest().lat + ','
//右下角:东南方
+
map.getBounds().getSouthEast().lng + ' ' + map.getBounds().getSouthEast().lat + ','
//右上角坐标(东北方向)
+
map.getBounds().getNorthEast().lng + ' ' + map.getBounds().getNorthEast().lat + ','
//左上角:西北方
+
map.getBounds().getNorthWest().lng + ' ' + map.getBounds().getNorthWest().lat + ',' +
map.getBounds().getSouthWest().lng + ' ' + map.getBounds().getSouthWest().lat +
leaflet-measure的用法:
var options = {
primaryLengthUnit: 'kilometers',
secondaryLengthUnit: 'miles',
primaryAreaUnit: 'sqmeters',
secondaryAreaUnit: undefined
}
var measureControl = L.control.measure(options);
measureControl.addTo(map);
绘制点:
map.on('click', function (e) {
console.log(e)
L.marker(e.latlng, {
name: "pointer"
}).addTo(map);
})
绘制面:
var points = []
var lines = new L.polyline([])
var tempLines = new L.polygon([])
map.on('click', onClick); //点击地图
map.on('dblclick', onDoubleClick); //双击完成
map.on('mousemove', onMove)
function onClick(e) {
points.push([e.latlng.lat, e.latlng.lng])
lines.addLatLng(e.latlng)
lines.options.name = 'polygon';
map.addLayer(lines)
map.addLayer(L.circle(e.latlng, {
color: '#ff0000',
name: 'polygon',
fillColor: 'ff0000',
fillOpacity: 1
}))
}
function onMove(e) {
if (points.length > 0) {
ls = [points[points.length - 1],
[e.latlng.lat, e.latlng.lng]
]
tempLines.setLatLngs(ls);
tempLines.options.name = 'polygon';
map.addLayer(tempLines);
}
}
function onDoubleClick(e) {
L.polygon([points], {
name: 'polygon'
}).addTo(map)
points = []
lines = new L.polyline([])
}