maptalks.tileclip

maptalks TileLayer clip tool

• This plugin requires the runtime environment to support OffscreenCanvas

• 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

• simple get tile
• get tile with filter
• clip by polygon
• clip by polygon with holes
• clip by multipolygon
• clip by multipolygon with holes
• EPSG:4326
• custom SpatialReference
• update mask
• identify projection
• water mark
• maxAvailableZoom
• maxAvailableZoom polygon clip
• leaflet 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

• getTile(options) get tile ImageBitmap by fetch in worker, return Promise
  • options.url:tile url
  • options.filter:CanvasRenderingContext2D.filter
  • options.headers:fetch headers params. if need
  • options.fetchOptions:fetch options. if need,If it exists, headers will be ignored

tileActor.getTile({
    url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/12/1663/3425',
    fetchOptions: {
        referrer: document.location.href,
        headers: {
            ...
        }
        ...
    }
}).then(imagebitmap => {
    consle.log(imagebitmap);
}).catch(error => {
    //do some things
})

• 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/World_Imagery/MapServer/tile/{z}/{y}/{x}
  • options.filter:CanvasRenderingContext2D.filter
  • options.headers:fetch headers params. if need
  • options.fetchOptions:fetch options. if need,If it exists, headers will be ignored

const {
    x,
    y,
    z
} = tile;
const urlTemplate = baseLayer.options.urlTemplate;
const maxAvailableZoom = 18;

tileActor.getTileWithMaxZoom({
    x,
    y,
    z,
    urlTemplate,
    maxAvailableZoom,
    fetchOptions: {
        referrer: document.location.href,
        headers: {
            ...
        }
        ...
    }
}).then(imagebitmap => {
    consle.log(imagebitmap);
}).catch(error => {
    //do some things
})

• 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.returnBlobURL: Do you want 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/World_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);
})