我试图在 Mapbox GL JS 中加载本地保存的 geojson 文件，但是在浏览器中加载时它没有显示。当我换出“数据”的实时 URL 时它起作用，但是当我引用本地文件时它不起作用。我已经检查过本地文件确实有效并且确实存在。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Add a polygon to a map using a GeoJSON source</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v2.13.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.13.0/mapbox-gl.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiYWRhbWJydWVja25lciIsImEiOiJjbGVoNTYwaTUwcm8zM3htejV0MHpxY2RiIn0.XMLudwO9aIRQquhkKGEnVg';
var map = new mapboxgl.Map({
container: 'map',
// Choose from Mapbox's core styles, or make your own style with Mapbox Studio
style: 'mapbox://styles/mapbox/dark-v11',
zoom: 10,
center: [-73.98, 40.76],
//projection: 'globe'
});
map.on('load', () => {
var dataGJ = 'data/borough-boundaries.geojson';
// add a source layer for the borough boundaries
map.addSource('borough-boundaries', {
type: 'geojson',
data: dataGJ
//data: 'https://data.cityofnewyork.us/api/geospatial/tqmj-j8zm?method=export&format=GeoJSON'
})
map.addLayer({
'id': 'borough-boundaries-fill',
'type': 'fill',
'source': 'borough-boundaries',
'paint': {
'fill-color': 'green',
}
})
});
</script>
</body>
</html>`
我尝试在本地保存文件并在代码中引用它，但它实际上并没有在浏览器中加载
如果@Steve 的解决方案不起作用，请尝试参考这个例子 我过去写的。它从本地路径（index.html 中数据的相对路径）呈现数据。我没有使用 map.addSource() ，我只是在 map.addLayer() 中指定了源，如下所示。
map.on('load', () => {
map.addLayer({
id: 'restaurant',
type: 'circle',
source: {
type: 'geojson',
data: 'data/chainness_point_2021.geojson'
}
});
在 Mapbox GL 样式中，数据 URL 需要是绝对的：
http://localhost/data/borough-boundaries.geojson