使用GeoJSON和Leaflet

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

查看本实例

关于GeoJSON

根据GeJJSON规范（RFC 7946）：GeoJSON是一种对各种地理数据结构进行编码的格式。 GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。 GeoJSON里的特征包含一个几何对象和其他属性， 特征集合表示一系列特征。

Leaflet支持上面所有的GeoJSON 类型，但是特征和特征集执行得最好，因为它们允许您用一组属性描述特性。 我们甚至可以使用这些属性来设计我们的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选项

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涂层时，我们可以通过pointToLayer在GeoJSON选项对象中传递函数来改变这一点。该函数传递一个LatLng并返回一个ILayer的实例，在这种情况下可能是Marker或CircleMarker。

我们也可以使用pointToLayer选项创建了一个圆形标记:

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点(pointToLayer)。

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）

该filter选项可用于控制GeoJSON功能的可见性。要做到这一点，我们通过一个函数设置filter选项。这个函数被GeoJSON图层中的每个要素调用，并且通过feature和layer。然后，您可以利用该功能属性中的值通过返回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);

查看完整实例。