Add an image vector layer for rendering vectors to an image

examples/drag-and-drop-image-vector.html

@@ -3,7 +3,7 @@ layout: example.html
 title: Drag-and-Drop Image Vector
 shortdesc: Example of using the drag-and-drop interaction with image vector rendering.
 docs: >
-  Example of using the drag-and-drop interaction with an `ol/layer/Vector` with `renderMode: 'image'`. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. Each file is rendered to an image on the client.
+  Example of using the drag-and-drop interaction with an `ol/layer/VectorImage` layer. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. Each file is rendered to an image on the client.
 tags: "drag-and-drop-image-vector, gpx, geojson, igc, kml, topojson, vector, image"
 cloak:
   - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5

examples/drag-and-drop-image-vector.js

@@ -2,7 +2,7 @@ import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import {GPX, GeoJSON, IGC, KML, TopoJSON} from '../src/ol/format.js';
 import {defaults as defaultInteractions, DragAndDrop} from '../src/ol/interaction.js';
-import {Vector as VectorLayer, Tile as TileLayer} from '../src/ol/layer.js';
+import {VectorImage as VectorImageLayer, Tile as TileLayer} from '../src/ol/layer.js';
 import {BingMaps, Vector as VectorSource} from '../src/ol/source.js';
 
 const dragAndDropInteraction = new DragAndDrop({
@@ -36,8 +36,7 @@ dragAndDropInteraction.on('addfeatures', function(event) {
   const vectorSource = new VectorSource({
     features: event.features
   });
-  map.addLayer(new VectorLayer({
-    renderMode: 'image',
+  map.addLayer(new VectorImageLayer({
     source: vectorSource
   }));
   map.getView().fit(vectorSource.getExtent());

examples/image-vector-layer.html

@@ -1,9 +1,9 @@
 ---
 layout: example.html
-title: Image Vector Layer
-shortdesc: Example of an image vector layer.
+title: Vector Image Layer
+shortdesc: Example of rendering vector data as an image layer.
 docs: >
-  <p>This example uses <code>ol/layer/Vector</code> with `renderMode: 'image'`. This mode results in faster rendering during interaction and animations, at the cost of less accurate rendering.</p>
+  <p>This example uses <code>ol/layer/VectorImage</code> for faster rendering during interaction and animations, at the cost of less accurate rendering.</p>
 tags: "vector, image"
 ---
 <div id="map" class="map"></div>

examples/image-vector-layer.js

@@ -1,6 +1,7 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import GeoJSON from '../src/ol/format/GeoJSON.js';
+import VectorImageLayer from '../src/ol/layer/VectorImage.js';
 import VectorLayer from '../src/ol/layer/Vector.js';
 import VectorSource from '../src/ol/source/Vector.js';
 import {Fill, Stroke, Style, Text} from '../src/ol/style.js';
@@ -19,8 +20,7 @@ const style = new Style({
 
 const map = new Map({
   layers: [
-    new VectorLayer({
-      renderMode: 'image',
+    new VectorImageLayer({
       source: new VectorSource({
         url: 'data/geojson/countries.geojson',
         format: new GeoJSON()