openlayers实现图层裁剪,只展示关心区域,抹掉无关区域,“抠”地图
先给大家看一下效果:
很久没有用ol了,今天突发奇想,想完成一下在ol中如何实现图层裁剪,抹掉消除非关心区域的地图的操作。过去写了有关于遮罩和掩膜的教程,现在看来好像有点低级,不足以满足需求,于是我们重新来做一下。
首先要知道ol官方是支持canvas参数传递的,就是说我们在写到比较核心的部分需要用到canvas的时候可以直接调用到context对象的。我们顺着这个思路,只需要使用ctx.clip( )这个关键的方法即可完成需求。
通常我们需要裁剪的图层都是栅格图层,比如说最经常用到的天地图。
在这里我们就以天地图为例子来演示一下如何实现裁剪。
首先第一步还是添加天地图:
const token = "你的天地图token";
let rasterLayer = new TileLayer({
source: new XYZ({
url:
"https://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l