时间戳

首页 > 解决方案 > 如何在 PostgreSQL 中保存地图？

ruby-on-rails - 如何在 PostgreSQL 中保存地图？

问题描述

我目前正在开发用于制作地质图的应用程序。我的后端使用 Ruby on Rails，前端使用 React，数据库使用 Postgres。我正在使用 React Leaflet 来显示地图（将 Leaflet.js 抽象为 React 组件）。我从 OpenTopoMap 获取地图。这个应用程序是非商业的，我已经检查了他们的使用条款，以确保我没有违反。

我希望用户能够查看地图并能够在其上添加点和绘制多边形（我已经知道如何做这部分）。一旦他们在地图上完成绘制，我希望他们能够保存地图以及他们所做的任何添加。然后他们应该能够稍后重新打开它并对其进行修改。

我发现保存地图的唯一方法是保存为 .png，这意味着重新打开时无法对其进行编辑。

只保存点/多边形并在用户重新打开地图时重新渲染它们是一个可接受的解决方案，只要在重新打开地图时显示正确的地图区域，但我不确定如何存储这些数据. 一个用户可以拥有许多地图，因此仅适用于单个地图实例的解决方案在这种情况下将不起作用。

我知道我在这里描述的只是复制了许多其他地图应用程序的功能。一旦弄清楚这部分，我计划添加专门用于制作地质图的广泛功能。我没有在这里描述该功能，因为它与我当前的问题无关。

如何以允许在重新打开时对其进行编辑的格式将地图保存到 PostgreSQL？

标签： ruby-on-railspostgresqlleafletopenstreetmapreact-leaflet

解决方案

我一起使用leaflet 和leaflet.draw 来保存geoJSON 以绘制多边形或放置标记，并将其保存到数据库中名为coords 的字段中。这里有一个很好的例子：https ://github.com/jeremygradisher/mapping-leaflet

归结为使用 leaflet.draw 绘制坐标，然后将该数据保存在您需要的位置。这是leaflet.draw：http ://leaflet.github.io/Leaflet.draw/docs/leaflet-draw-latest.html

在这里，我使用 Leaflet.draw 在地图上绘制，然后对数据进行字符串化并将其添加到要保存在数据库中的字段中。

<script>
// Initialize the FeatureGroup to store editable layers
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);


// Initialize and alter the draw control and pass it the FeatureGroup of editable layers
var drawControl = new L.Control.Draw({
    draw: {
        //These options make up the root object that is used when initializing the Leaflet.draw control.
        position: 'topleft',
        polygon: {
            allowIntersection: false,
            drawError: {color: '#00dd00', timeout: 1000
            },
            shapeOptions: {color: '#00dd00', weight: 1}, showArea: true},
        polyline:  false,
        rectangle:  {shapeOptions: {color: '#00dd00',weight: 1}},circle: false},
    edit: {featureGroup: drawnItems}
});
map.addControl(drawControl);


//draw:created - Triggered when a new vector or marker has been created.
map.on('draw:created', function (e) {
    var type = e.layerType,
        layer = e.layer;

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

    drawnItems.addLayer(layer);
    //trying some things here

    //enter in field to save to the database
    document.getElementById('area_coords').value = shape_for_db;
});

推荐阅读