Conflict Resolution, GIS, Tacos
Published
Edited
Mar 13, 2022
2 stars
Reproject a Map Tile using GeoWarp
with Sample Tile from Stamen Mapshttp://maps.stamen.com/#watercolor/12/37.7706/-122.3782
z = 11
x = 327
y = 791
url = `https://stamen-tiles-c.a.ssl.fastly.net/watercolor/${z}/${x}/${y}.jpg`
loadImage = require("easy-image-loader@0.1.0")
readPixels = require("read-pixels@0.4.0")
pixels = readPixels({ data: img })
proj4 = require("proj4")
proj4js = "+proj=aea +lat_1=20 +lat_2=60 +lat_0=40 +lon_0=-96 +x_0=0 +y_0=0 +datum=NAD83 +units=m +no_defs "
proj4obj = proj4("EPSG:3857", proj4js)
inverse = proj4obj.inverse
forward = proj4obj.forward
geowarp = import("https://cdn.skypack.dev/geowarp@1.3.0").then(module => module.default)
tilebelt = import('https://cdn.skypack.dev/@mapbox/tilebelt@1.0.2?min')
reprojectBoundingBox = require("reproject-bbox")
bbox4326 = tilebelt.tileToBBOX([x, y, z]);
bbox3857 = reprojectBoundingBox({ bbox: bbox4326, from: 4326, to: 3857 });
out_bbox = reprojectBoundingBox({ bbox: bbox3857, from: 3857, to: proj4js })
typeof inverse
height = pixels.height
width = pixels.width
warped = geowarp({
in_bbox: bbox3857,
in_data: pixels.pixels,
in_height: height,
in_layout: "[row,column,band]",
in_pixel_depth: 4,
in_srs: 3857,
in_width: width,
out_height: height,
out_layout: "[row,column,band]",
out_no_data: 0,
out_srs: proj4js,
out_width: width,
round: true,
inverse,
forward
});
new Set(warped.data)
toCanvas = require("to-canvas@0.1.0")
toCanvas({ data: warped.data, height, width })
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
