글

작성일자

웹에서 SHP 파일 생성하기

SHP 파일은 최소 3가지 파일로 구성됩니다. 좌표 데이터가 저장된 .SHP, 이 좌표 데이터로 구성된 도형에 대한 인덱스가 저장된 .SHX, 속성 데이터가 저장된 .DBF 파일입니다.

웹 GIS에서 사용자가 공간 데이터를 활용하여 또 다른 의미의 공간 데이터를 생성해 낼 수 있을 것이고, 이 새로운 공간 데이터를 SHSP 파일 형태로 저장할 수 있다면 자신의 PC에 보관하거나, 다른 사용자와 파일 수준에서 공유할 수 있을 것입니다.

FingerEyes-Xr은 NexGen 솔루션 개발에 사용된 웹 GIS 클라이언트 라이브러리입니다. 이 FingerEyes-Xr에는 SHP 파일을 생성할 수 있는 기능을 제공하는데, 이에 대한 API를 정리해 둡니다.

먼저 생성하고자 하는 도형의 종류가 포인트인지, 폴리라인인지, 폴리곤인지를 지정하는 코드가 필요합니다. 여기서는 폴리곤입니다.

let shapeType = Xr.data.ShapeType.POLYGON;

속성 데이터의 구조를 정의하기 위해 아래의 코드가 필요합니다.

let fieldSet = new Xr.data.FieldSet();

fieldSet.add(new Xr.data.Field('field1', Xr.data.FieldType.STRING, 20));
fieldSet.add(new Xr.data.Field('field2', Xr.data.FieldType.INTEGER, 7));
fieldSet.add(new Xr.data.Field('field3', Xr.data.FieldType.FLOAT, 6, 2));

총 3개의 필드를 정의했으며 각각 문자열, 정수형, 실수형입니다. 문자열의 최대 길이는 20이며, 정수형의 최대 길이는 7이고, 실수형의 최대 길이는 6이면서 소수점 최대 길이는 2입니다.

이제 SHP 생성을 위한 팩토리를 정의합니다. 앞서 정의두었던 도형의 종류와 속성의 구조를 지정합니다.

let cntFields = fieldSet.count();
let factory = new Xr.export.ESRISHPFileFactory(fieldSet, shapeType);

이제 파일에 저장할 도형 좌표와 속성을 생성하고 팩토리에 추가합니다. 총 2개를 추가합니다. 

let shape, attr;

shape = new Xr.data.PolygonShapeData([
    [
        new Xr.PointD(150267, 246895), new Xr.PointD(150367, 246895), new Xr.PointD(150367, 246995)
    ],
    [
        new Xr.PointD(150467, 247095), new Xr.PointD(150367, 247095), new Xr.PointD(150367, 247195)
    ]
]);

attr = new Xr.data.AttributeRow(-1, cntFields); // -1은 의미없음
attr.setValue(0, 'A가나다B');
attr.setValue(1, 100);
attr.setValue(2, 100.12);
let row1 = new Xr.export.RowSHP(shape, attr);

shape = new Xr.data.PolygonShapeData([
    [
        new Xr.PointD(150422, 246805), new Xr.PointD(150522, 246805), new Xr.PointD(150522, 246705)
    ]
]);

attr = new Xr.data.AttributeRow(-1, cntFields); // -1은 의미없음
attr.setValue(0, 'Hello');
attr.setValue(1, 200);
attr.setValue(2, 200.12);
let row2 = new Xr.export.RowSHP(shape, attr);

factory.addRow(row1);
factory.addRow(row2);

최종적으로 SHP 파일에 저장될 바이너리 데이터는 다음 코드를 통해 얻을 수 있습니다.

let shpObj = factory.export();

위의 shpObj 객체에는 shp, shx, dbf라는 속성이 존재하며 각각 앞서 언급한 .SHP, .SHX, .DBF 파일을 구성하는 바이너리 데이터가 ArrayBuffer의 배열로 담겨 있습니다. 실제 파일로의 저장은 아래의 코드를 통해 가능합니다. 속성 데이터에 대한 문자 인코딩은 UTF-8입니다.

if (isIE()) {
    saveToFile_IE('a.shp', shpObj.shp);
    saveToFile_IE('a.shx', shpObj.shx);
    saveToFile_IE('a.dbf', shpObj.dbf);
} else {
    saveToFile_Chrome('a.shp', shpObj.shp);
    saveToFile_Chrome('a.shx', shpObj.shx);
    saveToFile_Chrome('a.dbf', shpObj.dbf);
}

위의 코드에서 언급된 isIE, saveToFile_IE, saveToFile_Chrome 함수는 다음 글을 통해 상세히 파악할 수 있습니다. 참고로 코드 중 기존의 type: ‘text/plain’을 type: ‘application/zip’으로 변경했습니다.

웹에서 Javascript 만으로 텍스트 파일 생성

작성일자

웹에서 JavaScript만으로 데이터 압축하여 파일로 저장하기

몇 일전에 웹에서 자바스크립트만으로 압축 파일의 압축을 해제하는 내용을 정리했습니다. 해당 글은 아래와 같습니다.

Javascript 기반의 압축 라이브러리, jszip

이제는 다시 웹에서 사용자가 만든 어떤 데이터를 하나의 압축 파일로 만들 필요가 있어, 앞서 살펴본 압축 라이브러리를 이용해 바이너리 데이터와 텍스트 데이터를 각각 file.bin과 file.txt라는 파일명으로 하여 하나의 a.zip 파일로 압축한 후 사용자의 PC에 다운로드 하는 코드를 정리합니다.

먼저 압축하고자 하는 바이너리 데이터를 아래의 코드처럼 준비합니다.

let buffer = new ArrayBuffer(8);
let dataview = new DataView(buffer);

dataview.setInt32(0, 9438);
dataview.setFloat32(4, 3224.3224);

위의 데이터는 file.bin이라는 파일명으로 압축파일에 존재하도록 아래처럼 코드를 추가합니다.

let zip = new JSZip();
zip.file("file.bin", buffer);

앞서 언급했듯, 바이너리 뿐만 아니라 텍스트 파일도 압축 파일에 추가해 봅니다. 아래처럼요.

zip.file("file.txt", 'Hello한글Hi!');

이제 이렇게 압축된 내용을 a.zip 파일로 저장하는 코드는 다음과 같습니다.

let zipFileName = 'a.zip';
zip.generateAsync({ type: "blob" }).then(
    function (blob) {
        if (isIE()) {
            saveToFile_IE(zipFileName, blob);
        } else {
            saveToFile_Chrome(zipFileName, blob);
        }
    }
);

못보던 isIE와 saveToFile_IE, saveToFile_Chrome 함수가 보입니다. 이 놈들은 아래의 글을 참고하시면 파악할 수 있답니다.

웹에서 Javascript 만으로 텍스트 파일 생성