Javascript 我能';在Mapbox gl js中更改贴图样式后,不要添加新图层
首先,我是Mapbox的初学者,我对改变地图样式有意见。更改样式时,我正在上载源,但无法向地图添加新图层 我正在这样创造我的资源Javascript 我能';在Mapbox gl js中更改贴图样式后,不要添加新图层,javascript,mapbox,mapbox-gl-js,Javascript,Mapbox,Mapbox Gl Js,首先,我是Mapbox的初学者,我对改变地图样式有意见。更改样式时,我正在上载源,但无法向地图添加新图层 我正在这样创造我的资源 function addRoadsSource(){ map.addSource('roads3',{ 'type':'geojson', 'data': datas.roadsInfo // datas --> roadsInfo includes roads geoFile Data }); } 并将它们作为
function addRoadsSource(){
map.addSource('roads3',{
'type':'geojson',
'data': datas.roadsInfo // datas --> roadsInfo includes roads geoFile Data
});
}
并将它们作为图层添加到uploadRoads()的地图中
这里还有showRoads()函数
但当我将地图样式从streets-v11更改为dark-v10时,所有来源都消失了。根据我的研究,这是因为mapbox()的结构。每个人都说我需要再次上传资源。但是我已经用addRoadsSource()函数上传了我的资源。然后,当我使用uploadRoads()将新图层添加到新样式时,道路不会显示在地图上。当我使用map.style.sources()查看新样式的源时,我可以看到源已正确加载,但图层未显示。我希望我能解释我的问题。我查看了许多来源,包括Github问题,但没有一个对我有用。如果您需要我的代码或geojson文件中的任何内容,我可以添加它。如果您可以提供一个解决方案,就可以更容易地确定代码中的错误,因为您包含的代码不足以诊断问题的根源 阅读您的问题时,我的第一感觉是,您没有在样式加载事件之后创建源代码和层,因为更改样式不应该是一个问题,正如您在我为测试您的案例所做的这篇文章中所看到的那样
mapboxgl.accessToken='将您的令牌放在这里';
var map=new mapboxgl.map({
容器:“映射”,
风格:'mapbox://styles/mapbox/streets-v11',
中心:[-122.486052,37.830348],
缩放:14
});
var l=‘routeL’;
var s=‘路线’;
var layerList=document.getElementById('menu');
var inputs=layerList.getElementsByTagName('input');
函数addSource(){
map.addSource{
'type':'geojson',
“数据”:{
“类型”:“特征”,
“属性”:{},
“几何学”:{
'type':'LineString',
“坐标”:[
[-122.48369693756104, 37.83381888486939],
[-122.48348236083984, 37.83317489144141],
[-122.48339653015138, 37.83270036637107],
[-122.48356819152832, 37.832056363179625],
[-122.48404026031496, 37.83114119107971],
[-122.48404026031496, 37.83049717427869],
[-122.48348236083984, 37.829920943955045],
[-122.48356819152832, 37.82954808664175],
[-122.48507022857666, 37.82944639795659],
[-122.48610019683838, 37.82880236636284],
[-122.48695850372314, 37.82931081282506],
[-122.48700141906738, 37.83080223556934],
[-122.48751640319824, 37.83168351665737],
[-122.48803138732912, 37.832158048267786],
[-122.48888969421387, 37.83297152392784],
[-122.48987674713133, 37.83263257682617],
[-122.49043464660643, 37.832937629287755],
[-122.49125003814696, 37.832429207817725],
[-122.49163627624512, 37.832564787218985],
[-122.49223709106445, 37.83337825839438],
[-122.49378204345702, 37.83368330777276]
]
}
}
});
}
函数addLayer(){
map.addLayer({
“id”:l,
“类型”:“行”,
“来源”:s,
“布局”:{
“直线连接”:“圆形”,
“线帽”:“圆形”
},
“油漆”:{
“线条颜色”:“888”,
“线宽”:8
}
});
}
map.on('style.load',function(){
addSource();
addLayer();
});
功能切换层(层){
var layerId=layer.target.id;
map.setStyle('mapbox://styles/mapbox/"分层",;
}
对于(变量i=0;i
请不要破坏您的帖子,为他人做更多的工作。通过在Stack Exchange网络上发布,您已授予Stack Exchange在下不可撤销的权利,以分发该内容(即,无论您未来的选择如何)。根据堆栈交换策略,帖子的非破坏版本是分发的版本。因此,任何故意破坏行为都将恢复原状。如果您想了解有关删除帖子的更多信息,请参阅:
function uploadRoads() {
map.on('load',function() {
addRoadsSource();
showRoads();
});
}
function showRoads() {
map.addLayer({
'id': 'roadsLayer',
'type': 'line',
'source': 'roads3',
'filter': ['==', '$type', 'LineString'],
'paint' : {
'line-color' : '#33cc33',
'line-width' : 5
}
});
}
mapboxgl.accessToken = 'PUT HERE YOUR TOKEN';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-122.486052, 37.830348],
zoom: 14
});
var l = 'routeL';
var s = 'routeS';
var layerList = document.getElementById('menu');
var inputs = layerList.getElementsByTagName('input');
function addSource() {
map.addSource(s, {
'type': 'geojson',
'data': {
'type': 'Feature',
'properties': {},
'geometry': {
'type': 'LineString',
'coordinates': [
[-122.48369693756104, 37.83381888486939],
[-122.48348236083984, 37.83317489144141],
[-122.48339653015138, 37.83270036637107],
[-122.48356819152832, 37.832056363179625],
[-122.48404026031496, 37.83114119107971],
[-122.48404026031496, 37.83049717427869],
[-122.48348236083984, 37.829920943955045],
[-122.48356819152832, 37.82954808664175],
[-122.48507022857666, 37.82944639795659],
[-122.48610019683838, 37.82880236636284],
[-122.48695850372314, 37.82931081282506],
[-122.48700141906738, 37.83080223556934],
[-122.48751640319824, 37.83168351665737],
[-122.48803138732912, 37.832158048267786],
[-122.48888969421387, 37.83297152392784],
[-122.48987674713133, 37.83263257682617],
[-122.49043464660643, 37.832937629287755],
[-122.49125003814696, 37.832429207817725],
[-122.49163627624512, 37.832564787218985],
[-122.49223709106445, 37.83337825839438],
[-122.49378204345702, 37.83368330777276]
]
}
}
});
}
function addLayer() {
map.addLayer({
'id': l,
'type': 'line',
'source': s,
'layout': {
'line-join': 'round',
'line-cap': 'round'
},
'paint': {
'line-color': '#888',
'line-width': 8
}
});
}
map.on('style.load', function() {
addSource();
addLayer();
});
function switchLayer(layer) {
var layerId = layer.target.id;
map.setStyle('mapbox://styles/mapbox/' + layerId);
}
for (var i = 0; i < inputs.length; i++) {
inputs[i].onclick = switchLayer;
}