时间戳

首页 > 解决方案 > 如何使用 Bootstrap 多选选项将样式和 onEachFeature 函数添加到多个 L.GeoJSON.AJAX 图层？

javascript - 如何使用 Bootstrap 多选选项将样式和 onEachFeature 函数添加到多个 L.GeoJSON.AJAX 图层？

问题描述

我正在尝试创建具有多个 L.GeoJSON.AJAX 图层的多个选择选项的地图。我很难将特定样式和 onEachFeature 函数合并到每一层。谁能帮我看看我的编码哪里出错了。因此，基本上，当用户从 Bootstrap Navbar 多选栏中选择一个或多个 geojson 图层时，他/她需要能够查看所选图层的样式和其他功能并与之交互。这是我需要帮助的代码部分：

<body>
  <li class="nav-item">
    <select multiple="multiple" id="donnees">
      <option value="ecoterritoires.geojson">Écoterritoires</option>
      <option value="grands-parcs.geojson">Grands parcs</option>
      <option value="friches.geojson">Friches</option>
      <option value="densite-de-construction.geojson">Densité urbain</option>
    </select>
  </li>
</body>
<script>
  $(document).ready(function () {
    $("#donnees").multiselect({
      buttonClass: "custom-select",
      nonSelectedText: "Sélectionnez une ou plusieurs couches",
      allSelectedText: "Toutes les couches",
      onChange: function () {
        // Retirer la couche précédemment chargée
        myMap.eachLayer(function (layer) {
          if (layer instanceof L.GeoJSON) myMap.removeLayer(layer);
        });
        var couches_selectionnees = this.$select.val();
        for (var i = 0; i < couches_selectionnees.length; i++) {
          new L.GeoJSON.AJAX("data/" + couches_selectionnees[i], {
            style: function (feature) {
              if (couches_selectionnees[i] === "ecoterritoires.geojson") {
                return {
                  color: "#006600",
                  fillColor: "#00ff00",
                  fillOpacity: 0,
                  dashArray: 1,
                  weight: 0.8,
                };
              } else if (couches_selectionnees[i] === "friches.geojson") {
                return {
                  color: "#006600",
                  fillColor: "#00cc00",
                  fillOpacity: 1,
                  dashArray: 3,
                  weight: 0.5,
                };
              } else if (couches_selectionnees[i] === "grands-parcs.geojson") {
                return {
                  color: "#006600",
                  fillColor: "#b3b300",
                  fillOpacity: 0.6,
                  dashArray: 2,
                  weight: 0.3,
                };
              } else if (couches_selectionnees[i] === "densite-de-construction.geojson") {
                return {
                  color: "grey",
                  fillColor: classifier(feature.properties.indice),
                  fillOpacity: 0.8,
                  dashArray: 1,
                  weight: 0.5,
                };
              }
            },
          }).addTo(myMap);
        }
      },
    });
  });
</script>

标签： javascriptjqueryleafletstylesgeojson

解决方案

与在 L.marker 中使用迭代器类似，只需替换for (var i为for (let i

使用var i，您有一个函数范围变量，因此它实际上对于所有循环都是相同的。特别是，在循环结束时，i等于couches_selectionnees.length。一旦您的 GeoJSON 数据到达并执行您的style函数回调，它与您的任何条件都不匹配，因此不会返回任何内容，因此您只会获得默认样式。

有了let i，您现在有了一个块范围变量，即每个循环块都有一个不同的变量。

顺便说一句，你也可以for (const i在 JavaScript 中使用，但 TypeScript 会抱怨后面的增量i++是非法的。

推荐阅读