Mapbox - 完全禁用聚类-6ren

Mapbox - 完全禁用聚类

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

26

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/

26

4

0

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

文章推荐： objdump - 为什么 objdump 中缺少信息？

文章推荐： r - 如何在R中读取多个.xlsx并生成多个数据帧？

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

java - 并行流看起来不像是并行工作，完全
1。 Set 的 parallelStream 没有使用足够的线程。 Java8 parallelStream 不能完全并行工作。在我的计算机中，当任务数小于处理器数时，java8 集的 parall
java - 完全 OR 的正则表达式包含
我想将位置发送到 Google Geocoding API，因此我想用 + 替换文本中的任何空格或逗号(因为可以接收)。例如，所有这些样本应返回 Glentworth+Ireland: Glentw
javascript - 如何(完全)复制文件但更改文件名？
所以我需要为将要上传的图像文件生成较小的预览，并且我必须在每个文件名的末尾附加“_preview”。目前我正在这样做: uploadFile.map((file) => { if (fi
haskell - 为什么您不能(完全)应用具有使用其他类型同义词的参数的类型同义词？
我们可以用参数定义类型同义词，这在与实际类型一起使用时效果很好: type MyType t = t String String data Test a b = Test a b f :: MyTyp
delphi - 需要计算哪些像素是(完全)透明的
给定一个包含一些 TGraphic 后代的 Delphi TPicture，我需要计算像素颜色和不透明度。我认为我必须为每个类提供不同的实现，并且我认为我已经涵盖了 TPngImage。 32 位位图
.net - Powershell 卸载模块...完全
我正在调试 Powershell 项目。我正在使用 Import-Module 从我的 C# dll 加载 PS 模块，一切正常。尽管调用 Remove-Module 并不会完全卸载模块，因为 DLL
elasticsearch - ElasticSearch中的半完全(完全)匹配
有没有办法在ElasticSearch中要求完整(尽管不一定精确)匹配？例如，如果一个字段具有术语"I am a little teapot short and stout"，我想匹配" i am
sql - 根据年份是否(完全)包含在日期范围内进行匹配
我正在尝试根据日期范围连接两个表。表A格式为: ID CAT DATE_START DATE_END 1 10 2018-01-01 2020-12-31 2
ASP.NET - 信任级别 = 完全？
我最近加入了一家公司，在分析他们的环境时，我注意到 SharePoint web.config 的信任级别设置为“完全”。我知道这绝对是一个糟糕的做法，并且希望 stackoverflow 社区能够帮
ajax - 完全 Ajax 应用程序的基于内容的广告
我构建了一个完全依赖 AJAX 的 php/js 应用程序，因此没有任何内容是静态的。我正在尝试找到一种方法来转换基于内容的广告，该广告使用 AJAX 交付的内容作为关键字。 Google 的 Ad
sql - 根据年份是否(完全)包含在日期范围内进行匹配
我正在尝试根据日期范围连接两个表。表A格式为: ID CAT DATE_START DATE_END 1 10 2018-01-01 2020-12-31 2
c# - 如何判断文件是否已*完全*写入
我熟悉 FileSystemWatcher 类，并使用它进行了测试，或者我使用快速循环进行了测试，并在目录中列出了类型文件的目录列表。在这种特殊情况下，它们是 zip 压缩的 SDF 文件，我需要解压
javascript - Disqus 评论框不显示(完全)
按照 Disqus 上的教程进行操作时，评论框不会呈现。从 disqus 上找到的管理员看来，它的设置似乎是正确的。 var disqus_config = function () { this
python - 完全 Cython 化的应用程序
是否可以使用 Cython 将 Python 3 应用程序完全编译/链接为可执行格式(当然假设所有使用的模块都是 cythonable)。我在 Linux 下工作，我希望获得一个依赖性尽可能小的 E
c# - 隐藏控制台应用程序的控制台(完全)，但只是有时
我有一个 C# 控制台应用程序，而不是运行预构建步骤(以获取 NuGet 包)。当我调试这个时，我想传入一个参数并显示控制台。当我不调试它时，我不想看到它。我什至不希望它在那里闪烁一秒钟。我找到了
algorithm - 完全 K 叉树
我在 n 个节点上有一个完整的 19 元树。我标记所有具有以下属性的节点，即它们的所有非根祖先都是最年长或最小的 child (包括根)。我必须为标记节点的数量给出一个渐近界限。我注意到第一层有一
java - 完全 volatile 可见性保证
我正在阅读一篇关于 Java Volatile 关键字的文章，遇到了一些问题。 click here public class MyClass { private int years;
algorithm - NP 完全 - 在非确定性多项式时间内可解
一本书中写道——“如果问题 A 是 NP-Complete，则存在解决 A 的非确定性多项式时间算法”。但据我所知，"is"——NP 完全问题的答案可以在多项式时间内“验证”。我真的很困惑。能否使用非
algorithm - 子集推理 NP 完全？
考虑以下问题: 有N个硬币，编号为1到N。你看不到它们，但是给出了关于它们的 M 个事实，形式如下: struct Fact { set positions int num_head
c++ - 如何使用户定义的类型像内置类型一样*完全*地初始化？
我想制作一个包装数字类型的类型(并提供额外的功能)。此外，我需要数字和包装器可以隐式转换彼此。到目前为止我有: template struct Wrapper { T value;

首页

博学

6Ren·AI

商城

Mapbox - 完全禁用聚类