From acef40420424bee3598dcea0911a9d3723c27455 Mon Sep 17 00:00:00 2001 From: YiQianYao <42212176+yiiiiiiqianyao@users.noreply.github.com> Date: Thu, 10 Nov 2022 19:25:28 +0800 Subject: [PATCH] docs: update website docs (#1468) * docs: change tile layer docs * style: lint sytle Co-authored-by: shihui --- packages/site/docs/api/raster/source.zh.md | 26 +- .../docs/api/tile/geojsonvt_tile_layer.en.md | 6 + .../docs/api/tile/geojsonvt_tile_layer.zh.md | 63 +++ packages/site/docs/api/tile/options.zh.md | 28 ++ .../docs/api/tile/raster_tile_layer.en.md | 6 + .../docs/api/tile/raster_tile_layer.zh.md | 264 +++++++++++++ packages/site/docs/api/tile/source.en.md | 6 - packages/site/docs/api/tile/source.zh.md | 224 ----------- packages/site/docs/api/tile/style.zh.md | 61 +++ packages/site/docs/api/tile/tile_layer.en.md | 6 - packages/site/docs/api/tile/tile_layer.zh.md | 249 ------------ .../docs/api/tile/vector_tile_layer.en.md | 6 + .../docs/api/tile/vector_tile_layer.zh.md | 81 ++++ .../site/docs/tutorial/tile/rasterTile.zh.md | 369 +++--------------- .../site/docs/tutorial/tile/vectorTile.zh.md | 211 +++------- .../source/src/utils/bandOperation/math.ts | 26 +- 16 files changed, 657 insertions(+), 975 deletions(-) create mode 100644 packages/site/docs/api/tile/geojsonvt_tile_layer.en.md create mode 100644 packages/site/docs/api/tile/geojsonvt_tile_layer.zh.md create mode 100644 packages/site/docs/api/tile/raster_tile_layer.en.md create mode 100644 packages/site/docs/api/tile/raster_tile_layer.zh.md delete mode 100644 packages/site/docs/api/tile/source.en.md delete mode 100644 packages/site/docs/api/tile/source.zh.md delete mode 100644 packages/site/docs/api/tile/tile_layer.en.md delete mode 100644 packages/site/docs/api/tile/tile_layer.zh.md create mode 100644 packages/site/docs/api/tile/vector_tile_layer.en.md create mode 100644 packages/site/docs/api/tile/vector_tile_layer.zh.md diff --git a/packages/site/docs/api/raster/source.zh.md b/packages/site/docs/api/raster/source.zh.md index bb24772444..604fa24235 100644 --- a/packages/site/docs/api/raster/source.zh.md +++ b/packages/site/docs/api/raster/source.zh.md @@ -273,19 +273,19 @@ const parser = { ```js /** 数学运算 根据计算表达式进行数学运算 * * * Math operators: - * `['*', value1, value2]` multiplies `value1` by `value2` - * `['/', value1, value2]` divides `value1` by `value2` - * `['+', value1, value2]` adds `value1` and `value2` - * `['-', value1, value2]` subtracts `value2` from `value1` - * `['%', value1, value2]` returns the result of `value1 % value2` (modulo) - * `['^', value1, value2]` returns the value of `value1` raised to the `value2` power - * `['abs', value1]` returns the absolute value of `value1` - * `['floor', value1]` returns the nearest integer less than or equal to `value1` - * `['round', value1]` returns the nearest integer to `value1` - * `['ceil', value1]` returns the nearest integer greater than or equal to `value1` - * `['sin', value1]` returns the sine of `value1` - * `['cos', value1]` returns the cosine of `value1` - * `['atan', value1, value2]` returns `atan2(value1, value2)`. If `value2` is not provided, returns `atan(value1)` + * `['*', value1, value2]` 返回 `value1 * value2` + * `['/', value1, value2]` 返回 `value1 / value2` + * `['+', value1, value2]` 返回 `value1 + value2` + * `['-', value1, value2]` 返回 `value2 - value1` + * `['%', value1, value2]` 返回 `value1 % value2` + * `['^', value1, value2]` 返回 `value1 ^ value2` + * `['abs', value1]` 返回 `Math.abs(value1)` + * `['floor', value1]` 返回 `Math.floor(value1)` + * `['round', value1]` 返回 `Math.round(value1)` + * `['ceil', value1]` 返回 `Math.ceil(value1)` + * `['sin', value1]` 返回 `Math.sin(value1)` + * `['cos', value1]` 返回 `Math.cos(value1)` + * `['atan', value1, value2]` 返回 `n1===-1?Math.atan(n1): Math.atan2(n1, n2)` */ ``` diff --git a/packages/site/docs/api/tile/geojsonvt_tile_layer.en.md b/packages/site/docs/api/tile/geojsonvt_tile_layer.en.md new file mode 100644 index 0000000000..d7285697b2 --- /dev/null +++ b/packages/site/docs/api/tile/geojsonvt_tile_layer.en.md @@ -0,0 +1,6 @@ +--- +title: GeoJsonVT TileLayer +order: 0 +--- + +`markdown:docs/api/tile/geojsonvt_tile_layer.zh.md` diff --git a/packages/site/docs/api/tile/geojsonvt_tile_layer.zh.md b/packages/site/docs/api/tile/geojsonvt_tile_layer.zh.md new file mode 100644 index 0000000000..d68bab8974 --- /dev/null +++ b/packages/site/docs/api/tile/geojsonvt_tile_layer.zh.md @@ -0,0 +1,63 @@ +--- +title: GeoJsonVT TileLayer +order: 0 +--- + +`markdown:docs/common/style.md` + +`L7` 矢量瓦片除了可以时候后端提供的瓦片服务之外，同时提供了 `geojson-vt` 瓦片切分方案，使得前端在没有后端支持的情况下也能使用矢量瓦片。 + +### 矢量瓦片 - GeoJsonVT + +```javascript +import { PolygonLayer } from '@antv/l7'; +fetch( + 'https://gw.alipayobjects.com/os/bmw-prod/2b7aae6e-5f40-437f-8047-100e9a0d2808.json', +) + .then((d) => d.json()) + .then((data) => { + const source = new Source(data, { + parser: { type: 'geojsonvt', maxZoom: 9 }, + }); + const polygon = new PolygonLayer({ featureId: 'COLOR' }) + .source(source) + .color('red'); + }); +``` + +### sourceLayer + +在使用前端瓦片切分的时候我们不再需要为瓦片图层指定数据源。 + +### source(GeoJsonData: string, option: IOption) + +在使用前端瓦片切分的矢量瓦片时，`source` 方法接收的不在时数据服务的地址，而是标准的 `GeoJson` 数据。 + +#### option + +在使用前端瓦片切分的时候我们需要将 `source parser` 的类型设置为 `geojsonvt`。 + +```js +const source = new Source(data, { + parser: { + type: 'geojsonvt', + maxZoom: 9, + geojsonvtOptions: {}, + }, +}); +``` + +`geojsonOptions` 支持如下参数: + +| 参数 | 类型 | 默认值 | 描述 | +| -------------- | ------------- | -------- | -------------------------------------------------------------- | +| maxZoom | `number` | `14` | max zoom to preserve detail on | +| indexMaxZoom | `number` | `5` | max zoom in the tile index | +| indexMaxPoints | `number` | `100000` | max number of points per tile in the tile index | +| tolerance | `number` | `3` | simplification tolerance (higher means simpler) | +| extent | `number` | `4096` | tile extent | +| buffer | `number` | `64` | tile buffer on each side | +| lineMetrics | `boolean` | `false` | whether to calculate line metrics | +| promoteId | `string|null` | `null` | name of a feature property to be promoted to feature.id | +| generateId | `boolean` | `true` | whether to generate feature ids. Cannot be used with promoteId | +| debug | `0, 1 or 2` | `0` | logging level (0, 1 or 2) | diff --git a/packages/site/docs/api/tile/options.zh.md b/packages/site/docs/api/tile/options.zh.md index 627df0b926..93ad1aec92 100644 --- a/packages/site/docs/api/tile/options.zh.md +++ b/packages/site/docs/api/tile/options.zh.md @@ -5,4 +5,32 @@ order: 1 `markdown:docs/common/style.md` +### sourceLayer + + _string_ **required** + +只有矢量图层生效，用于设置矢量图层的数据源。 + +🌟 一般矢量服务返回的数据中存在多个图层的数据，我们需要从中进行选取。 + +```javascript +const layer = new PointLayer({ + sourceLayer: 'city', +}); +``` + +### featureId + + _string_ **optional** _default:_ 自动数字编号 + +只有矢量图层生效，用于指定矢量图层的编码 `id`。 + +🌟 编码 `id` 用于在图层高亮时使用。 + +```javascript +const layer = new PointLayer({ + featureId: 'id', +}); +``` + `markdown:docs/common/layer/options.md` diff --git a/packages/site/docs/api/tile/raster_tile_layer.en.md b/packages/site/docs/api/tile/raster_tile_layer.en.md new file mode 100644 index 0000000000..2f44c63c7c --- /dev/null +++ b/packages/site/docs/api/tile/raster_tile_layer.en.md @@ -0,0 +1,6 @@ +--- +title: Raster TileLayer +order: 0 +--- + +`markdown:docs/api/tile/raster_tile_layer.zh.md` diff --git a/packages/site/docs/api/tile/raster_tile_layer.zh.md b/packages/site/docs/api/tile/raster_tile_layer.zh.md new file mode 100644 index 0000000000..92f326ce33 --- /dev/null +++ b/packages/site/docs/api/tile/raster_tile_layer.zh.md @@ -0,0 +1,264 @@ +--- +title: Raster TileLayer +order: 0 +--- + +`markdown:docs/common/style.md` + +`L7` 的栅格图层支持加载 `TMS`、`WMS`、`WMTS` 等多种格式的图片瓦片，同时也支持 `Tiff`、`Lerc` 等多种格式的数据栅格瓦片。 + +| 分类 | Layer | parserType | dataType | 描述 | +| -------- | ------------- | ------------ | ------------- | ---------------- | +| 栅格瓦片 | `RasterLayer` | `rasterTile` | `image`、`/` | 图片栅格 | +| 栅格瓦片 | `RasterLayer` | `rasterTile` | `arraybuffer` | 数据栅格 | +| 栅格瓦片 | `RasterLayer` | `rasterTile` | `rgb` | 彩色遥感影像栅格 | + +🌟 目前只支持 `GCJ-02` 火星坐标系。 + +### source(url: string, option: IOption) + +矢量瓦片的数据源需要传入矢量数据的瓦片服务以及对应的配置参数。 + +#### url + +数据服务的路径处理支持单服务和多服务的写法，还支持同时请求多文件。 + +- 单服务器 向一台服务器请求瓦片数据。 +- 多服务器 向多台服务器请求同一份服务的瓦片数据。 + + - 使用大括号的写法请求设置多服务器，如 `{1-3}`、`{a-c}`。 + +- 请求多文件 同时请求多份瓦片服务的瓦片数据。 + - 使用数组的方式设置多服务。 + - 目前请求多文件的格式只有栅格瓦片支持。 + +```js +import { Source } from '@antv/l7' +// 单服务器 +const source = new Source('http://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', {...}) + +// 多服务器 +const source = new Source('http://webst0{1-4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', {...}) + +// 请求多文件 +const urls = [ + 'https://ganos.oss-cn-hangzhou.aliyuncs.com/m2/l7/tiff_jx/{z}/{x}/{y}.tiff', + 'https://ganos.oss-cn-hangzhou.aliyuncs.com/m2/l7/tiff_jx/{z}/{x}/{y}.tiff', +] + +const urls = [ + { + url: 'https://ganos.oss-cn-hangzhou.aliyuncs.com/m2/l7/tiff_jx/{z}/{x}/{y}.tiff', + bands: [0] + }, + { + url: 'https://ganos.oss-cn-hangzhou.aliyuncs.com/m2/l7/tiff_jx/{z}/{x}/{y}.tiff' + }, + ... +] +const tileSource = new Source(urls, {...}); +``` + +#### source option + +通过配置 `parser` 中的参数，我们可以指定不同的瓦片类型以及瓦片服务的参数。 + +```js +const source = new Source(url, { + parser: {...} +}) +``` + +| 参数 | 类型 | 默认值 | 描述 | +| -------------- | ---------------------------------- | ------------------------------------------ | -------------------- | +| type | `string` | / | 描述不同类型的瓦片 | +| tileSize | `number` | `256` | 请求的瓦片尺寸 | +| minZoom | `number` | `0` | 请求瓦片的最小层级 | +| maxZoom | `number` | `Infinity` | 请求瓦片的最大层级 | +| zoomOffset | `number` | `0` | 请求瓦片层级的偏移量 | +| extent | `[number, number, number, number]` | `[-Infinity,-Infinity,Infinity,Infinity,]` | 请求瓦片的边界 | +| updateStrategy | `UpdateTileStrategy` | `replace` | 瓦片的替换策略 | + +```js +type UpdateTileStrategy = 'realtime' | 'overlap' | 'replace'; +``` + +关于不同的栅格瓦片使用不同的 `parser` 参数。 + +| 瓦片类型 | type | dataType | 描述 | +| ----------- | ------------ | ------------- | ---------------- | +| TMS | `rasterTile` | `image` | 图片栅格 | +| WMS | `rasterTile` | `image` | 图片栅格 | +| WMTS | `rasterTile` | `image` | 图片栅格 | +| arraybuffer | `rasterTile` | `arraybuffer` | 数据栅格，单通道 | +| rgb | `rasterRgb` | `arraybuffer` | 数据栅格，多通道 | + +🌟 `WMTS` 格式的瓦片有额外的参数。 + +| 参数 | 类型 | 值 | 描述 | +| ------------- | -------------- | --- | ------------ | +| `wmtsOptions` | `IWmtsOptions` | `/` | 设置请求参数 | + +`IWmtsOptions` 的参数用于拼接 `url`。 + +```js +interface IWmtsOptions { + layer: string; + version?: string; + style?: string; + format: string; + service?: string; + tileMatrixset: string; +} +``` + +#### parser 参数 + +##### type: string + +用于指定瓦片服务的解析方式，值为 `rasterTile` 和 `mvt`。 +`rasterTile` 用于栅格瓦片的解析，`mvt` 用于矢量瓦片的解析。 + +##### dataType: string + +使用 `dataType` 区分图片栅格和数据栅格，值为 `image` 和 `arraybuffer`，默认为 `image`。 + +```javascript +// 设置图片栅格 +layer.source({ + 'http://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', + { + parser: { + type: 'rasterTile', + dataType: 'image', + ... + } + } +}) + +// 设置数据栅格 +layer.source({ + 'http://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', + { + parser: { + type: 'rasterTile', + dataType: 'arraybuffer', + ... + } + } +}) +``` + +##### minZoom/maxZoom: number + +设置瓦片数据的请求层级。当地图的缩放层级 `zoom` 小于 `minZoom` 后，或 `zoom` 大于 `maxZoom` 后将不再请求新的瓦片。 +`minZoom` 的默认值为 `-Infinity`。 +`maxZoom` 的默认值为 `Infinity`。 + +##### tileSize: number + +设置的值是瓦片服务返回的瓦片大小。 +`tileSize` 的默认值为 256。 +ps： 该值在生产瓦片的时候确定，我们设置的 `tileSize` 需要和瓦片服务返回的保持一致。 + +##### extent: [number, number, number, number] + +设置请求瓦片数据的边界， 格式是 `[minLng, maxLat, maxLng, minLat]`，只会请求范围内的瓦片数据。 + +##### zoomOffset: number + +设置的值用于改变请求的瓦片数据的层级，通常在移动端可以请求更高一级的瓦片以获取更好的清晰度。 +`zoomOffset` 的默认值为 0 + +##### format: IRasterFormat + + _IFormat_ **必选** + +`format` 方法用于从传入的栅格文件二进制数据中提取波段数据。 + +- 第一个参数是栅格文件二进制数据。 +- 第二个参数是第一个参数指定的栅格文件中应该提取的波段，方法参数是我们通过 [source](/zh/docs/api/raster/source#data-ibandsdata--ibandsdata) 参数传递的 `data` 数值。 +- `format` 是一个 `async` 方法。 + +```js +interface IRasterData { + rasterData: HTMLImageElement | Uint8Array | ImageBitmap | null | undefined; + width: number; + height: number; +} +type IRasterFormat = ( + data: ArrayBuffer, + bands: number[], +) => Promise; + +const source = new Source(data, { + parser: { + format: async (data, bands) => { + ... + return { + rasterData: bandData, + width: 256; + height: 256; + } + } + } +}) +``` + +1. `format` 方法的返回值为栅格数据（`rasterData`）以及表示大小的 `width`、`height` 参数。 +2. `format` 方法可以返回多份数据，表示从当前栅格文件中提取多份波段的数据。 + +##### operation: IOperation + + _IOperation_ **可选** + +在加载多波段数据的时候我们可以通过 `operation` 配置波段数据的运算。 + +🌟 我们可以不配置 `operation`，此时默认使用第一个栅格文件提取的第一个波段数据 + +1. `operation` 可以是一个函数，`allbands` 是我们从所有栅格文件中提取的所有波段数据的集合。 + +```js +const parser = { + operation: (allBands) => { + // operation 可以是一个函数，allbands 是我们从所有栅格文件中提取的所有波段数据的集合， + // 在设立 allbands 就是 [band0] + // 函数的返回值是单纯的波段数据，在这里我们直接返回第一个波段的数据 + return allBands[0].rasterData; + }, +}; +``` + +2. `operation` 可以是以数组形式存在的计算表达式. + +```js +// 下面表达式可以转述为 band1 * 0.5，表示将波段1 的值都乘上 0.5 并返回 +const parser = { + operation: ['*', ['band', 1], 0.5], +}; +``` + +3. `operation` 可以嵌套使用：`['+', ['*', ['band', 0], 0.2], ['band', 1]]]`，返回结果为：`band0 * 0.2 + band1`。 + +4. `operation` 可以直接指定结果：`['band', 0]`。 + +5. `operation` 支持以下的数学运算。 + +```js +/** 数学运算 根据计算表达式进行数学运算 + * * * Math operators: + * `['*', value1, value2]` 返回 `value1 * value2` + * `['/', value1, value2]` 返回 `value1 / value2` + * `['+', value1, value2]` 返回 `value1 + value2` + * `['-', value1, value2]` 返回 `value2 - value1` + * `['%', value1, value2]` 返回 `value1 % value2` + * `['^', value1, value2]` 返回 `value1 ^ value2` + * `['abs', value1]` 返回 `Math.abs(value1)` + * `['floor', value1]` 返回 `Math.floor(value1)` + * `['round', value1]` 返回 `Math.round(value1)` + * `['ceil', value1]` 返回 `Math.ceil(value1)` + * `['sin', value1]` 返回 `Math.sin(value1)` + * `['cos', value1]` 返回 `Math.cos(value1)` + * `['atan', value1, value2]` 返回 `n1===-1?Math.atan(n1): Math.atan2(n1, n2)` + */ +``` diff --git a/packages/site/docs/api/tile/source.en.md b/packages/site/docs/api/tile/source.en.md deleted file mode 100644 index ea4c66204b..0000000000 --- a/packages/site/docs/api/tile/source.en.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: Source -order: 2 ---- - -`markdown:docs/api/tile/source.zh.md` diff --git a/packages/site/docs/api/tile/source.zh.md b/packages/site/docs/api/tile/source.zh.md deleted file mode 100644 index ab67b43a77..0000000000 --- a/packages/site/docs/api/tile/source.zh.md +++ /dev/null @@ -1,224 +0,0 @@ ---- -title: Source -order: 2 ---- - -`markdown:docs/common/style.md` - -瓦片图层并不接受普通的地理数据如 `GeoJSON`，瓦片图层一般来说接收的都是瓦片服务的地址。只有在使用 `geojson-vt` 前端瓦片切分的时候，`source` 接受的是普通的 `GeoJSON` 数据。 - -- `source` 接收瓦片服务，为每个瓦片单独请求数据 -- `source` 接收 `GeoJSON` 数据，在前端进行瓦片数据的切分 - -### 瓦片服务 - -我们通过 `url` 的方式设置瓦片服务的地址，同时在创建不同类型瓦片图层的时候需要设置对应类型的 `parser` 参数用于设置服务参数。 - -```js -const source = new Source(url, { - parser: ... -}) -``` - -#### url - -瓦片服务的 `url` 支持多种格式。 - -- 单服务器 向一台服务器请求瓦片数据。 -- 多服务器 向多台服务器请求同一份服务的瓦片数据。 - - - 使用大括号的写法请求设置多服务器，如 `{1-3}`、`{a-c}`。 - -- 请求多文件 同时请求多份瓦片服务的瓦片数据。 - - 使用数组的方式设置多服务。 - - 目前请求多文件的格式只有栅格瓦片支持。 - -```js -import { Source } from '@antv/l7' -// 单服务器 -const source = new Source('http://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', {...}) - -// 多服务器 -const source = new Source('http://webst0{1-4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', {...}) - -// 请求多文件 -const urls = [ - 'https://ganos.oss-cn-hangzhou.aliyuncs.com/m2/l7/tiff_jx/{z}/{x}/{y}.tiff', - 'https://ganos.oss-cn-hangzhou.aliyuncs.com/m2/l7/tiff_jx/{z}/{x}/{y}.tiff', -] - -const urls = [ - { - url: 'https://ganos.oss-cn-hangzhou.aliyuncs.com/m2/l7/tiff_jx/{z}/{x}/{y}.tiff', - bands: [0] - }, - { - url: 'https://ganos.oss-cn-hangzhou.aliyuncs.com/m2/l7/tiff_jx/{z}/{x}/{y}.tiff' - }, - ... -] -const tileSource = new Source(urls, {...}); -``` - -#### parser - -不同类型的瓦片图层需要配置不同的 `parser` 参数。 - -```js -const source = new Source(url, { - parser: { - ... - } -}) -``` - -- 通用参数 - -| 参数 | 类型 | 默认值 | 描述 | -| -------------- | ---------------------------------- | ------------------------------------------ | -------------------- | -| tileSize | `number` | `256` | 请求的瓦片尺寸 | -| minZoom | `number` | `0` | 请求瓦片的最小层级 | -| maxZoom | `number` | `Infinity` | 请求瓦片的最大层级 | -| zoomOffset | `number` | `0` | 请求瓦片层级的偏移量 | -| extent | `[number, number, number, number]` | `[-Infinity,-Infinity,Infinity,Infinity,]` | 请求瓦片的边界 | -| updateStrategy | `UpdateTileStrategy` | `replace` | 瓦片的替换策略 | - -```js -type UpdateTileStrategy = 'realtime' | 'overlap' | 'replace'; -``` - -- 图片栅格 - TMS - -| 参数 | 类型 | 值 | 描述 | -| ---- | -------- | ------------ | ------------------ | -| type | `string` | `rasterTile` | 请求图片类型的瓦片 | - -- 图片栅格 - WMS - -| 参数 | 类型 | 值 | 描述 | -| ---- | -------- | ------------ | ------------------ | -| type | `string` | `rasterTile` | 请求图片类型的瓦片 | - -- 图片栅格 - WMTS - -| 参数 | 类型 | 值 | 描述 | -| ----------- | -------------- | ------------------ | ------------------ | -| type | `string` | `rasterTile` | 请求图片类型的瓦片 | -| wmtsOptions | `IWmtsOptions` | `\` | 设置请求参数 | - -`IWmtsOptions` 的参数用于拼接 `url`。 - -```js -interface IWmtsOptions { - layer: string; - version?: string; - style?: string; - format: string; - service?: string; - tileMatrixset: string; -} -``` - -- 数据栅格 - arraybuffer - -| 参数 | 类型 | 值 | 描述 | -| -------- | ---------------- | ------------- | ------------------ | -| type | `string` | `rasterTile` | 请求栅格类型的瓦片 | -| dataType | `RasterTileType` | `arraybuffer` | 栅格瓦片的类型 | - -```js -enum RasterTileType { - ARRAYBUFFER = 'arraybuffer'; - IMAGE = 'image'; - RGB = 'rgb'; -} -``` - -- 数据栅格 - rgb - -| 参数 | 类型 | 值 | 描述 | -| -------- | ---------------- | ------------ | ------------------ | -| type | `string` | `rasterTile` | 请求栅格类型的瓦片 | -| dataType | `RasterTileType` | `rgb` | 栅格瓦片的类型 | - -- 矢量瓦片 - point、line、polygon - -| 参数 | 类型 | 值 | 描述 | -| ---- | -------- | ----- | ------------ | -| type | `string` | `mvt` | 请求矢量瓦片 | - -- 矢量瓦片 - 掩模图层 - -| 参数 | 类型 | 值 | 描述 | -| ---- | -------- | ----- | ------------ | -| type | `string` | `mvt` | 请求矢量瓦片 | - -- 矢量瓦片 - 测试图层 - -测试图层不需要设置 `source`。 - -### GeoJSON VT 前端瓦片切分 - -瓦片在前端可以实现瓦片数据的切分，而不是依赖瓦片服务请求瓦片数据。 - -```js -const source = new Source(data, { - parser: { - type: 'geojsonvt', - geojsonOptions: { - maxZoom: 14 - }, - ... - } -}) -``` - -#### parser - -我们通过 `parser` 中的 `geojsonOptions` 参数透传 `geojson-vt` 插件的参数。其余参数和普通矢量瓦片的 `parser` 参数保持一致。 - -| 参数 | 类型 | 值 | 描述 | -| ---------------- | ------------------- | ----------- | ---------------------- | -| type | `string` | `geojsonvt` | 矢量瓦片前端切分 | -| geojsonvtOptions | `IGeojsonvtOptions` | `/` | 设置瓦片数据切分的参数 | - -#### geojsonOptions: IGeojsonvtOptions - -`geojsonOptions` 支持如下参数： - -| 参数 | 类型 | 默认值 | 描述 | -| -------------- | ------------- | -------- | -------------------------------------------------------------- | -| maxZoom | `number` | `14` | max zoom to preserve detail on | -| indexMaxZoom | `number` | `5` | max zoom in the tile index | -| indexMaxPoints | `number` | `100000` | max number of points per tile in the tile index | -| tolerance | `number` | `3` | simplification tolerance (higher means simpler) | -| extent | `number` | `4096` | tile extent | -| buffer | `number` | `64` | tile buffer on each side | -| lineMetrics | `boolean` | `false` | whether to calculate line metrics | -| promoteId | `string|null` | `null` | name of a feature property to be promoted to feature.id | -| generateId | `boolean` | `true` | whether to generate feature ids. Cannot be used with promoteId | -| debug | `0, 1 or 2` | `0` | logging level (0, 1 or 2) | - -```javascript -fetch( - 'https://gw.alipayobjects.com/os/bmw-prod/2b7aae6e-5f40-437f-8047-100e9a0d2808.json', -) - .then((d) => d.json()) - .then((data) => { - const source = new Source(data, { - parser: { - type: 'geojsonvt', - maxZoom: 9, - }, - }); - - const polygon = new PolygonLayer({ featureId: 'COLOR' }) - .source(source) - .color('COLOR') - .select(true) - .style({ - opacity: 0.6, - }); - scene.addLayer(polygon); - }); -``` diff --git a/packages/site/docs/api/tile/style.zh.md b/packages/site/docs/api/tile/style.zh.md index e820bfdbf6..b9ec5f063e 100644 --- a/packages/site/docs/api/tile/style.zh.md +++ b/packages/site/docs/api/tile/style.zh.md @@ -6,3 +6,64 @@ order: 4 `markdown:docs/common/style.md` 瓦片图层的 `style` 参数和使用的图层相关。如矢量点图层，`style` 的参数就是对应点图层的参数。 + +### raster tile + +#### domain: [number, number] + +设置数据映射的定义域。 +ps：固定值域为 `[0, 1]`，我们将传入的值（domain） 映射到值域 `[0, 1]` 后从 `rampColor` 构建的色带上取颜色，rgb 多通道栅格不支持。 + +#### clampLow/clampHigh: boolean + +`clampLow` 的默认值为 `false`，设置为 `true`，低于 `domain` 的数据将不显示。 +`clampHigh` 的默认值为 `false`，设置为 `true`，高于 `domain` 的数据将不显示。 + +ps：rgb 多通道栅格不支持 + +#### rampColors + +- colors  颜色数组 +- positions 数据区间 + +配置值域映射颜色的色带，值域的范围为 `[0 - 1]`, 对应的我们需要为每一个 `position` 位置设置一个颜色值。 + +⚠️ colors, positions 的长度要相同 + +```javascript +layer.style({ + rampColors: { + colors: ['#FF4818', '#F7B74A', '#FFF598', '#91EABC', '#2EA9A1', '#206C7C'], + positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0], + }, +}); +``` + +ps：⚠️ color, position 的长度要相同，rgb 多通道栅格不支持 + +### vector tile + +矢量图层的 `style` 样式和普通图层保持一致。 + +### event + +🌟 数据栅格支持图层事件，目前图片栅格暂时不支持图层事件。 + +##### 绑定事件 + +🌟 数据栅格瓦片 + +```javascript +// 绑定事件的方式和普通图层保持一致 +layer.on('click', e => {...}) +``` + +#### 事件参数 + +🌟 数据栅格瓦片 +数据栅格瓦片的事件参数相比于普通图层的事件返回了新的参数。 + +#### value: number + +🌟 数据栅格瓦片 +鼠标事件位置的瓦片的实际数值。 diff --git a/packages/site/docs/api/tile/tile_layer.en.md b/packages/site/docs/api/tile/tile_layer.en.md deleted file mode 100644 index 7b0a6746fc..0000000000 --- a/packages/site/docs/api/tile/tile_layer.en.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: Tile -order: 0 ---- - -`markdown:docs/api/tile/tile_layer.zh.md` diff --git a/packages/site/docs/api/tile/tile_layer.zh.md b/packages/site/docs/api/tile/tile_layer.zh.md deleted file mode 100644 index d3fae54f82..0000000000 --- a/packages/site/docs/api/tile/tile_layer.zh.md +++ /dev/null @@ -1,249 +0,0 @@ ---- -title: TileLayer -order: 0 ---- - -`markdown:docs/common/style.md` - -`L7` 的瓦片图层分为栅格瓦片和矢量瓦片两大类，同时提供了 `geojson-vt` 前端瓦片切分方案、数据栅格的彩色遥感影像渲染方案等等多种瓦片方案，用户可以按照自己的需求选取合适的瓦片方案。 - -案例 - -### 分类 - -栅格瓦片可以加载图片或者是栅格数据，同时也支持绘制彩色遥感影像。 - -| 分类 | Layer | parserType | dataType | 描述 | -| -------- | ------------- | ------------ | ------------- | ---------------- | -| 栅格瓦片 | `RasterLayer` | `rasterTile` | `image`、`/` | 图片栅格 | -| 栅格瓦片 | `RasterLayer` | `rasterTile` | `arraybuffer` | 数据栅格 | -| 栅格瓦片 | `RasterLayer` | `rasterTile` | `rgb` | 彩色遥感影像栅格 | - -矢量瓦片支持绘制点、线、面图层矢量瓦片的前端切片 `geojson-vt`。同时，矢量瓦片还支持 TileDebugLayer、掩模图层。 - -| 分类 | Layer | parserType | 描述 | -| -------- | ---------------- | ----------------------------------- | ----------------------------------------- | -| 矢量瓦片 | `PointLayer` | parser of PointLayer、`geojsonvt` | 矢量点图层 | -| 矢量瓦片 | `LineLayer` | parser of LineLayer、`geojsonvt` | 矢量线图层 | -| 矢量瓦片 | `PolygonLayer` | parser of PolygonLayer、`geojsonvt` | 矢量几何体图层 | -| 矢量瓦片 | `MaskLayer` | parser of MaskLayer、`geojsonvt` | 矢量掩模图层 | -| 矢量瓦片 | `TileDebugLayer` | `/` | `TileDebugLayer` 不需要执行 `source` 方法 | - -### 使用 - -下面就介绍几种瓦片图层的简单使用。 - -#### 图片栅格 - TMS - -```javascript -import { RasterLayer } from '@antv/l7'; -// 图片瓦片图层 - 卫星图 -const layer = new RasterLayer().source( - 'http://webst0{1-4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', - { - parser: { - type: 'rasterTile', - updateStrategy: 'overlap', - }, - }, -); -``` - -#### 图片栅格 - WMS - -```javascript -import { RasterLayer } from '@antv/l7'; -// 绘制 WMS 格式瓦片 -const url = - 'https://pnr.sz.gov.cn/d-suplicmap/dynamap_1/rest/services/LAND_CERTAIN/MapServer/export?F=image&FORMAT=PNG32&TRANSPARENT=true&layers=show:1&SIZE=256,256&BBOX={bbox}&BBOXSR=4326&IMAGESR=3857&DPI=90'; - -const layer = new RasterLayer().source(url, { - parser: { - type: 'rasterTile', - tileSize: 256, - zoomOffset: 1, - }, -}); -``` - -#### 图片栅格 - WMTS - -```javascript -import { RasterLayer } from '@antv/l7'; - -// 绘制 WMTS 格式瓦片 -const url1 = - 'https://t0.tianditu.gov.cn/img_w/wmts?tk=b72aa81ac2b3cae941d1eb213499e15e&'; -const layer1 = new RasterLayer().source(url1, { - parser: { - type: 'rasterTile', - tileSize: 256, - wmtsOptions: { - layer: 'img', - tileMatrixset: 'w', - format: 'tiles', - }, - }, -}); -``` - -#### 数据栅格 - arraybuffer - -```javascript -import { RasterLayer } from '@antv/l7'; -const tileSource = new Source( - 'https://ganos.oss-cn-hangzhou.aliyuncs.com/m2/l7/tiff_jx/{z}/{x}/{y}.tiff', - { - parser: { - type: 'rasterTile', - dataType: 'arraybuffer', - tileSize: 256, - maxZoom: 13.1, - format: async (data) => { - const tiff = await GeoTIFF.fromArrayBuffer(data); - const image = await tiff.getImage(); - const width = image.getWidth(); - const height = image.getHeight(); - const values = await image.readRasters(); - return { rasterData: values[0], width, height }; - }, - }, - }, -); - -layer.source(tileSource).style({ - domain: [0.001, 11.001], - clampLow: false, - rampColors: { - colors: colorList, - positions, - }, -}); -``` - -#### 数据栅格 - rgb - -```javascript - -// 绘制多通道彩色栅格 -const canvas = document.createElement('canvas'); -canvas.width = 256; -canvas.height = 256; -const ctx = canvas.getContext('2d') as CanvasRenderingContext2D; -scene.on('loaded', () => { - const layer = new RasterLayer() - .source('http://webst0{1-4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', { - parser: { - type: 'rasterTile', - dataType: 'rgb', - tileSize: 256, - zoomOffset: 0, - extent: [-180, -85.051129, 179, 85.051129], - minZoom: 0, - format: async (data: any) => { - const blob: Blob = new Blob([new Uint8Array(data)], { type: 'image/png' }); - const img = await createImageBitmap(blob); - ctx.clearRect(0, 0, 256, 256); - ctx.drawImage(img, 0, 0, 256, 256); - const imgData = ctx.getImageData(0, 0, 256, 256).data; - const channelR: number[] = []; - const channelG: number[] = []; - const channelB: number[] = []; - for (let i = 0; i < imgData.length; i += 4) { - const R = imgData[i]; - const G = imgData[i + 1]; - const B = imgData[i + 2]; - channelR.push(R); - channelG.push(G); - channelB.push(B); - } - return [ - { rasterData: channelR, width: 256, height: 256 }, - { rasterData: channelG, width: 256, height: 256 }, - { rasterData: channelB, width: 256, height: 256 }, - ]; - }, - operation: { - r: ['band', 0], - g: ['band', 1], - b: ['band', 2], - }, -}}) -``` - -#### 矢量瓦片 - point、line、polygon - -```javascript -// 矢量瓦片图层 -import { - PointLayer, - LineLayer, - PolygonLayer, - TileDebugLayer, - MaskLayer, -} from '@antv/l7'; - -const vectorSource = new Source( - 'http://ganos.oss-cn-hangzhou.aliyuncs.com/m2/rs_l7/{z}/{x}/{y}.pbf', - { - parser: { - type: 'mvt', - maxZoom: 9, - extent: [-180, -85.051129, 179, 85.051129], - }, - }, -); - -// 矢量点图层 -const point = new PointLayer({ - featureId: 'COLOR', - sourceLayer: 'ecoregions2', -}) - .source(vectorSource) - .shape('circle') - .color('red') - .size(10); - -// 矢量线图层 -const line = new LineLayer({ - featureId: 'COLOR', - sourceLayer: 'ecoregions2', -}) - .source(vectorSource) - .color('COLOR') - .size(2); - -// polygon 瓦片图层 - geojson-vt -fetch( - 'https://gw.alipayobjects.com/os/bmw-prod/2b7aae6e-5f40-437f-8047-100e9a0d2808.json', -) - .then((d) => d.json()) - .then((data) => { - const source = new Source(data, { - parser: { type: 'geojsonvt', maxZoom: 9 }, - }); - const polygon = new PolygonLayer({ featureId: 'COLOR' }) - .source(source) - .color('red'); - }); -``` - -#### 矢量瓦片 - 掩模图层 - -```js - -// 掩模瓦片图层 -const mask = new MaskLayer({sourceLayer: 'ecoregions2' }).source( 'http://ganos.oss-cn-hangzhou.aliyuncs.com/m2/rs_l7/{z}/{x}/{y}.pbf' { - parser: { - type: 'mvt', - maxZoom: 9, - extent: [-180, -85.051129, 179, 85.051129], - }}); -``` - -#### 矢量瓦片 - 测试图层 - -```js -// 测试瓦片图层 -const debugerLayer = new TileDebugLayer(); -``` diff --git a/packages/site/docs/api/tile/vector_tile_layer.en.md b/packages/site/docs/api/tile/vector_tile_layer.en.md new file mode 100644 index 0000000000..6a6a771dd2 --- /dev/null +++ b/packages/site/docs/api/tile/vector_tile_layer.en.md @@ -0,0 +1,6 @@ +--- +title: Vector TileLayer +order: 0 +--- + +`markdown:docs/api/tile/vector_tile_layer.zh.md` diff --git a/packages/site/docs/api/tile/vector_tile_layer.zh.md b/packages/site/docs/api/tile/vector_tile_layer.zh.md new file mode 100644 index 0000000000..4352e5b03d --- /dev/null +++ b/packages/site/docs/api/tile/vector_tile_layer.zh.md @@ -0,0 +1,81 @@ +--- +title: Vector TileLayer +order: 0 +--- + +`markdown:docs/common/style.md` + +`L7` 的矢量瓦片图层复用了普通图层的数据可视化能力，支持对图层的样式进行数据映射。目前矢量瓦片支持了点、线、面、掩模等图层 + +| 分类 | Layer | parserType | 描述 | +| -------- | ---------------- | ----------------------------------- | ----------------------------------------- | +| 矢量瓦片 | `PointLayer` | parser of PointLayer、`geojsonvt` | 矢量点图层 | +| 矢量瓦片 | `LineLayer` | parser of LineLayer、`geojsonvt` | 矢量线图层 | +| 矢量瓦片 | `PolygonLayer` | parser of PolygonLayer、`geojsonvt` | 矢量几何体图层 | +| 矢量瓦片 | `MaskLayer` | parser of MaskLayer、`geojsonvt` | 矢量掩模图层 | +| 矢量瓦片 | `TileDebugLayer` | `/` | `TileDebugLayer` 不需要执行 `source` 方法 | + +🌟 目前只支持 `GCJ-02` 火星坐标系。 + +### source(url: string, option: IOption) + +矢量瓦片的数据源需要传入矢量数据的瓦片服务以及对应的配置参数。 + +#### url + +数据服务的路径支持单服务和多服务的写法。 + +- 单服务器 向一台服务器请求瓦片数据。 +- 多服务器 向多台服务器请求同一份服务的瓦片数据。 + + - 使用大括号的写法请求设置多服务器，如 `{1-3}`、`{a-c}`。 + +```js +// 单服务器 +const source = new Source('http://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', {...}) + +// 多服务器 +const source = new Source('http://webst0{1-4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', {...}) +``` + +#### source option + +关于配置参数我们需要关系的是里面 `parser` 字段对应的参数。 + +```js +const source = new Source(url, { + parser: {...} +}) +``` + +| 参数 | 类型 | 默认值 | 描述 | +| -------------- | ---------------------------------- | ------------------------------------------ | -------------------- | +| type | `string` | / | 固定值为 `mvt` | +| tileSize | `number` | `256` | 请求的瓦片尺寸 | +| minZoom | `number` | `0` | 请求瓦片的最小层级 | +| maxZoom | `number` | `Infinity` | 请求瓦片的最大层级 | +| zoomOffset | `number` | `0` | 请求瓦片层级的偏移量 | +| extent | `[number, number, number, number]` | `[-Infinity,-Infinity,Infinity,Infinity,]` | 请求瓦片的边界 | +| updateStrategy | `UpdateTileStrategy` | `replace` | 瓦片的替换策略 | + +```js +type UpdateTileStrategy = 'realtime' | 'overlap' | 'replace'; +``` + +🌟 矢量瓦片推荐复用瓦片服务。 + +```js +const vectorSource = new Source( + 'http://ganos.oss-cn-hangzhou.aliyuncs.com/m2/rs_l7/{z}/{x}/{y}.pbf', + { + parser: { + type: 'mvt', + maxZoom: 9, + extent: [-180, -85.051129, 179, 85.051129], + }, + }, +); +// 复用 +layer1.source(vectorSource); +layer2.source(vectorSource); +``` diff --git a/packages/site/docs/tutorial/tile/rasterTile.zh.md b/packages/site/docs/tutorial/tile/rasterTile.zh.md index 62e8d0e5fe..3a289a24d5 100644 --- a/packages/site/docs/tutorial/tile/rasterTile.zh.md +++ b/packages/site/docs/tutorial/tile/rasterTile.zh.md @@ -6,57 +6,25 @@ order: 1 栅格瓦片图层包括图片栅格和数据栅格，其中图片栅格通常加载 `png/jpg` 图片，数据栅格则加载 `tiff/lerc` 等栅格数据文件. +### 绘制图片栅格 - TMS -瓦片图层 - -### layer - -栅格瓦片只通过 `RasterLayer` 来创建，同时我们需要根据不同的需求设置不同的 `source` 参数。 - -### source - -栅格瓦片图层在使用图片栅格和数据栅格的时候需要使用不同的 `source` 参数。 - -- 通用参数 - -| 参数 | 类型 | 默认值 | 描述 | -| -------------- | ---------------------------------- | ------------------------------------------ | -------------------- | -| tileSize | `number` | `256` | 请求的瓦片尺寸 | -| minZoom | `number` | `0` | 请求瓦片的最小层级 | -| maxZoom | `number` | `Infinity` | 请求瓦片的最大层级 | -| zoomOffset | `number` | `0` | 请求瓦片层级的偏移量 | -| extent | `[number, number, number, number]` | `[-Infinity,-Infinity,Infinity,Infinity,]` | 请求瓦片的边界 | -| updateStrategy | `UpdateTileStrategy` | `replace` | 瓦片的替换策略 | - -```js -type UpdateTileStrategy = 'realtime' | 'overlap' | 'replace'; -``` - -#### 图片栅格 - TMS - -| 参数 | 类型 | 值 | 描述 | -| ---- | -------- | ------------ | ------------------ | -| type | `string` | `rasterTile` | 请求图片类型的瓦片 | - -```js -const layer = new RasterLayer() -.source('http://webst0{1-4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', +```javascript +// 图片瓦片图层 - 卫星图 +const layer = new RasterLayer().source( + 'http://webst0{1-4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', { parser: { type: 'rasterTile', - tileSize: 256, + updateStrategy: 'overlap', }, }, ); ``` -- 图片栅格 - WMS +### 绘制图片栅格 - WMS -| 参数 | 类型 | 值 | 描述 | -| ---- | -------- | ------------ | ------------------ | -| type | `string` | `rasterTile` | 请求图片类型的瓦片 | - -```js +```javascript +// 绘制 WMS 格式瓦片 const url = 'https://pnr.sz.gov.cn/d-suplicmap/dynamap_1/rest/services/LAND_CERTAIN/MapServer/export?F=image&FORMAT=PNG32&TRANSPARENT=true&layers=show:1&SIZE=256,256&BBOX={bbox}&BBOXSR=4326&IMAGESR=3857&DPI=90'; @@ -69,25 +37,12 @@ const layer = new RasterLayer().source(url, { }); ``` -#### 图片栅格 - WMTS +### 绘制图片栅格 - WMTS -| 参数 | 类型 | 值 | 描述 | -| ----------- | -------------- | ------------------ | ------------------ | -| type | `string` | `rasterTile` | 请求图片类型的瓦片 | -| wmtsOptions | `IWmtsOptions` | `\` | 设置请求参数 | - -`IWmtsOptions` 的参数用于拼接 `url`。 - -```js -interface IWmtsOptions { - layer: string; - version?: string; - style?: string; - format: string; - service?: string; - tileMatrixset: string; -} -const url1 = 'https://t0.tianditu.gov.cn/img_w/wmts?tk=b72aa81ac2b3cae941d1eb213499e15e&'; +```javascript +// 绘制 WMTS 格式瓦片 +const url1 = + 'https://t0.tianditu.gov.cn/img_w/wmts?tk=b72aa81ac2b3cae941d1eb213499e15e&'; const layer1 = new RasterLayer().source(url1, { parser: { type: 'rasterTile', @@ -101,272 +56,74 @@ const layer1 = new RasterLayer().source(url1, { }); ``` -#### 数据栅格 - arraybuffer +### 绘制数据栅格 - arraybuffer -| 参数 | 类型 | 值 | 描述 | -| -------- | ---------------- | ------------- | ------------------ | -| type | `string` | `rasterTile` | 请求栅格类型的瓦片 | -| dataType | `RasterTileType` | `arraybuffer` | 栅格瓦片的类型 | - -```js -enum RasterTileType { - ARRAYBUFFER = 'arraybuffer'; - IMAGE = 'image'; - RGB = 'rgb'; -} - const tileSource = new Source('https://ganos.oss-cn-hangzhou.aliyuncs.com/m2/l7/tiff_jx/{z}/{x}/{y}.tiff',{ +```javascript +const tileSource = new Source( + 'https://ganos.oss-cn-hangzhou.aliyuncs.com/m2/l7/tiff_jx/{z}/{x}/{y}.tiff', + { parser: { type: 'rasterTile', dataType: 'arraybuffer', tileSize: 256, maxZoom: 13.1, - format: async data => { + format: async (data) => { const tiff = await GeoTIFF.fromArrayBuffer(data); const image = await tiff.getImage(); const width = image.getWidth(); const height = image.getHeight(); const values = await image.readRasters(); return { rasterData: values[0], width, height }; - } - } - }); - const layer = new RasterLayer().source(tileSource) - .style({ - domain: [ 0.001, 11.001 ], - clampLow: false, - rampColors: { - colors: colorList, - positions - } - }); -``` - -#### 数据栅格 - rgb - -| 参数 | 类型 | 值 | 描述 | -| -------- | ---------------- | ------------ | ------------------ | -| type | `string` | `rasterTile` | 请求栅格类型的瓦片 | -| dataType | `RasterTileType` | `rgb` | 栅格瓦片的类型 | - -```js -const canvas = document.createElement('canvas'); -canvas.width = 256; -canvas.height = 256; -const ctx = canvas.getContext('2d') as CanvasRenderingContext2D; - - -const layer = new RasterLayer().source('http://webst0{1-4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', { - parser: { - type: 'rasterTile', - dataType: 'rgb', - format: async (data: any) => { - const blob: Blob = new Blob([new Uint8Array(data)], {type: 'image/png' }); - const img = await createImageBitmap(blob); - ctx.clearRect(0, 0, 256, 256); - ctx.drawImage(img, 0, 0, 256, 256); - const imgData = ctx.getImageData(0, 0, 256, 256).data; - const channelR: number[] = []; - const channelG: number[] = []; - const channelB: number[] = []; - for (let i = 0; i < imgData.length; i += 4) { - const R = imgData[i]; - const G = imgData[i + 1]; - const B = imgData[i + 2]; - channelR.push(R); - channelG.push(G); - channelB.push(B); - } - return [ - { rasterData: channelR, width: 256, height: 256 }, - { rasterData: channelG, width: 256, height: 256 }, - { rasterData: channelB, width: 256, height: 256 } - ] + }, }, - operation: { - r: ['band', 0], - g: ['band', 1], - b: ['band', 2], - } }, -} ) -``` +); -#### parser - -栅格瓦片在 `parser` 中解析瓦片服务，配置瓦片的参数。 - -##### type: string - -用于指定瓦片服务的解析方式，值为 `rasterTile` 和 `mvt`。 -`rasterTile` 用于栅格瓦片的解析，`mvt` 用于矢量瓦片的解析。 - -##### dataType: string - -使用 `dataType` 区分图片栅格和数据栅格，值为 `image` 和 `arraybuffer`，默认为 `image`。 - -```javascript -// 设置图片栅格 -layer.source({ - 'http://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', - { - parser: { - type: 'rasterTile', - dataType: 'image', - ... - } - } -}) - -// 设置数据栅格 -layer.source({ - 'http://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', - { - parser: { - type: 'rasterTile', - dataType: 'arraybuffer', - ... - } - } -}) -``` - -##### minZoom/maxZoom: number - -设置瓦片数据的请求层级。当地图的缩放层级 `zoom` 小于 `minZoom` 后，或 `zoom` 大于 `maxZoom` 后将不再请求新的瓦片。 -`minZoom` 的默认值为 `-Infinity`。 -`maxZoom` 的默认值为 `Infinity`。 - -##### tileSize: number - -设置的值是瓦片服务返回的瓦片大小。 -`tileSize` 的默认值为 256。 -ps： 该值在生产瓦片的时候确定，我们设置的 `tileSize` 需要和瓦片服务返回的保持一致。 - -##### extent: [number, number, number, number] - -设置请求瓦片数据的边界， 格式是 `[minLng, maxLat, maxLng, minLat]`，只会请求范围内的瓦片数据。 - -##### zoomOffset: number - -设置的值用于改变请求的瓦片数据的层级，通常在移动端可以请求更高一级的瓦片以获取更好的清晰度。 -`zoomOffset` 的默认值为 0 - -#### 🌟 format: func - -数据栅格支持额外的 format 参数用于解析栅格数据，需要将栅格数据解析成 L7 栅格图层接受的标准格式。 - -```javascript -// 解析 png -const tileSource = new Source( -'https://api.mapbox.com/v4/mapbox.terrain-rgb/{z}/{x}/{y}.pngraw?access_token=YOUR_TOKRN', - parser: { - type: 'rasterTile', - dataType: 'arraybuffer', - tileSize: 256, - format: async (data: any) => { - const blob: Blob = new Blob([new Uint8Array(data)], { - type: 'image/png', - }); - const img = await createImageBitmap(blob); - ctx.clearRect(0, 0, 256, 256); - ctx.drawImage(img, 0, 0, 256, 256); - - let imgData = ctx.getImageData(0, 0, 256, 256).data; - let arr = []; - for (let i = 0; i < imgData.length; i += 4) { - const R = imgData[i]; - const G = imgData[i + 1]; - const B = imgData[i + 2]; - const d = -10000 + (R * 256 * 256 + G * 256 + B) * 0.1; - arr.push(d); - } - return { - rasterData: arr, - width: 256, - height: 256, - }; - } - }) - // 解析 Lerc - // const image = Lerc.decode(data); - // return { - // rasterData: image.pixels[0], - // width: image.width, - // height: image.height, - // }; - - // 解析 Tiff - // const tiff = await GeoTIFF.fromArrayBuffer(data); - // const image = await tiff.getImage(); - // const width = image.getWidth(); - // const height = image.getHeight(); - // const values = await image.readRasters(); - // return { rasterData: values[0], width, height }; -``` - -[在线案例](/zh/examples/tile/raster#dem) - -### style - -栅格瓦片支持配置多种样式参数 - -#### opacity: number - -```javascript -layer.style({ - opacity: 0.5, -}); -``` - -#### domain: [number, number] - -设置数据映射的定义域。 -ps：固定值域为 `[0, 1]`，我们将传入的值（domain） 映射到值域 `[0, 1]` 后从 `rampColor` 构建的色带上取颜色。 - -#### clampLow/clampHigh: boolean - -`clampLow` 的默认值为 `false`，设置为 `true`，低于 `domain` 的数据将不显示。 -`clampHigh` 的默认值为 `false`，设置为 `true`，高于 `domain` 的数据将不显示。 - -#### rampColors - -- colors  颜色数组 -- positions 数据区间 - -配置值域映射颜色的色带，值域的范围为 `[0 - 1]`, 对应的我们需要为每一个 `position` 位置设置一个颜色值。 - -⚠️ colors, positions 的长度要相同 - -```javascript -layer.style({ +layer.source(tileSource).style({ + domain: [0.001, 11.001], + clampLow: false, rampColors: { - colors: ['#FF4818', '#F7B74A', '#FFF598', '#91EABC', '#2EA9A1', '#206C7C'], - positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0], + colors: colorList, + positions, }, }); ``` -ps：⚠️ color, position 的长度要相同 - -## event - -🌟 数据栅格支持图层事件，目前图片栅格暂时不支持图层事件。 - -### 绑定事件 - -🌟 数据栅格瓦片 +### 绘制数据栅格 - rgb ```javascript -// 绑定事件的方式和普通图层保持一致 -layer.on('click', e => {...}) -``` - -### 事件参数 - -🌟 数据栅格瓦片 -数据栅格瓦片的事件参数相比于普通图层的事件返回了新的参数。 - -#### value: number - -🌟 数据栅格瓦片 -鼠标事件位置的瓦片的实际数值。 +const url = 'https://gw.alipayobjects.com/zos/raptor/1667832825992/LC08_3857_clip_2.tif'; +const tiffdata = await getTiffData(url); +const layer = new RasterLayer({ zIndex: 10 }) + .source([ + { + data: tiffdata, + bands: [7, 6, 5].map((v) => v - 1), + }, + ], + { + parser: { + type: 'rasterRgb', + format: async (data, bands) => { + const tiff = await GeoTIFF.fromArrayBuffer(data); + const image1 = await tiff.getImage(); + const value = await image1.readRasters(); + return bands.map((band) => { + return { + rasterData: value[band], + width: value.width, + height: value.height, + }; + }); + }, + operation: 'rgb', + extent: [ + 130.39565357746957, + 46.905730725742366, + 130.73364094187343, + 47.10217234153133, + ], + }, + }, + ) +``` \ No newline at end of file diff --git a/packages/site/docs/tutorial/tile/vectorTile.zh.md b/packages/site/docs/tutorial/tile/vectorTile.zh.md index c64b4dc03b..fa6bae4d27 100644 --- a/packages/site/docs/tutorial/tile/vectorTile.zh.md +++ b/packages/site/docs/tutorial/tile/vectorTile.zh.md @@ -6,169 +6,64 @@ order: 2 矢量瓦片通常可以用于大数据量地理数据的渲染，借助瓦片的特性分布请求渲染数据，从而达到减少请求、加载时间的等待，优化使用体验的目的。同时，在不需要全量加载数据的场景下，通过矢量瓦片的形式可以在保证体验的前提下有效减少数据的渲染量，减少渲染压力。 -### 使用 +### 绘制矢量瓦片 - point -`L7` 支持多种类型的矢量图层，同时为了减少降低新增概念，矢量瓦片图层和普通的图层保持相同的使用方法，只是在 `source` 数据类型上有所区别。以点图层为列，也就是说，`PointLayer` 既可以是普通的点图层，也可以是矢量点图层。 +```javascript +import { PointLayer } from '@antv/l7'; +const point = new PointLayer({ + featureId: 'COLOR', + sourceLayer: 'ecoregions2', +}) + .source(vectorSource) + .shape('circle') + .color('red') + .size(10); +``` + +### 绘制矢量瓦片 - line + +```javascript +import { LineLayer } from '@antv/l7'; +const line = new LineLayer({ + featureId: 'COLOR', + sourceLayer: 'ecoregions2', +}) + .source(vectorSource) + .color('COLOR') + .size(2); +``` + +### 绘制矢量瓦片 - polygon + +```javascript +// 矢量瓦片图层 +import { PolygonLayer } from '@antv/l7'; +const polygon = new PolygonLayer({ + featureId: 'COLOR'， + sourceLayer: 'ecoregions2', +}) +.source(source) +.color('red'); +``` + +### 绘制矢量瓦片 - 掩模图层 + +矢量掩模图层一般配合栅格图层使用，对栅格图层进行掩模处理。 ```js -// 普通点图层 -const layer = new PointLayer() -.source([{lng: 120, lat: 30}], {parser: { - type: 'json', - x: 'lng', - y: 'lat', -}}) -.shape('circle') -.size(10) -.color('#f00'); -// 矢量点图层瓦片 -const vectorTileLayer = new PointLayer() -.source('http://ganos.oss-cn-hangzhou.aliyuncs.com/m2/rs_l7/{z}/{x}/{y}.pbf', - { +import { MaskLayer } from '@antv/l7'; +const mask = new MaskLayer({sourceLayer: 'ecoregions2' }) +.source( 'http://ganos.oss-cn-hangzhou.aliyuncs.com/m2/rs_l7/{z}/{x}/{y}.pbf' { parser: { - type: 'mvt', - maxZoom: 9, - extent: [-180, -85.051129, 179, 85.051129], - }) -.shape('circle') -.size(10) -.color('#f00'); -``` - -### option - -在初始化瓦片的时候，除了普通图层支持的 `options` 参数之外，还需要需要我们提前设置矢量数据相关的参数。 -- `featureId`: string - - 用于可以自定义指定。用于指定瓦片的拾取高亮。 -- `sourceLayer`: string - - 用于必须传入，且要在返回的矢量数据中存在，指定绘制矢量数据中那一图层数据。 - -```javascript -const layer = new RasterLayer({ - featureId: 'id', - sourceLayer: 'water', -}); -``` -### source - -瓦片图层复用了原有的普通图层，在使用上通过 `source` 来进行区分。 - -```javascript -// 普通图层在 source 中直接传入数据，而瓦片图层则在 source 中设置瓦片服务 -// 设置矢量瓦片服务 -import { Source } from '@antv/l7' -const tileSource = new Source({ - 'http://ganos.oss-cn-hangzhou.aliyuncs.com/m2/rs_l7/{z}/{x}/{y}.pbf', - { // parser - parser: { type: 'mvt', - ... - } - } -}) -layer.source(tileSource) -``` - -#### parser - -矢量瓦片在 `parser` 中解析瓦片服务，配置瓦片的参数。 - -##### type: string - -用于指定瓦片服务的解析方式，值为 `rasterTile` 和 `mvt`。 -`rasterTile` 用于栅格瓦片的解析，`mvt` 用于矢量瓦片的解析。 - -##### minZoom/maxZoom: number - -设置瓦片数据的请求层级。当地图的缩放层级 `zoom` 小于 `minZoom` 后，或 `zoom` 大于 `maxZoom` 后将不再请求新的瓦片。 -`minZoom` 的默认值为 `-Infinity`。 -`maxZoom` 的默认值为 `Infinity`。 - -##### tileSize: number - -设置的值是瓦片服务返回的瓦片大小。 -`tileSize` 的默认值为 256。 -ps： 该值在生产瓦片的时候确定，我们设置的 `tileSize` 需要和瓦片服务返回的保持一致。 - -##### extent: [number, number, number, number] - -设置请求瓦片数据的边界， 格式是 `[minLng, maxLat, maxLng, minLat]`，只会请求范围内的瓦片数据。 - -##### zoomOffset: number - -设置的值用于改变请求的瓦片数据的层级，通常在移动端可以请求更高一级的瓦片以获取更好的清晰度。 -`zoomOffset` 的默认值为 `0`。 - -### style - -矢量图层的 `style` 样式和普通图层保持一致。 - -### 特殊的矢量图层 - -#### MaskLayer - -`MaskLayer` 一般用于对另外一个瓦片图层做掩模，`source` 接收数据类型为 `GeoJSON Polygon` 类型的瓦片服务。 - -```js -// 对卫星图做掩模 -const mask = new MaskLayer({ sourceLayer: 'ecoregions2'}).source( - 'http://ganos.oss-cn-hangzhou.aliyuncs.com/m2/rs_l7/{z}/{x}/{y}.pbf', - { - parser: { - type: 'mvt', - tileSize: 256, - maxZoom: 9, - extent: [-180, -85.051129, 179, 85.051129], - }, - }, - ) - -const satellite = new RasterLayer({ mask: true }) - .source( - 'http://webst0{1-4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', - { - parser: { - type: 'rasterTile', - tileSize: 256, - zoomOffset: 0, - updateStrategy: 'overlap', - }, - }, - ) -``` -#### TileDebugLayer - -用于测试使用，用于展示瓦片金字塔，一般在开发时使用。 - -```js -const layer = new TileDebugLayer(); -scene.addLayer(layer); -``` - -### 前端瓦片切分方案 - -矢量图层还支持以 `GeoJSON-VT` 的形式实现瓦片数据的前端切片，这就意味着瓦片图层不再依赖后端提供瓦片服务，可以很大程度上减少瓦片图层的使用限制。 - -- `geojsonvt` 需要把 `parser` 的 `type` 类型设置为 `geojsonvt`。 - -```js -fetch( 'https://gw.alipayobjects.com/os/bmw-prod/2b7aae6e-5f40-437f-8047-100e9a0d2808.json') -.then((d) => d.json()) -.then((data) => { - const source = new Source(data, { - parser: { - type: 'geojsonvt', maxZoom: 9, - }, - }); + extent: [-180, -85.051129, 179, 85.051129], + }}); +``` - const polygon = new PolygonLayer({ featureId: 'COLOR' }) - .source(source) - .color('COLOR') - .select(true) - .style({ - opacity: 0.6, - }); - scene.addLayer(polygon); -}) +### 绘制矢量瓦片 - 测试图层 + +```js +// 测试瓦片图层 +const debugerLayer = new TileDebugLayer(); ``` \ No newline at end of file diff --git a/packages/source/src/utils/bandOperation/math.ts b/packages/source/src/utils/bandOperation/math.ts index 3532418613..c6371b817f 100644 --- a/packages/source/src/utils/bandOperation/math.ts +++ b/packages/source/src/utils/bandOperation/math.ts @@ -3,19 +3,19 @@ import { IRasterData } from '../../interface'; /** 数学运算 根据计算表达式进行数学运算 * * * Math operators: - * `['*', value1, value2]` multiplies `value1` by `value2` - * `['/', value1, value2]` divides `value1` by `value2` - * `['+', value1, value2]` adds `value1` and `value2` - * `['-', value1, value2]` subtracts `value2` from `value1` - * `['%', value1, value2]` returns the result of `value1 % value2` (modulo) - * `['^', value1, value2]` returns the value of `value1` raised to the `value2` power - * `['abs', value1]` returns the absolute value of `value1` - * `['floor', value1]` returns the nearest integer less than or equal to `value1` - * `['round', value1]` returns the nearest integer to `value1` - * `['ceil', value1]` returns the nearest integer greater than or equal to `value1` - * `['sin', value1]` returns the sine of `value1` - * `['cos', value1]` returns the cosine of `value1` - * `['atan', value1, value2]` returns `atan2(value1, value2)`. If `value2` is not provided, returns `atan(value1)` + * `['*', value1, value2]` + * `['/', value1, value2]` + * `['+', value1, value2]` + * `['-', value1, value2]` + * `['%', value1, value2]` + * `['^', value1, value2]` + * `['abs', value1]` + * `['floor', value1]` + * `['round', value1]` + * `['ceil', value1]` + * `['sin', value1]` + * `['cos', value1]` + * `['atan', value1, value2]` */ export function mathematical(symbol: string, n1: number, n2: number) { switch(symbol) {