https://github.com/maptalks/maptalks.tileclip
maptalks TileLayer clip tool
https://github.com/maptalks/maptalks.tileclip
Last synced: 4 months ago
JSON representation
maptalks TileLayer clip tool
- Host: GitHub
- URL: https://github.com/maptalks/maptalks.tileclip
- Owner: maptalks
- License: mit
- Created: 2024-10-12T06:20:08.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2026-03-03T07:32:59.000Z (4 months ago)
- Last Synced: 2026-03-03T10:56:46.599Z (4 months ago)
- Language: TypeScript
- Homepage:
- Size: 15.6 MB
- Stars: 11
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# maptalks.tileclip
[maptalks](https://github.com/maptalks/maptalks.js) TileLayer tiles merge/clip/transform etc tool
* This plugin requires the runtime environment to support [OffscreenCanvas](https://developer.mozilla.org/zh-CN/docs/Web/API/OffscreenCanvas). Pay attention to relevant compatibility. Especially the Safari browser
* Considering performance, all operations are completed within the [Web Worker](https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API/Using_web_workers)
* If you are familiar with other map engines, you can also apply them to other map engines [leaflet demo](https://maptalks.github.io/maptalks.tileclip/demo/leaflet.html)
## Examples
### Fetch Tile
* [fetch tile](https://maptalks.github.io/maptalks.tileclip/demo/tile.html)
* [fetch and merge tiles](https://maptalks.github.io/maptalks.tileclip/demo/tile-array.html)
* [tiles filter by mask(only load tiles in mask)](https://maptalks.github.io/maptalks.tileclip/demo/tile-mask-filter.html)
* [fetch tile with canvas](https://maptalks.github.io/maptalks.tileclip/demo/tile-with-canvas.html)
* [maxAvailableZoom](https://maptalks.github.io/maptalks.tileclip/demo/maxAvailableZoom.html)
* [maxAvailableZoom tiles](https://maptalks.github.io/maptalks.tileclip/demo/maxAvailableZoom-array.html)
* [maxAvailableZoom terrain](https://maptalks.github.io/maptalks.tileclip/demo/maxAvailableZoom-terrain.html)
* [maxAvailableZoom fetch by different](https://maptalks.github.io/maptalks.tileclip/demo/maxAvailableZoom-different.html)
* [maxAvailableZoom fetchParentTileOn404](https://maptalks.github.io/maptalks.tileclip/demo/maxAvailableZoom-fetchParentTileOn404.html)
* [layout tiles](https://maptalks.github.io/maptalks.tileclip/demo/layouttiles.html)
* [get tile from single image](https://maptalks.github.io/maptalks.tileclip/demo/imagetile.html)
* [big image slice](https://maptalks.github.io/maptalks.tileclip/demo/imageslicing.html)
* [custom tile fetch error](https://maptalks.github.io/maptalks.tileclip/demo/tile-custom-error.html)
* [vt tile](https://maptalks.github.io/maptalks.tileclip/demo/tile-vt.html)
* [vt tiles will merge mvt data](https://maptalks.github.io/maptalks.tileclip/demo/tile-vts.html)
* [vt tiles will merge mvt data and custom properties](https://maptalks.github.io/maptalks.tileclip/demo/tile-vts-customproperties.html)
### Clip Tile
* [clip by polygon](https://maptalks.github.io/maptalks.tileclip/demo/polygon-clip.html)
* [clip by polygon with holes](https://maptalks.github.io/maptalks.tileclip/demo/polygon-hole-clip.html)
* [clip by multipolygon](https://maptalks.github.io/maptalks.tileclip/demo/multipolygon-clip.html)
* [clip by multipolygon with holes](https://maptalks.github.io/maptalks.tileclip/demo/multipolygon-hole-clip.html)
* [clip reverse](https://maptalks.github.io/maptalks.tileclip/demo/polygon-clip-reverse.html)
* [clip buffer](https://maptalks.github.io/maptalks.tileclip/demo/polygon-clip-buffer.html)
* [maxAvailableZoom polygon clip](https://maptalks.github.io/maptalks.tileclip/demo/maxAvailableZoom-polygon-clip.html)
* [maxAvailableZoom tiles polygon clip](https://maptalks.github.io/maptalks.tileclip/demo/maxAvailableZoom-polygon-clip-array.html)
* [update mask](https://maptalks.github.io/maptalks.tileclip/demo/update-mask.html)
* [mask remove/add](https://maptalks.github.io/maptalks.tileclip/demo/polygon-clip-remve.html)
* [get tile and clip from single image](https://maptalks.github.io/maptalks.tileclip/demo/imagetile-clip.html)
### Clip By Custom Prj
* [EPSG:4326](https://maptalks.github.io/maptalks.tileclip/demo/4326.html)
* [custom SpatialReference](https://maptalks.github.io/maptalks.tileclip/demo/custom-sp.html)
* [identify projection](https://maptalks.github.io/maptalks.tileclip/demo/identify.html)
* [EPSG:9807](https://maptalks.github.io/maptalks.tileclip/demo/epsg9807.html)
### Rectify Tile
* [tilerectify-gcj02-wgs84](https://maptalks.org/maptalks.tileclip/demo/tilerectify-gcj02-wgs84.html)
* [tilerectify-wgs84-gcj02](https://maptalks.org/maptalks.tileclip/demo/tilerectify-wgs84-gcj02.html)
* [tilerectify-baidu-wgs84](https://maptalks.org/maptalks.tileclip/demo/tilerectify-baidu-wgs84.html)
* [tilerectify urltempalte is function](https://maptalks.org/maptalks.tileclip/demo/tilerectify-urltempalte-function.html)
### Reproject Tile
* [Reproject EPSG4326 to EPSG3857](https://maptalks.github.io/maptalks.tileclip/demo/4326-transform-3857.html)
* [Reproject EPSG3857 to EPSG4326](https://maptalks.github.io/maptalks.tileclip/demo/3857-transform-4326.html)
### Terrain Encode
* [mapzen terrain tile encode](https://maptalks.github.io/maptalks.tileclip/demo/terrain-mapzen.html)
* [arcgis terrain tile encode](https://maptalks.github.io/maptalks.tileclip/demo/terrain-arcgis.html)
* [qgis gray terrain tile encode](https://maptalks.github.io/maptalks.tileclip/demo/terrain-qgis-gray.html)
* [terrain encode with colors](https://maptalks.github.io/maptalks.tileclip/demo/terrain-colors.html)
* [color terrain tile](https://maptalks.github.io/maptalks.tileclip/demo/color-terrain-tile.html)
### postProcessing
* [flipY](https://maptalks.github.io/maptalks.tileclip/demo/tile-flipy.html)
* [css filter](https://maptalks.github.io/maptalks.tileclip/demo/cssfilter.html)
* [tile opacity](https://maptalks.github.io/maptalks.tileclip/demo/tile-opacity.html)
* [tile mosaic](https://maptalks.github.io/maptalks.tileclip/demo/tile-mosaic.html)
* [tile old photo](https://maptalks.github.io/maptalks.tileclip/demo/tile-oldphoto.html)
* [tile invert color](https://maptalks.github.io/maptalks.tileclip/demo/tile-invertcolor.html)
* [gaussian Blur](https://maptalks.github.io/maptalks.tileclip/demo/gaussianBlurRadius.html)
* [tiles globalCompositeOperation](https://maptalks.github.io/maptalks.tileclip/demo/tiles-globalCompositeOperation.html)
* [get tile with mosaic ](https://maptalks.github.io/maptalks.tileclip/demo/imagetile-mosaic.html)
## Others
* [water mark](https://maptalks.github.io/maptalks.tileclip/demo/watermark.html)
* [underground by clip tile](https://maptalks.github.io/maptalks.tileclip/demo/underground.html)
* [terrain-tiles-blendmode](https://maptalks.github.io/maptalks.tileclip/demo/terrain-tiles-blendmode.html)
* [terrain-tiles-blendmode shadow](https://maptalks.github.io/maptalks.tileclip/demo/terrain-tiles-blendmode-shadow.html)
* [leaflet clip demo](https://maptalks.github.io/maptalks.tileclip/demo/leaflet.html)
* [leaflet gettile demo](https://maptalks.github.io/maptalks.tileclip/demo/leaflet-simple.html)
* [leaflet reproject tile demo](https://maptalks.github.io/maptalks.tileclip/demo/leaflet-transform.html)
* [leaflet-imagetile-clip demo](https://maptalks.github.io/maptalks.tileclip/demo/leaflet-imagetile-clip.html)
* [maplibre reproject EPSG4326 to EPSG3857 demo](https://maptalks.github.io/maptalks.tileclip/demo/maplibre.html)
## Install
### NPM
```sh
npm i maptalks
#or
# npm i maptalks-gl
npm i maptalks.tileclip
```
## CDN
```html
```
## API
### `getTileActor()`
return `TileActor` instance
```js
import {
getTileActor,
getBlankTile,
get404Tile,
getBlankVTTile
} from 'maptalks.tileclip'
const tileActor = getTileActor();
```
### `TileActor` class
Tile clip worker interaction class. about [maptalks. Actor](https://github.com/maptalks/maptalks.js/blob/master/packages/map/src/core/worker/Actor.ts) details
```js
import {
getTileActor
} from 'maptalks.tileclip'
const tileActor = getTileActor();
```
#### Methods
| method | describe |
| --------------------------------------- | ------------------------------------------------------------------- |
| getTile(options) | Request tile support for batch and some processing |
| getTileWithMaxZoom(options) | Cutting tiles, automatically cutting beyond the maximum level limit |
| layoutTiles(options) | Tile layout arrangement |
| reProjectTile(options) | Tile reprojection |
| rectifyTile(options) | Corrective tiles, only applicable to Chinese users |
| rectifyBaiduTile(options) | Corrective baidu tiles, only applicable to Chinese users |
| injectMask(maskId, Polygon/MultiPolygon)| Inject geojson data for tile clipping service |
| removeMask(maskId) | remove Inject geojson data |
| maskHasInjected(maskId) | Has the geojson data been injected |
| clipTile(options) | Crop tiles using injected geojson data |
| tileIntersectMask(options) | Does tile intersect with mask |
| encodeTerrainTile(options) | Encode other terrain tiles into mapbox terrain service format |
| colorTerrainTile(options) | Terrain tile color matching |
| terrainTileFixBoundary(options) | Reset the skirt edge of the terrain tile using neighbor tiles |
| imageSlicing(options) | Cut a large image into multiple small images |
| injectImage(options) | inject image source for getImageTile |
| removeImage(imageId) | remove image source |
| imageHasInjected(imageId) | Has the image data been injected |
| getImageTile(options) | get tile data from injectImage |
| getVTTile(options) | get VT tile, support merge vt data and custom prorperties |
#### Common Types
```ts
// postProcessing params
export type postProcessingOptionsType = {
flipY?:boolean;
filter?: string; //[CanvasRenderingContext2D.filter](https://mdn.org.cn/en-US/docs/Web/API/CanvasRenderingContext2D/filter)
opacity?: number;//tile opacity if need
gaussianBlurRadius?: number;// gaussian Blur Radius if need
mosaicSize?: number;//Mosaic pixel size
oldPhoto?: boolean;//Old photo effect
invertColor?:boolean;// invert Color
}
//fetch params
export type fetchOptionsType = {
referrer?: string;//fetch referrer
headers?: Record;// fetch headers params. if need
fetchOptions?: Record;//fetch options. if need, If it exists, headers will be ignored
timeout?: number;//fetch timeout if need
indexedDBCache?: boolean;//cache tile data by IndexedDB
}
// image reutrn result params
//tile default return ImageBitMap
export type returnResultType = {
returnUint32Buffer?:boolean;//return to Unit32 ArrayBuffer
returnBlobURL?: boolean;// to return Blob URL by createObjectURL() When the blob URL is no longer in use, be sure to destroy its value revokeObjectURL()
returnBase64?: boolean;// return base64
quality?:number;//image quality 0-1,MIME types is image/webp https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Guides/MIME_types/Common_types
}
```
#### Method Details
all methods return Promise with `cancel()` method
* `getTile(options)` get tile [ImageBitmap](https://developer.mozilla.org/zh-CN/docs/Web/API/ImageBitmap) by fetch in worker, return `Promise`
+ `options.url`:tile url or tiles urls
+ `...fetchOptionsType` fetchOptionsType params
+ `...postProcessingOptionsType` postProcessingOptionsType params
+ `...returnResultType` returnResultType params
```js
tileActor.getTile({
url: 'https://services.arcgisonline.com/ArcGIS/rest/services/Word_Imagery/MapServer/tile/12/1663/3425',
//or url:[ur1,ur2],
fetchOptions: {
referrer: document.location.href,
headers: {
...
}
...
},
oldPhoto: true,
}).then(imagebitmap => {
consle.log(imagebitmap);
}).catch(error => {
//do some things
})
//or if you want to cancel task
const promise = tileActor.getTile({
...
});
//mock cancel fetch task
setTimeout(() => {
promise.cancel();
}, 2000);
promise.then((imagebitmap) => {
}).catch(error => {
//do some things
console.error(error);
})
```
* `getTileWithMaxZoom(options)` get tile [ImageBitmap](https://developer.mozilla.org/zh-CN/docs/Web/API/ImageBitmap) by fetch in worker, return `Promise`. When the level exceeds the maximum level, tiles will be automatically cut
+ `options.x`:tile col
+ `options.y`:tile row
+ `options.z`:tile zoom
+ `options.maxAvailableZoom`:tile The maximum visible level, such as 18
+ `options.urlTemplate`:tile urlTemplate.https://services.arcgisonline.com/ArcGIS/rest/services/Word_Imagery/MapServer/tile/{z}/{y}/{x} or tiles urlTemplates
+ `options?.subdomains`:subdomains, such as [1, 2, 3, 4, 5]
+ `options?.tms`
+ `options?.fetchParentTileOn404` 404 will continuously request tiles from the parent node
+ `...fetchOptionsType` fetchOptionsType params
+ `...postProcessingOptionsType` postProcessingOptionsType params
+ `...returnResultType` returnResultType params
```js
const {
x,
y,
z
} = tile;
const urlTemplate = baseLayer.options.urlTemplate;
const maxAvailableZoom = 18;
tileActor.getTileWithMaxZoom({
x,
y,
z,
urlTemplate,
//or urlTemplate:[urlTemplate1,urlTemplate2],
maxAvailableZoom,
fetchOptions: {
referrer: document.location.href,
headers: {
...
}
...
}
}).then(imagebitmap => {
consle.log(imagebitmap);
}).catch(error => {
//do some things
})
//or if you want to cancel task
const promise = tileActor.getTileWithMaxZoom({
...
});
//mock cancel fetch task
setTimeout(() => {
promise.cancel();
}, 2000);
promise.then((imagebitmap) => {
}).catch(error => {
//do some things
console.error(error);
})
```
* `layoutTile(options)` layout tiles [ImageBitmap](https://developer.mozilla.org/zh-CN/docs/Web/API/ImageBitmap) by fetch in worker, return `Promise` .
+ `options.urlTemplate` :tile urlTemplate.https://services.arcgisonline.com/ArcGIS/rest/services/Word_Imagery/MapServer/tile/{z}/{y}/{x}
+ `options.tiles` : tile Data set
+ `options?.subdomains` :subdomains, such as [1, 2, 3, 4, 5]
+ `...fetchOptionsType` fetchOptionsType params
+ `...postProcessingOptionsType` postProcessingOptionsType params
+ `...returnResultType` returnResultType params
```js
const {
x,
y,
z
} = tile;
const urlTemplate = baseLayer.options.urlTemplate;
tileActor.layoutTiles({
urlTemplate,
tiles: [
[x, y, z],
[x + 1, y, z],
[x, y + 1, z],
[x + 1, y + 1, z]
]
fetchOptions: {
referrer: document.location.href,
headers: {
...
}
...
}
}).then(imagebitmap => {
consle.log(imagebitmap);
}).catch(error => {
//do some things
})
//or if you want to cancel task
const promise = tileActor.layoutTiles({
...
});
//mock cancel fetch task
setTimeout(() => {
promise.cancel();
}, 2000);
promise.then((imagebitmap) => {
}).catch(error => {
//do some things
console.error(error);
})
```
* `reProjectTile(options)` Reprojection tile in worker, return `Promise`
+ `options.x`:tile col
+ `options.y`:tile row
+ `options.z`:tile zoom
+ `options.projection`: Projection code, only support `EPSG:4326`, `EPSG:3857`. Note that only global standard pyramid slicing is supported
+ `options.maxAvailableZoom`:tile The maximum visible level, such as 18
+ `options.urlTemplate`:tile urlTemplate.https://services.arcgisonline.com/ArcGIS/rest/services/Word_Imagery/MapServer/tile/{z}/{y}/{x} or tiles urlTemplates
+ `options?.subdomains`:subdomains, such as [1, 2, 3, 4, 5]
+ `options?.isGCJ02`: Is it the isGCJ02 coordinate system
+ `options?.errorLog`: Is there a printing error
+ `...fetchOptionsType` fetchOptionsType params
+ `...postProcessingOptionsType` postProcessingOptionsType params
+ `...returnResultType` returnResultType params
```js
const {
x,
y,
z
} = tile;
const maxAvailableZoom = 18;
tileActor.reProjectTile({
x,
y,
z,
urlTemplate,
projection: 'EPSG:4326',
maxAvailableZoom: 18,
}).then(imagebitmap => {
callback(imagebitmap);
}).catch(error => {
//do some things
console.error(error);
})
//or if you want to cancel task
const promise = tileActor.reProjectTile({
...
});
//mock cancel fetch task
setTimeout(() => {
promise.cancel();
}, 2000);
promise.then((imagebitmap) => {
}).catch(error => {
//do some things
console.error(error);
})
```
* `rectifyTile(options)` rectify tile [ImageBitmap](https://developer.mozilla.org/zh-CN/docs/Web/API/ImageBitmap) by fetch in worker, return `Promise`. When the level exceeds the maximum level, tiles will be automatically cut
+ `options.x`:tile col
+ `options.y`:tile row
+ `options.z`:tile zoom
+ `options.maxAvailableZoom`:tile The maximum visible level, such as 18
+ `options.urlTemplate`:tile urlTemplate.https://services.arcgisonline.com/ArcGIS/rest/services/Word_Imagery/MapServer/tile/{z}/{y}/{x} or tiles urlTemplates
+ `options.projection`: 'EPSG:4326' | 'EPSG:3857';
+ `options.tileBBOX`:tile BBOX `[minx,miny,maxx,maxy]`
+ `options.transform`: 'WGS84-GCJ02' | 'GCJ02-WGS84',
+ `options.tileSize`: tile size
+ `options?.subdomains`:subdomains, such as [1, 2, 3, 4, 5]
+ `...fetchOptionsType` fetchOptionsType params
+ `...postProcessingOptionsType` postProcessingOptionsType params
+ `...returnResultType` returnResultType params
```js
baseLayer.on('renderercreate', function(e) {
//load tile image
// img(Image): an Image object
// url(String): the url of the tile
e.renderer.loadTileBitmap = function(url, tile, callback) {
// console.log(tile);
const {
x,
y,
z
} = tile;
const urlTemplate = baseLayer.options.urlTemplate;
const maxAvailableZoom = 18;
tileActor.rectifyTile({
x,
y,
z,
urlTemplate,
maxAvailableZoom,
tileBBOX: baseLayer._getTileBBox(tile),
projection: baseLayer.getProjection().code,
tileSize: baseLayer.getTileSize().width,
transform: 'GCJ02-WGS84',
mapZoom: map.getZoom()
}).then(imagebitmap => {
callback(imagebitmap);
}).catch(error => {
//do some things
console.error(error);
})
};
});
```
* `rectifyBaiduTile(options)` rectify baidu tile [ImageBitmap](https://developer.mozilla.org/zh-CN/docs/Web/API/ImageBitmap) by fetch in worker, return `Promise`. When the level exceeds the maximum level, tiles will be automatically cut
+ `options.x`:tile col
+ `options.y`:tile row
+ `options.z`:tile zoom
+ `options.maxAvailableZoom`:tile The maximum visible level, such as 18
+ `options.urlTemplate`:tile urlTemplate.https://services.arcgisonline.com/ArcGIS/rest/services/Word_Imagery/MapServer/tile/{z}/{y}/{x} or tiles urlTemplates
+ `options.tileBBOX`:tile BBOX `[minx,miny,maxx,maxy]`
+ `options.transform`: 'BAIDU-WGS84' | 'BAIDU-GCJ02',
+ `options.tileSize`: tile size
+ `options?.subdomains`:subdomains, such as [1, 2, 3, 4, 5]
+ `...fetchOptionsType` fetchOptionsType params
+ `...postProcessingOptionsType` postProcessingOptionsType params
+ `...returnResultType` returnResultType params
```js
baseLayer.on('renderercreate', function(e) {
//load tile image
// img(Image): an Image object
// url(String): the url of the tile
e.renderer.loadTileBitmap = function(url, tile, callback) {
// console.log(tile);
const {
x,
y,
z
} = tile;
const urlTemplate = baseLayer.options.urlTemplate;
const maxAvailableZoom = 18;
tileActor.rectifyBaiduTile({
x,
y,
z,
urlTemplate,
maxAvailableZoom,
tileBBOX: baseLayer._getTileBBox(tile),
tileSize: baseLayer.getTileSize().width,
transform: 'BAIDU-WGS84',
mapZoom: map.getZoom()
}).then(imagebitmap => {
callback(imagebitmap);
}).catch(error => {
//do some things
console.error(error);
})
};
});
```
* `injectMask(maskId,Polygon/MultiPolygon)` inject Mask(GeoJSON. Polygon) for clip tiles . return `Promise`
+ `maskId`: mask id, Cache mask data in the worker
+ `Polygon/MultiPolygon` GeoJSON Polygon/MultiPolygon [GeoJSON SPEC](https://datatracker.ietf.org/doc/html/rfc7946#section-3.1.6)
```js
const maskId = 'china';
const polygon = {
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": []
}
}
tileActor.injectMask(maskId, polygon).then(data => {
// baseLayer.addTo(map);
}).catch(error => {
console.error(error);
})
```
* `removeMask(maskId)` remove Mask from cache . return `Promise`
+ `maskId`: mask id
```js
const maskId = 'china';
tileActor.removeMask(maskId).then(data => {
}).catch(error => {
console.error(error);
})
```
* `maskHasInjected(maskId)` Has the mask been injected . return `Boolean`
+ `maskId`: mask id
```js
const maskId = 'china';
const result = tileActor.maskHasInjected(maskId);
```
* `clipTile(options)` clip tile by mask . return `Promise`
+ `options.tile`:tile [ImageBitmap](https://developer.mozilla.org/zh-CN/docs/Web/API/ImageBitmap) data or http url
+ `options.tileBBOX`:tile BBOX `[minx,miny,maxx,maxy]`
+ `options.projection`: Projection code, such as : EPSG:3857
+ `options.maskId`:mask key
+ `options?.tileSize`:tile size
+ `options?.reverse`:whether or not clip reverse
+ `options?.bufferSize`: Buffer contour pixel size
+ `...returnResultType` returnResultType params
```js
import * as maptalks from 'maptalks-gl';
import {
getTileActor
} from 'maptalks.tileclip';
const tileActor = getTileActor();
const maskId = 'china';
const baseLayer = new maptalks.TileLayer('base', {
debug: true,
urlTemplate: '/arcgisonline/rest/services/Word_Imagery/MapServer/tile/{z}/{y}/{x}',
subdomains: ["a", "b", "c", "d"],
// bufferPixel: 1
})
baseLayer.on('renderercreate', function(e) {
//load tile image
// img(Image): an Image object
// url(String): the url of the tile
e.renderer.loadTileBitmap = function(url, tile, callback) {
//get Tile data
tileActor.getTile({
url: maptalks.Util.getAbsoluteURL(url)
}).then(imagebitmap => {
//clip tile
tileActor.clipTile({
tile: imagebitmap,
tileBBOX: baseLayer._getTileBBox(tile),
projection: baseLayer.getProjection().code,
tileSize: baseLayer.getTileSize().width,
maskId,
}).then(image => {
callback(image);
}).catch(error => {
//do some things
console.error(error);
})
}).catch(error => {
//do some things
console.error(error);
})
};
});
const polygon = {
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": []
}
}
tileActor.injectMask(maskId, polygon).then(data => {
baseLayer.addTo(map);
}).catch(error => {
console.error(error);
})
```
* `tileIntersectMask(options)` Does tile intersect with mask . return `Promise`
+ `options.tileBBOX`:tile BBOX `[minx,miny,maxx,maxy]`
+ `options.maskId`:mask key
```js
import * as maptalks from 'maptalks-gl';
import {
getTileActor
} from 'maptalks.tileclip';
const tileActor = getTileActor();
const maskId = 'china';
const baseLayer = new maptalks.TileLayer('base', {
debug: true,
urlTemplate: '/arcgisonline/rest/services/Word_Imagery/MapServer/tile/{z}/{y}/{x}',
subdomains: ["a", "b", "c", "d"],
// bufferPixel: 1
})
baseLayer.on('renderercreate', function(e) {
//load tile image
// img(Image): an Image object
// url(String): the url of the tile
e.renderer.loadTileBitmap = function(url, tile, callback) {
const tileBBOX = baseLayer._getTileBBox(tile);
const blankTile = () => {
callback(maptalks.getBlankTile())
}
tileActor.tileIntersectMask({
tileBBOX,
maskId
}).then(result => {
// callback(result);
const {
intersect
} = result;
if (intersect) {
tileActor.getTile({
url: maptalks.Util.getAbsoluteURL(url)
}).then(imagebitmap => {
callback(imagebitmap);
}).catch(error => {
//do some things
console.error(error);
blankTile();
})
} else {
blankTile();
}
}).catch(error => {
//do some things
console.error(error);
blankTile();
})
};
});
const polygon = {
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": []
}
}
tileActor.injectMask(maskId, polygon).then(data => {
baseLayer.addTo(map);
}).catch(error => {
console.error(error);
})
```
* `encodeTerrainTile(options)` transform other terrain tile to mapbox terrain rgb tile by fetch in worker, return `Promise`
+ `options.url`:tile url
+ `options.terrainType`:'mapzen' | 'tianditu' | 'cesium'|'arcgs'|'qgis-gray'
+ `options?.terrainWidth` default is 65
+ `options?.minHeight` min height when terrainType is 'qgis-gray'
+ `options?.maxHeight` max height when terrainType is 'qgis-gray'
+ `options?.tileSize` default value is 256
+ `options?.terrainColors` Colored terrain tiles. Color interpolation based on altitude
+ `...fetchOptionsType` fetchOptionsType params
+ `...returnResultType` returnResultType params
```js
baseLayer.on('renderercreate', function(e) {
//load tile image
// img(Image): an Image object
// url(String): the url of the tile
e.renderer.loadTileBitmap = function(url, tile, callback) {
//transform mapzen terrain tile to mapbox terrain rgb tile
tileActor.encodeTerrainTile({
url: maptalks.Util.getAbsoluteURL(url),
terrainType: 'mapzen',
// timeout: 5000
}).then(imagebitmap => {
callback(imagebitmap)
}).catch(error => {
//do some things
console.error(error);
})
};
});
```
* `colorTerrainTile(options)` Terrain tile color matching, return `Promise`
+ `options.tile`:tile data, is ImageBitMap or http url
+ `options.colors`: Color Mapping Table
+ `...postProcessingOptionsType` postProcessingOptionsType params
+ `...returnResultType` returnResultType params
```js
const colors = [
[0, "#4B2991"],
[176, "#872CA2"],
[353, "#C0369D"],
[530, "#EA4F88"],
[706, "#FA7876"],
[883, "#F6A97A"],
[1060, "#EDD9A3"],
[1236, "#EDD9A3"],
[1413, "#ffffff"],
[1590, "#ffffff"]
]
baseLayer.on('renderercreate', function(e) {
//load tile image
// img(Image): an Image object
// url(String): the url of the tile
e.renderer.loadTileBitmap = function(url, tile, callback) {
tileActor.getTile({
url: maptalks.Util.getAbsoluteURL(url)
}).then(imagebitmap => {
tileActor.colorTerrainTile({
tile: imagebitmap,
colors
}).then(image => {
callback(image);
}).catch(error => {
console.error(error);
})
}).catch(error => {
//do some things
// console.error(error);
callback(maptalks.get404Tile())
})
};
});
```
* `terrainTileFixBoundary(options)` Reset the skirt edge of the terrain tile using neighbor tiles , return `Promise`
+ `options.tiles`:tiles collection
+ `...returnResultType` returnResultType params
```js
const tile = {
x,
y,
z,
image: ...
};
const tileRight = {
x: x + 1,
y,
z: image: ...
}
const tileBottom = {
x,
y: y + 1,
z,
image: ...
}
tileActor.terrainTileFixBoundary({
tiles: [tile, tileRight, tileBottom],
returnUint32Buffer: true
}).then(imagebitmap => {
}).catch(error => {
//do some things
// console.error(error);
callback(maptalks.get404Tile())
})
```
* `imageSlicing(options)` slice big image in worker, return `Promise`
+ `options.url`:image url or images urls
+ `...fetchOptionsType` fetchOptionsType params
+ `...postProcessingOptionsType` postProcessingOptions params
+ `...returnResultType` returnResultType params
```js
tileActor.imageSlicing({
url: './big.png',
//or url:[ur1,ur2],
fetchOptions: {
referrer: document.location.href,
headers: {
...
}
...
}
}).then(result => {
consle.log(result);
}).catch(error => {
//do some things
})
```
* `injectImage(options)` inject Image for getImageTile . return `Promise`
+ `options.url`:image url
+ `options.imageBBOX`:image BBOX `[minx,miny,maxx,maxy]`. Note that the coordinates of the bounding box should be consistent with the projected image
+ `options.imageId`:image url
+ `...fetchOptionsType` fetchOptionsType params
```js
const imageId = 'china';
tileActor.injectImage({
imageId,
url: './test.jpg',
imageBBOX: [120, 31, 121, 32]
}).then(data => {
// baseLayer.addTo(map);
}).catch(error => {
console.error(error);
})
```
* `removeImage(imageId)` remove image from cache . return `Promise`
+ `imageId`: image id
```js
const imageId = 'china';
tileActor.removeImage(maskId).then(data => {
}).catch(error => {
console.error(error);
})
```
* `imageHasInjected(imageId)` Has the image been injected . return `Boolean`
+ `imageId`: image id
```js
const imageId = 'china';
const result = tileActor.imageHasInjected(maskId);
```
* `getImageTile(options)` get tile data from image . return `Promise`
+ `options.tileBBOX`:tile BBOX `[minx,miny,maxx,maxy]`
+ `options.projection`: Projection code, such as : EPSG:3857
+ `options.imageId`:mask key
+ `options?.tileSize`:tile size
+ `...postProcessingOptionsType` postProcessingOptionsType params
+ `...returnResultType` returnResultType params
```js
import * as maptalks from 'maptalks-gl';
import {
getTileActor
} from 'maptalks.tileclip';
const tileActor = getTileActor();
const imageId = 'china';
const baseLayer = new maptalks.TileLayer('base', {
debug: true,
urlTemplate: '/arcgisonline/rest/services/Word_Imagery/MapServer/tile/{z}/{y}/{x}',
subdomains: ["a", "b", "c", "d"],
// bufferPixel: 1
})
baseLayer.on('renderercreate', function(e) {
//load tile image
// img(Image): an Image object
// url(String): the url of the tile
e.renderer.loadTileBitmap = function(url, tile, callback) {
tileActor.getImageTile({
imageId,
projection: baseLayer.getProjection().code,
tileSize: baseLayer.getTileSize().width,
tileBBOX: baseLayer._getTileBBox(tile),
}).then(imagebitmap => {
// console.log(imagebitmap);
callback(imagebitmap);
}).catch(error => {
//do some things
console.error(error);
})
};
});
tileActor.injectImage({
imageId,
url: './unnamed.jpg',
imageBBOX: [...m1, ...m2]
}).then(data => {
baseLayer.addTo(groupLayer);
}).catch(error => {
console.error(error);
})
```
* `getVTTile(options)` get vt tile arraybuffer by fetch in worker, return `Promise`
+ `options.url`:tile url or tiles urls
+ `options?.customProperties`:custom features properties `function`
```js
customProperties: (layerName, layer, feature, featureIndex) => {
feature.properties = feature.properties || {};
if (layerName === 'suzhou_area') {
feature.properties.name1 = 'hello'
}
if (layerName === 'suzhou_line') {
feature.properties.name1 = 'world'
}
},
```
+ `...fetchOptionsType` fetchOptionsType params
```js
const layer = new maptalks.VectorTileLayer("geo", {
style,
debugTileData: true,
version: 1,
// urlTemplate: './../assets/data/suzhou_line/{z}/{x}/{y}.pbf'
urlTemplate: 'xxx'
});
const roadTileUrl = 'xxx';
layer.on('renderercreate', function(e) {
e.renderer.loadTileArrayBuffer = function(url, tile, callback, options) {
console.log(options.command);
const {
x,
y,
z
} = tile;
const url1 = roadTileUrl.replace("{x}", x).replace('{y}', y).replace('{z}', z);
tileActor.getVTTile({
//will merge mvt data
url: [url, url1],
customProperties: (layerName, layer, feature, featureIndex) => {
feature.properties = feature.properties || {};
if (layerName === 'suzhou_area') {
feature.properties.name1 = 'hello'
}
if (layerName === 'suzhou_line') {
feature.properties.name1 = 'world'
}
},
indexedDBCache: true
}).then(buffer => {
callback(null, buffer);
}).catch(error => {
console.log(error);
callback(error);
})
};
});
```