底图使用mapbox设置样式加载的,由于mapbox我也只会简单的应用在这里就不多说了,本文主要讲的是动态图形的绘制写的比较糙,代码重复太多,仅为展示所用,可以动态绘画点,线,圆,多边形。
一、概述
主要的用的就是事件click、mousedown、mousemove、mouseup事件,Leaflet对绘图好像没有怎么封装,我们要想自己动态绘制主要通过事件自己实现,代码不难,简单易懂。
二、底图加载
var map = L.map('map').setView([51.505, -0.09], 13);
var selectValue = null;
L.tileLayer('https://api.mapbox.com/styles/v1/limogu/cjjjp59s122412rqrk83bafma/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoibGltb2d1IiwiYSI6ImNqampva3g1ZjFtZGQzcXFzb2hxaTJ6bGwifQ.pQ4dC_uJrE2-QhBO972B5A', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
三、绘制图形函数封装
//点绘画
function DrawPoint() {
map.on('click', function (e) {
L.circle(e.latlng, { radius: 100, color: 'red', fillColor: 'red', fillOpacity: 1 }).addTo(map);
})
}
//圆绘画
function DrawCircle() {
var r = 0
var i = null
var tempCircle = new L.circle()
map.dragging.disable();//将mousemove事件移动地图禁用
map.on('mousedown', onmouseDown);
map.on('mouseup', onmouseUp);
map.on('mousemove', onMove)
function onmouseDown(e) {
i = e.latlng
//确定圆心
}
function onMove(e) {
if (i) {
r = L.latLng(e.latlng).distanceTo(i)
tempCircle.setLatLng(i)
tempCircle.setRadius(r)
tempCircle.setStyle({ color: '#ff0000', fillColor: '#ff0000', fillOpacity: 1 })
map.addLayer(tempCircle)
}
}
function onmouse