通过HTML SELECT对象筛选Json功能

Filter Json Features by HTML SELECT object

本文关键字：Json 功能 筛选 对象 HTML SELECT 通过      更新时间：2023-09-26

我有以下网站Brazil1和Brazil2

我上传了一些GPS站（Json点功能），我需要使用HTML选择对象：选择一个特定的GPS站（基于站名"Estação RBMC"）

<select name="sometext" >
  <option value="MGRP">mgrp</option>
  <option value="MGV1">mgv1</option>
  <option value="VICO">vico</option>
  <option value="MGBH">mgbh</option>
  </select>

我的第一次尝试是URL，但我不太了解。

有人能给我一个提示吗？

谢谢你抽出时间。

在select元素中指定的重要内容是id，因为它将用于添加事件侦听器。类似这样的东西：

<select id="sta_select">
  <option>(select station)</option>
  <option value="MGRP">mgrp</option>
  <option value="MGV1">mgv1</option>
  <option value="VICO">vico</option>
  <option value="MGBH">mgbh</option>
</select>

然后，您可以基于id:添加事件侦听器

var sta_select = L.DomUtil.get("sta_select");
L.DomEvent.addListener(sta_select, 'click', function (e) {
    L.DomEvent.stopPropagation(e);
});
L.DomEvent.addListener(sta_select, 'change', changeHandler);

使用stopPropagation方法的click侦听器是为了防止在选择器上的单击与贴图窗格重叠时传播到贴图，贴图窗格可以（根据您的设置）立即取消选择要高亮显示的层。change侦听器将运行一个处理程序函数，您可以将其设置为执行任何您想要的操作。在这里，我将其设置为在选择相应的option时打开标记的弹出窗口（基于选项元素中的value属性和geoJson层中的SG_RBMC属性之间的匹配）：

function changeHandler(e) {
    for (i in estacoes_rbmc._layers) {
        if (estacoes_rbmc._layers[i].feature.properties.SG_RBMC === e.target.value) {
            estacoes_rbmc._layers[i].openPopup();
        }
    }
}

这是一把小提琴，显示它在工作：

http://jsfiddle.net/nathansnider/80qcstLf/

还有一个有点花哨的版本，它将选择元素放在传单控件中的地图上，并自动填充选项属性：

http://jsfiddle.net/nathansnider/avn0ph1p/

相关文章：