javascript - 在 LeafLet map 上显示 jQuery 动态 GeoJSON 内容

Question

我希望创建一个传单 map 网站:

• 接受参数(日期范围)并按下按钮
• 执行 SQL 查询
• 构建查询结果的 GeoJSON 提取
• 在传单 map 上显示生成的标记

我已经完成了前三个步骤，但无法将结果添加到现有 map ( basemap 有几个 kml 图层和叠加层，我希望它们在有或没有查询数据的情况下都可用)。

这是HTML

<input id="txtStartDate" type="text" class="date-picker/>
<input id="txtEndDate" type="text" class="date-picker/>
<input type="button" id="btnMapIt" value="Map Values" class="btn"/>

<div id="map"></div>

这是 jQuery/JavaScript

$(document).ready(function () {

    // Layer Groups
    var layerCityBoundary = new L.LayerGroup();
    var layerCityRoads = new L.LayerGroup();

    // All KML Layer Group (details not reallt important - it works!)
    loadKMLData(layerCityBoundary, 'kml/city_boundary.kml');
    loadKMLData(layerCityRoads , 'kml/city_roads.kml');

    // Map Layers
    var mbAttr = 'Map data &copy',
        mbUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw';

    var grayscale = L.tileLayer(mbUrl, { id: 'mapbox.light', attribution: mbAttr }),
        streets = L.tileLayer(mbUrl, { id: 'mapbox.streets', attribution: mbAttr });

    var map = L.map('map', {
            center: [45, -80],
            zoom: 12,
            layers: [streets]
        });

    var baseLayers = {
            "Streets": streets,
            "Grayscale": grayscale
        };

    var overlays = {
            "City Boundary": layerCityBoundary ,
            "City Streets": layerCityRoads 
        };

    L.control.layers(baseLayers, overlays).addTo(map);

    //******************************************************************
    // Search Button Press
    //******************************************************************
    $('#btnMapIt').click(function () {

        var startDate = $('#txtStartDate').val();
        var endDate = $('#txtEndDate').val();

        // Run Data Handler Query
        $.ajax({
            url: "queries/dhGetMapPoints.ashx",
            contentType: "application/json; charset=utf-8",
            cache: false,
            dataType: "json",
            data: { 
                dStartDate: startDate,
                dEndDate: endDate
            },
            responseType: "json",
            success: function (geojson) {

                L.geoJson(geojson, {
                    onEachFeature: function (feature, layer) {
                        layer.bindPopup(feature.properties.name);
                    }
                }).addTo(map);

            },
            error: function () {
                alert('ERROR.');
            },
        });

    });

});

但是，它给我带来了问题，说 map 已经绘制好了。如何从现有 map 中添加此图层(并删除任何现有图层)(但仍保留叠加图层)？

Answer 1

这是我的尝试...我通过评论进行了更改。我没有对此进行测试，因此第一次尝试可能行不通。

$(document).ready(function () {

// Layer Groups
var layerCityBoundary = new L.LayerGroup();
var layerCityRoads = new L.LayerGroup();

// All KML Layer Group (details not reallt important - it works!)
loadKMLData(layerCityBoundary, 'kml/city_boundary.kml');
loadKMLData(layerCityRoads , 'kml/city_roads.kml');

// Map Layers
var mbAttr = 'Map data &copy',
    mbUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw';

var grayscale = L.tileLayer(mbUrl, { id: 'mapbox.light', attribution: mbAttr }),
    streets = L.tileLayer(mbUrl, { id: 'mapbox.streets', attribution: mbAttr });

var map = L.map('map', {
        center: [45, -80],
        zoom: 12,
        layers: [streets]
    });

var baseLayers = {
        "Streets": streets,
        "Grayscale": grayscale
    };

//pre-create geoJson layer
var geoJsonFeature;
var existGeoJson = L.geoJson(geoJsonFeature, {
    onEachFeature: function (feature, layer) {
        layer.bindPopup(feature.properties.name);
    }
});

//include geoJson layer in overlays
var overlays = {
        "City Boundary": layerCityBoundary ,
        "City Streets": layerCityRoads,
        "Existing GeoJSON": existGeoJson
    };

L.control.layers(baseLayers, overlays).addTo(map);

//******************************************************************
// Search Button Press
//******************************************************************
$('#btnMapIt').click(function () {

    var startDate = $('#txtStartDate').val();
    var endDate = $('#txtEndDate').val();

    // Run Data Handler Query
    $.ajax({
        url: "queries/dhGetMapPoints.ashx",
        contentType: "application/json; charset=utf-8",
        cache: false,
        dataType: "json",
        data: { 
            dStartDate: startDate,
            dEndDate: endDate
        },
        responseType: "json",
        success: function (geojson) {
            //loop through your geoJson adding them to your existing layer.
            for (var i = 0; i < geoJson.length; i++) {
            var obj = geoJson[i];
            existGeoJson.addData(obj);
        }


        },
        error: function () {
            alert('ERROR.');
        },
    });

});

});