JavaScrip中的Django表单

2024-04-25 13:51:29 发布

您现在位置：Python中文网/ 问答频道 /正文
4299 3

我尝试使用Django创建一个服务器，用户在其中创建地图中的标记、线、多边形、圆等图形，因为我使用的是sliple.js。在用户创建他想要的之后，我想要几何图形（每个图形的纬度和经度）和传单有一个选项，但是你必须下载，但是我不想要，所以我把一部分源代码改成了这个

      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());
        }

有没有办法为几何图形创建一个窗体，以便在Python中对其进行操作

整个代码如下：

<!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 = async function(e) {

            var data = drawnItems.toGeoJSON();

            // make the request:
            var rsp = await fetch("C:\Users\migue\Desktop\went\db.sqlite3", {
                method: "POST",
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(data),
            });

            console.log("server responded with: ", await rsp.json());
        }


</script>

Tags： httpscomfalsemapvarjslinkscript
0条回答

目前没有回答

相关问题 更多 >

    编程相关推荐