英文:
Loading a local geojson file in Mapbox GL JS
问题
我尝试在Mapbox GL JS中加载本地保存的geojson文件，但是在浏览器中加载时它并没有显示出来。当我将一个实时URL替换为"data"时，它可以工作，但是当我引用本地文件时，它不起作用。我已经检查过本地文件确实有效且存在。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用GeoJSON源将多边形添加到地图</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 = '你的访问令牌';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/dark-v11',
zoom: 10,
center: [-73.98, 40.76],
});
map.on('load', () => {
var dataGJ = 'data/borough-boundaries.geojson';
map.addSource('borough-boundaries', {
type: 'geojson',
data: dataGJ
})
map.addLayer({
'id': 'borough-boundaries-fill',
'type': 'fill',
'source': 'borough-boundaries',
'paint': {
'fill-color': 'green',
}
})
});
</script>
</body>
</html>
我尝试将文件保存在本地并在代码中引用它，但它仍然无法在浏览器中加载。
英文:
I am trying to load a locally-saved geojson file in Mapbox GL JS, however it does not show up when loaded in the browser. It works when I swap out a live URL for the 'data', however when I reference the local file, it does not work. I have checked that the local file is indeed valid and actually there.
<!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>`
I tried saving the file locally and referencing it in the code, but still it does not actually load up in the browser
答案1
得分: 0
在Mapbox GL样式中，数据URL需要是绝对路径：http://localhost/data/borough-boundaries.geojson或类似的。
英文:
In Mapbox GL styles, data URLs need to be absolute: http://localhost/data/borough-boundaries.geojson or similar.
答案2
得分: 0
如果@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'
}
});
});
英文:
If @Steve's solution did not work, try referencing this example I wrote in the past. It renders data from a local path (relative path to the data from index.html). I did not use map.addSource() and I just specified the source in map.addLayer() like below.
map.on('load', () => {
map.addLayer({
id: 'restaurant',
type: 'circle',
source: {
type: 'geojson',
data: 'data/chainness_point_2021.geojson'
}
});
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论