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

问题描述

我认为标题不是很清楚，我正在使用openLayer库(v4.6.5)，并且试图在加载页面时在地图中加载本地GPX文件.在官方文档的GPX数据示例中( https://openlayers. org/zh-CN/latest/examples/gpx.html?q = data )似乎很容易处理网址.

I think than the title is pretty clear, I am using openLayer library(v4.6.5) and I am trying to load a local GPX file in my map when the page is loaded. In the official documentation, in GPX Data example (https://openlayers.org/en/latest/examples/gpx.html?q=data) that seems to be pretty straightforward to do with an 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选项?预先感谢.

My question is, instead of setting url option, what option I need to set in ol.source.Vector object to load a local GPX file? Thanks in advance.

推荐答案

解决方案1 ​​

只需使用拖动&放置在OpenLayers库中提供的组件.演示于 https://openlayers.org/en/latest/examples/drag- and-drop.html (拖放GPX进行测试)

Just use the drag & drop component provided within OpenLayers library. Demo athttps://openlayers.org/en/latest/examples/drag-and-drop.html (drag and drop a GPX to test)

解决方案2

如果您想/需要手动操作，则需要删除URL引用和格式.

If you want/need to do things manually, you need to remove the URL reference and the format.

然后，通过拖放(或其他操作)然后使用进行解析，您将获得GPS文件内容

Then, you get GPS file content when you do a drag and drop (or another action) then parse it with

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

然后您使用

vector.getSource().addFeatures(GPXfeatures)

这篇关于如何在openLayer地图中加载本地gpx文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！