将Javascript变量转换为Python
我正在使用Django在本地工作，我使用传单创建了一个地图模板。在做了一些研究之后，我发现你可以让用户点击地图创建一个标记，然后按下按钮（导出）下载用户创建的每个图形或标记的geoJSON 我想做的不是下载geoJSON，而是将其存储在数据库中（可以是本地的）。我不精通JavaScript，所以我真的被卡住了 这是地图代码将Javascript变量转换为Python,javascript,python,django-forms,leaflet,Javascript,Python,Django Forms,Leaflet,我正在使用Django在本地工作，我使用传单创建了一个地图模板。在做了一些研究之后，我发现你可以让用户点击地图创建一个标记，然后按下按钮（导出）下载用户创建的每个图形或标记的geoJSON 我想做的不是下载geoJSON，而是将其存储在数据库中（可以是本地的）。我不精通JavaScript，所以我真的被卡住了 这是地图代码 <!DOCTYPE html> <head> <meta http-equiv="content-type" content="text
<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script>
L_NO_TOUCH = false;
L_DISABLE_3D = false;
</script>
<script src="https://cdn.jsdelivr.net/npm/leaflet@1.5.1/dist/leaflet.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.5.1/dist/leaflet.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css"/>
<link rel="stylesheet" href="https://rawcdn.githack.com/python-visualization/folium/master/folium/templates/leaflet.awesome.rotate.css"/>
<style>html, body {width: 100%;height: 100%;margin: 0;padding: 0;}</style>
<style>#map {position:absolute;top:0;bottom:0;right:0;left:0;}</style>
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style>
#map_a3375e0d166f4ec89fd79df498d1f8b8 {
position: relative;
width: 100.0%;
height: 100.0%;
left: 0.0%;
top: 0.0%;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.css"/>
<style>
#export {
position: absolute;
top: 5px;
right: 10px;
z-index: 999;
background: white;
color: black;
padding: 6px;
border-radius: 4px;
font-family: 'Helvetica Neue';
cursor: pointer;
font-size: 12px;
text-decoration: none;
top: 90px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.css"/>
</head>
<body>
<div class="folium-map" id="map_a3375e0d166f4ec89fd79df498d1f8b8" ></div>
<a href='#' id='export'>Continue</a>
</body>
<script>
var map_a3375e0d166f4ec89fd79df498d1f8b8 = L.map(
"map_a3375e0d166f4ec89fd79df498d1f8b8",
{
center: [46.8527, -121.7649],
crs: L.CRS.EPSG3857,
zoom: 13,
zoomControl: true,
preferCanvas: false,
}
);
var tile_layer_0cce79173c4743718c558aeea7872020 = L.tileLayer(
"https://stamen-tiles-{s}.a.ssl.fastly.net/terrain/{z}/{x}/{y}.jpg",
{"attribution": "Map tiles by \u003ca href=\"http://stamen.com\"\u003eStamen Design\u003c/a\u003e, under \u003ca href=\"http://creativecommons.org/licenses/by/3.0\"\u003eCC BY 3.0\u003c/a\u003e. Data by \u0026copy; \u003ca href=\"http://openstreetmap.org\"\u003eOpenStreetMap\u003c/a\u003e, under \u003ca href=\"http://creativecommons.org/licenses/by-sa/3.0\"\u003eCC BY SA\u003c/a\u003e.", "detectRetina": false, "maxNativeZoom": 18, "maxZoom": 18, "minZoom": 0, "noWrap": false, "opacity": 1, "subdomains": "abc", "tms": false}
).addTo(map_a3375e0d166f4ec89fd79df498d1f8b8);
var options = {
position: "topleft",
draw: {"polyline": {"allowIntersection": false}},
edit: {"poly": {"allowIntersection": false}},
}
// FeatureGroup is to store editable layers.
var drawnItems = new L.featureGroup().addTo(
map_a3375e0d166f4ec89fd79df498d1f8b8
);
options.edit.featureGroup = drawnItems;
var draw_control_ca0cd7071ba049ccb3dafbbf098f2b38 = new L.Control.Draw(
options
).addTo( map_a3375e0d166f4ec89fd79df498d1f8b8 );
map_a3375e0d166f4ec89fd79df498d1f8b8.on(L.Draw.Event.CREATED, function(e) {
var layer = e.layer,
type = e.layerType;
var coords = JSON.stringify(layer.toGeoJSON());
layer.on('click', function() {
alert(coords);
console.log(coords);
});
drawnItems.addLayer(layer);
});
map_a3375e0d166f4ec89fd79df498d1f8b8.on('draw:created', function(e) {
drawnItems.addLayer(e.layer);
});
document.getElementById('export').onclick = function(e) {
var data = drawnItems.toGeoJSON();
var convertedData = 'text/json;charset=utf-8,'
+ encodeURIComponent(JSON.stringify(data));
document.getElementById('export').setAttribute(
'href', 'data:' + convertedData
);
document.getElementById('export').setAttribute(
'download', "my_data.geojson"
);
}
</script>
有谁能给我一些指导/教程，告诉我如何获得我想要的东西吗？我强烈推荐。它尽可能接近一个简单的web请求 您的代码可能如下所示：
// async function here allows you to use "await" keyword.
document.getElementById('export').onclick = async function(e) {
var data = drawnItems.toGeoJSON();
// make the request:
var rsp = await fetch("path/to/server/upload/url", {
method: "POST",
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data),
});
console.log("server responded with: ", await rsp.json());
}
获取路径/to/server/upload/URL上面的代码向您展示了如何将geoJSON数据从浏览器JS获取到Django服务器，以便将其保存到DB。感谢您的回答。我有一个问题，在这一部分我应该粘贴到我的本地数据库的路径吗？等待获取（“path/to/server/upload/url”没有回答这个问题-OP正在寻找一种解决方案，将数据存储在数据库中，而不是将文件上载到服务器。
// async function here allows you to use "await" keyword.
document.getElementById('export').onclick = async function(e) {
var data = drawnItems.toGeoJSON();
// make the request:
var rsp = await fetch("path/to/server/upload/url", {
method: "POST",
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data),
});
console.log("server responded with: ", await rsp.json());
}