使用GeoJSON和Leaflet

匿名 (未验证) 提交于 2019-12-03 00:20:01

GeoJSON正在成为许多GIS技术和服务中非常流行的数据格式 - 它非常简单,轻量级,简单明了,Leaflet在处理它方面非常出色。在本例中,您将学习如何创建从GeoJSON对象创建的地图矢量并与其交互


关于GeoJSON

根据http://geojson.org

GeoJSON是用于编码各种地理数据结构的格式。GeoJSON对象可以表示几何,特征或特征的集合。GeoJSON支持以下几何类型:Point,LineString,Polygon,MultiPoint,MultiLineString,MultiPolygon和GeometryCollection。GeoJSON中的功能包含几何对象和附加属性,功能集合表示功能列表。

Leaflet支持上述所有GeoJSON类型,但FeatureFeatureCollections的效果最好,因为它们允许您使用一组属性来描述要素我们甚至可以使用这些属性来设计我们的Leaflet矢量。以下是一个简单的GeoJSON功能的例子:

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

GeoJSON图层

GeoJSON对象通过GeoJSON图层添加到地图中要创建它并将其添加到地图,我们可以使用以下代码:

L.geoJSON(geojsonFeature).addTo(map);

GeoJSON对象也可以作为有效的GeoJSON对象数组传递。

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

或者,我们可以创建一个空的GeoJSON图层并将其分配给一个变量,以便我们可以在稍后添加更多功能。

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

选项

样式

style选项可用于以两种不同方式设置功能。首先,我们可以传递一个简单的对象,以相同的方式对所有路径(折线和多边形)进行样式设置:

var myLines = [{     "type": "LineString",     "coordinates": [[-100, 40], [-105, 45], [-110, 55]] }, {     "type": "LineString",     "coordinates": [[-105, 40], [-110, 45], [-115, 55]] }];  var myStyle = {     "color": "#ff7800",     "weight": 5,     "opacity": 0.65 };  L.geoJSON(myLines, {     style: myStyle }).addTo(map);

或者,我们可以传递一个函数,根据它们的属性设置各个特征的样式。在下面的例子中,我们检查“party”属性并相应地设置我们的多边形样式:

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

点的处理方式与折线和多边形不同。默认情况下,为GeoJSON点绘制简单的标记。在创建GeoJSON图层时,我们可以通过pointToLayerGeoJSON选项对象中传递函数来改变这一点该函数传递一个LatLng并返回一个ILayer的实例,在这种情况下可能是MarkerCircleMarker

这里我们使用pointToLayer选项来创建一个CircleMarker:

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

我们也可以style在这个例子中设置属性 - 如果您在pointToLayer函数内部创建了一个像圆圈一样的矢量图层,Leaflet足够聪明,可以将样式应用于GeoJSON点

onEachFeature

onEachFeature选项是在将每个功能添加到GeoJSON图层之前调用的功能。使用此选项的一个常见原因是在点击某个功能时附加弹出窗口。

function onEachFeature(feature, layer) {     // does this feature have a property named popupContent?     if (feature.properties && feature.properties.popupContent) {         layer.bindPopup(feature.properties.popupContent);     } }  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, {     onEachFeature: onEachFeature }).addTo(map);

过滤

filter选项可用于控制GeoJSON功能的可见性。要做到这一点,我们传递一个函数作为filter选项。这个函数被GeoJSON图层中的每个要素调用,并且通过featurelayer然后,您可以利用该功能属性中的值通过返回true来控制可见性false

在下面的例子中,“Busch Field”不会显示在地图上。

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, {     filter: function(feature, layer) {         return feature.properties.show_on_map;     } }).addTo(map);

代码


易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!