I'm trying to achieve a visualization similar to Mapbox GL JS (c.f. Mapbox Vector Tiles from Geoserver 2.11 in Mapbox GL JS), i.e. with pitch and bearing. I'm using the latest OL-Cesium version for this (1.27) and based my code on their examples. This is the most minimal code I can offer (mwe.js):
var style_simple = new ol.style.Style({
fill: new ol.style.Fill({
color: '#ADD8E6'
}),
stroke: new ol.style.Stroke({
color: '#3887be',
width: 1
})
});
function simpleStyle(feature) {
return style_simple;
}
var layer = 'opengeo:hessen';
var projection_epsg_no = '900913';
var testLayer = new ol.layer.VectorTile({
style:simpleStyle,
source: new ol.source.VectorTile({
tilePixelRatio: 1, // oversampling when > 1
tileGrid: ol.tilegrid.createXYZ({maxZoom: 19}),
format: new ol.format.MVT(),
url: '/geoserver/gwc/service/tms/1.0.0/' + layer +
'@EPSG%3A'+projection_epsg_no+'@pbf/{z}/{x}/{-y}.pbf'
}),
visible: true
});
var osm = new ol.layer.Tile({
source: new ol.source.OSM()
});
osm.set('baselayer', true);
var ol2d = new ol.Map({
layers: [osm, testLayer],
controls: ol.control.defaults({
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}),
target: 'map',
view: new ol.View({
center: ol.proj.transform([25, 20], 'EPSG:4326', 'EPSG:3857'),
zoom: 3
})
});
var ol3d = new olcs.OLCesium({map: ol2d});
var scene = ol3d.getCesiumScene();
var terrainProvider = new Cesium.CesiumTerrainProvider({
url : '//assets.agi.com/stk-terrain/world'
});
scene.terrainProvider = terrainProvider;
Accompanying HTML:
<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, all" />
<title>olcesium vectore tile layer example</title>
<link rel="stylesheet" href="../ol.css" type="text/css">
</head>
<body>
<div id="map" style="width:600px;height:400px;"></div>
<input type="button" value="Enable/disable" onclick="javascript:ol3d.setEnabled(!ol3d.getEnabled())" />
<script src="inject_ol_cesium.js"></script>
<script src="mwe.js"></script>
</body>
</html>
When I load the page OL and the vector tile layer load fine. However console is throwing this Error:
Uncaught TypeError: e.ce is not a function
When I click on the "Enable/disable" button the following error is thrown:
Uncaught TypeError: Cannot read property 'setEnabled' of undefined
at HTMLInputElement.onclick (mwe.html:12)
Is OL-Cesium not capable of using Vector Tile Layers or what could be the problem?