OpenLayers로 간단한 래스터 편집기 구축

OpenLayers를 사용하여 래스터 편집기 만들기: 프런트엔드 및 백엔드 솔루션

이 솔루션은 프론트엔드에는 OpenLayers와 함께 JavaScript를 사용하고 백엔드에는 Geotiff.js 라이브러리와 함께 Node.js를 사용합니다. 여기에는 이해하기 쉽도록 명확한 설명이 포함된 재사용 가능하고 최적화된 모듈식 코드가 포함되어 있습니다.

// Frontend Script: OpenLayers for Drawing and Editing Polygons
import 'ol/ol.css';
import { Map, View } from 'ol';
import { Tile as TileLayer } from 'ol/layer';
import { OSM } from 'ol/source';
import { Draw, Modify } from 'ol/interaction';
import GeoTIFF from 'geotiff';
// Initialize the map
const rasterSource = new TileLayer({ source: new OSM() });
const map = new Map({
  target: 'map',
  layers: [rasterSource],
  view: new View({
    center: [0, 0],
    zoom: 2,
  }),
});
// Add Draw Interaction
const draw = new Draw({ type: 'Polygon' });
map.addInteraction(draw);
// Capture Polygon and Send to Server
draw.on('drawend', async (event) => {
  const coordinates = event.feature.getGeometry().getCoordinates();
  const response = await fetch('/edit-raster', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ coordinates, value: 255 }),
  });
  console.log(await response.json());
});

서버측 스크립트: 래스터 처리를 위한 Node.js 및 GeoTIFF

이 스크립트는 Geotiff.js 라이브러리와 함께 Node.js를 사용하여 프런트엔드의 다각형 입력을 기반으로 래스터 업데이트를 처리합니다. 서버는 GeoTIFF 파일을 동적으로 수정합니다.

// Backend Script: Node.js Server with GeoTIFF Processing
const express = require('express');
const bodyParser = require('body-parser');
const GeoTIFF = require('geotiff');
const fs = require('fs');
const app = express();
app.use(bodyParser.json());
// Endpoint to Modify Raster
app.post('/edit-raster', async (req, res) => {
  const { coordinates, value } = req.body;
  const tiffFile = fs.readFileSync('./raster.tif');
  const tiff = await GeoTIFF.fromArrayBuffer(tiffFile.buffer);
  const image = await tiff.getImage();
  const data = await image.readRasters();
// Logic to update raster pixels within the polygon
  // ... Modify the raster data based on coordinates ...
  fs.writeFileSync('./updated-raster.tif', Buffer.from(data));
  res.json({ message: 'Raster updated successfully!' });
});
app.listen(3000, () => console.log('Server running on port 3000'));

단위 테스트: 래스터 수정 논리 검증

이 단위 테스트는 Jest를 사용하여 백엔드 기능을 검증합니다. 이는 다각형 입력을 기반으로 래스터 픽셀이 올바르게 업데이트되도록 보장합니다.

// Unit Test: Jest Test for Raster Modification
const request = require('supertest');
const app = require('../server');
test('Raster update works correctly', async () => {
  const response = await request(app)
    .post('/edit-raster')
    .send({ coordinates: [[0, 0], [10, 10], [10, 0]], value: 255 });
  expect(response.body.message).toBe('Raster updated successfully!');
});

래스터 편집기 구축에 대한 일반적인 질문

1. 역할은 무엇입니까? GeoTIFF.js 래스터 편집 중인가요?
2. GeoTIFF.js 개발자가 JavaScript로 `.tif` 파일을 로드하고 조작할 수 있으므로 클라이언트 또는 서버측 래스터 작업에 필수적입니다.
3. 타일링은 래스터 편집 성능을 어떻게 향상시킵니까?
4. 큰 래스터를 작은 타일로 분할함으로써 편집기는 필요한 섹션만 처리하고 수정하여 메모리와 계산 부하를 줄입니다.
5. 도구에 다른 래스터 형식을 사용할 수 있나요?
6. 예, `.png` 또는 `.jpeg`와 같은 형식은 다음과 같은 변환기나 라이브러리를 사용하여 지원할 수 있습니다. sharp 데이터를 전처리하고 후처리합니다.
7. 실행 취소/다시 실행 기능을 어떻게 구현합니까?
8. 래스터 데이터의 스냅샷을 저장하거나 수정된 ​​픽셀 값을 추적하여 편집 기록을 유지합니다. 이를 통해 변경 사항을 원활하게 되돌릴 수 있습니다.
9. 실시간 래스터 편집 시 어떤 문제가 발생할 수 있나요?
10. 고해상도 데이터 처리, 빠른 서버-클라이언트 통신 보장, 편집 간 동기화 유지는 개발자가 직면하는 일반적인 과제입니다.

래스터 편집 여정 마무리하기

OpenLayers로 래스터 편집기를 구축하면 강력한 지리공간 기능과 대화형 기능이 결합됩니다. 워크플로우를 사용하면 클라이언트가 그린 다각형을 서버측 래스터 처리에 연결하여 정밀한 픽셀 편집이 가능합니다. 다음과 같은 도구 GeoTIFF.js 고해상도 데이터의 경우에도 '.tif' 파일을 간단하게 처리할 수 있습니다. 🎨

환경 프로젝트, 도시 계획, 데이터 시각화 등 어떤 작업을 하든 이 도구는 엄청난 유연성을 제공합니다. 타일링, 형식 지원, 실행 취소/다시 실행 옵션을 통해 기능을 향상함으로써 특정 요구 사항에 맞는 강력한 솔루션을 만들 수 있습니다. 올바른 접근 방식을 사용하면 래스터 편집이 효율적이고 접근 가능해집니다. 🚀