ソースベクトルをロードする（機能は表示されません）

Question

私はローカルgeojsonファイルからベクトルソースをロードする関数を持っています。

問題は、レイヤーの1つにリモートである必要がありますが、ソースを正しくロードしても機能が表示されず、console.logsが実際にフェッチしたことを示しています...さらに奇妙なことが起こります私は次の行を省略します： "this.layerSwitcherGroup.getLayers（）。push（this.pointsLayer）;"コードから。その行にコメントが付いていると、ローダーは実行されません（その中からconsole.logが表示されません）。

注：私は、サーバ内のファイルが非旧式のものに更新されるまで、crsを一時的に編集しています。 geojsonファイルをダウンロードし、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; 
}, 

ので、私は、私は、リモートローダと間違って何をやっている、非常にわからないんだけど...

Answer 1

だからが欠落したすべて{featureProjection：「EPSG：3857」}を添加した機能が正しくマップビューに投影されるようreadFeaturesに...（それは、地図投影であるため）固定

var features = format.readFeatures(json.data, {featureProjection: 'EPSG:3857'}); 

で

var features = new ol.format.GeoJSON().readFeatures(json.data); 

を置き換えることにより、それがhttps://stackoverflow.com/a/32455939/2340999を通してそれを発見し、機能は現在、適切な位置に表示されています！

ありがとうございます！

Answer 2

変更この

var features = new ol.format.GeoJSON().readFeatures(json.data); 

これまで

var features = (new ol.format.GeoJSON()).readFeatures(json.data); 

Answer 3

ここで使用できる例を使用してこれを実行しました：http://openlayersbook.github.io/ch11-creating-web-map-apps/example-03.html

これが役立つかどうかわかりません。