반응형


- OpenLayers import GeoJSON -


앞서 정리한 글에서 geoJson export를 해봤는데

여기서 export한 geojson 즉 json파일을 import해보도록하자

(파일로 추출은 안해봤지만 했다는 가정하에 파일을 읽어보도록한다.)


testGeo2.json


geojson으로 추출한 정보가 들어있는 이 .json파일을 가지고 해볼것이다.


<!doctype html>
<html lang="ko">
<head>
<!-- OpenLayers -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css">
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js"></script>

<!-- jQuery -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<style>
#map {height: 800px; width: 100%;}
</style>
<title>OpenLayers-vworld</title>
</head>
<body>
<h2>OpenLayers_MAP</h2>
<div id="map" ></div>
<select id="type">
<option value="Point">Point</option>
<option value="LineString">LineString</option>
<option value="Polygon">Polygon</option>
<option value="Circle">Circle</option>
<option value="None" selected>None</option>
</select>
<button type="button" class="exportBtn" ><span>getGeoJSON</span></button>
<button type="button" onclick="importJson()"><span>setGeoJSON</span></button>
</body>
<script type="text/javascript">

//기본지도
var vwBaseLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'http://xdworld.vworld.kr:8080/2d/Base/202002/{z}/{x}/{y}.png'
})
});

var map = new ol.Map({
target : 'map',
layers: [vwBaseLayer],
view: new ol.View({
center: [14126669.41589247, 4493404.190498611],
zoom: 7,
minZoom: 7,
maxZoom: 19
})
});

var typeSelect = document.getElementById('type');
var draw;
typeSelect.onchange = function () {
map.removeInteraction(draw);
addInteraction();
};

// Add over interaction that draw hull in a layer
var source = new ol.source.Vector({ wrapX: false });
var vector = new ol.layer.Vector({
title : 'vector',
source: source, });

map.addLayer(vector); //vector layer add

function addInteraction() {
var value = typeSelect.value;
if (value !== 'None') {
draw = new ol.interaction.Draw({
source: source,
type: value
});
map.addInteraction(draw);
}
}

//GeoJson export
$(".exportBtn").click(function(){
var newfeatures = [];
var projection = ol.proj.get('EPSG:3857'); // from 3857
vector.getSource().forEachFeature(function(feature) {
var clone = feature.clone();
clone.setId(feature.getId()); // clone does not set the id
clone.getGeometry().transform(projection, 'EPSG:4326'); // to EPSG:4326
newfeatures.push(clone);
});
var json = new ol.format.GeoJSON().writeFeatures(newfeatures);
console.log(json);
});

var vector2;
function importJson(){
// Earthquake layer
var vectorSource = new ol.source.Vector({
url: '../testGeo2.json',
projection: 'EPSG:4326',
format: new ol.format.GeoJSON(),
});

vector2 = new ol.layer.Vector({
source: vectorSource
});

map.addLayer(vector2);
}
</script>
</html>


importJson() 메소드를 통해서 json 파일을 읽어보려한다.

읽는방법 자체는 간단하다 ol.source.Vector 에서 url 과 format을 설정해주고


vector layer를 생성한 후 maplayer에 넣어주면 된다.


그러면 아래와 같이 json에 저장되어있는 데이터를 읽어서

지도에 표시가된다.




읽는 방법은 간단하나 vector layer를 하나만 계속 쓰고 싶은데


이것역시 아직 해보질 않아서 여기까지만 정리해둔다.


반응형
  1. 익명 2021.09.07 10:35

    비밀댓글입니다

    • 익명 2021.09.07 20:33

      비밀댓글입니다