使用 javascript 的 mapbox 地图图层控件
我正在尝试从 mapbox 创建一个网络地图。我已经创建了我的自定义地图样式并在此代码中生成。在这里，我试图通过某个按钮控制图层颜色。我已经创建了我自己的自定义地图，其中还有四个名为 da_underconstruction、da_approve、da_completed、da_applied 的图层。另外两层是建在水里和楼里。通过这个应用程序可以改变水，但其他层我不能改变。任何人都可以看看并帮助我找出我做错了什么吗？注意：要运行代码，请将其复制粘贴到 html 文件中并使用浏览器打开。提前致谢。
我尝试过不同风格的地图。
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Change a layer's color with buttons</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<style>
.map-overlay {
font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
position: absolute;
width: 200px;
top: 0;
left: 0;
padding: 10px;
}
.map-overlay .map-overlay-inner {
background-color: #fff;
box-shadow:0 1px 2px rgba(0, 0, 0, 0.10);
border-radius: 3px;
padding: 10px;
margin-bottom: 10px;
}
.map-overlay-inner fieldset {
border: none;
padding: 0;
margin: 0 0 10px;
}
.map-overlay-inner fieldset:last-child {
margin: 0;
}
.map-overlay-inner select {
width: 100%;
}
.map-overlay-inner label {
display: block;
font-weight: bold;
margin: 0 0 5px;
}
.map-overlay-inner button {
display: inline-block;
width: 36px;
height: 20px;
border: none;
cursor: pointer;
}
.map-overlay-inner button:focus {
outline: none;
}
.map-overlay-inner button:hover {
box-shadow:inset 0 0 0 3px rgba(0, 0, 0, 0.10);
}
我正在尝试控制 da_constructed、da_approved、da_applied 的颜色，但这里只能控制水的颜色。
蝴蝶刀刀1回答
-
白衣非少年
免责声明：我为 Mapbox 工作。嗨，falling_programmer，看起来您对第 133 行的填充使用了错误的属性：map.setPaintProperty(layer.value, 'fill-color', color);如果您将其更改为填充挤出颜色，它会起作用。map.setPaintProperty(layer.value, 'fill-extrusion-color', color);希望有帮助！最好的，布兰迪
随时随地看视频慕课网APP
相关分类
JavaScript