如何删除传单层并再次重画?

RKR

我正在使用以下JavaScript代码在地图上绘制多边形:

var map = L.map('map').setView([], 10);

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=QA7i5Mpkd_m30IGElHziw', {
    maxZoom: 18,
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
        '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
        'Imagery © <a href="http://mapbox.com">Mapbox</a>',
    id: 'mapbox.light'
}).addTo(map);
map.doubleClickZoom.disable();

// get color depending on population density value
function getColor(d) {
    return  d > 3000 ? '#006400' :
            d > 2500 ? '#FFEDA0' :
            d > 2000 ? '#FFEDA0' :
            d > 1500 ? '#c8ff58' :
            d > 50   ? '#FFEDA0' :
            d > 20   ? '#6fdc6f' :
            d > 10   ? '#6fdc6f' :
                       '#FFEDA0';
}

function style(feature) {
    return {
        weight: 2,
        opacity: 1,
        color: '#999',
        fillOpacity: 0.7,
        fillColor: getColor(feature.properties.state1)
    };
}

function highlightFeature(e) {
    var layer = e.target;

    layer.setStyle({
        weight: 5,
        color: '#666',
        dashArray: '',
        fillOpacity: 0.7
    });

    if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
        layer.bringToFront();
    }

    info.update(layer.feature.properties);
}

function resetHighlight(e) {
    geojson.resetStyle(e.target);
     info.update();
}

function zoomToFeature(e) {
    map.fitBounds(e.target.getBounds());
    map.doubleClickZoom.disable();
}

function searchText(e,feature) {
    var layer = e.target;
    var search = {
        'zone': layer.feature.properties.name,
        'zone_id':layer.feature.id
    };
    $.ajax({
        type: "POST",
        contentType : 'application/json; charset=utf-8',
        dataType : 'json',
        url: "http:dataurl",
        data: JSON.stringify(search), // Note it is important
        success :function(result) {
            // do what ever you want with data
            //   alert("suc");

        },
        error:function(error){
            //alert("success");
            }
    });
 }


var lastClickedLayer;

function onMapClick(e,feature) {
    var layer = e.target;       
    $("#grid_name").html(layer.feature.properties.name);
    set_zone(layer.feature.id);
    searchText(e,feature);
}

function mapupdatecolor(startDate,endDate){

    $.getJSON('http:dataurl', function(data) {
        //console.log(data);
        for (i = 0; i <80; i++) { 
            console.log("1 time state1 in console--"+campus['features'][i]['properties']['state1']);
            campus['features'][i]['properties']['state1']=data[i].state1;
            console.log("2 time state1 in console after change--"+campus['features'][i]['properties']['state1']);
        }

        map.removeLayer(L.geoJson);

        var geojson = L.geoJson(campus, {
            style: style,
             onEachFeature: onEachFeature
        }).addTo(map);
    });
}

function onEachFeature(feature, layer) {
    layer.on({
        mouseover: highlightFeature,
        mouseout: resetHighlight,
        //click: zoomToFeature
        click:onMapClick
    });
}

geojson = L.geoJson(campus, {
    style: style,
    onEachFeature: onEachFeature
}).addTo(map);

var info = L.control();

info.onAdd = function (map) {
    this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
    this.update();
    return this._div;
};

// method that we will use to update the control based on feature properties passed
info.update = function (props) {
    this._div.innerHTML = '<h4><b>Zones<b></h4>' +  (props ?
        '<b>' + props.name + '</b><br />'  
        : 'Hover over a zone');
};

info.addTo(map);

校园是多边形坐标的geoJson数据的变量。

在这里,我具有mapupdatecolor单击按钮时可更新多边形颜色的功能但是现在,与其更新当前图层的多边形中的颜色,不如在地图上添加具有更新后的多边形颜色的新图层。map.removeLayer(L.geoJson);用于删除上一层,但未删除上一层。

伊万·桑切斯(IvanSanchez)

将图层的声明移到mapupdatecolor函数

var geojsonLayer;

然后,在内部mapupdatecolor,删除该层(如果存在)...

function mapupdatecolor() {
    fetch('http://dataurl').then(response=>response.json()).then(jsonData=>{

        if (geojsonLayer) { geojsonLayer.remove(); }

...然后使用新获取的数据再次创建图层

        geojsonLayer = L.geoJson(jsonData, {style: style, onEachFeature: onEachFeature })
    }
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何删除传单上的当前标记并再次添加新标记?

如何删除Jupyter Notebook的密码并再次设置令牌

如何让Regex删除冗余并再次调用自身?

单击后如何清除传单层

Git重用分支或删除并再次创建

删除表并再次创建表

未选中复选框时不会删除传单层

如何使用ant任务清空文件而不删除并再次创建?

jQuery如何将事件绑定到已删除并再次添加的元素

删除并再次添加功能后如何使该功能起作用

如何删除混合列表中的字符串并再次放置?

如何删除逗号并再次打印整行以显示逗号后面的单词

如何在onclick时获取值,并再次单击值应在jquery中删除?

如何使用JS和传单层控件更改基础层

如何从WMS传单层检索点位置数据?

如何清除输入并再次询问密码?

如何打破动画并再次运行它?

删除字符串的格式(html标记)并再次添加

更改传单层控件图标

如何强制Rabbit MQ积累并再次发送消息?

如何导出已解决的承诺并再次导入

如何从 JSON 解析 DiagnosticReport 并再次打印相同的 JSON?

单击并再次单击时如何更改“ a”元素的文本

如何备份IntelliJ插件并再次自动安装?

如何使用PIL从数组转到列表并再次返回?

如何检查从函数返回的值并再次重申循环?

如果输入不是bigDecimal,如何抛出异常并再次扫描?

如何添加数组,更改它并再次添加?

在C#WinForms中,如何在不中断其他代码执行的情况下分配标签文本几秒钟并再次将其删除?