Javascript 如何在具有lat和long的图层上显示轨迹

我只想在我的地图上显示一个轨迹，我试着如下操作，但问题是我不想从GPX文件加载层中的轨迹点（因为我不想从GPS设备以编程方式获得的坐标生成文件）

有没有办法从long和lat添加轨道层

// 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);

这是GPX文件中的lat和long（xml格式）

示例gpx
示例gpx1

在OpenLayers 3中加载GPX数据的示例

var lgpx=new ol.layer.Vector({
标题：“汽车轨道”，
来源：新ol.source.Vector({
url:'testTrack.gpx'，
格式：new ol.format.GPX（）
}),
风格：新的ol风格({
笔划：新的ol风格笔划({
颜色：“绿色”，
宽度：5，
不透明度：0.5
})
})
});
map.addLayer（lgpx）；

---

可用的列表。

我找到了解决方案，在这里

        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));
        }
}

lineLayer=新的OpenLayers.Layer.Vector（“线层”）；
map.addLayer（lineLayer）；
addControl（新的OpenLayers.Control.DrawFeature（lineLayer，OpenLayers.Handler.Path））；
变量坐标=[
{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”}
];
函数DrawTrack（）{
变量点=坐标。映射（函数（cor）{
返回新的OpenLayers.Geometry.Point（cor.lon，cor.lat）
.transform（新的OpenLayers.Projection（“EPSG:4326”），map.getProjectionObject（）；
});
变量样式={
strokeColor:“#0000ff”，
笔划不透明度：0.5，
冲程宽度：5
};
对于（变量i=0；i

您的答案非常完美

您必须解析要浮动的字符串编号

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));
    }
}

lineLayer=新的OpenLayers.Layer.Vector（“线层”）；
map.addLayer（lineLayer）；
map.addControl（新的OpenLayers.Control.DrawFeature（lineLayer，
OpenLayers.Handler.Path）；
变量坐标=[
{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”}
];
函数DrawTrack（）{
变量点=坐标。映射（函数（cor）{
返回新的OpenLayers.Geometry.Point（parseFloat（cor.lon），parseFloat（cor.lat））
.transform（新的OpenLayers.Projection（“EPSG:4326”），map.getProjectionObject（）；
});
变量样式={
strokeColor:“#0000ff”，
笔划不透明度：0.5，
冲程宽度：5
};
对于（变量i=0；i

粘贴一个您拥有的GPS数据结构示例。您已经标记了这个示例，它是关于Openlayers 2.x的，不支持

格式.GPX

-这是一个疏忽还是它不工作的根本原因？在您的问题中，您写道您不希望从GPX文件加载。你喜欢什么方法？顺便说一句，我发布了一个答案，如何在ol3中加载GPX，以防有人在寻找它。@AndersR.Bystrup这是我的错误，我改为OperLayers-3标签看看这个答案。也许这就是你要找的我不想像这样加载gpx文件事实上我有坐标，长格式我想知道是否有任何方法，它需要长时间的lat，并根据坐标在地图上绘制轨迹我可以通过ajax调用并从服务器获取坐标，然后我绘制轨迹您可以提供服务器返回的数据示例吗？

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));
    }
}