如何更改地图框中的地图样式而不更改插入的geoJson

问题描述：

我曾尝试在运行时使用无线电框更改街道到卫星，黑暗，明亮等地图样式。但是当我加载geojson文件到地图时，它只显示在当前选择的地图样式上。当我更改地图样式时，geoJson文件消失了。有什么办法可以保留所有地图样式中的geoJson文件，甚至当我更改样式时？如何更改地图框中的地图样式而不更改插入的geoJson

var map; 
 
mapboxgl.accessToken = 'pk.eyJ1Ijoic2FkaXF1ZSIsImEiOiJjajlrc3V0bjkxaGxlMzNzMjBwdmZ3NmF1In0.KOe_ASpXmNUF_TmN6h2CHw'; 
 
map = new mapboxgl.Map({ 
 
    container: 'map', // container element id 
 
    style: 'mapbox://styles/mapbox/light-v9', 
 
    center: [90.899, 26.372], // initial map center in [lon, lat] 
 
    zoom: 7 
 
}); 
 

 
var layerList = document.getElementById('menu'); 
 
var inputs = layerList.getElementsByTagName('input'); 
 

 
function switchLayer(layer) { 
 
    var layerId = layer.target.id; 
 
    map.setStyle('mapbox://styles/mapbox/' + layerId + '-v9'); 
 
} 
 

 
for (var i = 0; i < inputs.length; i++) { 
 
    inputs[i].onclick = switchLayer; 
 
} 
 

 
function loadRails() { 
 
    mapboxgl.accessToken = 'pk.eyJ1Ijoic2FkaXF1ZSIsImEiOiJjajlrc3V0bjkxaGxlMzNzMjBwdmZ3NmF1In0.KOe_ASpXmNUF_TmN6h2CHw'; 
 

 
    map.addLayer({ 
 
    id: 'collisions', 
 
    type: 'line', 
 
    source: { 
 
     type: 'geojson', 
 
     data: 'testRails.geojson' // replace this with the url of your own geojson 
 
    } 
 
    }, 'admin-2-boundaries-dispute'); 
 

 
}

<html> 
 

 
<head> 
 
    <title>Change a map's style</title> 
 
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.42.1/mapbox-gl.js'></script> 
 
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.42.1/mapbox-gl.css' rel='stylesheet' /> 
 
    <style> 
 
    body { 
 
     margin: 0; 
 
     padding: 0; 
 
    } 
 
    
 
    #map { 
 
     position: absolute; 
 
     top: 0; 
 
     bottom: 0; 
 
     width: 100%; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 

 
    <br><div id='map'></div><br> 
 
    <button style="position:relative;" onclick="loadRails()">load geoJson</button> 
 
    <div id='menu' style="position:relative;"> 
 
    <input id='basic' type='radio' name='rtoggle' value='basic' checked='checked'> 
 
    <label for='basic'>basic</label> 
 
    <input id='streets' type='radio' name='rtoggle' value='streets'> 
 
    <label for='streets'>streets</label> 
 
    <input id='bright' type='radio' name='rtoggle' value='bright'> 
 
    <label for='bright'>bright</label> 
 
    <input id='light' type='radio' name='rtoggle' value='light'> 
 
    <label for='light'>light</label> 
 
    <input id='dark' type='radio' name='rtoggle' value='dark'> 
 
    <label for='dark'>dark</label> 
 
    <input id='satellite' type='radio' name='rtoggle' value='satellite'> 
 
    <label for='satellite'>satellite</label> 
 
    </div> 
 

 

 
</body> 
 

 
</html>

答

我们可以用“Mapbox JS”改变风格没有改变它的GeoJSON的文件。

添加样式：https://www.mapbox.com/mapbox.js/example/v1.0.0/toggle-baselayers/

添加GeoJSON的文件：https://www.mapbox.com/mapbox.js/example/v1.0.0/geojson-marker-from-url/

答

这将记录在here和here。它似乎按设计工作。

我认为，虽然听起来违反直觉，但重绘会更好。我在这里引用海报

我已经删除了类级别样式图层和源变量，并且正在重新加载mapViewDidFinishLoadingMap中每个样式更改的数据。虽然不方便，但至少它是稳定的。对不起，噪音。期待这个功能。

答

您必须再次使用新样式实例化地图。

// Initially 
var map = new mapboxgl.Map({ 
    // Whatever options 
    style: 'some-style' 
}); 

// On style change, remove map and re-initialize 
map.remove(); 
map = new mapboxgl.Map({ 
    // Options, 
    style: 'some-other-style' 
});

当我取出地图，重新初始化，加载整个GeoJSON的文件被删除。即使我们改变了风格，我也需要geoJson文件在地图中。请给我一个建议吗？并感谢您的回复。 –

如何更改地图框中的地图样式而不更改插入的geoJson

相关推荐