在搜索传单地图时添加图层会更改多边形不透明度

Question

我有两张传单地图，它们在单击搜索按钮的基础上加载了 geojson。这显示了一些样式不透明度为 0.3 的多边形，因此您可以在多边形下方看到街道名称。

除了任何额外的多边形搜索和加载开始改变多边形的不透明度，使其更加坚固，所以您无法阅读多边形下的街道名称外，它工作得很好。

我尝试在添加到地图之前清除 geojson 层，但问题仍然存在。

我在这里创建了一个粗略的问题代码笔： https://codepen.io/joomkit/pen/xxXgLPJ?editors=1111

基本上只要点击搜索按钮就可以加载层，不需要填充监听器运行一个函数并获取静态数据。

我试过各种方法去除图层。第二次单击搜索意味着清除图层并加载新图层。在这个例子中，它只是重新加载原始数据，但不透明度很明显。

主要代码也在下面。

var geoMap2;
var lamap = new L.Map("map2", {
  center: new L.LatLng(51.44094723464765, 0.048892332250943187),
  // center: new L.LatLng(39.75621,-104.99404),
  zoom: 14,
  maxZoom: 18
});
var osm2 = L.tileLayer(
  "https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png",
  {
    attribution:
      '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
    subdomains: "abcd",
    maxZoom: 18
  }
);
lamap.addLayer(osm2);

searchButton.addEventListener("click", function (e) {
  let searchQuery = inputSearch.value;
  // searchOpenFunding(searchQuery);

  setLaMap(data);
});

function setLaMap(data) {
  removeLayers();

  let geojsonFeatureCollection2 = {
    type: "FeatureCollection",
    features: setFeatureCollection2(data)
  };

  geoMap2 = L.geoJSON(geojsonFeatureCollection2, {
    style: polyStyleLAMap,
    onEachFeature: function myonEachFeatureLaMap(feature, layer) {
      layer.myTag = "myGeoJSON";
    }
  }).addTo(lamap);

  lamap.setMaxBounds(lamap.fitBounds(geoMap2.getBounds()));
  lamap.setZoom(13);
}

var removeLayers = function () {
  lamap.eachLayer(function (layer) {
    if (layer.myTag && layer.myTag === "myGeoJSON") {
      lamap.removeLayer(layer);
      console.log("rem layer from ");
    }
  });
};

function setFeatureCollection2(data) {
  for (const [key, item] of Object.entries(data)) {
    // setup lealfet geojson collection from data mapit api is incomplete pe ritem so we build it here
    geoJsonFeatures2.push({
      type: "Feature",
      properties: {
        craftentryId: item.id,
        areaId: item.mapitAreaId,
        lsoacode: item.lsoacode,
        localauthority: item.localauthority,
        openForFunding: item.openForFunding,
        fundableRegion: item.fundableRegion,
        title: item.title,
        popupContent: ""
      },
      geometry: item.geojson
    });
  }
  return geoJsonFeatures2;
}

function polyStyleLAMap(feature) {
  return {
    fillColor: getFillColorLaMap(feature.properties.openForFunding),
    weight: 1,
    opacity: 1,
    color: getBorderColor(feature.properties.openForFunding),
    dashArray: "0",
    fillOpacity: 0.3
  };
}
function getFillColorLaMap(d) {
  return d === true ? "#FFFFFF" : d === false ? "#FED976" : "#FED976";
}
function getBorderColor(d) {
  return d === true ? "#0e9c12" : d === false ? "#adabab" : "#cccccc";
}

Answer 1

您需要将 geojson 图层保存在全局变量中，并在覆盖新图层数据之前将其删除。

var geoMap2;
function setLaMap(data){
    if(geoMap2) { // if geoMap2 is set remove it
        lamap.removeLayer(geoMap2)
    }

    const geojsonFeatureCollection2 = {
        "type": "FeatureCollection",
        "features": setFeatureCollection2(data)
    }
    geoMap2 = L.geoJSON(geojsonFeatureCollection2, {
        style: polyStyleLAMap,
        onEachFeature: myonEachFeatureLaMap
    })

.........

Answer 2

看这里https://codepen.io

我修改的代码是：

// 029A, 029C
function setLaMap(data) {
  removeLayers();

  let geojsonFeatureCollection2 = {
    type: "FeatureCollection",
    features: setFeatureCollection2(data),
  };

  console.log(geojsonFeatureCollection2);

  const geoMap2 = L.geoJSON(geojsonFeatureCollection2, {
    style: polyStyleLAMap,
    onEachFeature: function (feature, layer) {
      layer.myTag = "myGeoJSON";
    },
  });

  map.addLayer(geoMap2);

  map.setMaxBounds(map.fitBounds(geoMap2.getBounds()));
  // map.setZoom(13);
}

function removeLayers() {
  map.eachLayer((layer) => {
    if (layer.myTag && layer.myTag === "myGeoJSON") {
      console.log(layer);
      map.removeLayer(layer);
    }
  });
}

在搜索传单地图时添加图层会更改多边形不透明度

adding layer on search for leaflet map changes polygon opacity

geojson

leaflet