Leaflet學習筆記-基礎內容

為什么選擇Leaflet

開源,且代碼僅有 31 KB，但它具有開發人員開發在線地圖的大部分功能(80%的功能) 是不是比arcgis要小很多呢

官網：http://leafletjs.com/

劣勢：國內的資源比較少 想要精通那么多學習英語吧

加載天地圖/高德/MapABC

下載實例：https://github.com/htoooth/Leaflet.ChineseTmsProviders

在項目中加入leaflet.ChineseTmsProviders.js文件

這里注意，該文件中包含了三個地圖,如果你僅用了天地圖,那么可以把另外兩個地圖去掉精簡代碼,雖然只是少了很小一部分，我們用Leaflet的目的不就是為了精簡代碼嗎

下面是天地圖的示例：        ↓↓↓↓↓↓↓↓↓↓↓↓

<script type="text/javascript">
//地圖
var normalm = L.tileLayer.chinaProvider('TianDiTu.Normal.Map',{maxZoom:18,minZoom:5}),
    normala = L.tileLayer.chinaProvider('TianDiTu.Normal.Annotion',{maxZoom:18,minZoom:5}),
    imgm = L.tileLayer.chinaProvider('TianDiTu.Satellite.Map',{maxZoom:18,minZoom:5}),
    imga = L.tileLayer.chinaProvider('TianDiTu.Satellite.Annotion',{maxZoom:18,minZoom:5});

var normal = L.layerGroup([normalm,normala]),
    image = L.layerGroup([imgm,imga]);

var baseLayers = {
    "地圖":normal,
    "影像":image,
}

var overlayLayers = {                    //你可以疊加其他的圖層
    
}

var map = L.map("map",{
    center:[31.59, 120.29],
    zoom:12,
    layers:[normal],
    zoomControl:false
});

L.control.layers(baseLayers,overlayLayers).addTo(map);
L.control.zoom({zoomInTitle:'放大', zoomOutTitle:'縮小'}).addTo(map);
</script>

 

Leaflet的幾個Control

放大縮小：

L.control.zoom({ zoomInTitle: '放大', zoomOutTitle: '縮小', position: 'topright' }).addTo(map);

切換地圖：

var baseLayers = {
    "地圖": normal,
    "影像": image,
}

var overlayLayers = {
    "公司": companylayer,
    "景區": spotlayer,
}

L.control.layers(baseLayers, overlayLayers).addTo(map);

比例尺：

L.control.scale().addTo(map);  //比例尺

地圖注釋:

L.control.attribution({ position: 'bottomleft', prefix: 'myMap' }).addTo(map); 

簡單的Events

地圖點擊事件（單擊/雙擊）

你可以把他們分開來寫

map.on('click', showMapPosition);    //點擊地圖
map.on('dblclick',addPoint);             //雙擊地圖

//map.off(....) 關閉該事件

function showMapPosition(e)
{    
    alert(e.latlng);
}

function addPoint(e)
{
    var marker = L.marker([e.latlng.lat, e.latlng.lng]).addTo(map);   
}    

也可以放在一起

map.on('click', function(e) {
    alert(e.latlng);
});

 

轉載請注明原地址：http://i.cnblogs.com/EditPosts.aspx?postid=4919987