Question

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

在客户端一侧，我将dinamic图层保存在此函数中：

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是dinamic 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}
    ]
}

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

0 个答案: