Sukurkite paprastą rastrinį redaktorių su OpenLayers

Darbo su rastriniu redagavimu OpenLayers darbo pradžia

Ar kada nors norėjote sukurti žiniatinklio įrankį rastriniams vaizdams redaguoti? 🌍 Pavyzdžiui, keisti konkrečias .tif failo sritis naudojant daugiakampius ir priskirti naujas reikšmes pasirinktiems pikseliams? Ši koncepcija gali būti galinga geoerdvinėms programoms, tačiau iš pirmo žvilgsnio gali atrodyti sudėtinga.

Įsivaizduokite įrankį, leidžiantį vartotojams įkelti rastrinį žemėlapį, nubrėžti figūrą dominančioje srityje ir akimirksniu keisti pagrindinius duomenis. Tokios funkcijos gali būti labai svarbios žemėtvarkai, klimato tyrimams ar net miestų planavimui. 🎨 Tačiau paprastų pavyzdžių paieška gali būti nelinksma.

Savo kelionėje kurdamas tokį įrankį supratau, kokie reti praktiniai pavyzdžiai, ypač naudojant OpenLayers. Man reikėjo būdo, leidžiančio vartotojams dinamiškai sąveikauti su rastriniais duomenimis, o pakeitimai nedelsiant atsispindi kliento pusėje. Norint pradėti, prireikė šiek tiek kasimo ir kūrybiško problemų sprendimo.

Šis straipsnis padės atlikti pradinius paprastus rastrinio rengyklės kūrimo veiksmus. Sužinosite, kaip integruoti OpenLayers, leisti vartotojams piešti daugiakampius ir atnaujinti tų daugiakampių pikselių reikšmes. Nesvarbu, ar tai naujokas, ar norite išplėsti savo „OpenLayers“ įrankių rinkinį, šie patarimai padės jums pradėti teisingą žingsnį! 🚀

Paprasto rastrinio redaktoriaus mechanikos tyrinėjimas

Mūsų sukurtais scenarijais siekiama užpildyti atotrūkį tarp kliento pusės interaktyvumo ir serverio pusės rastrinio apdorojimo. Priekinėje sistemoje naudojame OpenLayers biblioteką, kuri puikiai atvaizduoja ir sąveikauja su geografiniais duomenimis. Vartotojas tiesiogiai žemėlapyje nupiešia daugiakampį, kuris vėliau apdorojamas, kad būtų apibrėžta dominanti sritis. Naudodami sąveikas „Piešti“ ir „Keisti“, leidžiame vartotojams lengvai pasirinkti arba koreguoti redaguotinas sritis. Užbaigus daugiakampį, koordinatės užfiksuojamos ir siunčiamos į užpakalinę programą gavimo užklausa. Šis metodas suteikia dinamišką ir intuityvią redagavimo patirtį, būtiną atliekant tokias užduotis kaip žemės naudojimo planavimas ar aplinkos analizė. 🌍

Užpakalinėje programoje naudojame Node.js kartu su `GeoTIFF.js` biblioteka rastriniam manipuliavimui. Gautos daugiakampio koordinatės apdorojamos, kad būtų galima rasti pikselius regione ir pakeisti jų reikšmes. Pavyzdžiui, jei norite pažymėti tam tikrą vietą žemėlapyje, kurioje yra didelis aukštis arba intensyviai naudojama žemė, to regiono pikseliams galite priskirti naują reikšmę. Tada atnaujintas rastras įrašomas atgal į „.tif“ failą naudojant „fs.writeFileSync()“, užtikrinant, kad pakeitimai būtų nuolatiniai. Šis modulinis užpakalinės programos dizainas yra labai svarbus keičiant mastelį, nes suteikia papildomų funkcijų, pvz., paketinį apdorojimą arba kelis redagavimus.

