Using GeoJSON with Leaflet
GeoJSON正在成为许多GIS技术和服务中的一种非常流行的数据格式——它简单、轻量级、直观,Leaflet对它处理很好。在这个例子中,您将学习如何使用GeoJSON对象创建和交互地图向量。
https://leafletjs.com/examples/geojson/example.html
关于GeoJSON
根据GeoJSON Specification (RFC 7946):
GeoJSON是一种用于编码各种地理数据结构的格式[…]。GeoJSON对象可以表达空间区域(几何图形)、空间有边界的实体(要素)或要素列表(要素集合)。
这种格式广义上来说就是一种地理空间数据。凡是具有地理空间特性的,不管它是否是真实的物体都可以算作一种Feachture。GeoJSON 并不是新东西,这套标准来源于现有的开放地理信息系统标准,并且已经简化,使得其更适合用户web应用程序的开发。
GeoJSON包含7种定义在SFSQL(OpenGIS Simple Features Implementation Specification)的地理类型(如上)。
GeoJSON同样支持Featrue 和 FeatureCollection类型。Feature类型是包含一个上述其中7种类型的地理空间对象和额外的成员。而FeatureCollection 则是Feature类型的数组。自2008年首次发布以来[GJ2008], GeoJSON格式规范在流行中稳步增长。它广泛应用于JavaScript web映射库、基于json的文档数据库和web api。
- Point 点
- LineString 线段
- Polygon 多边形
- MultiPoint 多个点
- MultiLineString 多个线段
- MultiPolygon 多个多边形
- GeometryCollection 几何集合
一个Feature 的例子
{
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [102.0, 0.5]
},
"properties": {
"prop0": "value0"
}
}, {
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [
[102.0, 0.0],
[103.0, 1.0],
[104.0, 0.0],
[105.0, 1.0]
]
},
"properties": {
"prop0": "value0",
"prop1": 0.0
}
}, {
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
[100.0, 0.0],
[101.0, 0.0],
[101.0, 1.0],
[100.0, 1.0],
[100.0, 0.0]
]
]
},
"properties": {
"prop0": "value0",
"prop1": {
"this": "that"
}
}
}]
}
不赘述了,详见
https://cloud.tencent.com/developer/article/1030071
https://blog.csdn.net/weixin_33929309/article/details/88688010
http://geojson.io
GeoJSON支持以下几何类型:Point、LineString、Polygon、MultiPoint、MultiLineString、MultiPolygon和GeometryCollection。GeoJSON中的特性包含一个几何对象、其他属性、要素集合。
Leaflet支持上面所有的GeoJSON类型。但是Features与FeatureCollections表现的最好,因为他们支持你使用一系列的属性去定义特性。
The GeoJSON layer
GeoJSON对象可以使用GeoJSON layer增加到map上,创建并add到map,我们可以使用
L.geoJSON(geojsonFeature).addTo(map);
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);
https://leafletjs.com/examples/geojson/