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

【问题标题】：How load local gpx file in a openLayer map?如何在 openLayer 地图中加载本地 gpx 文件？
【发布时间】：2023-03-13 20:45:02
【问题描述】：

我认为标题很清楚，我正在使用 openLayer 库（v4.6.5），并且在加载页面时尝试在我的地图中加载本地 GPX 文件。在官方文档中，在 GPX 数据示例 (https://openlayers.org/en/latest/examples/gpx.html?q=data) 中，使用 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 选项？提前致谢。

【问题讨论】：

标签： javascript openlayers

【解决方案1】：

解决方案 1

只需使用 OpenLayers 库中提供的拖放组件即可。演示在 https://openlayers.org/en/latest/examples/drag-and-drop.html（拖放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(...) is null”。事实上，我的 GPXfeatures 变量是一个空数组，而 localStorage.getItem('') 包含我的内容文件。我尝试 JSON.stringify/JSON.parse 我的 localStorage Item 但我有同样的问题。
您根本无法“存储 event.features”。您需要将您的功能转换为字符串，然后再使用(new ol.format.GPX()).writeFeatures(event.features) 之类的内容存储它们 PS：您可能需要使用featureProjection、dataProjection 选项（请参阅API openlayers.org/en/latest/apidoc/…）