我正在尝试从 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 回答

白衣非少年
TA贡献1155条经验 获得超0个赞
免责声明:我为 Mapbox 工作。
嗨,falling_programmer,
看起来您对第 133 行的填充使用了错误的属性:
map.setPaintProperty(layer.value, 'fill-color', color);
如果您将其更改为填充挤出颜色,它会起作用。
map.setPaintProperty(layer.value, 'fill-extrusion-color', color);
希望有帮助!
最好的,布兰迪
添加回答
举报
0/150
提交
取消