我正在寻找创建一个传单地图站点,该站点:
输入参数(日期范围),然后按一个按钮
执行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 ©',
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.');
},
});
});
});
但是,它给我的问题是地图已经绘制完毕。如何在现有地图中添加此图层(并删除所有现有图层)(但仍保留覆盖图层)?
最佳答案
这是我的目的...我用评论进行了更改。我没有对此进行测试,因此可能无法首先尝试。
$(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 ©',
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.');
},
});
});
});