Leaflet入門：添加點線面並導入GeoJSON數據|Tutorial of Leaflet: Adding Points, Lines, Polygons and Import GeoJSON F

Web GIS系列：
1.搭建簡易Web GIS網站：使用GeoServer+PostgreSQL+PostGIS+OpenLayers3
2.使用GeoServer+QGIS發佈WMTS服務
3.使用GeoServer+OpenLayers發佈和調用WMTS、Vector Tile矢量切片服務
4.Leaflet入門：添加點線面並導入GeoJSON數據

OpenLayers與Leaflet都是開源WebGIS組件中的佼佼者。以前的WebGIS系列博客中，重點以OpenLayers爲JavaScript庫，得到了廣大GISer的關注。本文將對Leaflet進行詳細介紹。全部代碼都會整理並上傳到GitHub上，歡迎Star和Fork!

本篇文章主要參考了Leaflet官方的入門介紹。
Quick Start
Using GeoJSON

第一幅地圖

首先是初始化地圖並加載底圖，其中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數據