javascript - mapbox map 层控件与 javascript-6ren

javascript - mapbox map 层控件与 javascript

转载作者：太空宇宙更新时间：2023-11-04 06:12:21

26

4

我正在尝试从 mapbox 创建 web map 。我已经创建了我的自定义 map 样式并在此代码中生成。在这里我试图通过一些按钮来控制图层颜色。我创建了自己的自定义 map ，其中包含另外四个图层，分别命名为 da_underconstruction、da_approve、da_completed、da_applied。另外两层是建在水中和建筑物上。通过这个应用程序，水可以改变，但其他层我不能改变。任何人都可以看看并帮助我找出我做错了什么吗？注意:要运行代码，请将其复制粘贴到 html 文件中并使用浏览器打开。提前致谢。

我尝试过不同风格的 map 。

<!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);
}
</style>

<div id='map'></div>
<div class='map-overlay top'>
    <div class='map-overlay-inner'>
        <fieldset>
            <label>Select layer</label>
            <select id='layer' name='layer'>
                <option value='da_approved'>da_approved</option>

                 <option value='da_completed'>da_completed</option>
                  <option value='da_applied'>da_applied</option>
                   <option value='da_underconstruction'>da_underconstruction</option>
                   <option value='building'>Buildings</option>
                   <option value='water'>water</option>
            </select>
        </fieldset>
        <fieldset>
            <label>Choose a color</label>
            <div id='swatches'></div>
        </fieldset>
    </div>
</div>

<script>
mapboxgl.accessToken = 'pk.eyJ1IjoibnNiemhkIiwiYSI6ImNqdnhudHdkejA2anI0NHBpamNqbzIxaHcifQ.w7fVujcKAIAF0WTN9A8HZg';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/nsbzhd/cjw4md68g226y1cp3k6iwobna',
    center: [144.961786, -37.817656],
    zoom: 15.78,
    pitch:60.00
});

var swatches = document.getElementById('swatches');
var layer = document.getElementById('layer');
var colors = [
    '#ffffcc',
    '#a1dab4',
    '#41b6c4',
    '#2c7fb8',
    '#253494',
    '#fed976',
    '#feb24c',
    '#fd8d3c',
    '#f03b20',
    '#bd0026'
];

colors.forEach(function(color) {
    var swatch = document.createElement('button');
    swatch.style.backgroundColor = color;
    swatch.addEventListener('click', function() {
        map.setPaintProperty(layer.value, 'fill-color', color);
    });
    swatches.appendChild(swatch);
});
</script>

</body>
</html>

我试图控制 da_construced、da_approved、da_applied 的颜色，但这里只能控制水的颜色。

最佳答案

免责声明:我为 Mapbox 工作。

嗨，堕落的程序员，

看起来您在第 133 行使用了错误的填充属性:

map.setPaintProperty(layer.value, 'fill-color', color);

如果您将其更改为 fill-extrusion-color，它就会起作用。

map.setPaintProperty(layer.value, 'fill-extrusion-color', color);

希望对您有所帮助!

最好的，布兰迪

关于javascript - mapbox map 层控件与 javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56315839/

26

4

0

文章推荐： C 为什么将数组的首地址传递给 char 指针会提供整个字符串？

文章推荐： java - 我的日志文件是空的

