有关Leaflet.js的相关操作

来源：互联网发布：mybatis打印sql log4j 编辑：程序博客网时间：2024/05/18 02:09

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);

0 0