김 형준 – GIS Developer

지도를 활용하여 정보를 공유하고, 업무에 효율적으로 활용할 수 있는 맵 커뮤니케이터 기능에 대한 소개입니다. 맵 커뮤니케이터, 의미 그대로 지도를 이용한 의사소통 기능이고 NexGen에서 제공하는 기능입니다.

맵 커뮤니케이터에서 제공하는 기능은 대화를 기본으로 지도를 활용한 위치 공유, 지도 위에 스케치한 정보 공유 기능입니다. 그리고 다양한 파일을 공유할 수 있는데, 대용량의 파일도 문제 없이 공유할 수 있습니다.

아래는 시연 영상인데요, 교통사고를 주제로하여 구성해 보았습니다.

지도를 이용해 함께 분석하고 그 결과를 바로 공유할 수 있는 기능이 업무에 효과적일 수 있습니다.

아래는 NexGen 시스템의 구성에 대한 이해를 돕기 위한 간단한 구성도인데요.

NexGen은 하나의 완성된 솔루션으로써 미들웨어인 GeoService-Xr와 클라이언트 GIS 엔진인 FingerEyes-Xr로 개발되어 있습니다. NexGen은 IE, Chrome 등과 같은 웹브라우져에서 무리없이 실행됩니다. 속도면에서는 Chrome을 권장합니다. GeoService-Xr은 GS인증을 받은 제품으로 공간 데이터 서비스, 공간 분석 서비스, 맵 커뮤니케이터 서비스 등을 제공하며 빠른 속도와 서버 프로그램으로써의 안정성이 뛰어납니다. FingerEyes-Xr은 웹 GIS 엔진으로써 오픈소스로 GitHub에 공개되어 있습니다. 편집 기능와 미려한 지도 표출 기능 등이 유사한 제품에 비교하여 뛰어납니다.

OpenLayers의 지도 속도를 테스트 하기 위해 10만개의 별을 배경지도 상에 그려보는 코드를 작성해 보았습니다.

먼저 실행에 대한 동영상은 아래와 같습니다. 실행은 크롬에서 했고, 2016년 6월 경에 구입한 DELL 노트북인 XPS 9550을 사용했습니다.

웹임에도 상당이 빠릅니다. 이유는 소스코드를 살펴보면 파악할 수 있습니다. 먼저 index.html 입니다.

<!DOCTYPE html>

<html>

<head>

<title>OpenLayers</title>

<style>

html, body {

padding: 0;

margin: 0;

width: 100%;

height: 100%;

}

#map {

width: 100%;

height: 100%;

}

</style>

</head>

<body>

</body>

</html>

index.js에 대한 코드의 설명은 하나씩 언급해 보면, 먼저 필요한 모듈을 선언합니다.

import 'ol/ol.css';

import Feature from 'ol/Feature.js';

import Map from 'ol/WebGLMap.js';

import View from 'ol/View.js';

import Point from 'ol/geom/Point.js';

import VectorLayer from 'ol/layer/Vector.js';

import VectorSource from 'ol/source/Vector.js';

import {Fill, RegularShape, Stroke, Style} from 'ol/style.js';

import {Tile} from 'ol/layer.js';

import {XYZ} from 'ol/source.js';

그리고 10만개의 포인트를 표시할 스타일로 별 모양으로 지정하는 코드입니다. 이미지가 아닌 실행중에 별형상을 생성해 스타일로 사용하는 것입니다.

var style = new Style({

image: new RegularShape({

points: 5,

scale: 1,

radius: 10,

radius2: 4,

fill: new Fill({

color: 'rgba(255, 255, 0, 1)'

}),

stroke: new Stroke({

color: 'rgba(0, 0, 0, 1)',

width: 2

})

});

다음은 10만개의 포인트 피쳐를 생성합니다. 좌표는 여의도를 덮을 정도의 영역으로 잡았습니다.

var featureCount = 100000;

var features = new Array(featureCount);

var feature, geometry;

for (var i = 0; i < featureCount; ++i) {

geometry = new Point([14078579 + Math.random()*100000, 4487570 + Math.random()*50000]);

feature = new Feature(geometry);

feature.setStyle(style);

features[i] = feature;

}

위의 피쳐 데이터를 담기 위한 데이터소스와 이 데이터소스를 표현하기 위한 레이어 객체를 생성합니다.

var vectorSource = new VectorSource({

features: features

});

var vector = new VectorLayer({

source: vectorSource

});

배경지도도 표현해줘야 의미있는 테스트가 될듯하여 VWorld의 배경지도를 살짝 가져다 썻습니다.

var base = new Tile({

source: new XYZ({

url: 'http://xdworld.vworld.kr:8080/2d/Base/service/{z}/{x}/{y}.png'

})

});

앞서 생성한 레이어들을 조합해 지도 객체를 생성하면 끝입니다.

var map = new Map({

layers: [base, vector],

target: document.getElementById('map'),

view: new View({

center: [14128579.82, 4512570.74],

zoom: 15

})

});

속도가 빠른 이유는 2가지입니다. 첫째는 IE가 아닌 크롬에서 테스트 했다는 것인데, 그렇다고 IE에서 실행해보면 아예 실행이 안되는 것은 아니고 크롬보다 살짝 느릴 뿐입니다. 하지만 향후 IE가 크롬의 렌더링 기술을 사용할 것이므로 IE도 크롬만큼 빨라질 것으로 기대합니다. 두번째 이유는 OpenLayers의 지도 객체가 WebGLMap 타입이라는 것입니다. 가장 처음 언급된 코드의 모듈 추가에서 ol/Map.js 대신 ol/WebGLMap.js에서 Map 클래스를 가져왔기 때문입니다.

작성자: 김 형준

맵을 이용한 정보 공유, 맵 커뮤니케이터 기능 소개

[OpenLayers] 지도 상에 10만개의 별 그리기에 대한 속도 테스트