【WebGIS】leaflet入门-使用GeoJSON

介绍

GeoJSON是一种非常流行的地理数据存储格式，他以轻量级、便于传播而流行。相比较动则数个文件的shapefile文件，geojson轻便太多了（当然shapefile文件的很多功能是GeoJSON）不能比的。
在leaflet中，对GeoJSON也有着非常好的适配，我们可以直接解析GeoJSON格式的地理数据，这为我们的开发提供了很大的遍历，所以这一部分是非常重要的。
这里再次提供官方的文档和GeoJSON的官方定义文档
leaflet官方：leaflet.geoJSON
GeoJSON定义：GeoJSON

GeoJSON数据

那么GeoJSON数据到底是什么样的呢？相比大家对json数据有所了解，是由大括号、中括号和键值对所组成的一种数据格式，GeoJSON当然也不例外，下面现来举个例子

{
    "type": "Feature",
    "properties": {
        "name": "Coors Field",
        "amenity": "Baseball Stadium",
        "popupContent": "This is where the Rockies play!"
    },
    "geometry": {
        "type": "Point",
        "coordinates": [-104.99404, 39.75621]
    }
};

这就是一个Feature类型的GeoJSON数据，包括了她的类型（type）、属性（properties）和几何形状（geometry）再细分下去，逐渐组成一个Feature，拥有这些数据，就可以解析并得到一个拥有属性和几何形状的Feature了。
更多的GeoJSON的数据类型这里就不再赘述，大家可以自行搜索或者查阅上面提供的GeoJSON的官方定义文档。

L.geoJSON的应用

leaflet支持GeoJSON的所有格式，但是对Feature和FeatureCollections的兼容性是最好的。如果你还不知道这俩是什么，那也没有关系。Feature的结构上面已经展示了，是一个包括属性和几何的要素。FeatureCollections呢，就是一个包含多个要素的要素集。

L.geoJSON提供了直接解析这种数据结构的功能，我们先尝试将上面的Feature展示在地图上。

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]
    }
};

L.geoJSON(geojsonFeature).addTo(map)	

效果图如下

当你没有为点要素指定一个marker样式的时候，就会使用这个默认的样式了。

我们还可以以Array的形式来添加GeoJSON数据，比如下面

var myLines = [{
    "type": "LineString",
    "coordinates": [[-100, 40], [-105, 45], [-110, 55]]
}, {
    "type": "LineString",
    "coordinates": [[-105, 40], [-110, 45], [-115, 55]]
}];

L.geoJSON(myLines).addTo(map)

效果图如下

这其实不难理解，毕竟中括号也属于Json数据的一部分。
除此之外，你还可以创建一个geoJSON的空图层，然后再在后面添加GeoJSON格式的数据进去

var myLayer=L.geoJSON().addTo(map)
myLayer.addData(geojsonFeature)

或许你已经发现了GeoJSON数据只是定义了地理数据的基本信息（属性或者几何）但是并没有她的样式信息，所以你再加载一个GeoJSON数据时，leaflet会使用一个默认的样式将其渲染到地图上。若是想要自定义图像的样式，就需要用到geoJSON的一个选项：style

var style={
	"color":"#ff7800,
	"weight":5,
	"opcacity":0.65
}

L.geoJSON(myLine,{style:style})

我们还可以通过要素的属性来筛选定义不同属性的要素赋予给不同的样式

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]
                    ]]
                }
            }
        ]

        L.geoJSON(states,{
            style:function(feature){
                switch(feature.properties.party){
                    case "Republican":return{color:"#ff0000"};
                    case "Democrat":return{color:"#0000ff"};
                }
            }
        }).addTo(map)

pointToLayer

点要素是和线要素和面要素不一样的要素，我们可以通过pointToLayer这个函数来对点要素的样式进行定义

 var geojsonMarkerOptions = {
     radius: 8,
     fillColor: "#ff7800",
     color: "#000",
     weight: 1,
     opacity: 1,
     fillOpacity: 0.8
 };
L.geoJSON(geojsonFeature, {
    pointToLayer: function (feature, latlng) {
        return L.circleMarker(latlng, geojsonMarkerOptions)
    }
}).addTo(map)

效果如下：

这样就可以为point要素定义一些marker的样式

onEachFeature

onEachFeatue函数可以让我们遍历要素集中的所有要素，并且为所有要素赋予一些属性或进行一些操作

//为所有要素添加popup为他们自身的属性
 function onEachFeature(feature, layer) {
     // does this feature have a property named popupContent?
     if (feature.properties && feature.properties.popupContent) {
         layer.bindPopup(feature.properties.popupContent);
     }
 }
 //添加geoJSON图层到地图上
L.geoJSON(geojsonFeature,{
   onEachFeature:onEachFeature
}).addTo(map)

效果如下：

fliter

fliter可以让我们筛选要素，选择特定的要素才显示在地图上

var someFeatures = [{
    "type": "Feature",
    "properties": {
        "name": "Coors Field",
        "show_on_map": true
    },
    "geometry": {
        "type": "Point",
        "coordinates": [-104.99404, 39.75621]
    }
}, {
    "type": "Feature",
    "properties": {
        "name": "Busch Field",
        "show_on_map": false
    },
    "geometry": {
        "type": "Point",
        "coordinates": [-104.98404, 39.74621]
    }
}];

L.geoJSON(someFeatures,{
    fliter:function(feature,layer){
        return feature.properties.show_on_map;
    }
}).addTo(map)

这里只有show_on_map属性为true的要素才能显示在地图上

结语

本文介绍了geoJSON在leaflet中的使用方式，我们可以给geoJSON加载的要素通过各种方法添加样式和方法。