javascript - 在OL3中保存多个点的坐标

标签 javascript openlayers-3 geojson

我正在使用 OpenLayers3,并且希望拥有用户可以绘制 1 个或多个点的 map 。 我已经实现了。不过,我还想保存每个点的坐标。

但我真的不知道该怎么做,因为 OpenLayers3 相当新,而且我很难在网上找到示例。

这是我到目前为止所拥有的:

var modeSelect = document.getElementById('type');
var draw; // global so we can remove it later

//modify 
var featureOverlay = new ol.FeatureOverlay({
  style: new ol.style.Style({
    fill: new ol.style.Fill({
      color: 'rgba(255, 255, 255, 0.2)'
    }),
    stroke: new ol.style.Stroke({
      color: '#ffcc33',
      width: 2
    }),
    image: new ol.style.Circle({
      radius: 7,
      fill: new ol.style.Fill({
        color: '#ffcc33'
      })
    })
  })
});
featureOverlay.setMap(map);
// modify end

function addInteraction() {
    var value = modeSelect.value;
    if (value == 'Point') {
        draw = new ol.interaction.Draw({
          //source: source,
          features: featureOverlay.getFeatures(),
          type: /** @type {ol.geom.GeometryType} */ (value)
        });
        map.addInteraction(draw);
    }
    // modify
    if (value == 'Modify') {
        var modify = new ol.interaction.Modify({
            features: featureOverlay.getFeatures(),
            // the SHIFT key must be pressed to delete vertices, so
            // that new vertices can be drawn at the same position
            // of existing vertices
            deleteCondition: function(event) {
            return ol.events.condition.shiftKeyOnly(event) &&
                ol.events.condition.singleClick(event);
          }
        });
        map.addInteraction(modify);
    } 
}
addInteraction();

最佳答案

好的。我想出了一个解决方案,至少朝着正确的方向迈出了一步。 我大致重新整理了一下代码,实现了这个功能:

function saveData() {
    // save it as geojson
    var format = new ol.format['GeoJSON']();
    // this will be the data in the chosen format
    var data;

    try {
    // convert the data of the vector_layer into the chosen format
    data = format.writeFeatures(vector_layer.getSource().getFeatures());
    } catch (e) {
    // at time of creation there is an error in the GPX format (18.7.2014)
    $('#data').val(e.name + ": " + e.message);
    return;
    }

    $('#data').val(JSON.stringify(data, null, 4));

}

不过,我仍然在努力将其写入服务器上的实际 .json 文件, 但我非常有信心我会找到解决方案。

编辑:

实际上这很简单。只需编写这段 php 即可完成所有工作:

    <?php

    include 'dbconnection.php';


        $str="INSERT INTO multipoint_tabelle (id, geom) VALUES (1,(SELECT ST_Multi(ST_Union(geom)) FROM punkttabelle));";
        $test_str=pg_query($conn, $str);


    // write GeoJSON 

        $json = $_POST['json'];
        //$points_coords = $_POST['coords'];

        if (json_decode($json) != null) { /* sanity check */

        // w+ Read/Write. Opens and clears the contents of file; or creates a new file if it doesn't exist
            $file = fopen('points.json','w+');
            fwrite($file, $json);
            fclose($file);
        } else {

        // handle error 
        }


?>

关于javascript - 在OL3中保存多个点的坐标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25959598/

相关文章:

javascript - ES6 和多次导出的导入问题

javascript - ol-debug.js - 断言失败 : 3rd instruction should be a number

javascript - 从 geoJson 中提取提要级别元数据以用作 Leaflet 消息框

d3.js - 欧洲的 D3 map 投影,如 Albert USA

javascript - Jquery 远程方法无法正常工作

java - getEngineByName ("JavaScript"的 ScriptEngine 为空)?

javascript - html、css、粘盒、Chrome 的问题

javascript - 无论如何要在单层上指定特征的 z 顺序?

javascript - 如何通过代码OpenLayers3扩展图层组

python - 将 JSON 加载到 GeoDataFrame 中