如何在具有纬度和经度的图层上显示轨迹
How to display a track on a layer with lat and long
我只是想在我的地图上显示一条轨迹我试过如下但问题是我不想从 GPX 文件加载图层中的轨迹点(因为我不想从坐标生成文件 我以编程方式从 GPS 设备获取)
有没有办法从经度和纬度添加轨道层
// 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文件中的经纬度(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>
在 OpenLayers 3 中加载 GPX 数据的示例。
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);
可用列表 formats。
我找到了解决方案,就在这里
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 = 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));
}
}
我只是想在我的地图上显示一条轨迹我试过如下但问题是我不想从 GPX 文件加载图层中的轨迹点(因为我不想从坐标生成文件 我以编程方式从 GPS 设备获取)
有没有办法从经度和纬度添加轨道层
// 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文件中的经纬度(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>
在 OpenLayers 3 中加载 GPX 数据的示例。
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);
可用列表 formats。
我找到了解决方案,就在这里
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 = 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));
}
}