在LeafLet地图上显示jQuery Dynamic GeoJSON内容

Question

我正在寻找创建一个传单地图站点，该站点：

• 输入参数（日期范围），然后按一个按钮
• 执行SQL查询
• 构建查询结果的GeoJSON提取
• 在传单地图上显示结果标记

我已经完成了前三个步骤，但是无法将结果添加到现有地图中（底图有一些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.');
            },
        });

    });

});

但是，这给了我一些问题，说地图已经绘制了。 如何在现有地图中添加此图层（并删除所有现有图层）（但仍保留覆盖图层）？

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.');
        },
    });

});

});