Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/415.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/unit-testing/4.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何删除传单层并重新绘制?_Javascript_Leaflet_Mapbox - Fatal编程技术网

Javascript 如何删除传单层并重新绘制?

Javascript 如何删除传单层并重新绘制?,javascript,leaflet,mapbox,Javascript,Leaflet,Mapbox,我使用以下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://op

我使用以下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);
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,
属性:“映射数据©;贡献者”+
', ' +
“图像”,
id:“地图盒。灯光”
}).addTo(地图);
map.doubleClickZoom.disable();
//根据“总体密度”值获取颜色
函数getColor(d){
返回d>3000?“#006400”:
d>2500?“#FFEDA0”:
d>2000?“#FFEDA0”:
d>1500?“#c8ff58”:
d>50?“#FFEDA0”:
d>20?“#6fdc6f”:
d>10?“#6fdc6f”:
#FFEDA0";
}
功能样式(特征){
返回{
体重:2,
不透明度:1,
颜色:“#999”,
不透明度:0.7,
fillColor:getColor(feature.properties.state1)
};
}
功能高亮功能(e){
var层=e.目标;
layer.setStyle({
体重:5,
颜色:'#666',
dashArray:“”,
填充不透明度:0.7
});
如果(!L.Browser.ie&&!L.Browser.opera&&!L.Browser.edge){
层。布氏体();
}
信息更新(图层、特征、属性);
}
功能重置突出显示(e){
geojson.resetStyle(e.target);
info.update();
}
函数ZoomTof性质(e){
fitBounds(e.target.getBounds());
map.doubleClickZoom.disable();
}
功能搜索文本(e,功能){
var层=e.目标;
变量搜索={
“区域”:layer.feature.properties.name,
“区域id”:layer.feature.id
};
$.ajax({
类型:“POST”,
contentType:'application/json;charset=utf-8',
数据类型:“json”,
url:“http:dataurl”,
数据:JSON.stringify(搜索),//注意这很重要
成功:功能(结果){
//对数据做任何你想做的事
//警报(“suc”);
},
错误:函数(错误){
//警惕(“成功”);
}
});
}
var lastClickedLayer;
函数onmaclick(e,feature){
var层=e.目标;
$(“#网格名称”).html(layer.feature.properties.name);
设置_区域(layer.feature.id);
搜索文本(e,特征);
}
函数mapupdatecolor(开始日期、结束日期){
$.getJSON('http:dataurl',函数(数据){
//控制台日志(数据);

对于(i=0;i将层的声明移动到
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 })
    }
}

将图层的声明移到
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 })
    }
}