为了账号安全,请及时绑定邮箱和手机立即绑定

使用 javascript 的 mapbox 地图图层控件

使用 javascript 的 mapbox 地图图层控件

蝴蝶刀刀 2021-06-07 12:20:30
我正在尝试从 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);

希望有帮助!

最好的,布兰迪


查看完整回答
反对 回复 2021-06-11
  • 1 回答
  • 0 关注
  • 280 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信