Example of a vector layer rendered using WebGL
The ecoregions are loaded from a GeoJSON file.
import GeoJSON from 'ol/format/GeoJSON.js';
import Layer from 'ol/layer/Layer.js';
import Map from 'ol/Map.js';
import OSM from 'ol/source/OSM.js';
import TileLayer from 'ol/layer/WebGLTile.js';
import VectorSource from 'ol/source/Vector.js';
import View from 'ol/View.js';
import WebGLVectorLayerRenderer from 'ol/renderer/webgl/VectorLayer.js';
/** @type {import('ol/style/webgl.js').WebGLStyle} */
const style = {
'stroke-color': ['*', ['get', 'COLOR'], [220, 220, 220]],
'stroke-width': 2,
'stroke-offset': -1,
'fill-color': ['*', ['get', 'COLOR'], [255, 255, 255, 0.6]],
};
class WebGLLayer extends Layer {
createRenderer() {
return new WebGLVectorLayerRenderer(this, {
style,
});
}
}
const osm = new TileLayer({
source: new OSM(),
});
const vectorLayer = new WebGLLayer({
source: new VectorSource({
url: 'https://openlayers.org/data/vector/ecoregions.json',
format: new GeoJSON(),
}),
});
const map = new Map({
layers: [osm, vectorLayer],
target: 'map',
view: new View({
center: [0, 0],
zoom: 1,
}),
});
const featureOverlay = new WebGLLayer({
source: new VectorSource(),
map: map,
style: {
'stroke-color': 'rgba(255, 255, 255, 0.7)',
'stroke-width': 1,
},
});
let highlight;
const displayFeatureInfo = function (pixel) {
const feature = map.forEachFeatureAtPixel(pixel, function (feature) {
return feature;
});
const info = document.getElementById('info');
if (feature) {
info.innerHTML = feature.get('ECO_NAME') || ' ';
} else {
info.innerHTML = ' ';
}
if (feature !== highlight) {
if (highlight) {
featureOverlay.getSource().removeFeature(highlight);
}
if (feature) {
featureOverlay.getSource().addFeature(feature);
}
highlight = feature;
}
};
map.on('pointermove', function (evt) {
if (evt.dragging) {
return;
}
const pixel = map.getEventPixel(evt.originalEvent);
displayFeatureInfo(pixel);
});
map.on('click', function (evt) {
displayFeatureInfo(evt.pixel);
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebGL Vector Layer</title>
<link rel="stylesheet" href="node_modules/ol/ol.css">
<style>
.map {
width: 100%;
height: 400px;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<div id="info"> </div>
<script type="module" src="main.js"></script>
</body>
</html>
{
"name": "webgl-vector-layer",
"dependencies": {
"ol": "9.2.2"
},
"devDependencies": {
"vite": "^3.2.3"
},
"scripts": {
"start": "vite",
"build": "vite build"
}
}