【问题标题】:Remove geoJSON from Leaflet map从 Leaflet 地图中删除 geoJSON
【发布时间】:2017-07-24 14:41:19
【问题描述】:

我有一个函数可以检索带有地震数据的 JSON,我将其添加到 Leaflet 地图中,它会在 10 秒后再次检索 JSON(用于刷新数据):

function fetchQuake() {
        fetch('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_hour.geojson')
        .then(function(res) {
            if (res.ok === true) {
                return res.json();
            } else {
                alert('Geojson request failed.');
            }
        })
        .then(function(quake) {
                L.geoJSON(quake, {
                    style: function(feature) {
                        return feature.properties && feature.properties.style;
                    },
                    onEachFeature: onEachFeature,
                    pointToLayer: function(feature, latlng) {
                        return L.circleMarker(latlng, {
                            radius: 8,
                            fillColor: "#ff7800",
                            color: "#000",
                            weight: 1,
                            opacity: 1,
                            fillOpacity: 0.8
                        });
                    }
                }).addTo(map);

            myQuakeTimeout = setTimeout(function() {
                fetchQuake();
            }, 10000);
        });
}

还有一个从这些点清除地图的函数:

function clearQuake() {
    clearTimeout(myQuakeTimeout);
    L.geoJSON().clearLayers();
}

使用这些代码,超时停止,但地震点并没有离开地图,这是什么问题?

【问题讨论】:

  • Enrico,您能否更新您的问题,更具体地说明您在哪里以及如何调用 clearQuake() 函数?谢谢!
  • 函数由一个按钮调用,交替执行,首先执行fetchQuake添加地震点,然后执行clearQuake删除它们

标签: javascript json leaflet layer


【解决方案1】:

使用此代码,您的clearQuake() 函数永远不会被调用,因此L.geoJSON().clearLayers() 永远不会被执行。

这就是您的积分不会离开地图的原因。

如果您想在添加新获取的点之前删除以前的点,您可以执行以下操作:

/* ... */
.then(function(quake) {

    L.geoJSON().clearLayers();

    L.geoJSON(quake, {
        /* ... */
    }).addTo(map);

    myQuakeTimeout = setTimeout(fetchQuake, 10000);
});

【讨论】:

  • 投反对票的人能否给我一些反馈和/或投反对票的原因?谢谢!
  • 即时问题似乎是试图清除一个新的空组,而不是之前创建的图层组。至于clearQuake,OP 的最后一句话暗示它可能通过外部方式被调用,以停止链并刷新所有内容。确实,在每次超时添加新数据之前不尝试清除看起来很奇怪。
  • 谢谢@ghybs :) 好吧,清除一个空组应该不是问题,但可以通过一次比较来避免。此外,恕我直言,OP 的最后一句话并不意味着 clearQuake() 被调用。他没有使用setInterval,而是setTimeout,所以如果Promise 失败,timeout 将停止,但不会调用clearQuake。当然,我们可以做出假设,但事实是共享代码没有显示应该如何调用 L.geoJSON().clearLayers()...
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2017-11-09
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-04-04
  • 1970-01-01
  • 2014-10-02
相关资源
最近更新 更多