折线"/>
在 OSM 地图中无法看到折线
我正在努力绘制使用 OSM 和使用节点作为后端的传单的方法。在前端我有 leaflet2.html,它在脚本标签中有以下内容:
const mymap = L.map("map");
async function getGeoJSONArr() {
const response = await fetch("http://localhost:3000/data");
const jsonArr = await response.json();
console.log("jsonARR", jsonArr);
const reversedCoords = jsonArr[0].slice().reverse();
console.log(reversedCoords);
return { jsonArr: jsonArr, reversedCoords: reversedCoords };
}
(async function buildMap(params) {
const o = await getGeoJSONArr();
console.log(o);
const polyline1 = o.jsonArr;
const reversedCoords = o.reversedCoords;
L.tileLayer("https://{s}.tile.openstreetmap/{z}/{x}/{y}.png", {
attribution:
'Map data © <a href="/">OpenStreetMap</a> contributors',
maxZoom: 18,
}).addTo(mymap);
mymap.setView(reversedCoords, 13);
// Add a polyline
L.polyline(polyline1, { color: "blue" }).addTo(mymap);
})();
在控制台中我看到:
{jsonArr: Array(5),
reversedCoords: Array(2)}jsonArr: Array(5)0: (2) [-110.9582708, 31.9323673]
1: (2) [-110.9579731, 31.9323537]2: (2) [-110.9576486, 31.9323673]3: (2) [-110.955342, 31.931959]4: (2) [-110.952628, 31.931936]length: 5[[Prototype]]: Array(0)
reversedCoords: (2) [31.9323673, -110.9582708][[Prototype]]: Object
没有错误。
我期待在地图上看到一条折线,但我没有看到。我做错了什么?
回答如下:我想我知道你做错了什么,因为一周前我一直在犯同样的错误-
当您使用返回 geoJSON 数据的服务(例如 OSRM 或 Nominatim)时,尝试反转纬度、经度和绘制 L.polyline
s
manually是 wrong 相反,您应该将 geoJSON 数据添加到
L.geoJSON 层(而不是直接添加到 mymap
,如您问题中的代码片段所示),该层将为您执行正确的绘图。这里是我的一个小演示来演示这种方法,请注意我是如何在那里调用
routesGroup.addData(route.geometry);
并自动绘制蓝色路线:
'use strict';
function processOsrmReply(data) {
myMap.flyToBounds(markersGroup.getBounds());
if (data.code !== 'Ok') {
clearMap('Error code: ' + data.code);
return;
}
data.routes.forEach(function(route) {
routesGroup.addData(route.geometry);
});
}
function sendOsrmRequest() {
var url = 'https://router.project-osrm/route/v1/car/' +
parseFloat(startMarker.getLatLng().lng).toFixed(6) + ',' +
parseFloat(startMarker.getLatLng().lat).toFixed(6) + ';' +
parseFloat(finalMarker.getLatLng().lng).toFixed(6) + ',' +
parseFloat(finalMarker.getLatLng().lat).toFixed(6) +
'?overview=simplified' +
'&alternatives=2' +
'&steps=false' +
'&annotations=false' +
'&geometries=geojson';
var request = new XMLHttpRequest();
request.open('GET', url, true);
request.onload = function() {
if (this.status >= 200 && this.status < 400) {
var data = JSON.parse(this.response);
processOsrmReply(data);
} else {
clearMap('Error status: ' + this.status);
}
};
request.send();
}
function clearMap(str = '') {
var myStatus = document.getElementById('myStatus');
myStatus.textContent = str;
linesGroup.clearLayers();
}
var startPosition = [31.9322, -110.9583];
var finalPosition = [31.9319, -110.9526];
var myMap = L.map('myMap').setView(startPosition, 14);
L.tileLayer('https://{s}.tile.openstreetmap/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap/copyright">OpenStreetMap</a> contributors'
}).addTo(myMap);
var markersGroup = L.featureGroup();
myMap.addLayer(markersGroup);
var routesGroup = L.geoJSON();
myMap.addLayer(routesGroup);
var overlays = {
'Show start and finish markers': markersGroup,
'Show OSRM route geometry': routesGroup
};
L.control.layers(null, overlays, {
collapsed: false
}).addTo(myMap);
var startMarker = L.marker(startPosition, {
draggable: true,
title: 'start'
})
.on('dragend', sendOsrmRequest)
.addTo(markersGroup);
var finalMarker = L.marker(finalPosition, {
draggable: true,
title: 'finish'
})
.on('dragend', sendOsrmRequest)
.addTo(markersGroup);
sendOsrmRequest();
html,
body {
margin: 0;
padding: 0;
}
#myMap {
position: absolute;
top: 2em;
left: 0;
bottom: 0;
right: 0;
z-index: 1;
}
#myStatus {
position: absolute;
z-index: 2;
width: 100%;
text-align: center;
}
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr/npm/leaflet@1/dist/leaflet.min.css">
<script src="https://cdn.jsdelivr/npm/leaflet@1/dist/leaflet-src.min.js"></script>
<div id="myStatus">Drag the 2 markers to calculate the OSRM route</div>
<div id="myMap"></div>
更多推荐
在 OSM 地图中无法看到折线
发布评论