Mapbox GL JS加载本地GeoJSON文件失败问题求助

核心原因 #

浏览器的同源策略会阻止通过file://协议直接加载本地文件，这是你使用在线URL正常但本地文件无法显示的主要原因——在线资源使用http/https协议，不受此限制，而直接打开本地HTML文件时使用的是file://协议，浏览器会拦截对本地GeoJSON文件的请求。

解决方案 #

1. 启动本地HTTP服务器 #

将本地文件放在HTTP服务环境下访问，绕过file://的限制：

• 使用Python快速启动服务器：
  • Python 3：执行命令 python -m http.server 8000
  • Python 2：执行命令 python -m SimpleHTTPServer 8000
• 启动后，在浏览器访问 http://localhost:8000/你的页面文件名.html，此时本地GeoJSON文件的请求会以http协议发送，不再被拦截。

2. 确认文件路径正确性 #

• 检查data/borough-boundaries.geojson的位置：确保HTML文件所在目录下存在data子文件夹，且该文件夹内确实有borough-boundaries.geojson文件。
• 若HTML文件不在根目录，需调整路径，比如HTML在html文件夹，GeoJSON在根目录的data文件夹，路径应改为../data/borough-boundaries.geojson。
• 可通过浏览器开发者工具的Network标签查看请求状态，如果返回404，说明路径错误。

3. 再次验证GeoJSON有效性 #

• 可通过浏览器控制台二次验证：将GeoJSON内容复制到控制台，执行JSON.parse(你的GeoJSON内容)，若报错则说明文件存在语法问题。
• 确保GeoJSON使用WGS84坐标系（经纬度），Mapbox GL JS仅支持该坐标系，其他坐标系的GeoJSON需要先转换格式。

调整后的代码（无需修改，确保路径正确即可） #

<!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',
            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>

内容的提问来源于stack exchange，提问作者Adam Brueckner