leaflet入门二–小功能效果

1 移动和缩放

// disable drag and zoom handlers
 
//禁止移动和放大缩小
 
map.dragging.disable();
 
map.touchZoom.disable();
 
map.doubleClickZoom.disable();
 
map.scrollWheelZoom.disable();
 
// disable tap handler, if present.
 
//禁止单击
 
if (map.tap) map.tap.disable();

2 单击事件

var popup = new L.popup();

function onMapClick(e) {

popup

.setLatLng(e.latlng)

.setContent("You clicked the map at " + e.latlng.toString())

.openOn(map);

}

map.on('click', onMapClick);

3 添加缩放控制zoom，在右下角

var zoomControl = L.control.zoom({

position: 'bottomright'

});

map.addControl(zoomControl);

4 添加比例尺

L.control.scale().addTo(map);

5 瓦片图层加载​​​​​​​

L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}',{

maxZoom: 18,

reuseTiles: true

}).addTo(map);

6 添加底图(esri-leaflet插件)

github：https://github.com/esri/esri-leaflet

百度盘下载：http://pan.baidu.com/s/1nt0S2JR​​​​​​​

L.esri.basemapLayer("Streets").addTo(map);//此行可行

//ArcGIS Server Dynamic Map Service, Historic Hurricane Tracks

dynLayer = L.esri.dynamicMapLayer(kaifaqu, {

opacity: 1,

layers: [0, 1]

});

map.setView([30.60, 119.65], 9); //浙江

http://www.cnblogs.com/wangcan/

定位​​​​​​​

function onLocationFound(e) {

var radius = e.accuracy / 2;

L.marker(e.latlng).addTo(map)

.bindPopup("You are within " + radius + " meters from this point").openPopup();

L.circle(e.latlng, radius).addTo(map);

}

map.on('locationfound', onLocationFound);

来自（http://www.cnblogs.com/wangcan/）

需要引入shapefile.js

github:https://github.com/calvinmetcalf/shapefile-js

百度盘（shp.min.js下载后引入即可）：http://pan.baidu.com/s/1hq5MuDe​​​​​​​

//添加shapefile

function addShapeFile() {


    map.setView([34.74161249883172, 18.6328125], 2);

    var geo = L.geoJson({

        features: []

    }, {

        onEachFeature: function popUp(f, l) {

        //console.info(f);

        var out = [];

        if (f.properties) {

            for (var key in f.properties) {

                out.push(key + ": " + f.properties[key]);

            }

            l.bindPopup(out.join("<br />"));

        }

    }
})//.addTo(map);


    //保存到 图层数组

    map_layers.push(geo);

    //此处指向shapefile的zip文件即可

    var base = 'files/bou1_4m.zip';

    shp(base).then(function(data) {

        console.info(data);

        geo.addData(data);

    });

}

转载自：https://blog.csdn.net/black2Girl/article/details/83503563