OpenLayers உடன் ஒரு எளிய ராஸ்டர் எடிட்டரை உருவாக்குதல்

ஓபன்லேயர்களில் ராஸ்டர் எடிட்டிங் மூலம் தொடங்குதல்

ராஸ்டர் படங்களை எடிட் செய்வதற்கான இணையக் கருவியை நீங்கள் எப்போதாவது உருவாக்க விரும்பினீர்களா? 🌍 உதாரணமாக, பலகோணங்களைப் பயன்படுத்தி `.tif` கோப்பின் குறிப்பிட்ட பகுதிகளை மாற்றியமைத்து, தேர்ந்தெடுக்கப்பட்ட பிக்சல்களுக்கு புதிய மதிப்புகளை ஒதுக்க வேண்டுமா? இந்த கருத்து புவியியல் பயன்பாடுகளுக்கு சக்தி வாய்ந்ததாக இருக்கலாம் ஆனால் முதல் பார்வையில் சவாலாகத் தோன்றலாம்.

ராஸ்டர் வரைபடத்தை ஏற்றவும், ஆர்வமுள்ள பகுதியில் ஒரு வடிவத்தை வரையவும், அடிப்படைத் தரவை உடனடியாக மாற்றவும் பயனர்களை அனுமதிக்கும் ஒரு கருவியை கற்பனை செய்து பாருங்கள். நில மேலாண்மை, காலநிலை ஆய்வுகள் அல்லது நகர்ப்புற திட்டமிடல் ஆகியவற்றிற்கு இந்த வகையான செயல்பாடு அவசியம். 🎨 இருப்பினும், நேரடியான உதாரணங்களைக் கண்டறிவது வெறுப்பாக இருக்கலாம்.

அத்தகைய கருவியை உருவாக்குவதற்கான எனது சொந்த பயணத்தில், நடைமுறை எடுத்துக்காட்டுகள் எவ்வளவு அரிதானவை என்பதை நான் உணர்ந்தேன், குறிப்பாக OpenLayers ஐப் பயன்படுத்தும் போது. க்ளையன்ட் பக்கத்தில் உடனடியாகப் பிரதிபலிக்கும் திருத்தங்களுடன், ராஸ்டர் தரவுகளுடன் மாறும் வகையில் பயனர்கள் தொடர்பு கொள்ள எனக்கு ஒரு வழி தேவை. தொடங்குவதற்கு சில தோண்டுதல் மற்றும் ஆக்கப்பூர்வமான சிக்கலைத் தீர்க்க வேண்டியிருந்தது.

எளிய ராஸ்டர் எடிட்டரை உருவாக்குவதற்கான ஆரம்ப படிகள் மூலம் இந்தக் கட்டுரை உங்களுக்கு வழிகாட்டும். ஓப்பன்லேயர்களை எவ்வாறு ஒருங்கிணைப்பது, பலகோணங்களை வரைய பயனர்களை அனுமதிப்பது மற்றும் அந்த பலகோணங்களுக்குள் பிக்சல் மதிப்புகளைப் புதுப்பிப்பது எப்படி என்பதை நீங்கள் கற்றுக் கொள்வீர்கள். நீங்கள் இதற்கு புதியவராக இருந்தாலும் அல்லது உங்கள் OpenLayers கருவித்தொகுப்பை விரிவாக்க விரும்பினாலும், இந்த உதவிக்குறிப்புகள் உங்களை சரியான பாதையில் தொடங்கும்! 🚀

ஒரு எளிய ராஸ்டர் எடிட்டரின் இயக்கவியலை ஆராய்தல்

நாங்கள் உருவாக்கிய ஸ்கிரிப்ட்கள் கிளையன்ட் பக்க ஊடாடலுக்கும் சர்வர் பக்க ராஸ்டர் செயலாக்கத்திற்கும் இடையிலான இடைவெளியைக் குறைக்கும். முன்பகுதியில், நாங்கள் OpenLayers நூலகத்தைப் பயன்படுத்துகிறோம், இது புவிசார் தரவுகளை வழங்குவதிலும் தொடர்புகொள்வதிலும் சிறந்து விளங்குகிறது. பயனர் நேரடியாக வரைபடத்தில் பலகோணத்தை வரைகிறார், அது ஆர்வமுள்ள பகுதியை வரையறுக்க செயலாக்கப்படுகிறது. `Draw` மற்றும் `Modify` தொடர்புகளை மேம்படுத்துவதன் மூலம், பயனர்கள் திருத்துவதற்கான பகுதிகளைத் தேர்ந்தெடுப்பதை அல்லது சரிசெய்வதை எளிதாக்குகிறோம். ஒரு பலகோணம் இறுதி செய்யப்பட்டவுடன், ஆயத்தொகுப்புகள் கைப்பற்றப்பட்டு, பெறுதல் கோரிக்கை மூலம் பின்தளத்திற்கு அனுப்பப்படும். இந்த அணுகுமுறை நில பயன்பாட்டுத் திட்டமிடல் அல்லது சுற்றுச்சூழல் பகுப்பாய்வு போன்ற பணிகளுக்கு அவசியமான ஒரு மாறும் மற்றும் உள்ளுணர்வு எடிட்டிங் அனுபவத்தை வழங்குகிறது. 🌍

