Phonegap - 无法访问存储在数据目录中的 GeoJson

Question

我正在尝试使用 OpenLayers 3 将可更新的矢量图层合并到我的 phonegap 构建中。它将检查服务器的更新并在必要时下载新文件。

我可以下载文件并将其存储没有问题（我在其他应用程序中对非 geojson 文件类型使用相同的代码没有问题）。我已经使用以下方法验证了它的存在：

var resortURL = cordova.file.dataDirectory + "resorts.geojson";
window.resolveLocalFileSystemURL(resortURL,function(e){
   console.log("located");
},function(e){
   console.log("missing");
});

当我使用 OL 访问文件时：

var resortSource = new ol.source.Vector({
    url: resortURL,
    format: new ol.format.GeoJSON()
});
var resortBoundary = new ol.layer.Vector({
    source: resortSource
});
map.addLayer(resortBoundary);

上述方法未能将任何数据添加到地图，尽管它确实添加了图层。我更进一步，将 geojson 文件直接添加到资产 www 文件夹 pre-build 并使用：

url: "json/resorts.geojson"

从资产位置请求文件完全符合预期。问题是当我将它下载到 Android 上的数据目录后尝试访问它，然后尝试通过那里访问。我错过了什么吗？我一直在尝试一切，试图让它发挥作用。

Answer 1

考虑使用矢量加载器函数来处理获取您的 geojson 文件。我有很多缓存问题，没有使用矢量加载函数来获取 geojson 文件，下面的方法消除了这个问题。例如：

var utils = {
    refreshGeoJson: function(source,url) {
      var now = Date.now();
      if (typeof url == 'undefined') {
        url = source.getUrl();
      }
      url += '?t=' + now; //Add current time to prevent browser caching
      console.info('refreshGeoJson url: ' + url);
          this.getJson(url).when({
        ready: function(response) {
          var format = new ol.format.GeoJSON();
          var features = format.readFeatures(response, {
            featureProjection: 'EPSG:3857'
          });
          console.dir(features);
          console.log(features.length);
          source.addFeatures(features);
          source.changed();
        }
         });
},
    getJson: function(url) {
          var xhr = new XMLHttpRequest(),
          when = {},
          onload = function() {
        console.log('xhr.status onload() ' + xhr.status);
        if (xhr.status === 200) {
         console.log('getJson() xhr: ');
         console.dir(xhr);
         console.log('getJson() xhr.response: ');
         console.dir(xhr.response);
                  when.ready.call(undefined, JSON.parse(xhr.response));
            }
        if (xhr.status === 404) {
          console.log('file not found! url: ' + url);
          alert("file not found!\n" + url);
        }
          },
          onerror = function() {
            console.info('Cannot XHR ' + JSON.stringify(url));
          };
      //console.log('getJson() - retrieve file url: ' + url);
          xhr.open('GET', url, true);
          xhr.setRequestHeader('cache-control', 'no-store');
          xhr.onload = onload;
          xhr.onerror = onerror;
          xhr.send(null);
          return {
        when: function(obj) { when.ready = obj.ready; }
        };
    }
};

var vectorLoader = function(extent, resolution, projection) {
  utils.refreshGeoJson(this);
}

var resortSource = new ol.source.Vector({
    url: /path-to/myFile.geojson',
    format: new ol.format.GeoJSON({
       defaultDataProjection :'EPSG:3857' 
    }),
    loader: vectorLoader,
    strategy: ol.loadingstrategy.all
  });

如果您的 geojson 文件存在语法问题，它将在此处失败when.ready.call(undefined, JSON.parse(xhr.response));。这使您可以更好地控制事物，而不仅仅是使用没有矢量加载器功能的 url 属性。