leaflet动态线条_LeaFlet学习之动态绘制图形

底图使用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