如何在不更改插入的geoJson的情況下更改mapbox中的地圖樣式
[英]How to change map style in mapbox without changing the geoJson inserted
問題描述
我嘗試在運行時使用單選框將地圖樣式從街道更改為衛星，黑暗，明亮等。 但是，當我將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>
3 個解決方案
解決方案1
2 2017-11-18 07:39:49
您必須使用新樣式再次實例化地圖。
// 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'
});
解決方案2
-1 2017-11-18 07:38:54
解決方案3
-1 已采納 2017-11-21 08:53:15
我們可以使用“ 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/
如何使用Openlayer和geoJson文件更改地圖中圖標的樣式
[英]How can I change the style of the icons in a map with openlayer and a geoJson file
如何在Mapbox中將geojson + CSV文件與雜項傳單結合起來以將數據映射為多邊形？
[英]How to join geojson + CSV file with omnivore leaflet in Mapbox to map data as polygons?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.