Переменная Javascript для Python - PullRequest
Новая
       8

Переменная Javascript для Python

0 голосов
/ 27 октября 2019

Я работаю локально, используя Django, и я создал шаблон карты, используя Leaflet. Проведя некоторые исследования, я обнаружил, что вы можете позволить пользователю щелкнуть карту, чтобы создать маркер, а затем нажать кнопку (экспорт), чтобы загрузить geoJSON каждой фигуры или маркера, созданного пользователем.

Я хочу не загружать geoJSON, а сохранять его в базе данных (он может быть локальным). Я не очень разбираюсь в JavaScript, поэтому я действительно застрял.

Это код карты 

<!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>

И я знаю, что эту часть я должен изменить 

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

Может ли кто-нибудь дать мне какое-нибудь руководство / учебное пособие о том, как добиться того, чего я хочу?

1 Ответ

0 голосов
/ 27 октября 2019

Я очень рекомендую API выборки . Это как можно ближе к простому веб-запросу!

Ваш код может выглядеть следующим образом: 

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

РЕДАКТИРОВАТЬ: Ответ на ваш вопрос ОЧЕНЬ зависит от того, какие технологии баз данных вы используетес помощью. Некоторые серверы баз данных размещают HTTP API, который позволяет вам fetch напрямую к ним, например CouchDB , но это крайне редко, даже при использовании Couch (из соображений безопасности JavaScript в вашем браузере ОЧЕНЬ ограниченОпции ввода / вывода).

Вот (на сегодняшний день) наиболее распространенный способ решения этой проблемы:

  1. отправка geoJSON из браузера на сервер (пример кода выше)

  2. сервер сохраняет JSON в базу данных

Вы заявили, что используете Django. Это серверная технология в # 2.

На сервере вы выберете следующий путь:

  1. создайте Django Route в конечной точке URL, где вывведите ваш path/to/server/upload/url
  2. В функции python маршрута вы сохраните данные в базе данных, подключенной к Django.

В Django взаимодействие с базой данных обычно осуществляется через ORM * Django , но вы можете использовать любую методологию, которую вы хотите на данный момент.

Приведенный выше код показывает вам, как передать данные geoJSON из браузера JS на сервер Django, чтобы вы могли сохранить их в БД.

...