1

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

olcesium without cesium

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?

2
  • Did you solve this? Commented Aug 29, 2017 at 10:35
  • Unfortnuately not, I guess OL-Cesium cannot use Vector Tile Layers (yet).
    – Sickboy
    Commented Aug 30, 2017 at 12:17

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.