没有显示特定“样式”的MapBox geojson数据
没有显示特定“样式”的MapBox geojson数据
提问于 2018-04-29 19:52:09
我可以从我的站点目录中的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)
回答 1
Stack Overflow用户
发布于 2018-04-30 01:14:20
Layer with id "admin-2-boundaries-dispute" does not exist on this map.
此错误告诉您，您正在尝试在不存在的层之前插入新层。它可能存在于黑暗层中，但不存在于您的自定义层中。Mapbox最近改变了，这样在一个不存在的图层之前插入一个图层就会完全失败--它不会被添加。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50090660
复制相关文章
相似问题
腾讯云开发者
