Question

我可以从我网站目录中的geojson文件中获取数据，以便在默认的Mapbox样式中显示我的数据（v9 dark等...）但由于某种原因，它只显示我自定义样式的地图上没有数据（只有某些）...

混淆。

我有以下代码：

＆＃13;

<!DOCTYPE html>
<html>
  <head>
  <meta charset='utf-8' />
  <title>Major Civil War Battles</title>
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
  <script src='https://api.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.js'></script>
  <link href='https://api.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.css' rel='stylesheet' />
 <style>
body {
  margin: 0;
  padding: 0;
  font-family: 'Helvetica Neue', Helvetica, Arial, Sans-serif;
}

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

h1 {
  font-size: 20px;
  line-height: 30px;
}

h2 {
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 10px;
}

a {
  text-decoration: none;
  color: #2dc4b2;
}

#console {
  position: absolute;
  width: 240px;
  margin: 10px;
  padding: 10px 20px;
  background-color: white;
}   

</style>     
      
      
  </head>
  <body>  
    <div id='map'></div>

      <div id='console'>
  <h1>Major Battles of The Civil War (1861-1865)</h1>
  <p></p>
 
          <div class='session' id='sliderbar'>
  <h2>Year: <label id='active-year'>1861</label></h2>
  <input id='slider' class='row' type='range' min='1861' max='1865' step='1' value='1861' />
          </div>
    
      </div>
      
      
</body>
    
    
<script>  
mapboxgl.accessToken = 'pk.eyJ1IjoiY2dyb3RoIiwiYSI6ImNqZzlramN2Mzh0c3Uyd252cWxzYnF3c2UifQ.5lpaHuwMqJ5EsTARqW5kHg';

var map = new mapboxgl.Map({
  container: 'map', // container element id
    //mapbox://styles/mapbox/light-v9
    //mapbox://styles/cgroth/cjgl5x6c400002qnkl94ab1yc
  style: 'mapbox://styles/cgroth/cjgl5x6c400002qnkl94ab1yc',
    center: [-77.04, 38.907],
    zoom: 5
});
    
    
 map.on('load', function() {
    map.addLayer({
      id: 'battledata',
      type: 'circle',
      source: {
        type: 'geojson',
        data: './CWGG.geojson' // replace this with the url of your own geojson
      },
      paint: {
        'circle-radius': [
          'interpolate',
          ['linear'],
          ['number', ['get', 'TotalCasualties']],
          1, 2,
          51000, 40
        ],
        'circle-color':'#AA5E79',
        'circle-opacity': 0.8
      }
    }, 'admin-2-boundaries-dispute');
  document.getElementById('slider').addEventListener('input', function(e) {
  var year = parseInt(e.target.value);
  // update the map
  map.setFilter('battledata', ['==', ['number', ['get', 'Year']], year]);

  // update text in the UI
  document.getElementById('active-year').innerText = year
});   
     
  });
    
</script>

＆＃13;

如果我使用默认的Mapbox运行完全相同的代码＆＃34; Style＆＃34;我的数据显示完美。我插入了我的样式代码，没有出现任何内容。

以下是我尝试运行HTML时的控制台错误：

＆＃13;

rror: Layer with id "admin-2-boundaries-dispute" does not exist on this map.
    at r.addLayer (style.js:542)
    at e.addLayer (map.js:1125)
    at e.<anonymous> (AA_WorkingCW.html:85)
    at e.Evented.fire (evented.js:93)
    at r.Evented.fire (evented.js:103)
    at r._load (style.js:226)
    at style.js:164
    at XMLHttpRequest.r.onload (ajax.js:76)
Evented.fire @ evented.js:109
favicon.ico Failed to load resource: the server responded with a status of 404 (Not Found)
a.tiles.mapbox.com/v4/mapbox.terrain-rgb/6/19/25.webp?access_token=pk.eyJ1IjoiY2dyb3RoIiwiYSI6ImNqZ2w4bWY5dTFueG0zM2w0dTNkazI1aWEifQ.55SWFVBYzs08EqJHAa3AsQ Failed to load resource: the server responded with a status of 404 (Not Found)
a.tiles.mapbox.com/v4/mapbox.terrain-rgb/6/20/24.webp?access_token=pk.eyJ1IjoiY2dyb3RoIiwiYSI6ImNqZ2w4bWY5dTFueG0zM2w0dTNkazI1aWEifQ.55SWFVBYzs08EqJHAa3AsQ Failed to load resource: the server responded with a status of 404 (Not Found)
b.tiles.mapbox.com/v4/mapbox.terrain-rgb/6/19/26.webp?access_token=pk.eyJ1IjoiY2dyb3RoIiwiYSI6ImNqZ2w4bWY5dTFueG0zM2w0dTNkazI1aWEifQ.55SWFVBYzs08EqJHAa3AsQ Failed to load resource: the server responded with a status of 404 (Not Found)
a.tiles.mapbox.com/v4/mapbox.terrain-rgb/6/20/26.webp?access_token=pk.eyJ1IjoiY2dyb3RoIiwiYSI6ImNqZ2w4bWY5dTFueG0zM2w0dTNkazI1aWEifQ.55SWFVBYzs08EqJHAa3AsQ Failed to load resource: the server responded with a status of 404 (Not Found)
5evented.js:109 Error: The layer 'battledata' does not exist in the map's style and cannot be filtered.
    at r.setFilter (style.js:681)
    at e.setFilter (map.js:1185)
    at HTMLInputElement.<anonymous> (AA_WorkingCW.html:107)
