Fix #998 - ol layer vectorImage is not rendered

examples/vectors.html

@@ -18,6 +18,8 @@
       onclick="javascript:toggleStyle()" /></div>
     <div><input type="button" value="Add/remove one vector layer"
       onclick="javascript:addOrRemoveOneVectorLayer()" /></div>
+    <div><input type="button" value="Add/remove one vector image layer"
+      onclick="javascript:addOrRemoveOneVectorImageLayer()" /></div>
     <div><input type="button" value="Add/remove one feature"
       onclick="javascript:addOrRemoveOneFeature()" /></div>
     <div><input type="button" value="Toggle clampToGround mode"

examples/vectors.js

@@ -27,6 +27,7 @@ import olGeomPolygon from 'ol/geom/Polygon.js';
 import olInteractionDragAndDrop from 'ol/interaction/DragAndDrop.js';
 import olGeomMultiPolygon from 'ol/geom/MultiPolygon.js';
 import olLayerVector from 'ol/layer/Vector.js';
+import olLayerVectorImage from 'ol/layer/VectorImage.js';
 import {transform} from 'ol/proj.js';
 import olcsCore from 'olcs/core.js';
 import {OLCS_ION_TOKEN} from './_common.js';
@@ -278,6 +279,11 @@ const vectorLayer = new olLayerVector({
   source: vectorSource
 });
 
+const vectorImageLayer = new olLayerVectorImage({
+  style: styleFunction,
+  source: vectorSource
+});
+
 const vectorSource2 = new olSourceVector({
   features: [iconFeature, textFeature, cervinFeature, ...modelFeatures, cartographicRectangle,
     cartographicRectangle2]
@@ -358,6 +364,17 @@ window['addOrRemoveOneVectorLayer'] = function() {
   hasTheVectorLayer = !hasTheVectorLayer;
 };
 
+let hasTheVectorImageLayer = false;
+window['addOrRemoveOneVectorImageLayer'] = function() {
+
+  if (hasTheVectorImageLayer) {
+    map.getLayers().remove(vectorImageLayer);
+  } else {
+    map.getLayers().insertAt(2, vectorImageLayer);
+  }
+  hasTheVectorImageLayer = !hasTheVectorImageLayer;
+};
+
 window['addOrRemoveOneFeature'] = function() {
   const found = vectorSource2.getFeatures().indexOf(iconFeature);
   if (found === -1) {

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "ol-cesium",
-  "version": "2.13.1",
+  "name": "@inveni/ol-cesium",
+  "version": "0.00.1",
   "description": "OpenLayers Cesium integration library",
   "scripts": {
     "build-examples": "cross-env NODE_ENV=production TARGET=examples webpack --progress --bail",
@@ -31,7 +31,7 @@
     "@mapbox/geojsonhint": "^3.0.1",
     "@types/webpack": "^5.28.0",
     "babel-loader": "8.2.2",
-    "cesium": "^1.81.0",
+    "cesium": ">=1.81.0 <=1.97.0",
     "copy-webpack-plugin": "^9.0.0",
     "cross-env": "7.0.3",
     "eslint": "^7.26.0",

src/olcs/VectorSynchronizer.js

@@ -10,6 +10,7 @@ import olLayerVector from 'ol/layer/Vector.js';
 import olLayerVectorTile from 'ol/layer/VectorTile.js';
 import olcsAbstractSynchronizer from './AbstractSynchronizer.js';
 import olcsFeatureConverter from './FeatureConverter.js';
+import olLayerVectorImage from 'ol/layer/VectorImage.js';
 
 class VectorSynchronizer extends olcsAbstractSynchronizer {
   /**
@@ -99,8 +100,16 @@ class VectorSynchronizer extends olcsAbstractSynchronizer {
    * @inheritDoc
    */
   createSingleLayerCounterparts(olLayerWithParents) {
-    const olLayer = olLayerWithParents.layer;
-    if (!(olLayer instanceof olLayerVector) || olLayer instanceof olLayerVectorTile) {
+    let olLayer = olLayerWithParents.layer;
+
+    if(olLayerWithParents.layer instanceof olLayerVectorImage){
+      let convertedVectorLayer = new olLayerVector({source: null});
+      convertedVectorLayer.setStyle(olLayerWithParents.layer.getStyle())
+      convertedVectorLayer.setSource(olLayerWithParents.layer.getSource())
+      olLayer = convertedVectorLayer;
+    }
+
+    if (!(olLayer instanceof olLayerVector) || olLayer instanceof olLayerVectorTile  || olLayer instanceof olLayerVectorImage) {
       return null;
     }
     console.assert(olLayer instanceof olLayerLayer);