123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188 |
- <canvas></canvas>
- <script src="ogc-parser.js"></script>
- <script>
- /* global ogcParser */
- function wait(ms = 0) {
- return new Promise((resolve) => {
- setTimeout(resolve, ms);
- });
- }
- // # need to draw to 2nd canvas, then shave off non perfect pixels
- async function main() {
- const ctx = document.querySelector('canvas').getContext('2d');
- ctx.canvas.width = 2048;
- ctx.canvas.height = 2048;
- ctx.fillStyle = '#444';
- ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
- ctx.translate(ctx.canvas.width / 2, ctx.canvas.height / 2);
- ctx.scale(ctx.canvas.width / 360, ctx.canvas.height / -180);
- function setColor(color) {
- ctx.fillStyle = color;
- ctx.strokeStyle = color;
- }
- const handlers = {
- point,
- lineString,
- polygon,
- multiPoint,
- multiLineString,
- multiPolygon,
- };
- function point(d) {
- ctx.fillRect(...d.point, 1, 1);
- }
- function setPathFromPoints(points, backward = false) {
- if (backward) {
- const numPoints = points.length / 2;
- const lastPoint = numPoints - 1;
- ctx.moveTo(...points.slice(lastPoint * 2, lastPoint * 2 + 2));
- for (let i = lastPoint - 1; i >= 0; i -= 2) {
- ctx.lineTo(...points.slice(i * 2, i * 2 + 2));
- }
- } else {
- ctx.moveTo(...points.slice(0, 2));
- for (let i = 2; i < points.length; i += 2) {
- ctx.lineTo(...points.slice(i, i + 2));
- }
- }
- }
- function stroke(ctx) {
- ctx.save();
- ctx.setTransform(1, 0, 0, 1, 0, 0);
- ctx.stroke();
- ctx.restore();
- }
- function lineString(d) {
- ctx.beginPath();
- setPathFromPoints(d.points);
- stroke(ctx);
- }
- function polygon(d) {
- ctx.beginPath();
- d.rings.forEach((ring, ndx) => {
- setPathFromPoints(ring, ndx !== 0);
- ctx.closePath();
- });
- ctx.fill();
- stroke(ctx);
- }
- function multiPoint(d) {
- for (let i = 0; i < d.points.length; i += 2) {
- ctx.fillRect(...d.points.slice(i, i + 2));
- }
- }
- function multiLineString(d) {
- d.lineStrings.forEach((lineString) => {
- ctx.beginPath();
- setPathFromPoints(lineString);
- stroke(ctx);
- });
- }
- function multiPolygon(d) {
- d.polygons.forEach((polygon) => {
- ctx.beginPath();
- polygon.forEach((ring, ndx) => {
- setPathFromPoints(ring, ndx !== 0);
- });
- ctx.fill();
- stroke(ctx);
- });
- }
- const colors = {};
- const req = await fetch('level1.json');
- const areas = await req.json();
- const min = [Number.MAX_VALUE, Number.MAX_VALUE];
- const max = [Number.MIN_VALUE, Number.MIN_VALUE];
- console.log('num areas:', areas.length);
- for (let ndx = 0; ndx < areas.length; ++ndx) {
- const area = areas[ndx];
- try {
- const buf = new Uint8Array(base64ToUint8Array(area.geom));
- area.geom = ogcParser.parse(buf);
- } catch (e) {
- console.log('ERROR:', e);
- console.log(JSON.stringify(area, null, 2));
- throw e;
- }
- if (!colors[area.NAME_0]) {
- colors[area.NAME_0] = rgb(r(), r(), r());
- }
- const color = colors[area.NAME_0];
- console.log(ndx, area.NAME_0);
- area.geom.primitives.forEach((primitive) => {
- const fn = handlers[primitive.type];
- setColor(color);
- fn(primitive);
- });
- min[0] = Math.min(min[0], area.geom.envelope[0]);
- min[0] = Math.min(min[0], area.geom.envelope[1]);
- min[1] = Math.min(min[1], area.geom.envelope[2]);
- min[1] = Math.min(min[1], area.geom.envelope[3]);
- max[0] = Math.max(max[0], area.geom.envelope[0]);
- max[0] = Math.max(max[0], area.geom.envelope[1]);
- max[1] = Math.max(max[1], area.geom.envelope[2]);
- max[1] = Math.max(max[1], area.geom.envelope[3]);
- if (ndx % 100 === 99) {
- await wait();
- }
- }
- console.log('min', min);
- console.log('max', max);
- }
- function r(min, max) {
- if (min === undefined) {
- min = 0;
- max = 1;
- } else if (max === undefined){
- max = min;
- min = 0;
- }
- return min + Math.random() * (max - min);
- }
- function rgb(r, g, b) {
- return `rgb(${r * 255 | 0},${g * 255 | 0},${b * 255 | 0})`;
- }
- // function hsl(h, s, l) {
- // return `hsl(${h * 360 | 0},${s * 100 | 0}%,${l * 100 | 0}%)`;
- // }
- function base64ToUint8Array(base64) {
- const raw = window.atob(base64);
- const rawLength = raw.length;
- const array = new Uint8Array(new ArrayBuffer(rawLength));
- for(let i = 0; i < rawLength; ++i) {
- array[i] = raw.charCodeAt(i);
- }
- return array;
- }
- main();
- </script>
|