{"id":17249405,"url":"https://github.com/maptalks/maptalks.tileclip","last_synced_at":"2026-03-05T06:02:50.675Z","repository":{"id":257823658,"uuid":"871501606","full_name":"maptalks/maptalks.tileclip","owner":"maptalks","description":"maptalks TileLayer clip tool","archived":false,"fork":false,"pushed_at":"2026-03-03T07:32:59.000Z","size":16309,"stargazers_count":11,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2026-03-03T10:56:46.599Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/maptalks.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-10-12T06:20:08.000Z","updated_at":"2026-03-03T07:33:03.000Z","dependencies_parsed_at":null,"dependency_job_id":"3d6e0778-f90b-4aef-b47d-65075c6e5bef","html_url":"https://github.com/maptalks/maptalks.tileclip","commit_stats":null,"previous_names":["deyihu/maptalks.tileclip","maptalks/maptalks.tileclip"],"tags_count":64,"template":false,"template_full_name":null,"purl":"pkg:github/maptalks/maptalks.tileclip","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maptalks%2Fmaptalks.tileclip","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maptalks%2Fmaptalks.tileclip/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maptalks%2Fmaptalks.tileclip/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maptalks%2Fmaptalks.tileclip/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/maptalks","download_url":"https://codeload.github.com/maptalks/maptalks.tileclip/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maptalks%2Fmaptalks.tileclip/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30111780,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-05T03:40:26.266Z","status":"ssl_error","status_checked_at":"2026-03-05T03:39:15.902Z","response_time":93,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-15T06:44:16.743Z","updated_at":"2026-03-05T06:02:50.659Z","avatar_url":"https://github.com/maptalks.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# maptalks.tileclip\n\n[maptalks](https://github.com/maptalks/maptalks.js) TileLayer tiles merge/clip/transform etc tool\n\n* 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\n\n* 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)\n\n* 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)\n\n## Examples\n\n### Fetch Tile\n\n* [fetch tile](https://maptalks.github.io/maptalks.tileclip/demo/tile.html)\n* [fetch and merge tiles](https://maptalks.github.io/maptalks.tileclip/demo/tile-array.html)\n* [tiles filter by  mask(only load tiles in mask)](https://maptalks.github.io/maptalks.tileclip/demo/tile-mask-filter.html) \n* [fetch tile with canvas](https://maptalks.github.io/maptalks.tileclip/demo/tile-with-canvas.html) \n\n* [maxAvailableZoom](https://maptalks.github.io/maptalks.tileclip/demo/maxAvailableZoom.html)\n* [maxAvailableZoom tiles](https://maptalks.github.io/maptalks.tileclip/demo/maxAvailableZoom-array.html)\n* [maxAvailableZoom terrain](https://maptalks.github.io/maptalks.tileclip/demo/maxAvailableZoom-terrain.html)  \n* [maxAvailableZoom fetch by different](https://maptalks.github.io/maptalks.tileclip/demo/maxAvailableZoom-different.html)  \n* [maxAvailableZoom fetchParentTileOn404](https://maptalks.github.io/maptalks.tileclip/demo/maxAvailableZoom-fetchParentTileOn404.html)  \n\n* [layout tiles](https://maptalks.github.io/maptalks.tileclip/demo/layouttiles.html)  \n\n* [get tile from single image](https://maptalks.github.io/maptalks.tileclip/demo/imagetile.html)  \n\n* [big image slice](https://maptalks.github.io/maptalks.tileclip/demo/imageslicing.html)\n\n* [custom tile fetch error](https://maptalks.github.io/maptalks.tileclip/demo/tile-custom-error.html)\n\n* [vt tile](https://maptalks.github.io/maptalks.tileclip/demo/tile-vt.html)  \n* [vt tiles will merge mvt data](https://maptalks.github.io/maptalks.tileclip/demo/tile-vts.html)  \n* [vt tiles will merge mvt data and custom properties](https://maptalks.github.io/maptalks.tileclip/demo/tile-vts-customproperties.html) \n\n### Clip Tile\n\n* [clip by polygon](https://maptalks.github.io/maptalks.tileclip/demo/polygon-clip.html)\n* [clip by polygon with holes](https://maptalks.github.io/maptalks.tileclip/demo/polygon-hole-clip.html)\n* [clip by multipolygon](https://maptalks.github.io/maptalks.tileclip/demo/multipolygon-clip.html)\n* [clip by multipolygon with holes](https://maptalks.github.io/maptalks.tileclip/demo/multipolygon-hole-clip.html)\n* [clip reverse](https://maptalks.github.io/maptalks.tileclip/demo/polygon-clip-reverse.html) \n* [clip buffer](https://maptalks.github.io/maptalks.tileclip/demo/polygon-clip-buffer.html) \n\n* [maxAvailableZoom polygon clip](https://maptalks.github.io/maptalks.tileclip/demo/maxAvailableZoom-polygon-clip.html)\n* [maxAvailableZoom tiles polygon clip](https://maptalks.github.io/maptalks.tileclip/demo/maxAvailableZoom-polygon-clip-array.html)  \n\n* [update mask](https://maptalks.github.io/maptalks.tileclip/demo/update-mask.html)\n* [mask remove/add](https://maptalks.github.io/maptalks.tileclip/demo/polygon-clip-remve.html) \n\n* [get tile and clip from single image](https://maptalks.github.io/maptalks.tileclip/demo/imagetile-clip.html)  \n\n### Clip By Custom Prj\n\n* [EPSG:4326](https://maptalks.github.io/maptalks.tileclip/demo/4326.html)\n* [custom SpatialReference](https://maptalks.github.io/maptalks.tileclip/demo/custom-sp.html)\n* [identify projection](https://maptalks.github.io/maptalks.tileclip/demo/identify.html)\n* [EPSG:9807](https://maptalks.github.io/maptalks.tileclip/demo/epsg9807.html)\n\n### Rectify Tile  \n\n* [tilerectify-gcj02-wgs84](https://maptalks.org/maptalks.tileclip/demo/tilerectify-gcj02-wgs84.html)  \n* [tilerectify-wgs84-gcj02](https://maptalks.org/maptalks.tileclip/demo/tilerectify-wgs84-gcj02.html)  \n* [tilerectify-baidu-wgs84](https://maptalks.org/maptalks.tileclip/demo/tilerectify-baidu-wgs84.html)  \n* [tilerectify urltempalte is function](https://maptalks.org/maptalks.tileclip/demo/tilerectify-urltempalte-function.html)  \n\n### Reproject Tile\n\n* [Reproject EPSG4326 to EPSG3857](https://maptalks.github.io/maptalks.tileclip/demo/4326-transform-3857.html)\n* [Reproject EPSG3857 to EPSG4326](https://maptalks.github.io/maptalks.tileclip/demo/3857-transform-4326.html)\n\n### Terrain Encode\n\n* [mapzen terrain tile encode](https://maptalks.github.io/maptalks.tileclip/demo/terrain-mapzen.html)\n* [arcgis terrain tile encode](https://maptalks.github.io/maptalks.tileclip/demo/terrain-arcgis.html)\n* [qgis gray terrain tile encode](https://maptalks.github.io/maptalks.tileclip/demo/terrain-qgis-gray.html)\n* [terrain encode with colors](https://maptalks.github.io/maptalks.tileclip/demo/terrain-colors.html)\n* [color terrain tile](https://maptalks.github.io/maptalks.tileclip/demo/color-terrain-tile.html)\n\n### postProcessing\n\n* [flipY](https://maptalks.github.io/maptalks.tileclip/demo/tile-flipy.html)  \n* [css filter](https://maptalks.github.io/maptalks.tileclip/demo/cssfilter.html) \n* [tile opacity](https://maptalks.github.io/maptalks.tileclip/demo/tile-opacity.html) \n* [tile mosaic](https://maptalks.github.io/maptalks.tileclip/demo/tile-mosaic.html) \n* [tile old photo](https://maptalks.github.io/maptalks.tileclip/demo/tile-oldphoto.html)  \n* [tile invert color](https://maptalks.github.io/maptalks.tileclip/demo/tile-invertcolor.html)  \n* [gaussian Blur](https://maptalks.github.io/maptalks.tileclip/demo/gaussianBlurRadius.html)  \n* [tiles  globalCompositeOperation](https://maptalks.github.io/maptalks.tileclip/demo/tiles-globalCompositeOperation.html) \n* [get tile with mosaic ](https://maptalks.github.io/maptalks.tileclip/demo/imagetile-mosaic.html)  \n\n## Others\n\n* [water mark](https://maptalks.github.io/maptalks.tileclip/demo/watermark.html)\n* [underground by clip tile](https://maptalks.github.io/maptalks.tileclip/demo/underground.html)\n* [terrain-tiles-blendmode](https://maptalks.github.io/maptalks.tileclip/demo/terrain-tiles-blendmode.html)\n* [terrain-tiles-blendmode shadow](https://maptalks.github.io/maptalks.tileclip/demo/terrain-tiles-blendmode-shadow.html)\n* [leaflet clip demo](https://maptalks.github.io/maptalks.tileclip/demo/leaflet.html)\n* [leaflet gettile demo](https://maptalks.github.io/maptalks.tileclip/demo/leaflet-simple.html)\n* [leaflet reproject tile demo](https://maptalks.github.io/maptalks.tileclip/demo/leaflet-transform.html)  \n* [leaflet-imagetile-clip demo](https://maptalks.github.io/maptalks.tileclip/demo/leaflet-imagetile-clip.html)  \n* [maplibre reproject EPSG4326 to EPSG3857 demo](https://maptalks.github.io/maptalks.tileclip/demo/maplibre.html)  \n\n## Install\n\n### NPM\n\n```sh\nnpm i maptalks\n#or\n# npm i maptalks-gl\nnpm i maptalks.tileclip\n```\n\n## CDN\n\n```html\n\u003cscript type=\"text/javascript\" src=\"https://unpkg.com/maptalks-gl/dist/maptalks-gl.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/maptalks.tileclip/dist/maptalks.tileclip.js\"\u003e\u003c/script\u003e\n```\n\n## API\n\n### `getTileActor()`\n\nreturn `TileActor` instance\n\n```js\nimport {\n    getTileActor,\n    getBlankTile,\n    get404Tile,\n    getBlankVTTile\n} from 'maptalks.tileclip'\n\nconst tileActor = getTileActor();\n```\n\n### `TileActor` class\n\nTile clip worker interaction class. about [maptalks. Actor](https://github.com/maptalks/maptalks.js/blob/master/packages/map/src/core/worker/Actor.ts) details\n\n```js\nimport {\n    getTileActor\n} from 'maptalks.tileclip'\n\nconst tileActor = getTileActor();\n```\n\n#### Methods\n\n| method                                  | describe                                                            |\n| --------------------------------------- | ------------------------------------------------------------------- |\n| getTile(options)                        | Request tile support for batch and some processing                  |\n| getTileWithMaxZoom(options)             | Cutting tiles, automatically cutting beyond the maximum level limit |\n| layoutTiles(options)                    | Tile layout arrangement |\n| reProjectTile(options)                  | Tile reprojection                                                   |\n| rectifyTile(options)                    | Corrective tiles, only applicable to Chinese users                  |\n| rectifyBaiduTile(options)               | Corrective baidu tiles, only applicable to Chinese users                  |\n| injectMask(maskId, Polygon/MultiPolygon)| Inject geojson data for tile clipping service                       |\n| removeMask(maskId)                      | remove Inject geojson data                                          |\n| maskHasInjected(maskId)                 | Has the geojson data been injected                                  |\n| clipTile(options)                       | Crop tiles using injected geojson data                              |\n| tileIntersectMask(options)              | Does tile intersect with mask                            |\n| encodeTerrainTile(options)              | Encode other terrain tiles into mapbox terrain service format       |\n| colorTerrainTile(options)               | Terrain tile color matching      |\n| terrainTileFixBoundary(options)         | Reset the skirt edge of the terrain tile using neighbor tiles      |\n| imageSlicing(options)                   | Cut a large image into multiple small images                        |\n| injectImage(options)                    | inject image source for    getImageTile                  |\n| removeImage(imageId)                    | remove image source                     |\n| imageHasInjected(imageId)               | Has the image data been injected                         |\n| getImageTile(options)                   | get tile data from    injectImage                |\n| getVTTile(options)                      | get VT tile, support merge vt data  and custom prorperties          |\n\n#### Common Types\n\n```ts\n// postProcessing params\nexport type postProcessingOptionsType = {\n    flipY?:boolean;\n    filter?: string; //[CanvasRenderingContext2D.filter](https://mdn.org.cn/en-US/docs/Web/API/CanvasRenderingContext2D/filter)\n    opacity?: number;//tile opacity if need\n    gaussianBlurRadius?: number;// gaussian Blur Radius if need\n    mosaicSize?: number;//Mosaic pixel size \n    oldPhoto?: boolean;//Old photo effect\n    invertColor?:boolean;// invert Color\n}\n//fetch params \nexport type fetchOptionsType = {\n    referrer?: string;//fetch referrer\n    headers?: Record\u003cstring, string\u003e;// fetch headers params. if need\n    fetchOptions?: Record\u003cstring, any\u003e;//fetch options. if need, If it exists, headers will be ignored\n    timeout?: number;//fetch timeout if need\n    indexedDBCache?: boolean;//cache tile data by IndexedDB \n}\n\n// image reutrn result params\n//tile default return ImageBitMap\nexport type returnResultType = {\n    returnUint32Buffer?:boolean;//return to Unit32 ArrayBuffer \n    returnBlobURL?: boolean;// to return Blob URL by createObjectURL() When the blob URL is no longer in use, be sure to destroy its value revokeObjectURL() \n    returnBase64?: boolean;// return base64 \n    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\n}\n\n```\n\n#### Method Details \n\nall methods return Promise with `cancel()` method\n\n* `getTile(options)` get tile [ImageBitmap](https://developer.mozilla.org/zh-CN/docs/Web/API/ImageBitmap) by fetch in worker, return `Promise`\n  + `options.url`:tile url or tiles urls\n  + `...fetchOptionsType` fetchOptionsType params\n  + `...postProcessingOptionsType` postProcessingOptionsType params\n  + `...returnResultType` returnResultType params \n\n```js\ntileActor.getTile({\n    url: 'https://services.arcgisonline.com/ArcGIS/rest/services/Word_Imagery/MapServer/tile/12/1663/3425',\n    //or url:[ur1,ur2],\n    fetchOptions: {\n        referrer: document.location.href,\n        headers: {\n            ...\n        }\n        ...\n    },\n    oldPhoto: true,\n}).then(imagebitmap =\u003e {\n    consle.log(imagebitmap);\n}).catch(error =\u003e {\n    //do some things\n})\n\n//or if you want to cancel task\nconst promise = tileActor.getTile({\n    ...\n});\n//mock cancel fetch task\nsetTimeout(() =\u003e {\n    promise.cancel();\n}, 2000);\n\npromise.then((imagebitmap) =\u003e {\n\n}).catch(error =\u003e {\n    //do some things\n    console.error(error);\n})\n```\n\n* `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\n  + `options.x`:tile col\n  + `options.y`:tile row\n  + `options.z`:tile zoom\n  + `options.maxAvailableZoom`:tile The maximum visible level, such as 18\n  + `options.urlTemplate`:tile urlTemplate.https://services.arcgisonline.com/ArcGIS/rest/services/Word_Imagery/MapServer/tile/{z}/{y}/{x} or tiles urlTemplates\n  + `options?.subdomains`:subdomains, such as [1, 2, 3, 4, 5]\n  + `options?.tms`  \n  + `options?.fetchParentTileOn404`  404 will continuously request tiles from the parent node \n  + `...fetchOptionsType` fetchOptionsType params \n  + `...postProcessingOptionsType` postProcessingOptionsType params\n  + `...returnResultType` returnResultType params \n\n```js\nconst {\n    x,\n    y,\n    z\n} = tile;\nconst urlTemplate = baseLayer.options.urlTemplate;\nconst maxAvailableZoom = 18;\n\ntileActor.getTileWithMaxZoom({\n    x,\n    y,\n    z,\n    urlTemplate,\n    //or urlTemplate:[urlTemplate1,urlTemplate2],\n    maxAvailableZoom,\n    fetchOptions: {\n        referrer: document.location.href,\n        headers: {\n            ...\n        }\n        ...\n    }\n}).then(imagebitmap =\u003e {\n    consle.log(imagebitmap);\n}).catch(error =\u003e {\n    //do some things\n})\n\n//or if you want to cancel task\nconst promise = tileActor.getTileWithMaxZoom({\n    ...\n});\n//mock cancel fetch task\nsetTimeout(() =\u003e {\n    promise.cancel();\n}, 2000);\n\npromise.then((imagebitmap) =\u003e {\n\n}).catch(error =\u003e {\n    //do some things\n    console.error(error);\n})\n```\n\n* `layoutTile(options)` layout tiles [ImageBitmap](https://developer.mozilla.org/zh-CN/docs/Web/API/ImageBitmap) by fetch in worker, return `Promise` .\n  + `options.urlTemplate` :tile urlTemplate.https://services.arcgisonline.com/ArcGIS/rest/services/Word_Imagery/MapServer/tile/{z}/{y}/{x}\n  + `options.tiles` : tile Data set\n  + `options?.subdomains` :subdomains, such as [1, 2, 3, 4, 5]\n  + `...fetchOptionsType` fetchOptionsType params\n  + `...postProcessingOptionsType` postProcessingOptionsType params\n  + `...returnResultType` returnResultType params \n\n```js\nconst {\n    x,\n    y,\n    z\n} = tile;\nconst urlTemplate = baseLayer.options.urlTemplate;\n\ntileActor.layoutTiles({\n\n    urlTemplate,\n    tiles: [\n        [x, y, z],\n        [x + 1, y, z],\n        [x, y + 1, z],\n        [x + 1, y + 1, z]\n\n    ]\n    fetchOptions: {\n        referrer: document.location.href,\n        headers: {\n            ...\n        }\n        ...\n    }\n}).then(imagebitmap =\u003e {\n    consle.log(imagebitmap);\n}).catch(error =\u003e {\n    //do some things\n})\n\n//or if you want to cancel task\nconst promise = tileActor.layoutTiles({\n    ...\n});\n//mock cancel fetch task\nsetTimeout(() =\u003e {\n    promise.cancel();\n}, 2000);\n\npromise.then((imagebitmap) =\u003e {\n\n}).catch(error =\u003e {\n    //do some things\n    console.error(error);\n})\n```\n\n* `reProjectTile(options)` Reprojection tile in worker, return `Promise`\n  + `options.x`:tile col\n  + `options.y`:tile row\n  + `options.z`:tile zoom\n  + `options.projection`: Projection code, only support `EPSG:4326`,                                                            `EPSG:3857`. Note that only global standard pyramid slicing is supported\n  + `options.maxAvailableZoom`:tile The maximum visible level, such as 18\n  + `options.urlTemplate`:tile urlTemplate.https://services.arcgisonline.com/ArcGIS/rest/services/Word_Imagery/MapServer/tile/{z}/{y}/{x} or tiles urlTemplates\n  + `options?.subdomains`:subdomains, such as [1, 2, 3, 4, 5]\n  + `options?.isGCJ02`: Is it the isGCJ02 coordinate system\n  + `options?.errorLog`: Is there a printing error\n  + `...fetchOptionsType` fetchOptionsType params\n  + `...postProcessingOptionsType` postProcessingOptionsType params\n  + `...returnResultType` returnResultType params \n\n```js\nconst {\n    x,\n    y,\n    z\n} = tile;\nconst maxAvailableZoom = 18;\ntileActor.reProjectTile({\n    x,\n    y,\n    z,\n    urlTemplate,\n    projection: 'EPSG:4326',\n    maxAvailableZoom: 18,\n}).then(imagebitmap =\u003e {\n    callback(imagebitmap);\n}).catch(error =\u003e {\n    //do some things\n    console.error(error);\n})\n\n//or if you want to cancel task\nconst promise = tileActor.reProjectTile({\n    ...\n});\n//mock cancel fetch task\nsetTimeout(() =\u003e {\n    promise.cancel();\n}, 2000);\n\npromise.then((imagebitmap) =\u003e {\n\n}).catch(error =\u003e {\n    //do some things\n    console.error(error);\n})\n```\n\n* `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\n  + `options.x`:tile col\n  + `options.y`:tile row\n  + `options.z`:tile zoom\n  + `options.maxAvailableZoom`:tile The maximum visible level, such as 18\n  + `options.urlTemplate`:tile urlTemplate.https://services.arcgisonline.com/ArcGIS/rest/services/Word_Imagery/MapServer/tile/{z}/{y}/{x} or tiles urlTemplates \n  + `options.projection`: 'EPSG:4326' | 'EPSG:3857'; \n  + `options.tileBBOX`:tile BBOX `[minx,miny,maxx,maxy]`\n  + `options.transform`: 'WGS84-GCJ02' | 'GCJ02-WGS84', \n  + `options.tileSize`: tile size \n  + `options?.subdomains`:subdomains, such as [1, 2, 3, 4, 5]\n  + `...fetchOptionsType` fetchOptionsType params\n  + `...postProcessingOptionsType` postProcessingOptionsType params\n  + `...returnResultType` returnResultType params \n\n```js\n  baseLayer.on('renderercreate', function(e) {\n      //load tile image\n      //   img(Image): an Image object\n      //   url(String): the url of the tile\n      e.renderer.loadTileBitmap = function(url, tile, callback) {\n          // console.log(tile);\n          const {\n              x,\n              y,\n              z\n          } = tile;\n          const urlTemplate = baseLayer.options.urlTemplate;\n          const maxAvailableZoom = 18;\n          tileActor.rectifyTile({\n              x,\n              y,\n              z,\n              urlTemplate,\n              maxAvailableZoom,\n              tileBBOX: baseLayer._getTileBBox(tile),\n              projection: baseLayer.getProjection().code,\n              tileSize: baseLayer.getTileSize().width,\n              transform: 'GCJ02-WGS84',\n              mapZoom: map.getZoom()\n          }).then(imagebitmap =\u003e {\n              callback(imagebitmap);\n          }).catch(error =\u003e {\n              //do some things\n              console.error(error);\n          })\n      };\n  });\n```\n\n* `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\n  + `options.x`:tile col\n  + `options.y`:tile row\n  + `options.z`:tile zoom\n  + `options.maxAvailableZoom`:tile The maximum visible level, such as 18\n  + `options.urlTemplate`:tile urlTemplate.https://services.arcgisonline.com/ArcGIS/rest/services/Word_Imagery/MapServer/tile/{z}/{y}/{x} or tiles urlTemplates \n  + `options.tileBBOX`:tile BBOX `[minx,miny,maxx,maxy]`\n  + `options.transform`:  'BAIDU-WGS84' | 'BAIDU-GCJ02', \n  + `options.tileSize`: tile size \n  + `options?.subdomains`:subdomains, such as [1, 2, 3, 4, 5]\n  + `...fetchOptionsType` fetchOptionsType params\n  + `...postProcessingOptionsType` postProcessingOptionsType params\n  + `...returnResultType` returnResultType params \n\n```js\n  baseLayer.on('renderercreate', function(e) {\n      //load tile image\n      //   img(Image): an Image object\n      //   url(String): the url of the tile\n      e.renderer.loadTileBitmap = function(url, tile, callback) {\n          // console.log(tile);\n          const {\n              x,\n              y,\n              z\n          } = tile;\n          const urlTemplate = baseLayer.options.urlTemplate;\n          const maxAvailableZoom = 18;\n          tileActor.rectifyBaiduTile({\n              x,\n              y,\n              z,\n              urlTemplate,\n              maxAvailableZoom,\n              tileBBOX: baseLayer._getTileBBox(tile),\n              tileSize: baseLayer.getTileSize().width,\n              transform: 'BAIDU-WGS84',\n              mapZoom: map.getZoom()\n          }).then(imagebitmap =\u003e {\n              callback(imagebitmap);\n          }).catch(error =\u003e {\n              //do some things\n              console.error(error);\n          })\n      };\n  });\n```\n\n* `injectMask(maskId,Polygon/MultiPolygon)` inject Mask(GeoJSON. Polygon) for clip tiles . return `Promise`\n\n  + `maskId`: mask id, Cache mask data in the worker\n  + `Polygon/MultiPolygon` GeoJSON Polygon/MultiPolygon [GeoJSON SPEC](https://datatracker.ietf.org/doc/html/rfc7946#section-3.1.6)\n\n```js\nconst maskId = 'china';\n\nconst polygon = {\n    \"type\": \"Feature\",\n    \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": []\n    }\n}\n\ntileActor.injectMask(maskId, polygon).then(data =\u003e {\n    // baseLayer.addTo(map);\n}).catch(error =\u003e {\n    console.error(error);\n})\n```\n\n* `removeMask(maskId)` remove Mask from cache . return `Promise`\n\n  + `maskId`: mask id\n\n```js\nconst maskId = 'china';\n\ntileActor.removeMask(maskId).then(data =\u003e {\n\n}).catch(error =\u003e {\n    console.error(error);\n})\n```\n\n* `maskHasInjected(maskId)` Has the mask been injected . return `Boolean`\n\n  + `maskId`: mask id\n\n```js\nconst maskId = 'china';\nconst result = tileActor.maskHasInjected(maskId);\n```\n\n* `clipTile(options)` clip tile by mask . return `Promise`\n  + `options.tile`:tile [ImageBitmap](https://developer.mozilla.org/zh-CN/docs/Web/API/ImageBitmap)  data or http url\n  + `options.tileBBOX`:tile BBOX `[minx,miny,maxx,maxy]`\n  + `options.projection`: Projection code, such as : EPSG:3857\n  + `options.maskId`:mask key\n  + `options?.tileSize`:tile size \n  + `options?.reverse`:whether or not clip reverse \n  + `options?.bufferSize`: Buffer contour pixel size\n  + `...returnResultType` returnResultType params \n\n```js\nimport * as maptalks from 'maptalks-gl';\nimport {\n    getTileActor\n} from 'maptalks.tileclip';\n\nconst tileActor = getTileActor();\nconst maskId = 'china';\n\nconst baseLayer = new maptalks.TileLayer('base', {\n    debug: true,\n    urlTemplate: '/arcgisonline/rest/services/Word_Imagery/MapServer/tile/{z}/{y}/{x}',\n    subdomains: [\"a\", \"b\", \"c\", \"d\"],\n    // bufferPixel: 1\n})\n\nbaseLayer.on('renderercreate', function(e) {\n    //load tile image\n    //   img(Image): an Image object\n    //   url(String): the url of the tile\n    e.renderer.loadTileBitmap = function(url, tile, callback) {\n        //get Tile data\n        tileActor.getTile({\n            url: maptalks.Util.getAbsoluteURL(url)\n        }).then(imagebitmap =\u003e {\n\n            //clip tile\n            tileActor.clipTile({\n                tile: imagebitmap,\n                tileBBOX: baseLayer._getTileBBox(tile),\n                projection: baseLayer.getProjection().code,\n                tileSize: baseLayer.getTileSize().width,\n                maskId,\n            }).then(image =\u003e {\n                callback(image);\n            }).catch(error =\u003e {\n                //do some things\n                console.error(error);\n            })\n        }).catch(error =\u003e {\n            //do some things\n            console.error(error);\n        })\n    };\n});\n\nconst polygon = {\n    \"type\": \"Feature\",\n    \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": []\n    }\n}\n\ntileActor.injectMask(maskId, polygon).then(data =\u003e {\n    baseLayer.addTo(map);\n}).catch(error =\u003e {\n    console.error(error);\n})\n```\n\n* `tileIntersectMask(options)` Does tile intersect with mask  . return `Promise`\n\n  + `options.tileBBOX`:tile BBOX `[minx,miny,maxx,maxy]`\n  + `options.maskId`:mask key\n\n```js\nimport * as maptalks from 'maptalks-gl';\nimport {\n    getTileActor\n} from 'maptalks.tileclip';\n\nconst tileActor = getTileActor();\nconst maskId = 'china';\n\nconst baseLayer = new maptalks.TileLayer('base', {\n    debug: true,\n    urlTemplate: '/arcgisonline/rest/services/Word_Imagery/MapServer/tile/{z}/{y}/{x}',\n    subdomains: [\"a\", \"b\", \"c\", \"d\"],\n    // bufferPixel: 1\n})\n\nbaseLayer.on('renderercreate', function(e) {\n    //load tile image\n    //   img(Image): an Image object\n    //   url(String): the url of the tile\n    e.renderer.loadTileBitmap = function(url, tile, callback) {\n        const tileBBOX = baseLayer._getTileBBox(tile);\n        const blankTile = () =\u003e {\n            callback(maptalks.getBlankTile())\n        }\n        tileActor.tileIntersectMask({\n            tileBBOX,\n            maskId\n        }).then(result =\u003e {\n            // callback(result);\n            const {\n                intersect\n            } = result;\n            if (intersect) {\n                tileActor.getTile({\n                    url: maptalks.Util.getAbsoluteURL(url)\n                }).then(imagebitmap =\u003e {\n                    callback(imagebitmap);\n                }).catch(error =\u003e {\n                    //do some things\n                    console.error(error);\n                    blankTile();\n                })\n            } else {\n                blankTile();\n            }\n        }).catch(error =\u003e {\n            //do some things\n            console.error(error);\n            blankTile();\n        })\n    };\n});\n\nconst polygon = {\n    \"type\": \"Feature\",\n    \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": []\n    }\n}\n\ntileActor.injectMask(maskId, polygon).then(data =\u003e {\n    baseLayer.addTo(map);\n}).catch(error =\u003e {\n    console.error(error);\n})\n```\n\n* `encodeTerrainTile(options)` transform other terrain tile to mapbox terrain rgb tile  by fetch in worker, return `Promise`\n  + `options.url`:tile url\n  + `options.terrainType`:'mapzen' | 'tianditu' | 'cesium'|'arcgs'|'qgis-gray'\n  + `options?.terrainWidth` default is 65\n  + `options?.minHeight` min height when terrainType is 'qgis-gray'\n  + `options?.maxHeight` max height when terrainType is 'qgis-gray'\n  + `options?.tileSize` default value is 256\n  + `options?.terrainColors` Colored terrain tiles. Color interpolation based on altitude\n  + `...fetchOptionsType` fetchOptionsType params\n  + `...returnResultType` returnResultType params \n\n```js\n  baseLayer.on('renderercreate', function(e) {\n      //load tile image\n      //   img(Image): an Image object\n      //   url(String): the url of the tile\n      e.renderer.loadTileBitmap = function(url, tile, callback) {\n          //transform mapzen terrain tile to mapbox terrain rgb tile\n          tileActor.encodeTerrainTile({\n              url: maptalks.Util.getAbsoluteURL(url),\n              terrainType: 'mapzen',\n              // timeout: 5000\n          }).then(imagebitmap =\u003e {\n              callback(imagebitmap)\n\n          }).catch(error =\u003e {\n              //do some things\n              console.error(error);\n          })\n      };\n  });\n```\n\n* `colorTerrainTile(options)` Terrain tile color matching, return `Promise`\n  + `options.tile`:tile data, is ImageBitMap or http url\n  + `options.colors`: Color Mapping Table\n  + `...postProcessingOptionsType` postProcessingOptionsType params\n  + `...returnResultType` returnResultType params \n\n```js\n   const colors = [\n       [0, \"#4B2991\"],\n       [176, \"#872CA2\"],\n       [353, \"#C0369D\"],\n       [530, \"#EA4F88\"],\n       [706, \"#FA7876\"],\n       [883, \"#F6A97A\"],\n       [1060, \"#EDD9A3\"],\n       [1236, \"#EDD9A3\"],\n       [1413, \"#ffffff\"],\n       [1590, \"#ffffff\"]\n   ]\n\n   baseLayer.on('renderercreate', function(e) {\n       //load tile image\n       //   img(Image): an Image object\n       //   url(String): the url of the tile\n       e.renderer.loadTileBitmap = function(url, tile, callback) {\n           tileActor.getTile({\n               url: maptalks.Util.getAbsoluteURL(url)\n           }).then(imagebitmap =\u003e {\n               tileActor.colorTerrainTile({\n                   tile: imagebitmap,\n                   colors\n               }).then(image =\u003e {\n                   callback(image);\n               }).catch(error =\u003e {\n                   console.error(error);\n               })\n           }).catch(error =\u003e {\n               //do some things\n               // console.error(error);\n               callback(maptalks.get404Tile())\n           })\n       };\n   });\n```\n\n* `terrainTileFixBoundary(options)` Reset the skirt edge of the terrain tile using neighbor tiles , return `Promise`\n  + `options.tiles`:tiles collection \n  + `...returnResultType` returnResultType params \n\n```js\nconst tile = {\n    x,\n    y,\n    z,\n    image: ...\n};\nconst tileRight = {\n    x: x + 1,\n    y,\n    z: image: ...\n}\nconst tileBottom = {\n    x,\n    y: y + 1,\n    z,\n    image: ...\n}\ntileActor.terrainTileFixBoundary({\n    tiles: [tile, tileRight, tileBottom],\n    returnUint32Buffer: true\n}).then(imagebitmap =\u003e {\n\n}).catch(error =\u003e {\n    //do some things\n    // console.error(error);\n    callback(maptalks.get404Tile())\n})\n```\n\n* `imageSlicing(options)` slice big image  in worker, return `Promise`\n  + `options.url`:image url or images urls\n  + `...fetchOptionsType` fetchOptionsType params\n  + `...postProcessingOptionsType` postProcessingOptions params\n  + `...returnResultType` returnResultType params \n\n```js\ntileActor.imageSlicing({\n\n    url: './big.png',\n    //or url:[ur1,ur2],\n    fetchOptions: {\n        referrer: document.location.href,\n        headers: {\n            ...\n        }\n        ...\n    }\n\n}).then(result =\u003e {\n\n    consle.log(result);\n\n}).catch(error =\u003e {\n\n    //do some things\n\n})\n```\n\n* `injectImage(options)` inject Image for getImageTile . return `Promise`\n\n  + `options.url`:image url\n  + `options.imageBBOX`:image BBOX  `[minx,miny,maxx,maxy]`. Note that the coordinates of the bounding box should be consistent with the projected image\n  + `options.imageId`:image url\n  + `...fetchOptionsType` fetchOptionsType params\n\n```js\nconst imageId = 'china';\n\ntileActor.injectImage({\n    imageId,\n    url: './test.jpg',\n    imageBBOX: [120, 31, 121, 32]\n}).then(data =\u003e {\n    // baseLayer.addTo(map);\n}).catch(error =\u003e {\n    console.error(error);\n})\n```\n\n* `removeImage(imageId)` remove image from cache . return `Promise`\n\n  + `imageId`: image id\n\n```js\nconst imageId = 'china';\n\ntileActor.removeImage(maskId).then(data =\u003e {\n\n}).catch(error =\u003e {\n    console.error(error);\n})\n```\n\n* `imageHasInjected(imageId)` Has the image been injected . return `Boolean`\n\n  + `imageId`: image id\n\n```js\nconst imageId = 'china';\nconst result = tileActor.imageHasInjected(maskId);\n```\n\n* `getImageTile(options)` get tile data from image . return `Promise`\n  + `options.tileBBOX`:tile BBOX `[minx,miny,maxx,maxy]`\n  + `options.projection`: Projection code, such as : EPSG:3857\n  + `options.imageId`:mask key\n  + `options?.tileSize`:tile size \n  + `...postProcessingOptionsType` postProcessingOptionsType params\n  + `...returnResultType` returnResultType params \n  \n\n```js\nimport * as maptalks from 'maptalks-gl';\nimport {\n    getTileActor\n} from 'maptalks.tileclip';\n\nconst tileActor = getTileActor();\nconst imageId = 'china';\n\nconst baseLayer = new maptalks.TileLayer('base', {\n    debug: true,\n    urlTemplate: '/arcgisonline/rest/services/Word_Imagery/MapServer/tile/{z}/{y}/{x}',\n    subdomains: [\"a\", \"b\", \"c\", \"d\"],\n    // bufferPixel: 1\n})\nbaseLayer.on('renderercreate', function(e) {\n    //load tile image\n    //   img(Image): an Image object\n    //   url(String): the url of the tile\n    e.renderer.loadTileBitmap = function(url, tile, callback) {\n\n        tileActor.getImageTile({\n            imageId,\n            projection: baseLayer.getProjection().code,\n            tileSize: baseLayer.getTileSize().width,\n            tileBBOX: baseLayer._getTileBBox(tile),\n        }).then(imagebitmap =\u003e {\n            // console.log(imagebitmap);\n            callback(imagebitmap);\n        }).catch(error =\u003e {\n            //do some things\n            console.error(error);\n        })\n    };\n});\n\ntileActor.injectImage({\n    imageId,\n    url: './unnamed.jpg',\n    imageBBOX: [...m1, ...m2]\n}).then(data =\u003e {\n    baseLayer.addTo(groupLayer);\n}).catch(error =\u003e {\n    console.error(error);\n})\n```\n\n* `getVTTile(options)` get vt tile arraybuffer by fetch in worker, return `Promise`\n  + `options.url`:tile url or tiles urls  \n  + `options?.customProperties`:custom features properties `function`\n\n```js\n  customProperties: (layerName, layer, feature, featureIndex) =\u003e {\n      feature.properties = feature.properties || {};\n      if (layerName === 'suzhou_area') {\n          feature.properties.name1 = 'hello'\n      }\n      if (layerName === 'suzhou_line') {\n          feature.properties.name1 = 'world'\n      }\n  },\n```\n\n  + `...fetchOptionsType` fetchOptionsType params\n\n```js\nconst layer = new maptalks.VectorTileLayer(\"geo\", {\n    style,\n    debugTileData: true,\n    version: 1,\n    // urlTemplate: './../assets/data/suzhou_line/{z}/{x}/{y}.pbf'\n    urlTemplate: 'xxx'\n});\n\nconst roadTileUrl = 'xxx';\n\nlayer.on('renderercreate', function(e) {\n    e.renderer.loadTileArrayBuffer = function(url, tile, callback, options) {\n        console.log(options.command);\n        const {\n            x,\n            y,\n            z\n        } = tile;\n        const url1 = roadTileUrl.replace(\"{x}\", x).replace('{y}', y).replace('{z}', z);\n        tileActor.getVTTile({\n            //will merge mvt data\n            url: [url, url1],\n            customProperties: (layerName, layer, feature, featureIndex) =\u003e {\n                feature.properties = feature.properties || {};\n                if (layerName === 'suzhou_area') {\n                    feature.properties.name1 = 'hello'\n                }\n                if (layerName === 'suzhou_line') {\n                    feature.properties.name1 = 'world'\n                }\n            },\n            indexedDBCache: true\n        }).then(buffer =\u003e {\n            callback(null, buffer);\n\n        }).catch(error =\u003e {\n            console.log(error);\n            callback(error);\n        })\n    };\n});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaptalks%2Fmaptalks.tileclip","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaptalks%2Fmaptalks.tileclip","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaptalks%2Fmaptalks.tileclip/lists"}