样式未完成加载:Mapbox GL JS

Posted

技术标签:

【中文标题】样式未完成加载:Mapbox GL JS【英文标题】:Style is not done loading: Mapbox GL JS 【发布时间】:2017-03-26 05:17:45 【问题描述】:

我的目标是创建一个前后地图,在后地图上显示一系列坐标标记。

执行代码时,我在控制台中看到此错误消息:Style is not done loading

最终目标是看到允许用户水平滑动并查看地图变化(从之前到之后)的光标。

到目前为止,这是我的代码,任何帮助都会大有帮助!

$(document).ready(function() 
    var request_one = $.ajax(
        url: "https://geohack-framework-gbhojraj.c9users.io/ny",
        dataType: 'json'
    )
    var request_two = $.ajax(
        url: "https://geohack-framework-gbhojraj.c9users.io/man",
        dataType: 'json'
    );
    $.when(request_one, request_two).done(function(response_one, response_two) 
        console.log(response_one, response_two);
        //create map of ny state
        var nyGeo = response_one[0];
        var manGeo = response_two[0];
        (function() 
            mapboxgl.accessToken = 'pk.eyJ1IjoiamdhcmNlcyIsImEiOiJjaXY4amM0ZHQwMDlqMnlzOWk2MnVocjNzIn0.Pos1M9ZQgxMGnQ_H-bV7dA';
            //manhattan map
            var manCenter = manGeo.features[0].geometry.coordinates[0][0][0];
            console.log('man center is', manCenter);
            var beforeMap = new mapboxgl.Map(
                container: 'before',
                style: 'mapbox://styles/mapbox/light-v9',
                center: manCenter,
                zoom: 5
            );
            console.log('man geo is ', manGeo);
            //ny state map
            var nyCenter = nyGeo.features[0].geometry.coordinates[0][0];
            console.log('the ny center is ', nyCenter);
            var afterMap = new mapboxgl.Map(
                container: 'after',
                style: 'mapbox://styles/mapbox/dark-v9',
                center: nyCenter,
                zoom: 9
            );
            console.log('ny geo homie', nyGeo);
            afterMap.on('load', function() 
                afterMap.addSource("points", 
                    "type": "geojson",
                    "data": nyGeo
                )
            );
            afterMap.addLayer(
                "id": "points",
                "type": "symbol",
                "source": "points",
                "layout": 
                    "icon-image": "icon-15",
                    "text-field": "title",
                    "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
                    "text-offset": [0, 0.6],
                    "text-anchor": "top"
                
            );
            var map = new mapboxgl.Compare(beforeMap, afterMap, 
                // Set this to enable comparing two maps by mouse movement:
                // mousemove: true
            );
        ());
    )
);

【问题讨论】:

【参考方案1】:

问题是您在加载地图之前将图层添加到地图。确保您在load 事件处理程序中附加了磁贴源和样式层。

afterMap.on('load', function() 
  afterMap.addSource("points", 
    "type": "geojson",
    "data": nyGeo
  )
  afterMap.addLayer(
    "id": "points",
    "type": "symbol",
    "source": "points",
    "layout": 
      "icon-image": "icon-15",
      "text-field": "title",
      "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
      "text-offset": [0, 0.6],
      "text-anchor": "top"
    
  );
);

【讨论】:

但也许你会遇到这个问题github.com/mapbox/mapbox-gl-js/issues/4849。我终于在加载样式之前添加了 2 秒的延迟:-\

以上是关于样式未完成加载:Mapbox GL JS的主要内容,如果未能解决你的问题,请参考以下文章

Leaflet.js 中未显示自定义 Mapbox 瓦片集

MapBox GL Android:来自自定义图块源的离线地图已下载但未使用

Mapbox GL js 可用图标

我可以使用传单插件和mapbox gl js吗?

在 Mapbox-GL-JS 中 minzoom 和 maxzoom 到底做了啥?

通过 mapbox gl js 向 mapbox 中的地图添加一些基本标记