ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Set base layer extent

Browse Source
This commit is contained in:
Simon Daron
2020-04-27 16:41:58 +02:00
parent 8cfe994ff0
commit 74901efc59
1 changed files with 8 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
examples/layer-clipping-vector.js
View File

@@ -6,7 +6,6 @@ import {OSM, Stamen, Vector as VectorSource} from '../src/ol/source.js';
import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
import {fromLonLat} from '../src/ol/proj.js';
import {getVectorContext} from '../src/ol/render.js';
import {intersects} from '../src/ol/extent.js';
//A distinct className is required to use another canvas for the background
const background = new TileLayer({
@@ -28,6 +27,11 @@ const clipLayer = new VectorLayer({
}),
});
//Giving the clipped layer an extent is necessary to avoid rendering when the feature is outside the viewport
clipLayer.getSource().on('addfeature', function () {
base.setExtent(clipLayer.getSource().getExtent());
});
const style = new Style({
fill: new Fill({
color: 'black',
@@ -37,15 +41,9 @@ const style = new Style({
base.on('postrender', function (e) {
const vectorContext = getVectorContext(e);
e.context.globalCompositeOperation = 'destination-in';
//Checking interect is required so the base layer is totally hidden when not clipped
if (intersects(e.frameState.extent, clipLayer.getSource().getExtent())) {
clipLayer.getSource().forEachFeature(function (feature) {
vectorContext.drawFeature(feature, style);
});
} else {
e.context.fillStyle = 'transparent';
e.context.fillRect(0, 0, 1, 1);
}
clipLayer.getSource().forEachFeature(function (feature) {
vectorContext.drawFeature(feature, style);
});
e.context.globalCompositeOperation = 'source-over';
});