Use background property for vector layers

examples/export-map.js

@@ -1,24 +1,29 @@
 import GeoJSON from '../src/ol/format/GeoJSON.js';
 import Map from '../src/ol/Map.js';
+import VectorSource from '../src/ol/source/Vector.js';
 import View from '../src/ol/View.js';
+import {Fill, Stroke, Style} from '../src/ol/style.js';
 import {
   Heatmap as HeatmapLayer,
-  Tile as TileLayer,
   Vector as VectorLayer,
 } from '../src/ol/layer.js';
-import {OSM, Vector as VectorSource} from '../src/ol/source.js';
 
 const map = new Map({
   layers: [
-    new TileLayer({
-      source: new OSM(),
-    }),
     new VectorLayer({
+      background: '#a9d3df',
       source: new VectorSource({
         url: 'data/geojson/countries.geojson',
         format: new GeoJSON(),
       }),
-      opacity: 0.5,
+      style: new Style({
+        stroke: new Stroke({
+          color: '#ccc',
+        }),
+        fill: new Fill({
+          color: 'white',
+        }),
+      }),
     }),
     new HeatmapLayer({
       source: new VectorSource({
@@ -51,6 +56,12 @@ document.getElementById('export-png').addEventListener('click', function () {
       map.getViewport().querySelectorAll('.ol-layer canvas, canvas.ol-layer'),
       function (canvas) {
         if (canvas.width > 0) {
+          const backgroundColor = canvas.parentNode.style.backgroundColor;
+          if (backgroundColor) {
+            mapContext.fillStyle = backgroundColor;
+            mapContext.fillRect(0, 0, canvas.width, canvas.height);
+          }
+
           const opacity =
             canvas.parentNode.style.opacity || canvas.style.opacity;
           mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity);