在 Leaflet 中使用 GeoJSON

GeoJSON 是一种在许多 GIS 技术和服务中非常流行的数据格式——它简单、轻量级、直观，而 Leaflet 在处理它方面相当出色。在本示例中，您将学习如何从 GeoJSON 对象创建地图矢量并与之交互。

关于 GeoJSON

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 选项可用于以两种不同的方式设置要素样式。首先，我们可以传递一个简单的对象，该对象以相同的方式设置所有路径（折线和多边形）的样式

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 图层时在 GeoJSON 选项对象中传递 pointToLayer 函数来更改这一点。此函数接收一个 LatLng 并应返回 ILayer 的实例，在本例中可能是 Marker 或 CircleMarker。

在这里，我们使用 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 属性——Leaflet 足够智能，如果您在 pointToLayer 函数中创建一个像圆圈这样的矢量图层，它会将样式应用于 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 图层中的每个要素调用，并接收 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);

查看示例页面以详细了解 GeoJSON 图层可以做什么。