[OpenLayers] features from GeoJSON import (피처정보 가져오기)

- OpenLayers import GeoJSON -

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

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

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

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>