Jak wyświetlić ścieżkę na warstwie z długim i długim

Question

Chcę po prostu pokazać ścieżkę na mojej mapie próbowałem jak następuje ale problem polega na tym, że nie chcę ładować punktu ścieżki w warstwie z pliku GPX (ponieważ nie chcę, aby wygenerować plik ze współrzędnymi czarownica dostaję od GPSdevice programowo)

jest jakiś sposób, aby dodać warstwę toru od długości i szer

// Add the Layer with the GPX Track 
var lgpx = new OpenLayers.Layer.Vector("Car track", { 
    strategies: [new OpenLayers.Strategy.Fixed()], 
    protocol: new OpenLayers.Protocol.HTTP({ 
     url: "testTrack.GPX", 
     format: new OpenLayers.Format.GPX() 
    }), 
    style: { strokeColor: "green", strokeWidth: 5, strokeOpacity: 0.5 }, 
    projection: new OpenLayers.Projection("EPSG:4326") 
}); 
map.addLayer(lgpx); 

Oto lat i długo w pliku GPX (format xml)

<?xml version="1.0" encoding="UTF-8"?> 
    <gpx version="1.0"> 
    <name>Example gpx</name> 
    <trk><name>Example gpx</name><number>1</number> 
    <trkseg> 
     <trkpt lat="35.737097" lon="51.314965"></trkpt> 
     <trkpt lat="35.736953" lon="51.317454"></trkpt> 
     <trkpt lat="35.737572" lon="51.317551"></trkpt> 
     <trkpt lat="35.737755" lon="51.315716"></trkpt> 
     <trkpt lat="35.739588" lon="51.316070"></trkpt> 
    </trkseg> 
    </trk> 
</gpx> 

Answer 1

Znalazłem rozwiązanie, tutaj jest

 lineLayer = new OpenLayers.Layer.Vector("Line Layer"); 
     map.addLayer(lineLayer); 
     map.addControl(new OpenLayers.Control.DrawFeature(lineLayer, OpenLayers.Handler.Path)); 

    var coordinates = [ 
     { lat: "35.737097", lon: "51.314965" }, 
     { lat: "35.736953", lon: "51.317454" }, 
     { lat: "35.737572", lon: "51.317551" }, 
     { lat: "35.737755", lon: "51.315716" }, 
     { lat: "35.739588", lon: "51.316070" } 
    ]; 
function DrawTrack(){ 
     var points = coordinates.map(function (cor) { 
      return new OpenLayers.Geometry.Point(cor.lon, cor.lat) 
          .transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject()); 
     }); 

     var style = { 
      strokeColor: '#0000ff', 
      strokeOpacity: 0.5, 
      strokeWidth: 5 
     }; 

     for (var i = 0; i < points.length - 1; i++) { 

      (function (i) { 

       window.setTimeout(function() { 
        var line = new OpenLayers.Geometry.LineString([points[i], points[i + 1]]); 
        var lineFeature = new OpenLayers.Feature.Vector(line, null, style); 
        lineLayer.addFeatures([lineFeature]); 

        map.setCenter(points[i].lon, points[i].lat); 

       }, i * 1000); 

      }(i)); 
     } 
} 

Answer 2

Przykład danych ładowanie GPX w OpenLayers 3.

var lgpx = new ol.layer.Vector({ 
    title: 'Car track', 
    source: new ol.source.Vector({ 
     url: 'testTrack.gpx', 
     format: new ol.format.GPX() 
    }), 
    style: new ol.style.Style({ 
     stroke: new ol.style.Stroke({ 
      color: 'green', 
      width: 5, 
      opacity: 0.5 
     }) 
    }) 
}); 

map.addLayer(lgpx); 

lista dostępnych formats.

Answer 3

Twoja odpowiedź została zamknięta być doskonały.

Musisz sparsować numer ciągu, aby go uaktywnić.

lineLayer = new OpenLayers.Layer.Vector("Line Layer"); 
map.addLayer(lineLayer); 
map.addControl(new OpenLayers.Control.DrawFeature(lineLayer, 
    OpenLayers.Handler.Path)); 

var coordinates = [ 
    { lat: "35.737097", lon: "51.314965" }, 
    { lat: "35.736953", lon: "51.317454" }, 
    { lat: "35.737572", lon: "51.317551" }, 
    { lat: "35.737755", lon: "51.315716" }, 
    { lat: "35.739588", lon: "51.316070" } 
]; 
function DrawTrack(){ 
    var points = coordinates.map(function (cor) { 
    return new OpenLayers.Geometry.Point(parseFloat(cor.lon),parseFloat(cor.lat)) 
        .transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject()); 
    }); 

    var style = { 
     strokeColor: '#0000ff', 
     strokeOpacity: 0.5, 
     strokeWidth: 5 
    }; 

    for (var i = 0; i < points.length - 1; i++) { 

     (function (i) { 

     window.setTimeout(function() { 
      var line = new OpenLayers.Geometry.LineString([points[i], points[i + 1]]); 
      var lineFeature = new OpenLayers.Feature.Vector(line, null, style); 
      lineLayer.addFeatures([lineFeature]); 

      map.setCenter(points[i].lon, points[i].lat); 

     }, i * 1000); 

     }(i)); 
    } 
}