从用户创建的 OpenLayer 3 地图中保存图层

Question

我正在尝试正确保存用户创建的 OpenLayer 3 Map 层，以便使用 geoJSON 将其显示在另一张地图上，但我遇到了麻烦。

在客户端端，我将动态层保存在这个函数中：

function addInteractions() {                
    draw = new ol.interaction.Draw({
      source: source,
      type: typeSelect.value
    });
    draw.on("drawend", function(e) {
      var f = e.feature;
      features.push(f);
      geoJson = format.writeFeatures(features);
      console.log(geoJson);
      document.getElementById('js-textarea').value = geoJson;
    });
    map.addInteraction(draw);
    snap = new ol.interaction.Snap({source: source});
    map.addInteraction(snap);
}

然后 geoJSON 对象被保存到 .json 文件中，但是当我尝试显示它时，它没有出现在地图上。

这里是他我的显示函数：

var geoDataUrl = '/data/' + '{{percorso._id}}' + '.json';
var vectorLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
      url: geoDataUrl,
      format: new ol.format.GeoJSON()
    }),
    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'
        })
      })
    })
  });       
  var raster = new ol.layer.Tile({
    source: new ol.source.OSM()
  });
  var map = new ol.Map({
    layers: [raster, vectorLayer],
    target: 'map',
    view: new ol.View({
      center: {{#if percorso.mapCenter}}[{{percorso.mapCenter}}] {{else}} ol.proj.transform([9.688053, 45.362760], 'EPSG:4326', 'EPSG:3857'){{/if}},
      zoom: {{#if percorso.zoomLevel}}{{percorso.zoomLevel}} {{else}} 13{{/if}}
    })
  });

我还测试了其他层的显示功能（例如 OpenLayer 示例网站上的 provided one），它工作正常

在 服务器 端，我使用此函数保存 geoJSON 对象，其中 oggetto_mappa 是动态 geoJSON 对象：

var jsonMappa = JSON.stringify(eval("(" + oggetto_mappa + ")"));
require("fs").writeFile("./public/data/" + id_perc + ".json", jsonMappa, 'utf8', function(f_err) {
     if(f_err)
       console.log(f_err);
});

作为参考，这是我的函数保存到 .json 文件中的内容：

{
"type":"FeatureCollection",
"features":[
    {
        "type":"Feature",
        "id" : "aa",
        "geometry":
        {
            "type":"LineString",
            "coordinates":[
                [1073328.751180445,5680150.227413875],
                [1077857.6451063417,5682481.556776573],
                [1070385.9255914658,5679156.546046168],
                [1076825.7452244917,5680226.66444216],
                [1073328.751180445,5680169.336670946]
            ]
        },
        "properties":null
    },
    {
        "type":"Feature",
        "id" : "ab",
        "geometry":
        {
            "type":"LineString",
            "coordinates":[
                [1073328.751180445,5680169.336670946],
                [1071628.0273010998,5677130.96479661]
            ]
        },
        "properties":null}
    ]
}

Answer 1

要让事情正常进行，请替换

geoJson = format.writeFeatures(features)

和

geoJson = format.writeFeatures(features, {featureProjection: 'EPSG:3857'})

你可能想知道为什么？

当您在 OpenLayers 中绘制时，您正在绘制地图的投影（默认为 EPSG:3857），而当您使用 GeoJSON 时，预期的投影为 EPSG:4326.

请参阅 ol.format.GeoJSON writeFeatures 中的 the API documentation 以更好地理解

一些附加信息：

当您从绘图中使用 GeoJSON 时，因为坐标不是十进制度数 (EPSG:4326)，而是米 (EPSG:3857)
坐标的数量级不同（EPSG:3857 数百万，EPSG:4326 不到数百）不考虑 positive/negative 坐标

从用户创建的 OpenLayer 3 地图中保存图层

Saving layer from OpenLayer 3 Map created by user

geojson

node.js

openlayers-3