openlayers：实现查看一个图层的一部分覆盖在另一个图层上(附完整源码）

openlayers：实现查看一个图层的一部分覆盖在另一个图层上

main.js

index.html

package.json

层渲染可以在prerender和postrender事件监听器中操作。这些侦听器获取一个引用Canvas渲染上下文的事件。在这个例子中，prerender监听器在最近的鼠标位置周围设置了一个剪切蒙版，为您提供了一个望远镜效果，用于查看一个层在另一个层上。

在地图上移动以查看效果。 使用↑向上和↓向下箭头键调整望远镜大小。

main.js

import Map from 'ol/Map.js';

import TileLayer from 'ol/layer/Tile.js';

import View from 'ol/View.js';

import XYZ from 'ol/source/XYZ.js';

import {fromLonLat} from 'ol/proj.js';

import {getRenderPixel} from 'ol/render.js';

const key = 'Get your own API key at https://www.maptiler.com/cloud/';

const attributions =

'

好文推荐