Mapbox - 完全禁用聚类-6ren

Mapbox - 完全禁用聚类

转载作者：行者123 更新时间：2023-12-02 00:16:11

30

4

我已经开始尝试使用 Mapbox，一切如我所愿，只是我无法弄清楚如何禁用集群。这是我的代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Add custom icons with Markers</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>
        .marker {
            /*display: block;*/
            border: none;
            /*border-radius: 50%;*/
            cursor: pointer;
            padding: 0;
            background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/Map_pin_icon.svg/176px-Map_pin_icon.svg.png');
            background-size: cover;
            width: 20px;
            height: 27px;
            /*border-radius: 50%;*/
            /*cursor: pointer;*/
        }
    </style>

    <div id='map'></div>

    <script>
        mapboxgl.accessToken = 'pk.eyJ1IjoibmFiZWxla3QiLCJhIjoiY2p4ZXVubnQwMGVmcTN6cGU0c3JpZmM2diJ9.peecDCcSljWhChxCknv7AQ';

        var coordinates = [
            [6.73579, 78.72300],
            [2.70886, 11.51694],
            [34.05482, -57.09742],
            [-39.05019, 89.79126],
            [17.44893, 35.57014],
            [23.60105, 168.12674],
            [-4.87631, 72.99334],
            [39.7392, -104.9903],
            [39.79905,-105.78118],
            [39.80266,-105.78692],
            [39.79758,-105.78061],
            [39.80314,-105.78978],
            [39.80313,-105.78999],
            [39.80103,-105.78272],
            [39.80096,-105.78259],
            [39.80187,-105.78407],
            [39.80283,-105.78593],
            [39.79937,-105.78134],
            [39.80023,-105.78164],
            [39.80272,-105.78765],
            [39.80263,-105.78673],
            [39.80264,-105.78676],
            [39.80125,-105.78326],
            [39.7976,-105.78028],
            [39.80316,-105.7905],
        ]
        var num_coordinates = Object.keys(coordinates).length

        var geojson = {
          "type": "FeatureCollection",
          "features": []
        }

        for (var coord_ind = 0; coord_ind < num_coordinates; coord_ind++) {
          geojson.features.push({
            "type": "Feature",
            "properties": {
                "message": "Bar",
                "iconSize": [300, 300]
            },
            "geometry": {
                "type": "Point",
                "coordinates": [coordinates[coord_ind][1],    coordinates[coord_ind][0]]  // Longitude then Latitude
            }
          })
        }

        var map = new mapboxgl.Map({
            container: 'map', // container id
            style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
            // style: 'mapbox://styles/mapbox/satellite-v9', // stylesheet location
            center: [-99.66, 38.46], // starting position [lng, lat]
            zoom: 5.5 // starting zoom
        });

        map.on('load', function() {
            map.loadImage('https://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/Map_pin_icon.svg/176px-Map_pin_icon.svg.png', function(error, image) {
                if (error) throw error;
                map.addImage('pin', image);
                map.addSource("photo_locations", {
                    type: "geojson",
                    data: geojson,
                    cluster: false,
                    clusterMaxZoom: 1, // Max zoom to cluster points on
                    clusterRadius: 1 // Radius of each cluster when clustering points (defaults to 50)
                });
                map.addLayer({
                    "id": "points",
                    "type": "symbol",
                    "source": "photo_locations",
                    "layout": {
                        "icon-image": "pin",
                        "icon-size": 0.12
                    }
                });
            });
        });

    </script>

</body>
</html>

您可以看到我为我的源设置了 cluster: false。但是，如果您在浏览器中显示它，这些图钉仍然聚集在一起。如果您放大丹佛西部的大头针，您会看到它分成多个大头针。

如何让集群完全禁用，以便在任何缩放级别都可以看到每个单独的图钉？任何想法表示赞赏。谢谢!

最佳答案

正如 geografa 所建议的，添加 "icon-allow-overlap": true 就可以了。这需要添加到图层的 layout 部分。所以我现在有:

...
"layout": {
    "icon-image": "pin",
    "icon-size": 0.08,
    "icon-allow-overlap": true
}
...

关于Mapbox - 完全禁用聚类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56894865/

30

4

0

文章推荐： json - 使用jq添加JSON对象时如何防止转义？

文章推荐： bash - Shell 命令对文件中相似文本行的数字求和

文章推荐： csv - pyspark:spark.read.format ("csv") 与 spark.read.csv 的差异性能

文章推荐： amazon-web-services - 整个存储桶的预签名 url

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

商城

Mapbox - 完全禁用聚类