我有一个从本地geojson文件加载矢量源的函数。
问题是,我需要它是远程的其中一个层,但功能从未显示尽管正确加载源和console.logs显示我确实获取它们...加上一个奇怪的事情发生如果我省略行:" this.layerSwitcherGroup.getLayers()。push(this.pointsLayer);"从代码。当注释该行时,加载器永远不会运行(没有console.logs出现在其中)。
注意:我只是暂时编辑crs,直到服务器中的文件将crs更新为非旧版本。当我通过下载和编辑crs部分从具有本地功能的服务器测试geojson文件时,我做了同样的事情。本地功能有效,但远程没有。
addPoints: function() {
this.addPointInteraction();
this.pointsLayer = new ol.layer.Vector({
source: new ol.source.Vector({
/**
* The function is responsible for loading the features and adding them to the source.
* ol.source.Vector sources use a function of this type to load features.
* @param extent - the area to be loaded
* @param resolution - the resolution (map units per pixel)
* @param projection - ol.proj.Projection for the projection as arguments
*
* this (keyword): within the function is bound to the ol.source.Vector it's called from.
*/
loader: function(extent, resolution, projection) {
console.log('vector Loader...');
var url = //can't show the url here;
$.ajax({
url: url,
context: this,
success: function(json) {
console.log('Data: ', json);
json.data.crs = {
"type": "name",
"properties": {
"name": "urn:ogc:def:crs:OGC:1.3:CRS84"
}
};
console.log('changed CRS: ', json);
var features = new ol.format.GeoJSON().readFeatures(json.data);
console.log('this inside loader: ', this);
this.addFeatures(features);
}
});
}
}),
style: this.defaultPointStyleFunction
});
this.layerSwitcherGroup.getLayers().push(this.pointsLayer);
this.pointsLayer.getSource().once("change", function(evt) {
console.log('pointsLayer once');
//console.log('pointsLayer changed: ', this.pointsLayer);
//console.log('pointsLayer source: ', this.pointsLayer.getSource());
console.log('pointsLayer features: ', this.pointsLayer.getSource().getFeatures());
//console.log('current layerSwitcherGroup layers: ', this.layerSwitcherGroup.getLayers());
this.hidePoints();
this.onSetSelection(1);
}, this);
this.currPointId = null;
},
上面列出的每个功能都适用于本地模式,因此我不太确定我在使用远程加载程序时遇到了什么问题...
答案 0 :(得分:2)
所以我所遗漏的是将{featureProjection:'EPSG:3857'}添加到readFeatures,以便在地图视图中正确投影这些特征......(因为那是地图投影)
通过替换
来修复它var features = new ol.format.GeoJSON().readFeatures(json.data);
使用
var features = format.readFeatures(json.data, {featureProjection: 'EPSG:3857'});
通过https://stackoverflow.com/a/32455939/2340999找到它,现在这些功能显示在正确的位置!
感谢您提出的所有建议!
答案 1 :(得分:0)
更改此
var features = new ol.format.GeoJSON().readFeatures(json.data);
到这个
var features = (new ol.format.GeoJSON()).readFeatures(json.data);
答案 2 :(得分:0)
我使用此处提供的示例完成此操作:http://openlayersbook.github.io/ch11-creating-web-map-apps/example-03.html
不确定是否有帮助。