leaflet ajax geojson,WebGIS教程 LeafletJS 使用 GeoJSON

使用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);