使用 openlayers 获取 trkpt 详细信息

Question

我正在使用 openlayers 5.3 显示带有 GPX 轨道的地图。 OL 中的轨迹点默认为 MultiLineString 几何类型。 GPX-example 有一个双倍大小的 gpx 文件，因为所有 <trkpt> 标签都被复制为 <rtept> 标签。 Routepoints 在 OL 中获得点几何类型。

现在我想添加一个图层，将 trkpt 显示为点类型，并创建弹出窗口，显示 <trkpt> 标签内的 <ele> 和 <time> 标签的值在我的 "regular" gpx 文件中。

有没有一个快速的 and/or 肮脏的解决方案来说服 OL 将我的跟踪点视为路线点，以便我可以将它们用作点类型并阅读 <ele> 和 <time> 功能从源头上？或者是否需要其他一些操作才能完成此操作，如果是这样，我的选择是什么？

非常感谢任何帮助！

Answer 1

您可以根据线串中的坐标创建点

var map = new ol.Map({
    target: "map",
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      })
    ],
    view: new ol.View({
      center: ol.proj.fromLonLat([1.3313627, 52.1062152]),
      zoom: 15
    })
  });

  var displayFeatureInfo = function(pixel) {
    var features = [];
    map.forEachFeatureAtPixel(pixel, function(feature) {
      features.push(feature);
    }, {
      layerFilter: function(candidate) { return candidate === gpxPointLayer; }
    });
    if (features.length > 0) {
      var info = [];
      var i, ii;
      for (i = 0, ii = features.length; i < ii; ++i) {
        // display lat, lon, ele and time from the point coordinates
        var coordinates = features[i].getGeometry().getCoordinates();
        var ll = ol.proj.toLonLat(coordinates.slice(0,2));
        var d = new Date();
        d.setTime(coordinates[3]*1000);
        var llet = ll[1].toFixed(7) + ', ' + ll[0].toFixed(7) + ', ' + coordinates[2] + 'm, ' + d.toUTCString();
        info.push(llet);
      }
      document.getElementById('info').innerHTML = info.join('<br>') || '(unknown)';
      map.getTargetElement().style.cursor = 'pointer';
    } else {
      document.getElementById('info').innerHTML = '&nbsp;';
      map.getTargetElement().style.cursor = '';
    }
  };

  var gpxPointLayer = new ol.layer.Vector({
    source: new ol.source.Vector(),
    style: new ol.style.Style({
      image: new ol.style.Circle({
        fill: new ol.style.Fill({color: 'red'}),
        radius: 4
      })
    })
  });

  gpxTrackVector = new ol.source.Vector({
    url: 'https://www.mikenunn.net/data/melton2bawdsey.gpx',
    format: new ol.format.GPX()
  });

  function addPoints(linestring) {
    linestring.getCoordinates().forEach(function(coordinates) {
      gpxPointLayer.getSource().addFeature(new ol.Feature(new ol.geom.Point(coordinates)));
    });
  }

  gpxTrackVector.on('addfeature', function(evt){
    // create point features from GPX linestring coordinates
    if (evt.feature.getGeometry().getType() == 'LineString') {
      addPoints(evt.feature.getGeometry());
    } else if (evt.feature.getGeometry().getType() == 'MultiLineString') {
      evt.feature.getGeometry().getLineStrings().forEach(function(linestring){
        addPoints(linestring);
      });
    }
  });

  var gpxTrackLayer = new ol.layer.Vector({
    source: gpxTrackVector,
    style: new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: 'black',
         width: 4
      }),
      image: new ol.style.Circle({
        fill: new ol.style.Fill({color: 'green'}),
        radius: 6
      })

    })
  });

  map.addLayer(gpxTrackLayer);
  map.addLayer(gpxPointLayer);

  map.on('pointermove', function(evt) {
    if (evt.dragging) {
      return;
    }
    var pixel = map.getEventPixel(evt.originalEvent);
    displayFeatureInfo(pixel);
  });

html, body {
    width: 100%;
    height: 100%;
}
.map {
    width: 100%;
    height: 80%;
}

<link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet" />
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<div id="map" class="map"></div>
<div id="info">&nbsp;</div>

使用 openlayers 获取 trkpt 详细信息

get trkpt details with openlayers

javascript

gpx

node.js

npm

openlayers-5