風格不這樣做負載：Mapbox GL JS

Question

我的目標是之前和地圖，顯示了一系列的地圖座標後上的標記後創建。

當執行代碼，我在控制檯中看到此錯誤消息：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 
 
      }); 
 
     }()); 
 
    }) 
 
});

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