"Uncaught TypeError: Cannot read property 'property' of undefined" when loading style with mapbox

Question

我正在使用 mapbox-gl-js 在我的网站上渲染地图。我在 mapbox studio 中制作了地图样式，也使用了其他 tilesets。我最近更新了这些（相当大的）tilesets 并更改了一些样式。在 mapbox studio 中，样式运行得非常好，但是当我尝试在我的网站上查看地图时（没有改变），我收到几个错误，例如 "Uncaught TypeError: Cannot read property 'type' of undefined"（或其他属性），并且地图没有渲染。

我已经检查了令牌和样式地址，但我想问题出在我的地图样式上...这是它的 URL：

mapbox://styles/clemapbox/cjml1byyjq6jt2rni6wbjn3lt

这是最简单的代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.css' rel='stylesheet' />
        <title>MINIMAL TEST</title>
    </head>
    <body>
        <section id='map' style="width:500px;height:500px;"></section>

        <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.js'></script>
        <script>
            mapboxgl.accessToken = 'pk.eyJ1IjoiY2xlbWFwYm94IiwiYSI6ImNqOHVsbjdpdDBxM2wyd3JwcnVjZGtsZmsifQ.cv3w8BmCJAy0f0YF1ZFSTA';
                var map = new mapboxgl.Map({
                    container: 'map',
                    style: 'mapbox://styles/clemapbox/cjml1byyjq6jt2rni6wbjn3lt',
                });
        </script>
    </body>
</html>

Answer 1

这里的问题似乎与您的风格和您使用的 GL JS 版本不兼容。具体来说，因为您的样式使用的是 text-radial-offset 样式属性，GL JS 直到 +v0.54.0.

才支持该样式

当我更新您的示例使用的 GL JS 版本时，我能够产生预期的结果：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.54.0/mapbox-gl.css' rel='stylesheet' />
        <title>MINIMAL TEST</title>
    </head>
    <body>
        <section id='map' style="width:500px;height:500px;"></section>

        <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.54.0/mapbox-gl.js'></script>
        <script>
            mapboxgl.accessToken = 'pk.eyJ1IjoiY2xlbWFwYm94IiwiYSI6ImNqOHVsbjdpdDBxM2wyd3JwcnVjZGtsZmsifQ.cv3w8BmCJAy0f0YF1ZFSTA';
                var map = new mapboxgl.Map({
                    container: 'map',
                    style: 'mapbox://styles/clemapbox/cjml1byyjq6jt2rni6wbjn3lt',
                });
        </script>
    </body>
</html>

检查哪个客户端库与您的风格兼容的任何简单方法是通过 Studio 中的设置下拉列表：

⚠️ 免责声明：我目前在 Mapbox 工作 ⚠️

"Uncaught TypeError: Cannot read property 'property' of undefined" when loading style with mapbox

"Uncaught TypeError: Cannot read property 'property' of undefined" when loading style with mapbox

javascript

mapbox

mapbox-gl-js