maptalks.tileclip
v0.21.0
Published
[maptalks](https://github.com/maptalks/maptalks.js) TileLayer tiles merge and clip tool
Downloads
242
Readme
maptalks.tileclip
maptalks TileLayer tiles merge and clip 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
- simple get tile
- simple get tiles
- 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
- mask remove or add
- identify projection
- water mark
- maxAvailableZoom
- maxAvailableZoom tiles
- maxAvailableZoom polygon clip
- maxAvailableZoom tiles polygon clip
- underground by clip tile
- 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, returnPromise
options.url
:tile url orl tiles urlsoptions.filter
:CanvasRenderingContext2D.filteroptions.headers
:fetch headers params. if needoptions.fetchOptions
:fetch options. if need, If it exists, headers will be ignoredoptions.opacity
: tile opacity if need
tileActor.getTile({
url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_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
})
getTileWithMaxZoom(options)
get tile ImageBitmap by fetch in worker, returnPromise
. When the level exceeds the maximum level, tiles will be automatically cutoptions.x
:tile coloptions.y
:tile rowoptions.z
:tile zoomoptions.maxAvailableZoom
:tile The maximum visible level, such as 18options.urlTemplate
:tile urlTemplate.https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x} or tiles urlTemplatesoptions.filter
:CanvasRenderingContext2D.filteroptions.headers
:fetch headers params. if needoptions.fetchOptions
:fetch options. if need, If it exists, headers will be ignoredoptions.opacity
: tile opacity if need
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
})
injectMask(maskId,Polygon/MultiPolygon)
inject Mask(GeoJSON. Polygon) for clip tiles . returnPromise
maskId
: mask id, Cache mask data in the workerPolygon/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 . returnPromise
maskId
: mask id
const maskId = 'china';
tileActor.removeMask(maskId).then(data => {
}).catch(error => {
console.error(error);
})
maskHasInjected(maskId)
Has the mask been injected . returnBoolean
maskId
: mask id
const maskId = 'china';
const result = tileActor.maskHasInjected(maskId);
clipTile(options)
clip tile by mask . returnPromise
options.tile
:tile ImageBitmap dataoptions.tileBBOX
:tile BBOX[minx,miny,maxx,maxy]
options.projection
: Projection code, such as : EPSG:3857options.tileSize
:tile sizeoptions.maskId
:mask keyoptions.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/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);
})