Evented.fire @ evented.js:109
ajax.js:106 GET https://a.tiles.mapbox.com/v4/mapbox.terrain-rgb/6/20/24.webp?access_token=pk.eyJ1IjoiY2dyb3RoIiwiYSI6ImNqZ2w4bWY5dTFueG0zM2w0dTNkazI1aWEifQ.55SWFVBYzs08EqJHAa3AsQ 404 (Not Found)
exports.getArrayBuffer @ ajax.js:106
exports.getImage @ ajax.js:121
r.loadTile @ raster_dem_tile_source.js:37
t._loadTile @ source_cache.js:144
t._addTile @ source_cache.js:584
t._updateRetainedTiles @ source_cache.js:489
t.update @ source_cache.js:435
r._updateSources @ style.js:943
e._render @ map.js:1499
(anonymous) @ map.js:1567
requestAnimationFrame (async)
frame @ browser.js:30
e._rerender @ map.js:1565
e._update @ map.js:1450
Evented.fire @ evented.js:93
e.resize @ map.js:408
e._onWindowResize @ map.js:1578
ajax.js:106 GET https://a.tiles.mapbox.com/v4/mapbox.terrain-rgb/6/20/26.webp?access_token=pk.eyJ1IjoiY2dyb3RoIiwiYSI6ImNqZ2w4bWY5dTFueG0zM2w0dTNkazI1aWEifQ.55SWFVBYzs08EqJHAa3AsQ 404 (Not Found)
exports.getArrayBuffer @ ajax.js:106
exports.getImage @ ajax.js:121
r.loadTile @ raster_dem_tile_source.js:37
t._loadTile @ source_cache.js:144
t._addTile @ source_cache.js:584
t._updateRetainedTiles @ source_cache.js:489
t.update @ source_cache.js:435
r._updateSources @ style.js:943
e._render @ map.js:1499
(anonymous) @ map.js:1567
requestAnimationFrame (async)
frame @ browser.js:30
e._rerender @ map.js:1565
e._update @ map.js:1450
Evented.fire @ evented.js:93
e.resize @ map.js:408
e._onWindowResize @ map.js:1578
ajax.js:106 GET https://b.tiles.mapbox.com/v4/mapbox.terrain-rgb/6/21/26.webp?access_token=pk.eyJ1IjoiY2dyb3RoIiwiYSI6ImNqZ2w4bWY5dTFueG0zM2w0dTNkazI1aWEifQ.55SWFVBYzs08EqJHAa3AsQ 404 (Not Found)
exports.getArrayBuffer @ ajax.js:106
exports.getImage @ ajax.js:121
r.loadTile @ raster_dem_tile_source.js:37
t._loadTile @ source_cache.js:144
t._addTile @ source_cache.js:584
t._updateRetainedTiles @ source_cache.js:489
t.update @ source_cache.js:435
r._updateSources @ style.js:943
e._render @ map.js:1499
(anonymous) @ map.js:1567
requestAnimationFrame (async)
frame @ browser.js:30
e._rerender @ map.js:1565
e._update @ map.js:1450
Evented.fire @ evented.js:93
e.resize @ map.js:408
e._onWindowResize @ map.js:1578
ajax.js:106 GET https://a.tiles.mapbox.com/v4/mapbox.terrain-rgb/6/21/25.webp?access_token=pk.eyJ1IjoiY2dyb3RoIiwiYSI6ImNqZ2w4bWY5dTFueG0zM2w0dTNkazI1aWEifQ.55SWFVBYzs08EqJHAa3AsQ 404 (Not Found)
exports.getArrayBuffer @ ajax.js:106
exports.getImage @ ajax.js:121
r.loadTile @ raster_dem_tile_source.js:37
t._loadTile @ source_cache.js:144
t._addTile @ source_cache.js:584
t._updateRetainedTiles @ source_cache.js:489
t.update @ source_cache.js:435
r._updateSources @ style.js:943
e._render @ map.js:1499
(anonymous) @ map.js:1567
requestAnimationFrame (async)
frame @ browser.js:30
e._rerender @ map.js:1565
e._update @ map.js:1450
Evented.fire @ evented.js:93
e.resize @ map.js:408
e._onWindowResize @ map.js:1578
ajax.js:106 GET https://b.tiles.mapbox.com/v4/mapbox.terrain-rgb/6/21/24.webp?access_token=pk.eyJ1IjoiY2dyb3RoIiwiYSI6ImNqZ2w4bWY5dTFueG0zM2w0dTNkazI1aWEifQ.55SWFVBYzs08EqJHAa3AsQ 404 (Not Found)

＆＃13;

Answer 1

Layer with id "admin-2-boundaries-dispute" does not exist on this map.

此错误告诉您正在尝试在不存在的图层之前插入新图层。据推测它存在于暗层中，但不存在于自定义层中。 Mapbox-GL-JS最近发生了变化，因此在不存在的图层之前插入图层会完全失败 - 它不会被添加。

MapBox geojson数据未显示某些＆＃34;样式＆＃34;

1 个答案: