Leaflet入門：新增點線面並匯入GeoJSON資料|Tutorial of Leaflet: Adding Points, Lines, Polygons and Import GeoJSON File

天靖居士發表於2019-02-16
JSONGoImport

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);

初始化地圖後效果如下圖所示。

Leaflet入門：新增點線面並匯入GeoJSON資料|Tutorial of Leaflet: Adding Points, Lines, Polygons and Import GeoJSON File

接下來可以分別新增點（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);

效果如下圖所示。

Leaflet入門：新增點線面並匯入GeoJSON資料|Tutorial of Leaflet: Adding Points, Lines, Polygons and Import GeoJSON File

對於具體的要素和圖層，點選後可以跳出對話方塊，具體效果如下。

// 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);

Leaflet入門：新增點線面並匯入GeoJSON資料|Tutorial of Leaflet: Adding Points, Lines, Polygons and Import GeoJSON File

接下來，如果想要滑鼠點選地圖則顯示具體的經緯度，可以新增事件。滑鼠點選地圖時執行該事件。

// Add events
function onMapClick(e) {
    popup
        .setLatLng(e.latlng)
        .setContent("You clicked the map at " + e.latlng.toString())
        .openOn(mymap);
}

mymap.on('click', onMapClick);

Leaflet入門：新增點線面並匯入GeoJSON資料|Tutorial of Leaflet: Adding Points, Lines, Polygons and Import GeoJSON File

全部程式碼請檢視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);

顯示效果如下圖。

Leaflet入門：新增點線面並匯入GeoJSON資料|Tutorial of Leaflet: Adding Points, Lines, Polygons and Import GeoJSON File

類似的，可以新增線和麵，並設定其樣式。

// 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檔案.

效果如下圖：

Leaflet入門：新增點線面並匯入GeoJSON資料|Tutorial of Leaflet: Adding Points, Lines, Polygons and Import GeoJSON File

如果需要呼叫外部檔案資料，而不是構造點線面要素的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();

最終效果如下圖：

Leaflet入門：新增點線面並匯入GeoJSON資料|Tutorial of Leaflet: Adding Points, Lines, Polygons and Import GeoJSON File

所有的程式碼請參見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資料

相關文章