有关Leaflet.js的相关操作

Leaflet的官方网站 http://leafletjs.com/

快速学习Leaflet http://leafletjs.com/examples/quick-start.html

补充一些没有的内容

1.在给定的坐标绘制一条线

var polyline = new L.polyline([
[51.80607748386585, -0.8843994140625],
[51.601428064502886, -0.9118652343749999]], {
    color: 'blue',
    opacity: 0.5,
    weight: 3
}).addTo(map);

2.使用鼠标在地图上任意点击两个两个坐标绘制一条线

var line = [];
    var polyline = L.polyline(line, {
        color: 'blue',
        opacity: 0.5,
        weight: 3,
        clickable: false
    }).addTo(map);

function onMapClick(e) {
        s += "[" + e.latlng.lat + ", " + e.latlng.lng + "]";

        //当点击地图的时候弹出当前点的经纬度。
        popup
            .setLatLng(e.latlng)
            .setContent("You clicked the map at " + e.latlng.toString())
            .openOn(map);
        
        //当点击地图的时候将当前点放入数组，然后设置线的经纬度，达到画线的目的
        line.push([e.latlng.lat, e.latlng.lng]);
        polyline.setLatLngs(line);
}

    //为地图添加click事件
    map.on('click', onMapClick);

绘制多边形也是类似方法

3.在给定的坐标绘制矩形

var rectangle = L.rectangle([
 [51.80607748386585, -0.8843994140625],
 [53.601428064502886, -0.9118652343749999]], {
     color: 'red',
     opacity: 0.5,
     weight: 3
 }).addTo(map);

4.使用鼠标在地图上任意点击两个两个坐标绘制矩形

var bounds = [[54.559322, -5.767822], [56.1210604, -3.021240]];//默认需要给定一个坐标，要不然js会报错
var rectangle = L.rectangle(bounds, { color: "#ff7800", weight: 3 }).addTo(map);

var iCount = 0;
var southWest, northEast;
function onMapClick(e) {
        if (iCount == 1) {
            northEast = e.latlng;
            var bounds = L.latLngBounds(southWest, northEast);
            rectangle.setBounds(bounds);
            iCount = 0;
        }
        else {
            southWest = e.latlng;
            iCount++;
        }

        //当点击地图的时候弹出当前点的经纬度。
        popup
            .setLatLng(e.latlng)
            .setContent("You clicked the map at " + e.latlng.toString())
            .openOn(map);
}
//为地图添加click事件
map.on('click', onMapClick);

转载自：https://blog.csdn.net/esunshine1985/article/details/35212555