@mapcatch/util 1.0.0

package/src/gl-operations/texture_manager.js

@@ -0,0 +1,141 @@
+import {
+  flatMap,
+  isEmpty,
+} from 'lodash';
+import * as util from './util';
+
+export default class TextureManager {
+  constructor(
+    regl,
+    tileSize = 256,
+    maxTextureDimension,
+    flipY = false,
+    textureFormat = 'rgba',
+    textureType = 'uint8',
+  ) {
+    const tilesAcross = Math.floor(maxTextureDimension / tileSize);
+    const pixelsAcross = tilesAcross * tileSize;
+    const tileCapacity = tilesAcross * tilesAcross;
+
+    const texture = regl.texture({
+      width: pixelsAcross,
+      height: pixelsAcross,
+      flipY: flipY,
+      format: textureFormat,
+      type: textureType,
+    });
+
+    const contents = new Map();
+    const available = this.allTextureCoordinates(tilesAcross, tileSize);
+
+    Object.assign(this, {
+      tileSize,
+      tilesAcross,
+      pixelsAcross,
+      tileCapacity,
+      texture,
+      contents,
+      available,
+    });
+  }
+
+  addTile(
+    tileCoordinates,
+    data,
+  ) {
+    const {
+      available,
+      contents,
+      texture,
+      tileSize,
+    } = this;
+
+    const hashKey = this.hashTileCoordinates(tileCoordinates);
+    if (contents.has(hashKey)) {
+      const textureCoordinates = contents.get(hashKey);
+      // We use a least-recently-used eviction policy for the tile cache. Map iterators are
+      // convenient for this, because they return entries in insertion order. But for this to work
+      // as expected, every time we access a tile, we need to reinsert it so that it moves to the
+      // end of that insertion-order list.
+      contents.delete(hashKey);
+      contents.set(hashKey, textureCoordinates);
+      return this.formatOutputTextureCoordinates(textureCoordinates);
+    }
+    if (isEmpty(available)) {
+      // Get the first key inserted. Map.prototype.keys() produces an iterable iterator over the keys
+      // in the order of insertion, so we can just use the iterator's first value.
+      const firstInsertedKey = contents.keys().next().value;
+      this.removeByHashKey(firstInsertedKey);
+    }
+    // remove from list of available positions
+    const textureCoordinates = available.pop();
+    // store mapping of tile to texture coordinates
+    contents.set(hashKey, textureCoordinates);
+
+    const { x: textureX, y: textureY } = textureCoordinates;
+    texture.subimage({
+      data,
+      width: tileSize,
+      height: tileSize,
+    }, textureX, textureY);
+
+    return this.formatOutputTextureCoordinates(textureCoordinates);
+  }
+
+  removeTile(tileCoordinates) {
+    this.removeByHashKey(this.hashTileCoordinates(tileCoordinates));
+  }
+
+  clearTiles() {
+    for (const hashKey of Array.from(this.contents.keys())) {
+      this.removeByHashKey(hashKey);
+    }
+  }
+
+  destroy() {
+    this.texture.destroy();
+  }
+
+  removeByHashKey(hashKey) {
+    // This method only removes the key. The pixel data remains in the texture.
+    if (this.contents.has(hashKey)) {
+      const textureCoordinates = this.contents.get(hashKey);
+      this.contents.delete(hashKey);
+      this.available.push(textureCoordinates);
+    }
+  }
+
+  formatOutputTextureCoordinates(textureCoordinates) {
+    const { x, y } = textureCoordinates;
+    const { pixelsAcross, tileSize } = this;
+    return [
+      {
+        x: x / pixelsAcross,
+        y: y / pixelsAcross,
+      },
+      {
+        x: (x + tileSize) / pixelsAcross,
+        y: (y + tileSize) / pixelsAcross,
+      },
+    ];
+  }
+
+  hashTileCoordinates({ x, y, z }) {
+    return `${x}:${y}:${z}`;
+  }
+
+  getTextureCoordinates(tileCoordinates) {
+    const hashKey = this.hashTileCoordinates(tileCoordinates);
+    const textureCoordinates = this.contents.get(hashKey);
+    return this.formatOutputTextureCoordinates(textureCoordinates);
+  }
+
+  allTextureCoordinates(tilesAcross, tileSize) {
+    return flatMap(util.range(tilesAcross), x =>
+      util.range(tilesAcross).map(y => ({
+        x: x * tileSize,
+        y: y * tileSize,
+      })),
+    );
+  }
+}