Tokios komandos kaip „GeoTIFF.fromArrayBuffer()“ ir „readRasters()“ yra labai svarbios norint išgauti ir apdoroti rastrinius duomenis. Šios funkcijos įkelia .tif failą į atmintį ir nuskaito jo duomenų masyvus, taip įgalindamos pikselių lygio pakeitimus. Pavyzdžiui, jei vartotojas nubrėžia miško plotą, užpakalinė programa gali pakoreguoti visus daugiakampio pikselius pagal iš anksto nustatytą „miško“ reikšmę. Šis metodas užtikrina, kad rastras išlieka tikslus ir atspindi realias sąlygas. Be šių specializuotų komandų geoerdvinių rastrų redagavimas būtų daug sudėtingesnis ir ne toks efektyvus. 🚀

Bendras sprendimas yra labai pritaikomas. Pavyzdžiui, įsivaizduokite miesto planavimo projektą, kuriame įvairūs skyriai dirba su tuo pačiu rastru, bet atlieka skirtingus pakeitimus, atsižvelgdami į savo poreikius. Modularizuojant scenarijus, kiekvienas skyrius galėtų savarankiškai apdoroti savo skyrių, nepaveikdamas kitų. Be to, naudodami vienetų testus, patvirtinančius užpakalinės sistemos logiką, galite užtikrinti, kad pakeitimai būtų taikomi teisingai kiekvieną kartą. Dėl šios išsamios sąrankos ne tik pasiekiamas rastrinis redagavimas, bet ir suteikiama galimybė kūrėjams išplėsti įrankį įvairioms programoms, todėl tai yra kertinis akmuo būsimiems geoerdviniams projektams. ✨

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

Rastrinio redagavimo tobulinimas naudojant pažangias technologijas

Kuriant rastrinę redagavimo priemonę su OpenLayers, dažnai nepastebimas aspektas yra manipuliavimo dideliais rastriniais failais našumo poveikis. Kadangi „.tif“ failuose gali būti didelės raiškos duomenų, jų įkėlimas ir modifikavimas realiuoju laiku gali sukelti iššūkių tiek kliento, tiek serverio ištekliams. Norėdami tai išspręsti, kūrėjai gali naudoti tokius metodus kaip plytelių klijavimas, kuris padalija rastrį į mažesnius gabalus, kad būtų lengviau apdoroti. Šios plytelės gali būti atnaujinamos atskirai ir vėl susiuvamos, o tai žymiai pagerina našumą neprarandant tikslumo. 🖼️

Kita svarbi savybė, į kurią reikia atsižvelgti, yra anuliavimo ir perdarymo funkcijų įgyvendinimas. Rastrinis redagavimas dažnai yra kartotinis procesas, kurio metu vartotojai gali išbandyti keletą modifikacijų prieš užbaigdami pakeitimus. Išsaugodami redagavimo istoriją, kūrėjai gali leisti vartotojams lengvai naršyti pakeitimus. Tai galima pasiekti išsaugant rastrinių duomenų momentines nuotraukas arba stebint tik pakeistus pikselius efektyvumui užtikrinti. Ši funkcija padidina naudojimo patogumą ir padidina įrankio patrauklumą profesionalioms darbo eigoms, tokioms kaip nuotolinis stebėjimas ar žemės ūkio planavimas.

Galiausiai, integravus įvairių rastrinių formatų palaikymą, galima išplėsti įrankio programas. Nors „.tif“ failai yra populiarūs, tokie formatai kaip „.png“ arba „.jpeg“ gali būti naudojami mažesniems duomenų rinkiniams arba žiniatinklio vizualizacijai. Tokios bibliotekos kaip „GeoTIFF.js“ gali būti suporuotos su keitikliais, kad būtų galima sklandžiai pereiti tarp formatų. Toks lankstumas užtikrina, kad rastrinis redaktorius yra ne tik specializuotas įrankis, bet ir pritaikomas įvairioms pramonės šakoms, todėl tai yra universalus pasirinkimas kūrėjams. 🌐