javascript - 删除传单中的 GeoJson 颜色

Question

我有一个使用 leafletjs 库从 GeoJson 数据生成的 map ，然后我对其进行着色，从而制作热图，问题是我需要在添加新颜色之前清除颜色。

我已经找到了清除标记的解决方案，这没关系，但我在颜色方面遇到了问题。我知道我的代码中的 ChangeMapColour() 函数当前每次都会使用相同的颜色进行绘制，但不用担心，我只需要以某种方式清除 map 中的切除颜色。我目前有:

Var NUTS2 = ...some GeoJson data....

var map = L.map('map').setView([51.133481, 10.018343], 3);
//var chart = anychart.pie();
<!--add the actual map in the background-->
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=your_token', {
    maxZoom: 18,
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
        '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
        'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    id: 'mapbox.light'
}).addTo(map); 


//add the style function
L.geoJson(NUTS2, {style: style}).addTo(map);
//add what happens at a click on the map
// I do not think the implmentation hereof is important, so omitting
L.geoJSON(NUTS2, {onEachFeature: onEachFeature}).addTo(map);

//style a spesefic feauture
function style(feature) {
return {
    fillColor: getColor(feature.properties.id),
    weight: 2,
    opacity: 1,
    color: 'white',
    dashArray: '3',
    fillOpacity: 0.1
    };
}

//this function is supposed to clear the colours and add a new one and is called from some button press
function ChangeMapColour()
{
    L.geoJson(NUTS2, {style: style}).addTo(map);
    L.geoJSON(NUTS2, {onEachFeature: onEachFeature}).addTo(map);
}

Answer 1

我为你创建了一个 fiddle :https://jsfiddle.net/falkedesign/opt0k6jh/

将您的图层添加到功能组中，然后您可以每次清除该组并使用新颜色添加新的图层。

var fg = L.featureGroup().addTo(map);
fg.clearLayers();

L.geoJson(data,{style: {fillColor : '#f00'}}).addTo(fg);