package/src/gl-operations/util.js

@@ -0,0 +1,336 @@
+import { memoize } from 'lodash';
+import { decode, toRGBA8 } from 'upng-js';
+
+import {
+  RGB_REGEX,
+  HEX_REGEX,
+} from './constants';
+
+export function machineIsLittleEndian() {
+  const uint8Array = new Uint8Array([0xAA, 0xBB]);
+  const uint16array = new Uint16Array(uint8Array.buffer);
+  return uint16array[0] === 0xBBAA;
+}
+
+/**
+ * Cribbed from Python's built-in `range` function.
+ */
+export function range(...args) {
+  if (args.length === 1) {
+    const [until] = args;
+    return new Array(until).fill(undefined).map((_, i) => i);
+  } else {
+    const [from, until, step = 1] = args;
+    if (step === 0) {
+      throw new Error('Argument step must be nonzero.');
+    }
+    const output = [];
+    for (let val = from; (step > 0) ? val < until : val > until; val += step) {
+      output.push(val);
+    }
+    return output;
+  }
+}
+
+/**
+ * Fetch a png and decode data. If png does not exist return an array with nodataValue.
+ */
+export async function fetchPNGData(url, nodataValue, tileDimension) {
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+    xhr.open("GET", url, true);
+    xhr.responseType = "arraybuffer";
+    xhr.addEventListener('load', () => {
+      resolve(xhr.response);
+    });
+    xhr.addEventListener('error', reject);
+    xhr.send(null);
+  }).then((data) => {
+    const img = decode(data);
+    const rgba = toRGBA8(img)[0];
+    return new Uint8Array(rgba);
+  }).catch(() => createNoDataTile(nodataValue, tileDimension));
+}
+
+/**
+ * Check if two TypedArrays are equal
+ */
+export function typedArraysAreEqual(a, b) {
+  if (a.byteLength !== b.byteLength) return false;
+  return a.every((val, i) => val === b[i]);
+}
+
+/**
+ * The matrix output by this function transforms coordinates in pixel space within the drawing
+ * buffer (with upper left corner (0, 0) and lower right corner (buffer width, buffer height))
+ * to WebGL "clipspace", with upper left corner (-1, 1) and lower right corner (1, -1).
+ */
+export function getTransformMatrix(drawingBufferWidth, drawingBufferHeight) {
+  // To scale horizontally, divide by width (in pixels) and multiply by 2, because width is 2 in clipspace.
+  const sx = 2 / drawingBufferWidth;
+  // To scale vertically, divide by height (in pixels) and multiply by -2, because height is 2 in clipspace,
+  // and the direction is flipped (positive is up, negative is down).
+  const sy = -2 / drawingBufferHeight;
+  // We translate by -1 horizontally (so the range 0 to 2 maps to the range -1 to 1).
+  const tx = -1;
+  // We translate by 1 horizontally (so the range -2 to 0 maps to the range -1 to 1).
+  const ty = 1;
+  // Matrix must be in column-major order for WebGL.
+  return [
+    sx, 0,  0, 0,
+    0,  sy, 0, 0,
+    0,  0,  1, 0,
+    tx, ty, 0, 1,
+  ];
+}
+
+/**
+ * From a TextureBounds object, this function generates the four vertices WebGL needs to draw the
+ * corresponding rectangle (as two conjoined triangles generated with the triangle strip primitive).
+ */
+export function getTexCoordVerticesTriangleStripQuad(textureBounds) {
+  const [{ x: left, y: top }, { x: right, y: bottom }] = textureBounds;
+  return [
+    [left,  top   ],
+    [right, top   ],
+    [left,  bottom],
+    [right, bottom],
+  ];
+}
+
+/**
+ * From a TextureBounds object, this function generates the six vertices WebGL needs to draw the
+ * corresponding rectangle (as two triangles).
+ */
+export function getTexCoordVerticesTriangleQuad(textureBounds) {
+  const [{ x: left, y: top }, { x: right, y: bottom }] = textureBounds;
+  return [
+    [left,  top   ],
+    [right, top   ],
+    [left,  bottom],
+    [right, bottom],
+    [right, top   ],
+    [left,  bottom],
+  ];
+}
+
+/**
+ * Produces a Promise that resolves when the desired `duration` has expired.
+ */
+export function Timer(duration) {
+  return new Promise((resolve) => setTimeout(resolve, duration));
+}
+
+/**
+ * Useful for sorting TileCoordinates objects.
+ */
+export function compareTileCoordinates(a, b) {
+  const z = a.z - b.z;
+  const x = a.x - b.x;
+  const y = a.y - b.y;
+  if (z !== 0) {
+    // First compare z values.
+    return z;
+  } else if (x !== 0) {
+    // If z values are the same, compare x values.
+    return x;
+  } else {
+    // If x values are the same, compare y values.
+    return y;
+  }
+}
+
+/**
+ * Determines whether two arrays of TileCoordinates are the same.
+ */
+export function sameTiles(a, b) {
+  return (
+    // arrays are of the same length
+    a.length === b.length
+    // and corresponding elements have the same tile coordinates
+    && a.every((tileA, index) => compareTileCoordinates(tileA, b[index]) === 0)
+  );
+}
+
+export const createNoDataTile = memoize((nodataValue, tileDimension = 256) => {
+  // Create a float 32 array.
+  const float32Tile = new Float32Array(tileDimension * tileDimension);
+  // Fill the tile array with the no data value
+  float32Tile.fill(nodataValue);
+  // return the no data tile.
+  return new Uint8Array(float32Tile.buffer);
+});
+
+/**
+ * Force TypeScript to interpret value `val` as type `T`.
+ */
+export function staticCast(val) {
+  return val;
+}
+
+/**
+ * Add one or more macro definitions to a GLSL source string.
+ */
+export function defineMacros(src, macros) {
+  const defs = Object.keys(macros).map((key) => `#define ${key} ${macros[key]}\n`).join('');
+  return `${defs}\n${src}`;
+}
+
+/**
+ * Ping-pong technique. Render to a destination framebuffer,
+ * then use it as a source texture in our next iteration.
+ * Then swap them and continue. Used for advanced hillshading.
+ */
+export function PingPong(regl, opts) {
+  const fbos = [regl.framebuffer(opts), regl.framebuffer(opts)];
+
+  let index = 0;
+
+  function ping() {
+    return fbos[index];
+  }
+
+  function pong() {
+    return fbos[1 - index];
+  }
+
+  function swap() {
+    index = 1 - index;
+  }
+
+  function destroy() {
+    fbos[0].destroy();
+    fbos[1].destroy();
+  }
+
+  return {
+    ping,
+    pong,
+    swap,
+    destroy
+  };
+}
+
+/**
+ * hexToRGB converts a color from hex format to rgba.
+ * const [r, g, b, a] = hexToRGB("#ffeeaaff")
+ */
+export const hexToRGB = (hex) => {
+  const hasAlpha = hex.length === 9;
+  const start = hasAlpha ? 24 : 16;
+  const bigint = parseInt(hex.slice(1), 16);
+  const r = (bigint >> start) & 255;
+  const g = (bigint >> (start - 8)) & 255;
+  const b = (bigint >> (start - 16)) & 255;
+  const a = hasAlpha ? (bigint >> (start - 24)) & 255 : 255;
+  return [r, g, b, a];
+};
+
+/**
+ * Parses a color string of the form 'rgb({rVal}, {gVal}, {bVal})' and converts the resulting values
+ * to an array with ints 0 - 255.
+ */
+export function colorStringToInts(colorstring) {
+  if (colorstring === 'transparent') {
+    return [0, 0, 0, 0];
+  }
+  const rgbmatch = colorstring.match(RGB_REGEX);
+  const hexmatch = colorstring.match(HEX_REGEX);
+  if (rgbmatch !== null) {
+    const [, r, g, b] = rgbmatch;
+    return [+r, +g, +b, 255];
+  } else if (hexmatch !== null) {
+    return hexToRGB(colorstring);
+  } else {
+    throw new Error(`'${colorstring}' is not a valid RGB or hex color expression.`);
+  }
+}
+
+/**
+ * colormapToFlatArray takes the input colormap and returns a flat array to be
+ * used as input to a texture. The first row in the array contains the colors.
+ * The second row contains the encoded offset values.
+ */
+export const colormapToFlatArray = (colormap) => {
+  const offsets = [];
+  let colors = [];
+  for (let i = 0; i < colormap.length; i++) {
+    offsets.push(colormap[i].offset);
+    const colorsnew = colorStringToInts(colormap[i].color);
+    colors = colors.concat(colorsnew);
+  }
+
+  const floatOffsets = new Float32Array(offsets);
+  const uintOffsets = new Uint8Array(floatOffsets.buffer);
+  const normalOffsets = Array.from(uintOffsets);
+  const colormapArray = colors.concat(normalOffsets);
+
+  return colormapArray;
+};
+
+/**
+ * Creates a texture with colors on first row and offsets on second row
+ */
+export function createColormapTexture(colormapInput, regl) {
+  const colormapFlatArray = colormapToFlatArray(colormapInput);
+  let colormapTexture;
+  if (colormapInput.length === 0) {
+    // empty texture
+    colormapTexture = regl.texture({
+      shape: [2, 2]
+    });
+  } else {
+    colormapTexture = regl.texture({
+      width: colormapInput.length,
+      height: 2,
+      data: colormapFlatArray
+    });
+  }
+
+  return colormapTexture;
+}
+
+/**
+ * Fetch 8 adjacent tiles, if not already existing in tileManager.
+ * Return array with texture coord vertices for all tiles.
+ */
+export async function getAdjacentTilesTexCoords(gloperations, textureManager, coords, url) {
+  // Get existing tiles in TextureManager
+  const textureContents = textureManager.contents;
+
+  // use 3x3 tiles for adv. hillshading
+  // TODO: add as plugin option?
+  const adjacentTiles = 3;
+  let textureCoords = [];
+
+    for (let i = 0; i < adjacentTiles; i++) {
+      const _x = coords['x'] + (i - 1);
+      for (let j = 0; j < adjacentTiles; j++) {
+        const _y = coords['y'] + (j - 1);
+        const coordsAdjacent = {
+          x: _x,
+          y: _y,
+          z: coords['z'],
+        };
+
+        // Fetch data for adjacent tile if not already existing in TextureManager
+        const hashKey = textureManager.hashTileCoordinates(coordsAdjacent);
+        if (!textureContents.has(hashKey)) {
+          // Retrieve and add data to TextureManager
+          const pixelDataAdjacent = await gloperations._fetchTileData(coordsAdjacent, url);
+          const textureBounds = gloperations._renderer.textureManager.addTile(coordsAdjacent, pixelDataAdjacent);
+          textureCoords = textureCoords.concat(getTexCoordVerticesTriangleQuad(textureBounds));
+        } else {
+          const textureBounds = gloperations._renderer.textureManager.getTextureCoordinates(coordsAdjacent);
+          textureCoords = textureCoords.concat(getTexCoordVerticesTriangleQuad(textureBounds));
+        }
+      }
+    }
+    return textureCoords;
+}
+
+export function delay(ms) {
+  return new Promise(function(resolve) {
+      setTimeout(resolve, ms);
+  });
+}

package/src/index.js

@@ -0,0 +1,10 @@
+// 解析jpg文件，获取exif信息
+export {getPhotoTags} from './exif'
+// 常用公共函数和工具函数
+export * from './util'
+// 事件处理类
+export {default as Event} from './event'
+// dsm瓦片渲染类
+export {default as GLOperations} from './gl-operations'
+// 常量
+export * from './constants'