如何在不更改插入的 geoJson 的情况下更改 mapbox 中的地图样式

Question

我曾尝试在运行时使用单选框将街道等地图样式更改为卫星、黑暗、明亮等。但是当我将 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>

Answer 1

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

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

I've since removed class level style layers and sources variables and am reloading data on every style change in mapViewDidFinishLoadingMap. While inconvenient, at least it's stable this way. Sorry for the noise. Looking forward to this feature.

Answer 2

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

// 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'
});

Answer 3

我们可以使用 "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/

如何在不更改插入的 geoJson 的情况下更改 mapbox 中的地图样式

How to change map style in mapbox without changing the geoJson inserted

javascript

maps

styles

geojson

mapbox