Leaflet初体验0x3：GeoJSON
目录
目录
许多GIS技术和服务中，GeoJSON正成为一种非常流行的数据格式——它简单、轻量级、直接，并且用Leaflet可以很好处理。
什么是GeoJSON ？
GeoJSON是一种用于编码各种地理数据结构的格式。GeoJSON对象可以表示空间区域(几何图形)、空间有界实体(要素)或多个要素(要素集)。GeoJSON支持以下类型:Point、LineString、Polygon、MultiPoint、MultiLineString、MultiPolygon和GeometryCollection。GeoJSON中的要素包含一个几何对象和其他属性，一个要素集包含多个要素。
一个简单的 GeoJSON要素
//创建要素
var geojsonFeature = {
"type":"Feature",
"properties":{
"name":"lgd",
"amenity":"教育",
"popupContent":"I'm here!"
},
"geometry":{
"type":"Point",
"coordinates":[121.655045,42.045468]
}
};
//添加要素
L.geoJSON(geojsonFeature).addTo(mymap);
GeoJSON图层
GeoJSON对象通过GeoJSON图层添加到地图中。
L.geoJSON(geojsonFeature).addTo(mymap);
var myLines = [{
"type":"LineString",
"coordinates":[[121.648736,42.04985],[121.670408,42.051316],[121.67927,42.052097]]
},{
"type":"LineString",
"coordinates":[[121.639042,42.041397],[121.642363,42.031046],[121.644541,42.024845]]
}];
var myLayer = L.geoJSON().addTo(mymap);
myLayer.addData(myLines);
其他设置
Style（样式）
简单方法设置样式
//定义样式
var myStyle = {
"color":"#ff7800",
"weight":5,
"opacity":0.65
};
//添加到图层
L.geoJSON(myLines,{
style:myStyle
}).addTo(mymap);
函数方法设置样式
//定义区域
var campuses = [{
"type":"Feature",
"properties":{"campus":"南校区"},
"geometry":{
"type":"Polygon",
"coordinates":[[
[121.654916,42.022662],
[121.659894,42.024543],
[121.66352,42.019298],
[121.66337,42.018844],
[121.656439,42.016205],
[121.655511,42.017497],
[121.657909,42.018389]
]]
}
},{
"type":"Feature",
"properties":{"campus":"北校区"},
"geometry":{
"type":"Polygon",
"coordinates":[[
[121.649004,42.049691],
[121.661643,42.050504],
[121.662866,42.047723],
[121.659025,42.046879],
[121.658778,42.045437],
[121.657641,42.045452],
[121.657416,42.043317],
[121.651193,42.042688]
]]
}
}];
//添加到图层
L.geoJSON(campuses,{
style:function(feature){
switch(feature.properties.campus){
case '南校区': return {color:"#ff0000"};
case '北校区': return {color:"#0000ff"};
}
}
}).addTo(mymap);
pointToLayer
点的处理与折线和多边形不同。默认情况下，为GeoJSON点绘制简单的标记。在创建GeoJSON层时，我们可以通过在GeoJSON选项对象中传递一个pointToLayer函数来改变样式。这个函数传递一个LatLng，返回一个ILayer实例，这样看起来就像是标记一样。
//定义POI
var myPOIs =[{
"type":"Feature",
"properties":{
"name":"POI1"
},
"geometry":{
"type":"Point",
"coordinates":[121.642084,42.038138]
}
},{
"type":"Feature",
"properties":{
"name":"POI2"
},
"geometry":{
"type":"Point",
"coordinates":[121.659422,42.040242]
}
}]
//定义标记样式
var geojsonMakerOptions = {
radius:8,
fillColor:"#ff7800",
color:"#000",
weight:1,
opacity:1,
fillOpacity:0.8
};
//应用样式
L.geoJSON(myPOIs,{
pointToLayer:function(feature,latlng){
return L.circleMarker(latlng,geojsonMakerOptions);
}
}).addTo(mymap);
onEachFeature
onEachFeature选项是在将每个要素添加到GeoJSON层之前对其进行调用的函数。通常使用这个方法给要素绑定一个点击时弹窗事件。
//创建要素
var geojsonFeature = {
"type":"Feature",
"properties":{
"name":"lgd",
"amenity":"教育",
"popupContent":"I'm here!"
},
"geometry":{
"type":"Point",
"coordinates":[121.655045,42.045468]
}
};
//使用onEachfeature函数
L.geoJSON(geojsonFeature,{
onEachFeature:onEachFeature
}).addTo(mymap);
filter
筛选器选项可用于控制GeoJSON特性的可见性。为此，我们将使用一个函数作为筛选器选项传递。将为GeoJSON层中的每个要素调用此函数，并传递该要素和图层。然后可以使用要素属性中的值通过返回true或false来控制可见性。
//给前面定义的POI增加属性
var myPOIs =[{
"type":"Feature",
"properties":{
"name":"POI1",
"show_on_map":true
},
"geometry":{
"type":"Point",
"coordinates":[121.642084,42.038138]
}
},{
"type":"Feature",
"properties":{
"name":"POI2",
"show_on_map":false
},
"geometry":{
"type":"Point",
"coordinates":[121.659422,42.040242]
}
}];
//使用filter
L.geoJSON(myPOIs,{
filter:function(feature,layer){
return feature.properties.show_on_map;
}
}).addTo(mymap);
完整代码：
待更新
转载自：https://blog.csdn.net/funkstill/article/details/85775061
