我已经尝试将以下函数和新的矢量图层放入我的代码中。我将 GeoJSON 文件上传到我的 BPlaced 帐户以在我的代码中链接该文件,对吗? Geojson 与网站具有相同的坐标系。此外,代码似乎有效,但我没有看到任何 Geojson。
或者有其他方法可以将 GeoJSON 嵌入到 OpenLayers 中吗?
这是我的代码:
var vectorLayerJSON = new ol.layer.Vector({
source: new ol.source.Vector({
format: new ol.format.GeoJSON(),
url: 'http://kristinab.bplaced.net/ALDI_LIDL_Buffer_KBS_3857.geojson'
}),
style: new ol.style.Style({
image: new ol.style.Circle(({
radius: 20,
fill: new ol.style.Fill({
color: '#ffff00'
})
}))
})
});
最佳答案
欢迎来到 SO :)
我相信有几种方法可以将矢量(geojson)数据添加到 map
1) 使用 geojson 文件 url 加载向量:
var vectorLayerJSON_1 = new ol.source.Vector({
projection : 'EPSG:3857',
url: 'myFolder/yourFile_1.geojson',
format: new ol.format.GeoJSON()
});
2) 从geojson对象生成矢量图层
var geojsonObject = {
'type': 'FeatureCollection',
'crs': {
'type': 'name',
'properties': {
'name': 'EPSG:3857'
}
},
'features': [{
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [0, 0]
}
}, {
'type': 'Feature',
'geometry': {
'type': 'LineString',
'coordinates': [[456, -256], [816, 226]]
}...
var vectorLayerJSON_2 = new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(geojsonObject)
});
OpenLayer 3 示例页面 Geojson Example 上的更详细示例
3) 从ajax读取向量特征
var vectorLayerJSON_3 = new ol.layer.Vector({
renderMode: 'image',
source: new ol.source.Vector({
loader: function() {
$.ajax({
type: 'GET',
url: 'myFolder/yourFile_2.geojson',
context: this
}).done(function(data) {
var format = new ol.format.GeoJSON();
this.addFeatures(format.readFeatures(data));
});
}
}),
style: myDefinedStyle
});
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
vectorLayerJSON_1,
vectorLayerJSON_2,
vectorLayerJSON_3
],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
希望对您有所帮助:)
关于openlayers - 如何将 GeoJSON 导入 OpenLayers?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50211597/