使用Mapbox绘制传单地图上的等时线等高线

Question

当用户点击标记时，我正在尝试获取Isochrone轮廓

官方的Mapbox文档使用了内置的Mapbox JS方法，但我无法使其与Leaflet JS一起工作这是我的

function markerOnClick(lon, lat) {
const urlBase = "https://api.mapbox.com/isochrone/v1/mapbox/";
const profile = "cycling"; // Set the default routing profile
const minutes = 10; // Set the default duration
// Create a function that sets up the Isochrone API query then makes an fetch call
async function getIso() {
const query = await fetch(
`${urlBase}${profile}/${lon},${lat}?contours_minutes=${minutes}&polygons=true&access_token=${accessToken}`,
{ method: "GET" }
);
const data = await query.json();
map.getSource("iso").setData(data);
}
// From the official documentation
map.addSource("iso", {
type: "geojson",
data: {
type: "FeatureCollection",
features: [],
},
});
// I have tried to use the Leaflet geoJSON method to add it to the map
L.geoJSON("iso", {
type: "geojson",
data: {
type: "FeatureCollection",
features: [],
},
}).addTo(map);
// Can't find the substitute for this method in Leaflet
map.addLayer(
{
id: "isoLayer",
type: "fill",
// Use "iso" as the data source for this layer
source: "iso",
layout: {},
paint: {
// The fill color for the layer is set to a light purple
"fill-color": "#5a3fc0",
"fill-opacity": 0.3,
},
},
"poi-label"
);
// Make the API call
getIso();
}

我曾尝试使用传单方法将GeoJSON添加到地图中，即L.GeoJSON，但我试图替换的mapbox GL JS方法是

1. map.addLayer

2. map.addSource

如有任何建议，将不胜感激

Answer 1

L.geoJSON()需要GeoJSON数据结构，而不是字符串。Do readhttps://leafletjs.com/reference#geojson。

对于你的特殊情况，你可能想做一些类似的事情

const query = await fetch(`${urlBase}${profile}/${lon},${lat}?contours_minutes=${minutes}&polygons=true&access_token=${accessToken}`,{ method: "GET" });
const data = await query.json();
L.geoJson(data).addTo(map);