பின்தளத்தில், ராஸ்டர் கையாளுதலுக்காக `GeoTIFF.js` நூலகத்துடன் இணைந்து Node.js ஐப் பயன்படுத்துகிறோம். பெறப்பட்ட பலகோண ஒருங்கிணைப்புகள் பிராந்தியத்தில் உள்ள பிக்சல்களைக் கண்டறியவும் அவற்றின் மதிப்புகளை மாற்றவும் செயலாக்கப்படுகின்றன. எடுத்துக்காட்டாக, ஒரு குறிப்பிட்ட பகுதியை வரைபடத்தில் அதிக உயரம் அல்லது தீவிர நிலப் பயன்பாடு உள்ளதாகக் குறிக்க விரும்பினால், அந்தப் பகுதியில் உள்ள பிக்சல்களுக்குப் புதிய மதிப்பை ஒதுக்கலாம். புதுப்பிக்கப்பட்ட ராஸ்டர் பின்னர் `fs.writeFileSync()` ஐப் பயன்படுத்தி `.tif` கோப்பில் எழுதப்பட்டு, மாற்றங்கள் தொடர்ந்து இருப்பதை உறுதி செய்கிறது. இந்த மாடுலர் பின்தள வடிவமைப்பு அளவிடுதலுக்கு முக்கியமானது, இது தொகுதி செயலாக்கம் அல்லது பல திருத்தங்கள் போன்ற கூடுதல் அம்சங்களை அனுமதிக்கிறது.

`GeoTIFF.fromArrayBuffer()` மற்றும் `readRasters()` போன்ற கட்டளைகள் ராஸ்டர் தரவைப் பிரித்தெடுப்பதற்கும் கையாளுவதற்கும் முக்கியமானவை. இந்த செயல்பாடுகள் `.tif` கோப்பை நினைவகத்தில் ஏற்றி அதன் தரவு வரிசைகளைப் படித்து, பிக்சல் நிலை மாற்றங்களைச் செயல்படுத்துகிறது. உதாரணமாக, ஒரு பயனர் ஒரு வனப் பகுதியைக் கோடிட்டுக் காட்டினால், பின்தளமானது பலகோணத்தில் உள்ள அனைத்து பிக்சல்களையும் முன் வரையறுக்கப்பட்ட "காடு" மதிப்பிற்குச் சரிசெய்ய முடியும். இந்த அணுகுமுறை ராஸ்டர் துல்லியமாக இருப்பதை உறுதிசெய்கிறது மற்றும் நிஜ உலக நிலைமைகளை பிரதிபலிக்கிறது. இந்த சிறப்பு கட்டளைகள் இல்லாமல், ஜியோஸ்பேஷியல் ராஸ்டர்களை எடிட் செய்வது மிகவும் சிக்கலானதாகவும் குறைவான செயல்திறன் கொண்டதாகவும் இருக்கும். 🚀

ஒட்டுமொத்த தீர்வு மிகவும் இணக்கமானது. எடுத்துக்காட்டாக, பல்வேறு துறைகள் ஒரே ராஸ்டரில் பணிபுரியும் ஆனால் அவற்றின் தேவைகளின் அடிப்படையில் வெவ்வேறு திருத்தங்களைச் செய்யும் நகர்ப்புற திட்டமிடல் திட்டத்தை கற்பனை செய்து பாருங்கள். ஸ்கிரிப்ட்களை மட்டுப்படுத்துவதன் மூலம், ஒவ்வொரு துறையும் தங்கள் பிரிவை மற்றவர்களைப் பாதிக்காமல் சுயாதீனமாக செயலாக்க முடியும். கூடுதலாக, பின்தள தர்க்கத்தை சரிபார்க்கும் யூனிட் சோதனைகள் மூலம், ஒவ்வொரு முறையும் திருத்தங்கள் சரியாகப் பயன்படுத்தப்படுவதை நீங்கள் உறுதிசெய்யலாம். இந்த விரிவான அமைப்பு ராஸ்டர் எடிட்டிங் அணுகக்கூடியதாக ஆக்குவது மட்டுமல்லாமல், பல்வேறு பயன்பாடுகளுக்கான கருவியை நீட்டிக்க டெவலப்பர்களுக்கு அதிகாரம் அளிக்கிறது, இது எதிர்கால புவிசார் திட்டங்களுக்கு இது ஒரு அடித்தளமாக அமைகிறது. ✨

