javascript - 删除传单中的GeoJson颜色(Remove GeoJson Colours in Leaflet)

Question

I have a Map generated using the leafletjs library from GeoJson data, I then colour it therefore making heatmaps, the problem is that I need to clear the colours before I add new colours.

(我有一个使用GeoJson数据的leafletjs库生成的Map，然后为它着色，因此制作了热图，问题是在添加新颜色之前需要清除颜色。)

I have found solutions for clearing markers, and that is okay, but I am having trouble with the colours.

(我已经找到了清除标记的解决方案，没关系，但是我在颜色上遇到了麻烦。)

I know the ChangeMapColour() function in my code currently will paint with the same colours everytime, but don't worry about that, I just need to somehow clear the excising colours form the map.

(我知道我代码中的ChangeMapColour（）函数当前每次都会用相同的颜色绘制，但是不用担心，我只需要以某种方式清除地图上的彩色即可。)

I currently have:

(我目前有：)

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);
}

  ask by Ian O Jannasch translate from so

Answer 1

I have created a fiddle for you: https://jsfiddle.net/falkedesign/opt0k6jh/

(我为您创建了一个小提琴： https : //jsfiddle.net/falkedesign/opt0k6jh/)

Add your layer to a featureGroup and then you can clear the group every time and add it new to it with the new color.

(将图层添加到featureGroup，然后您可以每次清除该组，并使用新颜色将其添加到新图层。)

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

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