javascript - 如何在 openLayer map 中加载本地 gpx 文件？

Question

我认为标题很清楚，我正在使用 openLayer 库(v4.6.5)，并且我试图在加载页面时在 map 中加载本地 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 选项？提前致谢。

Answer 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)