// 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());
});

// 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'));

// 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!');
});

மேம்பட்ட நுட்பங்களுடன் ராஸ்டர் எடிட்டிங்கை மேம்படுத்துதல்

OpenLayers மூலம் ராஸ்டர் எடிட்டரை உருவாக்கும்போது, ​​பெரிய ராஸ்டர் கோப்புகளை கையாளுவதன் செயல்திறன் தாக்கம் பெரும்பாலும் கவனிக்கப்படாமல் இருக்கும். `.tif` கோப்புகள் உயர் தெளிவுத்திறன் கொண்ட தரவைக் கொண்டிருப்பதால், அவற்றை நிகழ்நேரத்தில் ஏற்றுவதும் மாற்றியமைப்பதும் கிளையன்ட் மற்றும் சர்வர் ஆதாரங்களுக்குச் சவாலாக இருக்கும். இதை நிவர்த்தி செய்ய, டெவலப்பர்கள் டைலிங் போன்ற நுட்பங்களைப் பயன்படுத்தலாம், இது ராஸ்டரை எளிதாக செயலாக்குவதற்கு சிறிய துண்டுகளாகப் பிரிக்கிறது. இந்த ஓடுகள் தனித்தனியாக புதுப்பிக்கப்பட்டு மீண்டும் ஒன்றாக இணைக்கப்படலாம், துல்லியமாக சமரசம் செய்யாமல் செயல்திறனை கணிசமாக மேம்படுத்தும். 🖼️

கருத்தில் கொள்ள வேண்டிய மற்றொரு முக்கியமான அம்சம், செயல்தவிர் மற்றும் மீண்டும் செய் செயல்பாட்டை செயல்படுத்துவதாகும். ராஸ்டர் எடிட்டிங் என்பது பெரும்பாலும் மீண்டும் மீண்டும் செய்யும் செயல்முறையாகும், அங்கு பயனர்கள் மாற்றங்களை இறுதி செய்வதற்கு முன் பல மாற்றங்களைச் சோதிக்கலாம். திருத்தங்களின் வரலாற்றைப் பராமரிப்பதன் மூலம், டெவலப்பர்கள் பயனர்கள் தங்கள் மாற்றங்களை எளிதாகச் செல்ல அனுமதிக்கலாம். ராஸ்டர் தரவின் ஸ்னாப்ஷாட்களை சேமிப்பதன் மூலம் அல்லது செயல்திறனுக்காக மாற்றப்பட்ட பிக்சல்களை மட்டும் கண்காணிப்பதன் மூலம் இதை அடைய முடியும். இந்த அம்சம் பயன்பாட்டினைச் சேர்க்கிறது மற்றும் ரிமோட் சென்சிங் அல்லது விவசாயத் திட்டமிடல் போன்ற தொழில்முறை பணிப்பாய்வுகளுக்கான கருவியின் கவர்ச்சியை அதிகரிக்கிறது.

கடைசியாக, வெவ்வேறு ராஸ்டர் வடிவங்களுக்கான ஆதரவை ஒருங்கிணைப்பது கருவியின் பயன்பாடுகளை விரிவுபடுத்தும். `.tif` கோப்புகள் பிரபலமாக இருக்கும்போது, ​​`.png` அல்லது `.jpeg` போன்ற வடிவங்கள் சிறிய தரவுத்தொகுப்புகள் அல்லது இணையம் சார்ந்த காட்சிப்படுத்தலுக்குப் பயன்படுத்தப்படலாம். வடிவங்களுக்கு இடையில் தடையற்ற மாற்றங்களைச் செயல்படுத்த, `GeoTIFF.js` போன்ற நூலகங்களை மாற்றிகளுடன் இணைக்கலாம். இத்தகைய நெகிழ்வுத்தன்மை ராஸ்டர் எடிட்டரை ஒரு சிறப்பு கருவியாக மட்டுமல்லாமல், பல்வேறு தொழில்களுக்கு ஏற்றதாக இருப்பதை உறுதிசெய்கிறது, இது டெவலப்பர்களுக்கான பல்துறை தேர்வாக அமைகிறது. 🌐