maptalks.tileclip

maptalks TileLayer tiles merge/clip/transform tool

• This plugin requires the runtime environment to support OffscreenCanvas. Pay attention to relevant compatibility

• Considering performance, all operations are completed within the web worker

• If you are familiar with other map engines, you can also apply them to other map engines leaflet demo

Examples

Common

• simple get tile

• merge tiles

• tiles filter by geojson mask

• css filter

• clip by polygon

• clip by polygon with holes

• clip by multipolygon

• clip by multipolygon with holes

• clip reverse

• tiles globalCompositeOperation

• maxAvailableZoom

• maxAvailableZoom tiles

• maxAvailableZoom polygon clip

• maxAvailableZoom tiles polygon clip

• update mask

• mask remove or add

• gaussian Blur

• layout tiles

• big image slice

• custom tile error

Clip By Custom Prj

• EPSG:4326
• custom SpatialReference
• identify projection
• EPSG:9807

Transform Tile

• transform EPSG4326 to EPSG3857
• transform EPSG3857 to EPSG4326

Terrain Encode

• mapzen terrain tile encode
• arcgis terrain tile encode
• qgis gray terrain tile encode
• terrain encode with colors
• color terrain tile

Others

• water mark
• underground by clip tile
• terrain-tiles-blendmode
• leaflet clip demo
• leaflet gettile demo
• leaflet transform tile demo

Install

NPM

npm i maptalks
#or
# npm i maptalks-gl
npm i maptalks.tileclip

CDN

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/maptalks-gl/dist/maptalks-gl.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/maptalks.tileclip/dist/maptalks.tileclip.js"></script>

API

getTileActor()

return TileActor instance

import {
    getTileActor
} from 'maptalks.tileclip'

const tileActor = getTileActor();

TileActor class

Tile clip worker interaction class. about maptalks. Actor details

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
transformTile(options)	Tile reprojection
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
encodeTerrainTile(options)	Encode other terrain tiles into mapbox terrain service format
colorTerrainTile(options)	Terrain tile color matching
imageSlicing(options)	Cut a large image into multiple small images

all methods return Promise with cancel() method

• getTile(options) get tile ImageBitmap by fetch in worker, return Promise
  • options.url:tile url or tiles urls
  • options?.filter:CanvasRenderingContext2D.filter
  • options?.headers:fetch headers params. if need
  • options?.fetchOptions:fetch options. if need, If it exists, headers will be ignored
  • options?.timeout: fetch timeout
  • options?.opacity: tile opacity if need
  • options?.gaussianBlurRadius: gaussian Blur Radius if need
  • options?.globalCompositeOperation: CanvasRenderingContext2D.globalCompositeOperation
  • options?.returnBlobURL: to return Blob URL by createObjectURL() ? When the blob URL is no longer in use, be sure to destroy its value revokeObjectURL()

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: {
            ...
        }
        ...
    }
}).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 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?.filter:CanvasRenderingContext2D.filter
  • options?.headers:fetch headers params. if need
  • options?.fetchOptions:fetch options. if need, If it exists, headers will be ignored
  • options?.timeout: fetch timeout
  • options?.opacity: tile opacity if need
  • options?.gaussianBlurRadius: gaussian Blur Radius if need
  • options?.globalCompositeOperation: CanvasRenderingContext2D.globalCompositeOperation
  • options?.returnBlobURL: to return Blob URL by createObjectURL() ? When the blob URL is no longer in use, be sure to destroy its value revokeObjectURL()

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 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]
  • options?.filter:CanvasRenderingContext2D.filter
  • options?.headers:fetch headers params. if need
  • options?.fetchOptions:fetch options. if need, If it exists, headers will be ignored
  • options?.timeout: fetch timeout
  • options?.opacity: tile opacity if need
  • options?.gaussianBlurRadius: gaussian Blur Radius if need
  • options?.returnBlobURL: to return Blob URL by createObjectURL() ? When the blob URL is no longer in use, be sure to destroy its value revokeObjectURL()

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);
})

• transformTile(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?.errorog: Is there a printing error
  • options?.filter:CanvasRenderingContext2D.filter
  • options?.headers:fetch headers params. if need
  • options?.fetchOptions:fetch options. if need, If it exists, headers will be ignored
  • options?.timeout: fetch timeout
  • options?.opacity: tile opacity if need
  • options?.gaussianBlurRadius: gaussian Blur Radius if need
  • options?.globalCompositeOperation: CanvasRenderingContext2D.globalCompositeOperation
  • options?.returnBlobURL: to return Blob URL by createObjectURL() ? When the blob URL is no longer in use, be sure to destroy its value revokeObjectURL()

const {
    x,
    y,
    z
} = tile;
const maxAvailableZoom = 18;
tileActor.transformTile({
    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.transformTile({
    ...
});
//mock cancel fetch task
setTimeout(() => {
    promise.cancel();
}, 2000);

promise.then((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

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

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

const maskId = 'china';
const result = tileActor.maskHasInjected(maskId);

• clipTile(options) clip tile by mask . return Promise
  • options.tile:tile ImageBitmap data
  • options.tileBBOX:tile BBOX [minx,miny,maxx,maxy]
  • options.projection: Projection code, such as : EPSG:3857
  • options.tileSize:tile size
  • options.maskId:mask key
  • options.reverse:whether or not clip reverse
  • options?.returnBlobURL: to return Blob URL by createObjectURL() ? When the blob URL is no longer in use, be sure to destroy its value revokeObjectURL()

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);
})

• 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
  • options?.headers:fetch headers params. if need
  • options?.fetchOptions:fetch options. if need, If it exists, headers will be ignored
  • options?.timeout: fetch timeout
  • options?.returnBlobURL: to return Blob URL by createObjectURL() ? When the blob URL is no longer in use, be sure to destroy its value revokeObjectURL()

  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
  • options.colors: Color Mapping Table
  • options?.filter:CanvasRenderingContext2D.filter
  • options?.opacity: tile opacity if need
  • options?.gaussianBlurRadius: gaussian Blur Radius if need
  • options?.returnBlobURL: to return Blob URL by createObjectURL() ? When the blob URL is no longer in use, be sure to destroy its value revokeObjectURL()

   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())
           })
       };
   });

• imageSlicing(options) slice big image in worker, return Promise
  • options.url:image url or images urls
  • options?.filter:CanvasRenderingContext2D.filter
  • options?.headers:fetch headers params. if need
  • options?.fetchOptions:fetch options. if need, If it exists, headers will be ignored
  • options?.timeout: fetch timeout
  • options?.opacity: tile opacity if need
  • options?.gaussianBlurRadius: gaussian Blur Radius if need
  • options?.returnBlobURL: to return Blob URL by createObjectURL() ? When the blob URL is no longer in use, be sure to destroy its value revokeObjectURL()

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

})