Leaflet入门：添加点线面并导入GeoJSON数据|Tutorial of Leaflet: Adding Points, Lines, Polygons and Import GeoJSON File

第一幅地图

首先是初始化地图并加载底图，其中setView可以设定视图的中心点和缩放层级。对于底图，可以调用OSM的切片地图，也可以调用Mapbox的切片地图。对于Mapbox的地图，需要申请API key之后才能调用。不同风格的地图可以参考： https://studio.mapbox.com/tilesets/
初始化地图代码如下：
// Init the map
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
// Load the tiled layer
L.tileLayer('https://api.tiles.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.png?access_token={YOUR_TOKEN}', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox.streets',
    accessToken: '{YOUR_TOKEN}',
}).addTo(mymap);
初始化地图后效果如下图所示。
接下来可以分别添加点（Marker）线和面。
// Add markers
var marker = L.marker([51.5, -0.09]).addTo(mymap);
// Add circles
var circle = L.circle([51.508, -0.11], {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5,
    radius: 500
}).addTo(mymap);
// Add polygons
var polygon = L.polygon([
    [51.509, -0.08],
    [51.503, -0.06],
    [51.51, -0.047]
]).addTo(mymap);
效果如下图所示。
对于具体的要素和图层，点击后可以跳出对话框，具体效果如下。
// Add popups for features
marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
circle.bindPopup("I am a circle.");
polygon.bindPopup("I am a polygon.");
// Add popups for layer
var popup = L.popup()
    .setLatLng([51.5, -0.09])
    .setContent("I am a standalone popup.")
    .openOn(mymap);
接下来，如果想要鼠标点击地图则显示具体的经纬度，可以添加事件。鼠标点击地图时执行该事件。
// Add events
function onMapClick(e) {
    popup
        .setLatLng(e.latlng)
        .setContent("You clicked the map at " + e.latlng.toString())
        .openOn(mymap);
mymap.on('click', onMapClick);
全部代码请查看tutorial.js文件。
加载GeoJSON要素
接下来将要介绍加载GeoJSON数据的方法。
GeoJSON是一种常见的GIS数据格式，即利用JSON文件存储地理数据。
我们首先定义一个GeoJSON数据。
// Define geojson features
var geojsonFeature = {
    "type": "Feature",
    "properties": {
        "name": "Coors Field",
        "amenity": "Baseball Stadium",
        "popupContent": "This is where the Rockies play!"
    "geometry": {
        "type": "Point",
        "coordinates": [-104.99404, 39.75621]
接下来加载入地图中。
// Add the geojson features to the map layer
L.geoJSON(geojsonFeature).addTo(mymap2);
显示效果如下图。
类似的，可以添加线和面，并设置其样式。
// Define line features
var myLines = [{
    "type": "LineString",
    "coordinates": [[-100, 40], [-105, 45], [-110, 55]]
    "type": "LineString",
    "coordinates": [[-105, 40], [-110, 45], [-115, 55]]
// Define the style of the lines
var myStyle = {
    "color": "#ff7800",
    "weight": 5,
    "opacity": 0.65
// Add to the layer
L.geoJSON(myLines, {
    style: myStyle
}).addTo(mymap2);
// Define polygon features including styles
var states = [{
    "type": "Feature",
    "properties": {"party": "Republican"},
    "geometry": {
        "type": "Polygon",
        "coordinates": [[
            [-104.05, 48.99],
            [-97.22,  48.98],
            [-96.58,  45.94],
            [-104.03, 45.94],
            [-104.05, 48.99]
    "type": "Feature",
    "properties": {"party": "Democrat"},
    "geometry": {
        "type": "Polygon",
        "coordinates": [[
            [-109.05, 41.00],
            [-102.06, 40.99],
            [-102.03, 36.99],
            [-109.04, 36.99],
            [-109.05, 41.00]
// Add to layer
L.geoJSON(states, {
    style: function(feature) {
        switch (feature.properties.party) {
            case 'Republican': return {color: "#ff0000"};
            case 'Democrat':   return {color: "#0000ff"};
}).addTo(mymap2);
此外，还可以设置一些属性，如显示与否等。全部代码请查看GitHub中tutorial.js文件.
效果如下图：
如果需要调用外部文件数据，而不是构造点线面要素的geoJSON，可以使用AJAX+jQuery进行调用。方法是设置AJAX读取文件格式为json，在回调函数中将数据显示出来。具体代码如下：
// Load data
var loadData = function (){
    $.ajax("data/MegaCities.geojson", {
        dataType: "json",
        success: function(response){
            geojsonFeature = response;
            var geojsonMarkerOptions = {
                radius: 8,
                fillColor: "#ff7800",
                color: "#000",
                weight: 1,
                opacity: 1,
                fillOpacity: 0.8
            L.geoJSON(response, {
                pointToLayer: function (feature, latlng){
                    return L.circleMarker(latlng, geojsonMarkerOptions);
                onEachFeature: onEachFeature
            }).addTo(mymap);
loadData();
最终效果如下图：
所有的代码请参见github: https://github.com/kkyyhh96/WebGIS

其中Leaflet文件夹下的index.html文件。欢迎Star和Fork！
1.搭建简易Web GIS网站：使用GeoServer+PostgreSQL+PostGIS+OpenLayers3

2.使用GeoServer+QGIS发布WMTS服务

3.使用GeoServer+OpenLayers发布和调用WMTS、Vector Tile矢量切片服务

4.Leaflet入门：添加点线面并导入GeoJSON数据
    转载请注明作者和出处——天靖居士：http://www.cnblogs.com/kkyyhh96/
海阔凭鱼跃，天高任鸟飞