threejs/manual/resources/tools/geo-picking/make-geo-picking-texture.js

'use strict';

/* global shapefile */

/* eslint no-console: off */
/* eslint no-unused-vars: off */

async function main() {
  const size = 4096;
  const pickCtx = document.querySelector('#pick').getContext('2d');
  pickCtx.canvas.width = size;
  pickCtx.canvas.height = size;

  const outlineCtx = document.querySelector('#outline').getContext('2d');
  outlineCtx.canvas.width = size;
  outlineCtx.canvas.height = size;
  outlineCtx.translate(outlineCtx.canvas.width / 2, outlineCtx.canvas.height / 2);
  outlineCtx.scale(outlineCtx.canvas.width / 360, outlineCtx.canvas.height / -180);
  outlineCtx.strokeStyle = '#FFF';

  const workCtx = document.createElement('canvas').getContext('2d');
  workCtx.canvas.width = size;
  workCtx.canvas.height = size;

  let id = 1;
  const countryData = {};
  const countriesById = [];
  let min;
  let max;

  function resetMinMax() {
    min = [ 10000,  10000];
    max = [-10000, -10000];
  }

  function minMax(p) {
    min[0] = Math.min(min[0], p[0]);
    min[1] = Math.min(min[1], p[1]);
    max[0] = Math.max(max[0], p[0]);
    max[1] = Math.max(max[1], p[1]);
  }

  const geoHandlers = {
    'MultiPolygon': multiPolygonArea,
    'Polygon': polygonArea,
  };

  function multiPolygonArea(ctx, geo, drawFn) {
    const {coordinates} = geo;
    for (const polygon of coordinates) {
      ctx.beginPath();
      for (const ring of polygon) {
        ring.forEach(minMax);
        ctx.moveTo(...ring[0]);
        for (let i = 0; i < ring.length; ++i) {
          ctx.lineTo(...ring[i]);
        }
        ctx.closePath();
      }
      drawFn(ctx);
    }
  }

  function polygonArea(ctx, geo, drawFn) {
    const {coordinates} = geo;
    ctx.beginPath();
    for (const ring of coordinates) {
      ring.forEach(minMax);
      ctx.moveTo(...ring[0]);
      for (let i = 0; i < ring.length; ++i) {
        ctx.lineTo(...ring[i]);
      }
      ctx.closePath();
    }
    drawFn(ctx);
  }

  function fill(ctx) {
    ctx.fill('evenodd');
  }

  // function stroke(ctx) {
  //   ctx.save();
  //   ctx.setTransform(1, 0, 0, 1, 0, 0);
  //   ctx.stroke();
  //   ctx.restore();
  // }

  function draw(area) {
    const {properties, geometry} = area;
    const {type} = geometry;
    const name = properties.NAME;

    console.log(name);

    if (!countryData[name]) {
      const r = (id >>  0) & 0xFF;
      const g = (id >>  8) & 0xFF;
      const b = (id >> 16) & 0xFF;

      countryData[name] = {
        color: [r, g, b],
        id: id++,
      };
      countriesById.push({name});
    }
    const countryInfo = countriesById[countryData[name].id - 1];

    const handler = geoHandlers[type];
    if (!handler) {
      throw new Error('unknown geometry type.');
    }

    resetMinMax();

    workCtx.save();
    workCtx.clearRect(0, 0, workCtx.canvas.width, workCtx.canvas.height);
    workCtx.fillStyle = '#000';
    workCtx.strokeStyle = '#000';
    workCtx.translate(workCtx.canvas.width / 2, workCtx.canvas.height / 2);
    workCtx.scale(workCtx.canvas.width / 360, workCtx.canvas.height / -180);

    handler(workCtx, geometry, fill);

    workCtx.restore();

    countryInfo.min = min;
    countryInfo.max = max;
    countryInfo.area = properties.AREA;
    countryInfo.lat = properties.LAT;
    countryInfo.lon = properties.LON;
    countryInfo.population = {
      '2005': properties.POP2005,
    };

    //
    const left   = Math.floor(( min[0] + 180) * workCtx.canvas.width  / 360);
    const bottom = Math.floor((-min[1] +  90) * workCtx.canvas.height / 180);
    const right  = Math.ceil( ( max[0] + 180) * workCtx.canvas.width  / 360);
    const top    = Math.ceil( (-max[1] +  90) * workCtx.canvas.height / 180);
    const width  = right - left + 1;
    const height = Math.max(1, bottom - top + 1);

    const color = countryData[name].color;
    const src = workCtx.getImageData(left, top, width, height);
    for (let y = 0; y < height; ++y) {
      for (let x = 0; x < width; ++x) {
        const off = (y * width + x) * 4;
        if (src.data[off + 3]) {
          src.data[off + 0] = color[0];
          src.data[off + 1] = color[1];
          src.data[off + 2] = color[2];
          src.data[off + 3] = 255;
        }
      }
    }
    workCtx.putImageData(src, left, top);
    pickCtx.drawImage(workCtx.canvas, 0, 0);

//    handler(outlineCtx, geometry, stroke);
  }

  const source = await shapefile.open('TM_WORLD_BORDERS-0.3.shp');
  const areas = [];
  for (let i = 0; ; ++i) {
    const {done, value} = await source.read();
    if (done) {
      break;
    }
    areas.push(value);
    draw(value);
    if (i % 20 === 19) {
      await wait();
    }
  }
  console.log(JSON.stringify(areas));

  console.log('min', min);
  console.log('max', max);

  console.log(JSON.stringify(countriesById, null, 2));

  const pick = pickCtx.getImageData(0, 0, pickCtx.canvas.width, pickCtx.canvas.height);
  const outline = outlineCtx.getImageData(0, 0, outlineCtx.canvas.width, outlineCtx.canvas.height);

  function getId(imageData, x, y) {
    const off = (((y + imageData.height) % imageData.height) * imageData.width + ((x + imageData.width) % imageData.width)) * 4;
    return imageData.data[off + 0] +
           imageData.data[off + 1] * 256 +
           imageData.data[off + 2] * 256 * 256 +
           imageData.data[off + 3] * 256 * 256 * 256;
  }

  function putPixel(imageData, x, y, color) {
    const off = (y * imageData.width + x) * 4;
    imageData.data.set(color, off);
  }


  for (let y = 0; y < pick.height; ++y) {
    for (let x = 0; x < pick.width; ++x) {
      const s = getId(pick, x, y);
      const r = getId(pick, x + 1, y);
      const d = getId(pick, x, y + 1);
      let v = 0;
      if (s !== r || s !== d) {
        v = 255;
      }
      putPixel(outline, x, y, [v, v, v, v]);
    }
  }

  for (let y = 0; y < outline.height; ++y) {
    for (let x = 0; x < outline.width; ++x) {
      const s = getId(outline, x, y);
      const l = getId(outline, x - 1, y);
      const u = getId(outline, x, y - 1);
      const r = getId(outline, x + 1, y);
      const d = getId(outline, x, y + 1);
      //const rd = getId(outline, x + 1, y + 1);
      let v = s;
      if ((s && r && d) ||
          (s && l && d) ||
          (s && r && u) ||
          (s && l && u)) {
        v = 0;
      }
      putPixel(outline, x, y, [v, v, v, v]);
    }
  }

  outlineCtx.putImageData(outline, 0, 0);
}

function wait(ms = 0) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}

main();