我有这样的路径：
[53.994791502000055,32.87857732600003,141,53.99267829900003,32.95958344100006,126,53.98845189300005,32.99902989800006,124,53.998313507000034,33.01593552200006,120,54.04269077100008,33.07158320100007,109,54.05184798400006,33.06242598800003,109,54.07086681100003,33.00818711100004,109,54.04480397400005,32.98564627800005,113]
此路径包括每个点的长、纬度和 z。我还有一个用OpenLayers创建的地图。我想在地图上显示此路径。我尝试了不同的方法和说明，但没有显示。这是我显示地图的方式：
var map = new ol.Map({
controls: ol.control.defaults({
attributionOptions: {
collapsible: false
}
}).extend([mousePositionControl]),
layers: layers,
// Improve user experience by loading tiles while dragging/zooming. Will make
// zooming choppy on mobile or slow devices.
loadTilesWhileInteracting: true,
target: 'map',
view: new ol.View({
center: ol.proj.fromLonLat([54.081, 32.908]),
zoom: 13
})
});
我以这种方式测试了部分路线的显示，但它不起作用：
routlayer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [
new ol.Feature({
geometry: new ol.geom.LineString([
[53.9888, 32.8876],
[54.1576, 32.9360]
])
})
]
})
});
map.addLayer(routlayer);
我在不同的参考文献中尝试了类似的方法，但没有奏效。
我认为您错过了从地理坐标到routlayer几何上的Web 墨卡托的转换。如果您修复它应该可以工作。
在这里，您有一个我用帖子数据为您制作的工作示例，
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/css/ol.css" type="text/css">
<style>
.map {
height: 400px;
width: 100%;
}
#a { display: none; }
</style>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/build/ol.js"></script>
<title>OL - LineString From Coords</title>
</head>
<body>
<h2>LineString From Coords</h2>
<div id="map" class="map"></div>
<script type="text/javascript">
// tile layer
var tile = new ol.layer.Tile({
source: new ol.source.OSM()
});
// vector layer
const coords = [53.994791502000055,32.87857732600003,141,53.99267829900003,32.95958344100006,126,53.98845189300005,32.99902989800006,124,53.998313507000034,33.01593552200006,120,54.04269077100008,33.07158320100007,109,54.05184798400006,33.06242598800003,109,54.07086681100003,33.00818711100004,109,54.04480397400005,32.98564627800005,113];
let path = [];
for(let i = 0; i < coords.length; i+=3) {
path.push([coords[i], coords[i + 1], coords[i + 2]]);
}
const lineString = new ol.geom.LineString(path);
lineString.transform('EPSG:4326', 'EPSG:3857');
const feature = new ol.Feature({
geometry: lineString
});
const source = new ol.source.Vector();
source.addFeature(feature);
var vector = new ol.layer.Vector({
source,
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'red',
width: 3
})
})
})
var map = new ol.Map({
layers: [
tile,
//image,
vector
],
target: 'map',
view: new ol.View({
center: ol.proj.fromLonLat([54.081, 32.908]),
zoom: 10
})
});
</script>
</body>
</html>