Leaflet study notes-basic content

Why Choose Leaflet

Open source, and the code only has a KB, but it has most of the features developers develop online maps (80% of the functionality) is not much smaller than ArcGIS

Official website:http://leafletjs.com/

Disadvantage: The domestic resources are less want to master so much learning English bar

Load Day Map//MAPABC

Download Example: Https://github.com/htoooth/Leaflet.ChineseTmsProviders

Add leaflet to the project. Chinesetmsproviders.js file

Note here that the file contains three maps, if you use only the day map, you can take the other two maps to remove the refinement code, although only a small part, we use leaflet is not to simplify the code?

Here is an example of a world map: ↓↓↓↓↓↓↓↓↓↓↓↓

<script type= "Text/javascript" >varNormalm = 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});varnormal =L.layergroup ([Normalm,normala]), image=L.layergroup ([Imgm,imga]);varBaselayers = {    Map: Normal,Image: Image,}varOverlaylayers ={//You can overlay other layers}varMap = 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:' Zoom in ', Zoomouttitle: ' Zoom Out '}). AddTo (map);</script>

Several control of leaflet

Zoom in and Zoom out:

L.control.zoom ({zoomintitle: ' Zoom in ', Zoomouttitle: ' Zoom Out ', Position: ' TopRight '}). AddTo (map);

Toggle Map:

var baselayers = {    "map": normal,    "image": Image,}var overlaylayers = {    "Company": Companylayer,    "scenic": Spotlayer,}l.control.layers (Baselayers, overlaylayers). AddTo (map);

Scale:

L.control.scale (). addto (map);  // scale

Map notes:

The Simple events

Map Click event (click/double)

You can write them apart.

Map.on (' click ', showmapposition);    // Click on map map.on (' DblClick ', addpoint);             // Double-click map // Map.off (...) to close the event function Showmapposition (e) {        alert (E.LATLNG);} function Addpoint (e) {    var marker = L.marker ([E.latlng.lat, E.LATLNG.LNG]). AddTo (map);   }    

can also be put together

function (e) {    alert (E.LATLNG);});

Leaflet study notes-basic content