Сохранение слоя из OpenLayer 3 Map, созданной пользователем - PullRequest
0 голосов
/ 21 мая 2018

Я пытаюсь правильно сохранить слой OpenLayer 3 Map, созданный пользователем, чтобы отобразить на нем другую карту, используя geoJSON, но у меня возникают проблемы с этим.

На client side Я сохраняю динамический слой в этой функции:

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, но когда я пытаюсь отобразить его, он не 't появляются на карте.

Вот его моя функция отображения:

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 примеры веб-сайта) и он отлично работает

На стороне server я сохраняю объект 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}
    ]
}

1 Ответ

0 голосов
/ 23 мая 2018

Чтобы все заработало, замените

geoJson = format.writeFeatures(features)

на

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

Вы можете спросить, почему?

Когда вы рисуете в OpenLayers, вы рисуете впроекция карты (по умолчанию EPSG: 3857), тогда как при использовании GeoJSON ожидаемая проекция составляет EPSG: 4326.

См. документацию API с ol.format.GeoJSON writeFeatures долучше понять

Некоторые дополнительные сведения:

  • , когда вы используете GeoJSON из чертежа, поскольку координаты не в десятичных градусах (EPSG: 4326), но в метрах (EPSG: 3857)
  • порядок координат различен (миллионы для EPSG: 3857 и менее чем несколько сотен для EPSG: 4326) без учета положительных / отрицательных координат
...