如何将完成的多边形点leaflet.draw保存到mysql表

Posted 2023-02-16

【中文标题】如何将完成的多边形点leaflet.draw保存到mysql表

【英文标题】：How to save a completed polygon points leaflet.draw to mysql table

【发布时间】：2014-07-23 23:50:21

【问题描述】：

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

现在我想将每个多边形的数据保存到一个 mysql 表中。我对如何导出数据和我应该使用的格式有点坚持。

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

【参考方案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);
);

【讨论】：

@Micheal 这在标记的情况下不起作用并引发错误无法读取 undefined(...) 的属性 'toGeoJSON' 请帮帮我

不错，但是如何将 shape_for_db 恢复回图层组

【参考方案2】：

如果你想使用 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

【参考方案3】：

如果要采集坐标，可以这样：

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

【讨论】：

这在标记的情况下不起作用并引发错误无法读取未定义的属性'toGeoJSON'（...）请帮帮我

【参考方案4】：

不要忘记圆的半径

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

PS 该语句可能没有得到正确的格式，但你明白了。 （或者更确切地说是半径和点;-)

【参考方案5】：

以关联数组+圆半径的形式获取共享

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

【参考方案6】：

对我来说是这样的：

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

【参考方案7】：

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

// restore
L.geoJSON(JSON.parse(shape_for_db)).addTo(mymap);

【讨论】：

在创建下我们可以将 ID 设置为新创建的形状，但是我们如何在编辑时捕获相同的 ID 以保存对 db 的更改

【参考方案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(); 
    

发送到 PHP 文件 enter code hereWITH AJAX

 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');
;