样式未完成加载:Mapbox GL JS [英] Style is not done loading: Mapbox GL JS

问题描述

我的目标是创建一个前后地图，以在之后地图上显示一系列坐标标记.

My goal is to create a before and after map that shows a series of coordinate markers on the after map.

执行代码后，我在控制台中看到以下错误消息:Style is not done loading

When the code is executed, I see this error message in the console: Style is not done loading

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

The end goal is to see a cursor that would allow users to swipe horizontally and see the maps change (from before to after).

到目前为止，这是我的代码，任何帮助都将大有帮助！

Here's my code so far, any help would go a long way!

$(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
            });
        }());
    })
});

推荐答案

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

The problem is that you are adding the layer to the map before the map is loaded. Be sure you are attaching the tile source and the style layer in the load event handler.

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"
    }
  });
});

这篇关于样式未完成加载:Mapbox GL JS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！