javascript - 如何在不更改插入的 geoJson 的情况下更改 mapbox 中的 map 样式-6ren

javascript - 如何在不更改插入的 geoJson 的情况下更改 mapbox 中的 map 样式

转载作者：行者123 更新时间：2023-12-05 06:37:37

我曾尝试在运行时使用单选框将街道等 map 样式更改为卫星、黑暗、明亮等。但是当我将 geojson 文件加载到 map 时，它只显示在当前选择的 map 样式上。当我更改 map 样式时，geoJson 文件消失了。有什么办法可以保留所有 map 样式中的 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>

最佳答案

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

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

关于javascript - 如何在不更改插入的 geoJson 的情况下更改 mapbox 中的 map 样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47363647/

文章推荐： neo4j - Neo4j 中的多行执行

文章推荐： prestashop - 如何在 prestashop 1.7 中向 cms 页面添加 Hook

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何在不更改插入的 geoJson 的情况下更改 mapbox 中的 map 样式