Javascript 如何在openLayer地图中加载本地gpx文件？

我认为标题非常清楚，我正在使用openLayer库（v4.6.5），并且在加载页面时尝试在地图中加载本地GPX文件。在官方文档中，在GPX数据示例（）中，使用url似乎非常简单

var vector = new ol.layer.Vector({
    source: new ol.source.Vector({
      url: 'https://openlayers.org/en/v4.6.5/examples/data/gpx/fells_loop.gpx',
      format: new ol.format.GPX()
    }),
    style: function(feature) {
      return style[feature.getGeometry().getType()];
    }
  });

---

我的问题是，我需要在ol.source.Vector对象中设置什么选项来加载本地GPX文件，而不是设置url选项？提前感谢。

解决方案1

只需使用OpenLayers库中提供的拖放组件即可。演示 （拖放GPX以进行测试）

解决方案2

如果希望/需要手动执行操作，则需要删除URL引用和格式

然后，当您执行拖放（或其他操作）时，您将获得GPS文件内容，然后使用

var GPXfeatures = (new ol.format.GPX()).readFeatures('yourGPXstring', {featureProjection: 'EPSG:3857'})

然后使用以下命令将要素添加到源中：

vector.getSource().addFeatures(GPXfeatures)

---

解决方案1

只需使用OpenLayers库中提供的拖放组件即可。演示 （拖放GPX以进行测试）

解决方案2

如果希望/需要手动执行操作，则需要删除URL引用和格式

然后，当您执行拖放（或其他操作）时，您将获得GPS文件内容，然后使用

var GPXfeatures = (new ol.format.GPX()).readFeatures('yourGPXstring', {featureProjection: 'EPSG:3857'})

然后使用以下命令将要素添加到源中：

vector.getSource().addFeatures(GPXfeatures)

---

谢谢我选择解决方案2。因此，我在dragAndDropInteraction.on函数中使用拖放功能（参见文档中的拖放示例）获得了GPX内容文件，我将event.features存储在本地存储中，但当我刷新页面并用localStorage.getItem（“”）替换“yourGPXstring”时，我的解释器告诉我“TypeError:vector.getSource（…）为null”。实际上，我的GPXfeatures变量是一个空数组，而localStorage.getItem（“”）包含我的内容文件。我尝试JSON.stringify/JSON.parse我的localStorage项，但我有同样的问题。你不能简单地“存储event.features”。在使用类似

（new ol.format.GPX（））.writeFeatures（event.features）

PS:您可能需要使用

featureProjection

，

dataProjection

选项（请参见API）来存储功能之前，需要将其转换为字符串。谢谢！我选择解决方案2。因此，我在dragAndDropInteraction.on函数中使用拖放功能（参见文档中的拖放示例）获得了GPX内容文件，我将event.features存储在本地存储中，但当我刷新页面并用localStorage.getItem（“”）替换“yourGPXstring”时，我的解释器告诉我“TypeError:vector.getSource（…）为null”。实际上，我的GPXfeatures变量是一个空数组，而localStorage.getItem（“”）包含我的内容文件。我尝试JSON.stringify/JSON.parse我的localStorage项，但我有同样的问题。你不能简单地“存储event.features”。在使用类似

（new ol.format.GPX（））.writeFeatures（event.features）的内容存储功能之前，您需要将功能转换为字符串。PS：您可能需要使用
featureProjection
，
dataProjection
选项（请参见API）