我正在制作一份传单地图,该地图将允许用户单击地图上的某个区域,并根据单击的区域下载相应的河流数据,但是在下载功能方面却步履维艰。我已经包括了我当前的代码和代码输出的图像。我如何让脚本根据用户单击的图块(请参见下图)下载文件?理想情况下,我想使用download标签或有一个on click JavaScript事件,以便每次单击磁贴都可以下载其各自的数据。
<!DOCTYPE html>
<html>
<head>
<title>GRWL test</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"
integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
crossorigin=""></script>
<style>
#mapid {
height: 1920px;
width: 1080px;
}
</style>
<script src="leaflet-src.js"></script>
<script type="text/javascript" src="../dist/leaflet.ajax.js"></script>
<script src="spin.js"></script>
<script src="leaflet.spin.js"></script>
</head>
<body>
<div id="mapid"></div>
<script>
var map = L.map('mapid').setView([0.478320099108, -79.381377894799996], 14);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: 'Map data © <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>',
maxZoom: 18,
id: 'mapbox.streets',
accessToken: 'pk.eyJ1IjoiamltbXlzd2lzaGVyIiwiYSI6ImNqc29vYW02ejAxYjI0YW94NnBlcDhpYWEifQ.6DiOztwTzMJu3eBEyHHfrw'
}).addTo(map);
function popUp(f,l){
var out = [];
if (f.properties){
for(key in f.properties){
out.push(key+": "+f.properties[key]);
}
l.bindPopup(out.join("<br />"));
var anchor = document.createElement('a');
anchor.href = "C:\leaflet\leaflet-ajax-gh-pages\example\NA17.geojson";
anchor.target = '_blank';
anchor.download = "NA17.geojson";
anchor.click();
}
}
var jsonTest = new L.GeoJSON.AJAX(["tiles.geojson"],{onEachFeature:popUp}).addTo(map);
</script>
</body>
</html>
代码输出,在地图上创建一个网格系统:
答案 0 :(得分:0)
为什么不尝试点击地图功能。您可以从这里开始,然后根据点击的响应找出点击的内容。例如,您可以检查经纬度并将其与数组比较,以查看是否单击了地图上具有可下载项的某些部分。从那里可以轻松下载。
map.on('click', function(e) {
alert(e.latlng);
console.log(e);
// download something
/* if(something == something){
e.preventDefault();
window.location.href = 'downloadMe/riverData.doc';
}
*/
} );
答案 1 :(得分:0)
您似乎在Layer.click
event之后,
在用户点击(或点击)图层时触发。
由于leaflet-ajax
plugin 扩展了 L.GeoJSON
object,因此您可以考虑为layer注册click
事件:
function onEachFeature(feature, layer) {
layer.on({
click: downloadContent
});
}
其中
new L.GeoJSON.AJAX(
[
"https://raw.githubusercontent.com/calvinmetcalf/leaflet-ajax/gh-pages/example/counties.geojson"
],
{ onEachFeature: onEachFeature }
).addTo(map);
然后,一旦用户单击(或点击)图层,就可以像这样下载关联的GeoJSON对象:
function downloadContent(event) {
var fileName = event.target.feature.properties.COUNTY + ".json";
var featureJson = event.target.feature;
downloadJson(featureJson, fileName);
}
示例
var map = L.map("map").setView([42.2, -71], 8);
var url = "https://api.mapbox.com/styles/v1/mapbox/streets-v9/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1Ijoibml0dHlqZWUiLCJhIjoid1RmLXpycyJ9.NFk875-Fe6hoRCkGciG8yQ";
var options = {
attribution:
'© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
};
L.tileLayer(url, options).addTo(map);
function downloadContent(event) {
var fileName = event.target.feature.properties.COUNTY + '.json';
var featureJson = event.target.feature;
downloadJson(featureJson,fileName)
}
//from https://stackoverflow.com/a/30800715/1375553
function downloadJson(json, fileName) {
var data =
"data:text/json;charset=utf-8," +
encodeURIComponent(JSON.stringify(json));
var link = document.createElement("a");
link.setAttribute("href", data);
link.setAttribute("download", fileName);
document.body.appendChild(link); // required for firefox
link.click();
link.remove();
}
function onEachFeature(feature, layer) {
layer.on({
click: downloadContent
});
}
new L.GeoJSON.AJAX(
[
"https://raw.githubusercontent.com/calvinmetcalf/leaflet-ajax/gh-pages/example/counties.geojson"
],
{ onEachFeature: onEachFeature }
).addTo(map);
#map {
width: 960px;
height: 550px;
}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-ajax/2.1.0/leaflet.ajax.js"></script>
<div id="map"></div>