ios - Mapbox 未加载街道和详细信息 : Failed to load mapbox://mapbox. mapbox-streets-v6
刚刚通过 cocoapods 安装了 MapboxGL。我在我的 ViewController 中初始化它，就像给出的示例一样: @IBOutlet weak var mapViewWrapper:
mapbox - mapbox gl更改图标颜色
有没有办法更改mapbox-gl-js图标图像的颜色？取自https://www.mapbox.com/mapbox-gl-js/example/geojson-markers/的代码不会将标记颜色
mapbox - 与旧的 Mapbox.js 相比，Mapbox GL JS 性能较差
我正在重写来自 Mapbox.js 的路线规划 Web 应用程序至 Mapbox GL JS图书馆。几乎所有功能都已实现，但由于的滞后、不流畅的动画和普遍的缓慢，它几乎无法使用。 map 层 .
mapbox - 如何从 Mapbox 获取高程剖面数据？
我的问题是，如何从 MapBox 服务获取指定路线的海拔剖面图。在输入中，我们将路径/路线作为坐标数组(纬度、经度)。作为结果，我们想要获得坐标对的数组 - 高程。如果高程数据的分辨率高于提供的路
mapbox - 如何检查 mapbox 图层是否准备就绪？
如何检查 map 上是否显示了 Mapbox 栅格图层？我的目标是停止加载动画。我知道我可以检查 map 本身是否准备就绪。 map.on('ready', someFunction) 除了针对特定
mapbox - 如何从 Mapbox 国家边界获取一组国家边界
https://codepen.io/m12n/pen/XWNRZMg?editors=0010 mapboxgl.accessToken = "pk.eyJ1IjoiaW50ZWxsaWdlbm
mapbox - 将自定义标记添加到 mapbox gl
我想在我的 map 上添加一个自定义标记。我正在使用 mapbox gl 脚本。我发现与此主题相关的唯一文档是这个 https://www.mapbox.com/mapbox-gl-js/examp
mapbox - mapbox gl js是否有任何空闲事件？
我需要mapbox gl的某种Google map “空闲”事件。当触发每个事件并且 map 停止放大/缩小拖动等并且每个图层都已加载时， map 处于空闲状态。我必须使用此代码 map.on
mapbox - 离线使用 Mapbox GL
有没有办法在离线设置中使用 Mapbox GL(询问 JS 和 native )？使用 MBTiles，您可以使用 MBTiles 文件或提取光栅图像。我想知道是否有任何类似的东西可以让 Mapbox
mapbox - 如何沿线放置正方形？ (Geojson+mapbox)
我有一个矩形，需要用正方形填充它。我找到中心线并想沿着该线放置方 block 。但是有没有简单的方法可以在 mapboxgl 中与 turfjs 等其他库一起绘制正方形？就像设置正方形的中心和边长并获
mapbox - 标记集群 mapbox android
我对 MapBox 中的标记有疑问。我有多个标记，我想对其进行聚类。我使用 MapBox SDK for android。请帮我。非常感谢。我在 Google Service Map Android
android - 找不到 com.mapbox.mapboxsdk :mapbox-android-accounts:0. 7.0。全新安装 MapBox
我建立了一个新的 react-native 项目并使用 yarn add @react-native-mapbox-gl/maps 添加了 Mapbox。这个 Notice, that if you
android - 找不到 com.mapbox.mapboxsdk :mapbox-android-accounts:0. 7.0。全新安装 MapBox
我建立了一个新的 react-native 项目并使用 yarn add @react-native-mapbox-gl/maps 添加了 Mapbox。这个 Notice, that if you
zooming - Mapbox:如何从 Mapbox 获取缩放级别的比例？
是否可以获取对应于 Mapbox 缩放级别的仪表列表？就像下面从 Bing map 中列出的一样:here 最佳答案是的，就在 Mapbox 文档中: https://docs.mapbox.com
mapbox - 如何在 Mapbox GL 中添加一个简单的标记？
由于 Mapbox GL 文档没有讨论任何关于向 LngLat 坐标添加简单标记的内容，而且实际上只有关于如何添加自定义标记的文档，我希望有人能告诉我您应该如何获取 Mapbox-gl.js实际上为传
mapbox - 如何编写考虑缩放、特征状态和数据驱动样式的 Mapbox 绘制表达式？
我有一个图层将 geojson 源中的点要素渲染为圆圈。以下是其中一项功能的示例: { type: 'Feature', properties: { color: 'red',
mapbox - 如何在嵌套属性上使用 mapbox "case"表达式？
如何使用嵌套值以使用 case == 运算符？就像是: this.map.setPaintProperty("somelayer", "fill-color", ["case",
mapbox - 在 mapbox.js 中获取纬度和经度
我正在使用 mapbox.js 制作带有地点的 map 。我只是想让 map 返回点击的正确坐标，我使用以下代码成功管理: map.on('click', function(e) { var
mapbox - 使用 mapbox gl 双击事件
我在 style.load 事件上重绘图层并移除图层 map.on('style.load', function() { loadByBounds(tempBou
mapbox - 带插值的数据驱动文本大小？ [Mapbox-gl-js]
我正在努力实现更好的文本大小调整，相信通过插值，我也许能够将我当前的文本标签更新为更高效的格式。目前我们正在创建“静态文本”，本质上我们获得了特定缩放级别的理想文本大小，然后在每个缩放级别使用停止缩放

首页

博学

6Ren·AI

商城

javascript - mapbox map 层控件与 javascript