Bing Maps Api清除图层

Question

I have a page that works well it loads a Bing Map and creates a layer which is then filled with Polygons. I then need to reload the JSON data that makes the polygons and this again works, however the data is then added to another layer so appears over the top. I have tried to delete the layer, clear the layer etc etc but nothing seems to work.

Any idea please.

This is the function that does it all...

        function AddData() {

        dataLayer = new Microsoft.Maps.Layer();

        Microsoft.Maps.loadModule('Microsoft.Maps.GeoJson', function () {
            var featureCollection = Microsoft.Maps.GeoJson.read(json, {
                polygonOptions: {
                    strokeColor: 'LightSkyBlue',
                    strokeThickness: 2
                }
            });

            for (var i = 0; i < featureCollection.length; i++) {
                var fillColour = featureCollection[i].metadata.FillColor;
                featureCollection[i].setOptions({ fillColor: fillColour });

                Microsoft.Maps.Events.addHandler(featureCollection[i], 'click', displayClickBox);
                Microsoft.Maps.Events.addHandler(featureCollection[i], 'mouseover', displayMouseOverBox);
                Microsoft.Maps.Events.addHandler(featureCollection[i],'mouseout', displayMouseOut);
                dataLayer.add(featureCollection[i], 0);
            }
            map.layers.insert(dataLayer);
        });
    }

        var getJson = function () {
        var onContentComplete = function (response) {
            //Load the JSON data into the local variable for use latter in the project...
            json = response.data;
            //load the map now that we have the polygon data...
            AddData();
        };

        var onError = function (reason) {
            //An error has occured so display a message to the user...
            $scope.error = "Server communication error please try again...";
            //Log the error to the console for admin debug...
            console.log(reason.data);
        };

        //Load the JSON for the map polygons into memory ready for display...
        $http.get("../JSON/MapData.json")
            .then(onContentComplete, onError);
    }

As I have said I have tried to clear the layer first using

dataLayer.clear();

But that seems to do nothing.

Help please as I have been working at this for hours now.

Thanks

Cliff.

Answer 1

By the sounds of things you want all data to render in a single layer, but instead it is rendering two or more layers. This happens because you are creating a new instance of dataLayer every time the AddData function is called. Additionally, this overwrites the local variable for dataLayer and thus you lose the reference to the original layer that you are trying to clear/delete. If you want to clear or delete the layer, do that before initializing the new layer. Try adding the following to the top of your AddData function:

if(dataLayer){
   map.layers.remove(dataLayer);
}

Alternatively, reuse the layer by clearing it if it exists of or creating it if it doesn't:

if(dataLayer){
    dataLayer.clear();
}else{
    dataLayer = new Microsoft.Maps.Layer();
}