0

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?

  • Did you solve this? – Poul K. Sørensen Aug 29 '17 at 10:35
  • Unfortnuately not, I guess OL-Cesium cannot use Vector Tile Layers (yet). – Sickboy Aug 30 '17 at 12:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.