问没有显示特定“样式”的MapBox geojson数据
EN

Stack Overflow用户

提问于 2018-04-29 11:52:09

回答 1查看 1.4K关注 0票数 0

我可以从我的站点目录中的geojson文件中获取数据，以显示默认的Mapbox样式(v9，dark等)。但出于某种原因，它只是在我的定制样式地图上没有显示任何数据(只有特定的).

迷惑了。

我有以下代码：

<!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>

如果我使用默认的Mapbox“样式”运行完全相同的代码，我的数据就会显示得非常完美。我插入了我的样式代码，什么也没有出现。

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

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)