Yuhao Kang GISer

Menu

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

Web GIS系列:
1.[搭建简易Web GIS网站:使用GeoServer+PostgreSQL+PostGIS+OpenLayers3](http://www.cnblogs.com/kkyyhh96/p/6379515.html)
2.[使用GeoServer+QGIS发布WMTS服务](http://www.cnblogs.com/kkyyhh96/p/7808905.html)
3.[使用GeoServer+OpenLayers发布和调用WMTS、Vector Tile矢量切片服务](http://www.cnblogs.com/kkyyhh96/p/7884694.html)
4.[Leaflet入门:添加点线面并导入GeoJSON数据](https://www.cnblogs.com/kkyyhh96/p/10386655.html)

OpenLayers与Leaflet都是开源WebGIS组件中的佼佼者。之前的WebGIS系列博客中,重点以OpenLayers为JavaScript库,获得了广大GISer的关注。本文将对Leaflet进行详细介绍。所有代码都会整理并上传到GitHub上,欢迎Star和Fork!

本篇文章主要参考了Leaflet官方的入门介绍。
[Quick Start](https://leafletjs.com/examples/quick-start/)
[Using GeoJSON](https://leafletjs.com/examples/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 © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox',
maxZoom: 18,
id: 'mapbox.streets',
accessToken: '{YOUR_TOKEN}',
}).addTo(mymap);
```

初始化地图后效果如下图所示。

![](https://img2018.cnblogs.com/blog/939319/201902/939319-20190216025903289-574922617.png)

接下来可以分别添加点(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);
```
效果如下图所示。

![](https://img2018.cnblogs.com/blog/939319/201902/939319-20190216025916291-1194443463.png)

对于具体的要素和图层,点击后可以跳出对话框,具体效果如下。
```
// Add popups for features
marker.bindPopup("Hello world!
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);
```

![](https://img2018.cnblogs.com/blog/939319/201902/939319-20190216025953261-251259280.png)

接下来,如果想要鼠标点击地图则显示具体的经纬度,可以添加事件。鼠标点击地图时执行该事件。
```
// Add events
function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent("You clicked the map at " + e.latlng.toString())
.openOn(mymap);
}

mymap.on('click', onMapClick);
```

![](https://img2018.cnblogs.com/blog/939319/201902/939319-20190216030003268-723718697.png)

全部代码请查看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);
```
显示效果如下图。

![](https://img2018.cnblogs.com/blog/939319/201902/939319-20190216030014657-1940077598.png)

类似的,可以添加线和面,并设置其样式。
```
// 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文件.

效果如下图:

![](https://img2018.cnblogs.com/blog/939319/201902/939319-20190216030027904-694085226.png)

如果需要调用外部文件数据,而不是构造点线面要素的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();
```
最终效果如下图:

![](https://img2018.cnblogs.com/blog/939319/201902/939319-20190216030257329-275819645.png)

所有的代码请参见github: https://github.com/kkyyhh96/WebGIS
其中Leaflet文件夹下的index.html文件。欢迎Star和Fork!

1.[搭建简易Web GIS网站:使用GeoServer+PostgreSQL+PostGIS+OpenLayers3](http://www.cnblogs.com/kkyyhh96/p/6379515.html)
2.[使用GeoServer+QGIS发布WMTS服务](http://www.cnblogs.com/kkyyhh96/p/7808905.html)
3.[使用GeoServer+OpenLayers发布和调用WMTS、Vector Tile矢量切片服务](http://www.cnblogs.com/kkyyhh96/p/7884694.html)
4.[Leaflet入门:添加点线面并导入GeoJSON数据](https://www.cnblogs.com/kkyyhh96/p/10386655.html)

— Written in
— Tags: