Question

我想使用leaflet.draw创建区域的轮廓。我设法让这个工作正常：https://www.mapbox.com/mapbox.js/example/v1.0.0/leaflet-draw/

现在我想将每个多边形的数据保存到mysql表中。我有点担心我将如何导出数据以及我应该在其中执行的格式。

如果可能的话，我希望将来将数据拉回到地图框/传单地图中，所以猜猜像geojson这样的东西会很好。

Answer 1

所以你可以使用draw：created来捕获图层，将其转换为geojson然后将其字符串化以保存在数据库中。我只做了一次这很脏但很有效。

map.on('draw:created', function (e) {
  var type = e.layerType;
  var layer = e.layer;

  var shape = layer.toGeoJSON()
  var shape_for_db = JSON.stringify(shape);
});

Answer 2

如果你想收集坐标，你可以这样做：

var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);

map.on('draw:created', function (e) {

    var type = e.layerType,
        layer = e.layer;

    drawnItems.addLayer(layer);

    var shapes = getShapes(drawnItems);

    // Process them any way you want and save to DB
    ...

});

var getShapes = function(drawnItems) {

    var shapes = [];

    drawnItems.eachLayer(function(layer) {

        // Note: Rectangle extends Polygon. Polygon extends Polyline.
        // Therefore, all of them are instances of Polyline
        if (layer instanceof L.Polyline) {
            shapes.push(layer.getLatLngs())
        }

        if (layer instanceof L.Circle) {
            shapes.push([layer.getLatLng()])
        }

        if (layer instanceof L.Marker) {
            shapes.push([layer.getLatLng()]);
        }

    });

    return shapes;
};

Answer 3

<!DOCTYPE html>
<html style="height: 100%">
<!-- TODO: Create Loader -->

<head>
    <link href="https://fonts.googleapis.com/css?family=Nunito:700,800" rel="stylesheet">
    <style>
    .btn {
        width: 25%;
        height: 35px;
        cursor: pointer;
        border: 2px solid currentcolor;
        border-radius: 5px;
        background-color: white;
        color: dodgerblue;
        font-family: 'Nunito', sans-serif;
        font-weight: 800;
        font-size: 16px;
        text-align: center;
    }

    .btn:hover {
        background: #2196F3;
        color: white;
    }

    #summary {
        width: 100%;
        height: 90%;
        min-height: calc(100% - 75px);
        max-height: calc(100% - 55px);
        margin: 0;
        padding-left: 8px;
        padding-right: 8px;
        box-sizing: border-box;
        overflow-y: auto;
        font-family: 'Nunito', sans-serif;
        font-weight: 700;
        font-size: 14px;
        color: #52575C;
        white-space: pre-line;
    }
    </style>
</head>

<body style="height: 100%; margin: 0;">
    <div style="width: 100%; height: 10%; min-height: 55px; max-height: 75px; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-evenly; align-items: center;">
        <button class="btn" id="close-btn">Close</button>
        <button class="btn" id="copy-btn">Copy</button>
    </div>
    <p id="summary"/> Loading Summary...
    </p>
</body>

</html>

Answer 4

如果你想使用GeoJSON，

@Michael Evans方法应该有用。

如果您想为每个形状保存LatLngs点，您可以执行以下操作：

map.on('draw:created', function (e) {
    var type = e.layerType;
    var layer = e.layer;
    var latLngs;

    if (type === 'circle') {
       latLngs = layer.getLatLng();
    }
    else
       latLngs = layer.getLatLngs(); // Returns an array of the points in the path.

    // process latLngs as you see fit and then save
}

Answer 5

别忘了圆的半径

            if (layer instanceof L.Circle) {
                shapes.push([layer.getLatLng()],layer.getRadius())
            }

PS该声明可能无法获得正确的格式，但您明白了这一点。（或者更确切地说是半径和点; - ）

Answer 6

获取共享数组+圆半径

  map.on('draw:created', function (e) {
        var type = e.layerType,
                layer = e.layer;

        if (type === 'marker') {
            layer.bindPopup('Call Point!');
        }

        drawnItems.addLayer(layer);

        var shapes = getShapes(drawnItems);

        console.log("shapes",shapes);




    });


    var getShapes = function (drawnItems) {

        var shapes = [];
        shapes["polyline"] = [];
        shapes["circle"] = [];
        shapes["marker"] = [];

        drawnItems.eachLayer(function (layer) {

            // Note: Rectangle extends Polygon. Polygon extends Polyline.
            // Therefore, all of them are instances of Polyline
            if (layer instanceof L.Polyline) {
                shapes["polyline"].push(layer.getLatLngs())
            }

            if (layer instanceof L.Circle) {
                shapes["circle"].push([layer.getLatLng()])
            }

            if (layer instanceof L.Marker) {
                shapes["marker"].push([layer.getLatLng()],layer.getRadius());
            }

        });

        return shapes;
    };

Answer 7

对我而言，它起作用了：

map.on(L.Draw.Event.CREATED, function (e) {
    map.addLayer(e.layer);
    var points = e.layer.getLatLngs();
  puncte1=points.join(',');
  puncte1=puncte1.toString();
  //puncte1 = puncte1.replace(/[{}]/g, '');
  puncte1=points.join(',').match(/([\d\.]+)/g).join(',')
//this is the field where u want to add the coordinates
$('#geo').val(puncte1);
});

Answer 8

对我来说，它的工作原理是：得到坐标后，用ajax发送到php文件，然后保存到db

 var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);

// Set the title to show on the polygon button
L.drawLocal.draw.toolbar.buttons.polygon = 'Draw a  polygon!';

var drawControl = new L.Control.Draw({
    position: 'topright',
    draw: {
        polyline: true,
        polygon: true,
        circle: true,
        marker: true
    },
    edit: {
        featureGroup: drawnItems,
        remove: true
    }
});
map.addControl(drawControl);

map.on(L.Draw.Event.CREATED, function (e) {
    var type = e.layerType,
        layer = e.layer;
        

    if (type === 'marker') {
        layer.bindPopup('');
    }

    drawnItems.addLayer(layer);
   shape_for_db = layer.getLatLngs();

使用AJAX发送到PHP文件enter code here

 var form_data = new FormData();
            form_data.append("shape_for_db",shape_for_db);
            form_data.append("name", $('#nameCordinate').val());

        $.ajax({
            url: 'assets/map_create.php', // point to server-side PHP script
            dataType: 'text',  // what to expect back from the PHP script, if anything
            cache: false,
            contentType: false,
            processData: false,
            data: form_data,
            type: 'post',
            success: function (php_script_response) {
                 var tmp = php_script_response.split(',');
                    alert(tmp );
            }
        });
});

map.on(L.Draw.Event.EDITED, function (e) {
    var layers = e.layers;
    var countOfEditedLayers = 0;
    layers.eachLayer(function (layer) {
        countOfEditedLayers++;
    });
    console.log("Edited " + countOfEditedLayers + " layers");
});

L.DomUtil.get('changeColor').onclick = function () {
    drawControl.setDrawingOptions({rectangle: {shapeOptions: {color: '#004a80'}}});
};

如何保存已完成的多边形指向leaflet.draw到mysql表

8 个答案: