在 Mapbox 中使用 Leafletjs MarkerClusterGroup 和过滤器时出现问题

2023-12-03

我尝试过 Mapbox 及其 API 来创建交互式地图。目的是获取 geojson 文件中的点,并将其显示在地图上。 它们必须通过标记图标进行过滤,并根据所应用的缩放进行分组。

我在使用 MarkerClusterGroup 插件与 leaflet 和 Mapbox 时没有遇到任何问题,但我无法让过滤器工作。

这是我的代码:

https://gist.github.com/KuneStudio/5985864

这是我的 json 的内容和点:

https://gist.github.com/KuneStudio/5985858

标记显示正确,簇部分也显示正确,但我无法让过滤器工作......

任何想法?

Thanks !

(注意:使用控制台,我尝试在map.markerLayer.setFilter(function(f) {}, 之前return true,但我什么也没显示。

感谢你的宝贵时间


我在一些帮助下找到了解决方案。这是我使用的方法:

<script type='text/javascript'>

// I suppose that the json is saved in the var dataJSON

L.MarkerClusterGroup.include({
    fromGeoJSON: function (geojson) {
        this._geojson = geojson;
        this.filter();
    },

    filter: function (f) {
        f = f || function (m) { return true; }
        var markers = Array();
        for (var i = 0; i < this._geojson.features.length; i++) {
            var a = this._geojson.features[i];
            if (!f(a)) { continue; }
            var title = a.properties['title'];
            var description = a.properties['description']
            var marker = L.marker(new L.LatLng(a.geometry.coordinates[1], a.geometry.coordinates[0]), {
                icon: L.mapbox.marker.icon({'marker-symbol': a.properties['marker-symbol'], 'marker-color': a.properties['marker-color']}),
                title: title
            });
            marker.bindPopup('<b>'+title+'</b><br>'+description);
            markers.push(marker);
        }
        this.clearLayers();
        this.addLayers(markers);
    }
});

var map = L.mapbox.map('map', 'mymapid',  {markerLayer: false});
map.on('error', function (e) {
    console.log(e);
})
var cluster = new L.MarkerClusterGroup();
map.addLayer(cluster);

cluster.fromGeoJSON(dataJSON);
map.addLayer(cluster);
var filter = L.DomUtil.get('filter');
var food = L.DomUtil.get('filter-food');
var test = L.DomUtil.get('filter-test');
var all = L.DomUtil.get('filter-all');




jQuery('.chktax').on('click', function(e) {
    var allChecked = {};
    var cat = [];
    jQuery(".chktax:checked").each(function(i, elem){
            var name = elem.name;
            allChecked[name] = allChecked[name] || [];
            cat = cat || []
            allChecked[name].push(elem.value);
            cat.push(elem.value);
        });

    cluster.filter(function (m) {
            return superbag(m.properties['categories'], cat);
        });

});

L.DomEvent.on(all, 'click', function (e) {
    cluster.filter();
})


function superbag(sup, sub) {
    sup.sort();
    sub.sort();
    var i, j;
    for (i=0,j=0; i<sup.length && j<sub.length;) {
        if (sup[i] < sub[j]) {
            ++i;
        } else if (sup[i] == sub[j]) {
            ++i; ++j;
        } else {
            return false;
        }
    }
    return j == sub.length;
}
</script>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 Mapbox 中使用 Leafletjs MarkerClusterGroup 和过滤器时出现问题 的相关文章

随机推荐

  • Firestore,如何构建“likedBy”查询

    我在思考如何最好地构建我的 非常简单的 Firestore 应用程序时遇到了一些困难 我有一组这样的用户 users A123 name Adam B234 name Bella C345 name Charlie 每个用户都可以 喜欢 或
  • 使两个角圆化和两个直切而不是颤振中的曲线

    我怎样才能在颤振中制作下面的瓷砖状设计 两侧有一点弯曲 两侧的其余部分是直线切割的柔和曲线 我可以制作两个圆角和两个非圆角 但无法制作如下所示的一个 任何人都知道如何制作这样的瓷砖 我已经使用了 RoundRect ClipRRect 和
  • 如何在 C# 中向 UserControl 添加事件?

    我有一个包含 3 个标签的 UserControl 我想为其添加一个事件 该事件在标签之一的文本更改时发生 我正在使用 Visual Studio 2010 首先 您需要在类中声明事件 以及您的方法和构造函数 public event Ev
  • 创建 8 位图像

    我正在尝试创建具有纯背景色的 8 位图像 看起来应该非常简单 但文件上的详细信息将其列为 32 位颜色深度 我缺少什么 public void CreateImage var bmpOut new Bitmap 300 300 var g
  • SyntaxError:创建 virtualenv 时语法无效

    我想为 python 2 7 创建一个 virtualenv 我使用的是 3 7 我以管理员身份运行 cmd 在 Windows 10 上 C WINDOWS system32 gt virtualenv p C Python27 pyth
  • 从 Kafka 进行流聚合时运行“死锁”

    几天前我发布了另一个类似的问题 如何在启动Spark Streaming进程时加载历史数据 并计算运行聚合 我现在至少设法得到了一个 有效 的解决方案 这意味着该过程本身似乎可以正常工作 但是 由于我是 Spark 的初学者 我似乎错过了一
  • 为什么可以从 double 到 float 隐式转换?

    在 C 中我们可以写类似的东西 float f 3 55 这是一个合法的语句 而实数的类型是 double 我们将该 double 存储为浮点数 它本质上意味着将 8 个字节存储为 4 个字节 可能会丢失数据 我的问题是当我写的时候 lon
  • 重写历史记录以撤消对 git 中当前分支上的文件的所有更改

    假设我有一个修改六个文件的功能分支 该分支上的大部分提交都涉及file py 我最终意识到有一种可能更好的方法来实现此功能而无需触摸file py根本不 有没有办法调整我的分支上的所有提交以不触及该文件 我觉得应该有某种交互式变基技巧可以轻
  • shell_exec() 和 exec() 在 PHP 中不起作用

    像许多其他人一样 我对 PHP 中的 shell exec 函数有疑问 我已禁用安全模式并从 php ini 中删除了disabled functions 如果我从终端 php print php 运行 php 脚本 它工作正常 但如果我从
  • 在 MATLAB 中使用 i 和 j 作为变量

    i and j是非常流行的变量名称 例如 参见这个问题 and this one 例如 在循环中 for i 1 10 Do something end 作为矩阵的索引 mat i j 4 Why 不应该它们可以用作 MATLAB 中的变量
  • 教程的版本控制设置

    我正在尝试为与编程相关的教程设置版本控制 事实证明这是有问题的 因为有两种不同的历史 本教程提供了项目构建的历史记录 每个章节都提供了该项目的历史记录 读者将看到这些历史记录 如果我从未打算再次更改教程中已编写的章节 我可以将每个章节作为标
  • 不支持的绑定命名空间“”

    我有一个架构JAXB每次都能完美生成java类 我想得到hyperjaxb处理相同的模式 为此 我下载并解压了hyperjaxbMaven项目从这个链接然后使用导航到根目录cmd exe并通过运行示例数据对其进行测试mvn clean in
  • spring destroy-method + 请求范围 bean

    所以我想做这样的事情 Component Scope value request proxyMode ScopedProxyMode INTERFACES public class MyBean Autowired HttpServletR
  • Distcp - 容器运行超出物理内存限制

    我已经在 distcp 上苦苦挣扎了好几天 我发誓我已经用谷歌搜索得够多了 这是我的用例 USE CASE 我在某个位置有一个主文件夹 hdfs 根目录 有很多子目录 深度不固定 和文件 容量 200 000 个文件 30 GO 我只需要为
  • 提取每月第一个星期一

    如何提取从2010 01 01到2015 12 31每个月的第一个星期一 我们可以用lubridate wday测试这是否是星期一 并且day测试这是否是该月的第一周 library lubridate x lt seq ymd 2010
  • 将项目从 SQL 表插入 bootstrap-dropdown

    我正在开发 asp net 项目 我的代码背后的语言是 c 我有一个引导下拉列表 我想从 SQL 表中获取项目 有没有人可以在这方面帮助我 提前致谢 li class nav item dropdown a class btn btn li
  • durandal 优化器在 Visual Studio 中将其构建为构建后过程时引用了错误的路径

    我在 Visual Studio 中设置了一个构建后事件 以使用 durandal 的优化器 使用 Nodejs 来构建用于生产的 main built js 文件 收到错误消息说找不到 main built js 我相信这是因为它没有正确
  • 使用 ELMAH 配置自定义授权

    如何在没有默认 ASP NET 授权角色管理器的情况下将 ELMAH 配置为仅向某些人员显示 我 以及我认为的许多其他人 使用自己的授权逻辑并从零开始构建我的项目 而不使用提供的模板 我想记录错误 但似乎不可能配置 ELMAH 以某种方式覆
  • YouTube 嵌入上的播放按钮在 android-chrome 上不起作用

    我一直在页面上制作嵌入的 YouTube 视频 在桌面浏览器上运行良好 但是 在 android chrome 上 当您触摸中心的红色播放按钮时 嵌入的视频将不会播放 当你触摸播放按钮外面时 它确实可以正常播放 这很奇怪 我的客户也在 iP
  • 在 Mapbox 中使用 Leafletjs MarkerClusterGroup 和过滤器时出现问题

    我尝试过 Mapbox 及其 API 来创建交互式地图 目的是获取 geojson 文件中的点 并将其显示在地图上 它们必须通过标记图标进行过滤 并根据所应用的缩放进行分组 我在使用 MarkerClusterGroup 插件与 leafl