[Vue.js] Vue-Cli 에서 정적 json/geojson 파일을 읽는법 / Vue-Cli + Openlayers + geojson

 

static geojson/json 파일을 읽어오는 방법

물론 shp/kml 파일도 동일한 방법으로 읽어올 수 있다.

shp/kml 파일을 geosjon 파일로 변환한 후 아래와 같은 작업을 수행하면 된다.

 

 

1. json loader 설치
- npm install --save json-loader

2. vue.config.js 에 아래 구문 추가 ( json일 경우 geojson을 json으로 바꿔주세요 )

configureWebpack: {
		module: {
			rules: [
			  {
				test: /\.geojson$/,
				loader: 'json-loader'
			  }
			]
		  }
	}

3. vue 파일에서 geojson 파일을 읽어오기 + 읽어온 파일을 openLayers에 연동시키기

import link from '../assets/kml/Link.geojson';

...

var kmlSource = new VectorSource ({
        format: new GeoJSON({}),
});

var vectorLayer = new VectorImageLayer({
        source: kmlSource,
        name: "myLayerName",
});
      
const features = new GeoJSON().readFeatures(link);

features.map(async (f) =>kmlSource.addFeature(f));

...