我正在努力绘制使用 OSM 和使用节点作为后端的传单的方法。我正在尝试使用传单绘制插件的矩形功能选择一个边界框(https://leaflet.github.io/Leaflet.draw/docs/leaflet-draw-latest.html)在前端我有 leaflet2.html 在脚本标签中有以下内容:
const mymap = L.map("map");
const drawnItems = new L.FeatureGroup();
mymap.addLayer(drawnItems);
const drawControl = new L.Control.Draw({
edit: {
featureGroup: drawnItems,
},
draw: {
polyline: false,
circle: false,
circlemarker: false,
marker: {
icon: new L.Icon.Default(),
},
},
});
mymap.addControl(drawControl);
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.org/{z}/{x}/{y}.png", {
attribution:
'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
maxZoom: 18,
}).addTo(mymap);
mymap.setView(reversedCoords, 13);
// Add a polyline
console.log("polyline1 ", polyline1);
const reversedCoordinates = polyline1.map((coord) => coord.reverse());
L.polyline(reversedCoordinates, { color: "blue" }).addTo(mymap);
})();
mymap.on(L.Draw.Event.CREATED, (event) => {
const marker = event.layer;
const latlng = marker.getLatLng();
console.log(`Selected point: ${latlng.lat}, ${latlng.lng}`);
});
我可以选择一个矩形,但是标题中的错误和控制台中没有边界框。我该如何解决这个问题?