@ 开发种子/ deck. gl- geotiff

用于渲染的高级API 云光化地层 (原始内容存档于2018-09-21). in deck.gl.

这个用 @developmentseed/geotiff 财务报告和审定财务报表 @cogeotiff/core 从浏览器中高效地读取 Cloud-Optimized GeoTIFFs.

快速启动

import { Deck } from '@deck.gl/core';
import { COGLayer } from '@developmentseed/deck.gl-geotiff';

new Deck({
  initialViewState: {
    longitude: 0,
    latitude: 0,
    zoom: 2
  },
  controller: true,
  layers: [
    new COGLayer({
      id: 'cog-layer',
      source: 'https://example.com/my-cog.tif'
    })
  ]
});

这个 COGLayer 是用于渲染 Cloud-Optimized GeoTIFFs 的推荐层。 它能操纵甲板 Gl's (英语) TileLayer 以匹配内部 COG 结构,根据缩放级别自动获取适当的概览.

层和源

每一层将其数据取为 source:一个打开的源,或者打开一个源的输入,例如URL.

打开一个源, 在绘制前读取其界限, 通过选项, 如 epsgResolver,或分层共享:

import { COGLayer, COGSource } from "@developmentseed/deck.gl-geotiff";

const source = await COGSource.open("https://example.com/my-cog.tif");
const { west, south, east, north } = source.geographicBounds;
new COGLayer({ id: "cog", source });

MosaicLayer 将其项目作为 data,每个带WGS84 bbox 和一个独特的 id。 。 。 . parseVRT 将 GDAL VRT 摩赛克 的文件读取为项目 :

import {
  COGLayer,
  COGSource,
  MosaicLayer,
  parseVRT,
} from "@developmentseed/deck.gl-geotiff";

const response = await fetch(vrtUrl);
const items = parseVRT(await response.text(), vrtUrl);

new MosaicLayer({
  id: "mosaic",
  data: items,
  getSource: (item, options) => COGSource.open(item.url, options),
  renderSource: (item, { source, subLayerProps }) =>
    new COGLayer({ ...subLayerProps, source }),
});

使用虚拟

此软件包在 Web Worker 中解码图像平板 。 工人采用Vite默认工人格式的顶级等待和动态进口(iife)不支持,因此 vite build 失败错误, 如 Top-level await is currently not supported with the 'iife' output format (第8项)或 Invalid value "iife" for option "worker.format" (第7节) 设定 worker.format 改为 "es"数字 :

// vite.config.ts
import { defineConfig } from "vite";

export default defineConfig({
  worker: { format: "es" },
});

vite dev 工作没有这种设置,因为它不捆接工人.

请求、缓存和认证

通过一个共享的 COG 层读取 RangeReader: 读取所选的瓷砖 需求会一起发布,并合并成少数流式HTTP范围请求, 每个平方块都会随着字节的到来而解决,一个请求一旦被取消 它的瓷砖离开视图, 所有收到的都是缓存的, 所以一个锅回 超过已下载的瓷砖, 不需要请求 。 每个 COGLayer, (中文(简体) ), MultiCOGLayer 财务报告和审定财务报表 MosaicLayer 在一个页面上分享读者缓存和 默认批量窗口.

• 通灵. 用自己的读者打开源头 其间隙和超时限制或缓存预算,或隔离一层 (单位:千美元)MosaicLayer 带 reader 作为道具并传递给 getSource:

  import { RangeReader } from "@developmentseed/range-reader";
  
  const reader = new RangeReader({
    maxOverfetchBytes: 4 * 1024 * 1024,
    cache: { metadataBytes: 64 * 1024 * 1024, dataBytes: 256 * 1024 * 1024 },
  });
  const source = await COGSource.open(url, { reader });
  new COGLayer({ id: "scene", source });
  

  reader.stats 数请求、 请求和收到的字节、 字节 过度牵引和缓存点击.

• 鉴定. requestInit 打开 COGSource.open 财务报告和审定财务报表 MultiCOGSource.open (和 MosaicLayer 同名道具) 来源提出的每一项请求的标题、证书和模式. 不同inits读取的源从不共享请求或缓存字节, 甚至一个URL.

  const source = await COGSource.open(url, {
    requestInit: { headers: { authorization: `Bearer ${token}` } },
  });
  new COGLayer({ id: "private", source });
  

• 作喉咙. COGLayer 财务报告和审定财务报表 MultiCOGLayer 默认为 maxRequests: 256 财务报告和审定财务报表 debounceTime: 50 因此,整个选择到达 在一个任务中的阅读器和一个锅在要求什么之前就解决; 原产地 concurrencyLimiter (默认一次6次,匹配) 浏览器的 HTTP/1.1 限制) 将合并请求封顶。 一个平板 其负载不再被通缉,一旦离开视线就会中止. MosaicLayer属于自己的 maxRequests 仍然限制打开的源数 一次 一次吗.