我想在 Mapbox GL JS 中的图层之间切换。我创建了一些单选按钮,它们在一定程度上起作用,您可以从一层切换到另一层,但不能来回切换。
下面是到目前为止我用于切换图层的代码:
var layerList = document.getElementById('toggle');
var inputs = layerList.getElementsByTagName('input');
function switchLayer(layer) {
var layerId = layer.target.id;
map.setLayoutProperty(layerId, 'visibility');
}
for (var i = 0; i < inputs.length; i++) {
inputs[i].onclick = switchLayer;
}
Run Code Online (Sandbox Code Playgroud)
这是其余的代码(简化)和 jsbin 的链接https://jsbin.com/cigekutiho/edit?html,output
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Test</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src='https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.js'>
</script>
<link href='https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.css' rel='stylesheet' />
<script src='https://api.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.css' rel='stylesheet'/>
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.2.0/mapbox-gl-geocoder.min.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.2.0/mapbox-gl-geocoder.css' type='text/css' />
<link href='https://www.mapbox.com/base/latest/base.css' …Run Code Online (Sandbox Code Playgroud)