Leaflet Usage Introduction

Leaflet

Chapter I. Overview

Leaflet is a leading open source JavaScript library for building interactive maps that work well for mobile devices. The code size is only 33KB, and it has most of the features of developing online maps. Leaflet design adheres to the idea of simplicity, high performance and usability, enabling efficient operation on all major desktop and mobile platforms. Supports plug-in extensions with beautiful, easy-to-use API documentation and a simple, readable source code.

Official website Http://leafletjs.com/index.html, through the official website can download leaflet.

Chapter II leaflet version and file 2.1 introduction

Version	Describe
Leaflet 0.7.7	Stable run version, released on November 18, 2013, last updated October 26, 2015
Leaflet 1.0.0-rc1	As a candidate for version 1.0, posted on April 18, 2016
Leaflet 1.0-dev	A in-progress version on the main branch

2.2 File Description

Add the following code to the HTML code page:

Leaflet.js: is a compressed file of JavaScript code

Leaflet-src.js: is a readable, uncompressed JavaScript code that can sometimes help debug

LEAFLET.CSS: is a cascading style file for leaflet

Images: The picture folder that contains the LEAFLET.CSS reference must be in the same directory as the Leaflet.css file.

Also, if you want to download the full source code, including unit tests, debug files, generate scripts and so on, you can load them from the GitHub library.

2.3 Generating Leaflet

The leaflet build system provides technical support from the node. JS platform. First, you need to download and install node, and then run the following command:

NPM install–g Jake

NPM Install

After installation, run the Jake that is contained in the leaflet directory. Jake will merge and compress the leaflet source files and save the generated files to the destination folder.

Chapter III leaflet using 3.1 Quick Start

Add the following code to the HTML code page:

Add a div to the body, not the DIV set ID, for example, the ID is "MapID", not the div set width, height and other attributes.

Ensure that after the page elements are fully loaded, add the following code:

3.2 Layer3.2.1 Tile Layer

You can choose the tile provider you need, but it is recommended to use Mapbox (looks pretty).

3.2.2 WMS Layer

3.2.3 TMS Layer

Leaflet does not have explicit support for TMS services, but the tile structure is the same as the general L.tilelayer organization model, so the rendering of TMS services is almost less cumbersome.

3.2.4 Access to ArcGIS MapServer

The service path for ArcGIS MapServer:

Chinese map:

Http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer

English map:

Https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer

Tile request rule:/tile/{z}/{y}/{x}

The specific code is as follows:

3.3 API Documentation 3.3.1 Dom Utility3.3.1.1domutil

L Create (a,b,c?)

Creates an element, sets the class name of the element, and attaches the element at the end position;

L

The fourth chapter FAQ4.1 hides the lower left corner leaflet

In the Leaflet.js file, the following code snippet exists:

L.control.attribution=l.control.extend ({

options:{

Position: ' BottomRight ',

Prefix: ' <a href= "http://leafletjs.com" title= "a JS library for interactive maps" >Leaflet</a> "

},

});

Therefore, when you construct the map control, set the Options property Attributioncontrol to False.

4.2 Hide the default zoom tool

When constructing the map control, set the Options property Zoomcontrol to False.

4.3 Custom Zoom Tool

is complete:

1. Custom Level

2. Select the toggle level to update the Zoom toolbar level display state

3. Click Update Zoom toolbar level display status

Pending Completion:

1. Drag and drop levels, Update Zoom toolbar level display status

4.4 Referencing the leaflet plugin

The fifth chapter expands 5.1 commonly used coordinates

Place name	Latitude and longitude coordinates	remarks
Beijing Tian ' an gate	Latitude 39 54 Sub 27 sec, longitude 116 degree 23 Sub 17 seconds	Beijing Standard Center coordinate point
Chongqing	Latitude 29 degrees 34 minutes, East longitude 106 degrees 33 min	Chongqing Standard Center coordinate point

5.2 OpenStreetMap

OSM, an online map collaboration program, aims to create a world map of content that is free and editable for all. This map and Baidu Encyclopedia, the same as Wikipedia is a national map.

Founded in July 2004, OpenStreetMap Foundation was established in April 2006 to encourage the development and export of free geographic data.

5.3 Mapbox

is a website that can create and customize personalized maps for free. Founded 3 years without investors a penny, no sales staff. Use the tutorial reference http://blog.csdn.net/jwdstef/article/details/38760111. Similar sites include Arcgisonline,cartodb, map sinks, and Google Fusion Tables.

5.3.1 to create your own map

First apply for an account, after creation, you can see the projects and data two options. You can see your own list of projects in projects. Click +create Project to enter the design map interface to see the style, data, and project three main design tabs, plus the profile, search, and saved options, which mainly cover style, data, and project three tabs.

Style	Color	Colors of different features (streets, buildings, green areas, water bodies, land) are set through the palette. You can also set your own map color by mapbox a predefined color scheme.
	Baselayer	Set the map type, a total of three kinds, general electronic maps, topographic maps, satellite imagery
	Language	Set host language, four selectable, localized, English, French, Spanish
Data	Browse	Explore maps and features and layers
	Marker	Making point-like features
	Line	Making linear features
	Polygon	Making Polygon Features
	Menu	Features and layers lists, managing features and Layers
Project	Info	Get JSON and KML format data for features; MapID (need to work with Mapbox JavaScript API); Share links and embed web links
	Settings	Set the name and description of the project
	Advanced	Features include: Saving the current map location; Public API for Switch engineering

5.3.2 Share Map

L MAP ID: Need to be used with Mapbox developer tools.

L Share: Directly generates a link to a Web page and directly accesses the created map via a link.

5.4 WMS

The Web Map Service is a popular way of publishing maps through professional GIS software, making maps using data with geospatial location information, and being able to return maps based on user requests (including raster forms such as png,gif,jpeg or SVG and web CGM, and other vector forms). There are three important operations: Getcapabilities,getmap,getfeatureinfo.

Getcapabilities returns the service-level metadata; Getmap returns a map image; Getfeatureinfo returns information about some of the special features displayed on the map.

5.5 TMS

That is, the tile map service abbreviation, is relative to the map slicing standard, "National Geographic Information Public Service platform electronic map Data Standard" (Trial draft-20100730 Edition) Section 6.4 stipulates the map tile data organization way, namely uses the data set, the layer, the row directory structure description, The organization logic of the Directory is as follows:

Map slicing standards include TMS and WMTS,TMS and WMTS differences are mainly in the protocol, Tile organization mode.

TMS is purely restful, while Wmts can have kvp, SOAP, and restful.

Leaflet Usage Introduction