OpenLayers を使用したシンプルなラスター エディターの構築

OpenLayers を使用したラスター エディターの作成: フロントエンドおよびバックエンド ソリューション

このソリューションでは、フロントエンドには JavaScript と OpenLayers が使用され、バックエンドには Node.js と Geotiff.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

このスクリプトは、Node.js と Geotiff.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」ファイルの処理が簡単になります。 🎨

環境プロジェクト、都市計画、データ視覚化のいずれに取り組んでいる場合でも、このツールは非常に高い柔軟性を提供します。タイル化、フォーマットのサポート、元に戻す/やり直しのオプションで機能を強化することで、特定のニーズに合わせた堅牢なソリューションを作成できます。適切なアプローチを使用すると、ラスター編集が効率的かつアクセスしやすくなります。 🚀