Terrain Service with ol3cesium

silvio.d...@gbssg.ch

unread,

Mar 22, 2016, 1:55:32 PM3/22/16

to GeoAdmin API

I'm trying to create a 2.5D view using openlayers together with ol3cesium. As a background map I'm using a swiss WMTS-Service in EPSG:4326 Projection whitch is showing fine, if I do not enable the ol3d Scene. However, as soon as the 3D Scene is enabled, the Scene is just black. As terrain Provider I use the Terrain Service provided by api3 ( http://api3.geo.admin.ch/services/sdiservices.html#terrain-service). The Metadata json file (layer.json) for the service is loaded but afterwards no terrain tiles are loaded and also no map tiles. Has anyone an idea what's gooing wrong? Below my code. Any help is much apreciated.

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <link rel="stylesheet" href="http://openlayers.org/en/v3.14.2/css/ol.css" type="text/css">
    <script src="http://openlayers.org/en/v3.14.2/build/ol.js"></script>
    <script src="lib/ol3/ol3-cesium-v1.11/Cesium/Cesium.js"></script>
    <script src="lib/ol3/ol3-cesium-v1.11/ol3cesium.js"></script>
  </head>
  <body>
    <div id="map" class="map"></div>

    <script>
        var parser = new ol.format.WMTSCapabilities();
        fetch('http://wmts10.geo.admin.ch/EPSG/4326/1.0.0/WMTSCapabilities.xml').then(function(response) {
            return response.text();
        }).then(function(text) {
            var result = parser.read(text);

            var options = ol.source.WMTS.optionsFromCapabilities(result, {layer: 'ch.swisstopo.swisstlm3d-karte-farbe', matrixSet: '4326'});
            options.requestEncoding = "REST";
            options.urls.push("http://wmts10.geo.admin.ch/1.0.0/ch.swisstopo.swisstlm3d-karte-farbe/default/{Time}/4326/{TileMatrix}/{TileCol}/{TileRow}.png")      
            var swisstlm3d = new ol.layer.Tile({
                source:  new ol.source.WMTS(options)            
            }); 


            var map = new ol.Map({
                controls: ol.control.defaults().extend([
                  new ol.control.ScaleLine({
                    units: 'degrees'
                  })
                ]),     
                layers: [swisstlm3d],
                target: 'map',
                view: new ol.View({
                    projection:'EPSG:4326',
                    center: [8.5, 46],
                    zoom: 10
                })
            });

            var ol3d = new olcs.OLCesium({map: map});
            var scene = ol3d.getCesiumScene();
            var terrainProvider = new Cesium.CesiumTerrainProvider({
                url: '//3d.geo.admin.ch/1.0.0/ch.swisstopo.terrain.3d/default/20160115/4326'
            });
            scene.terrainProvider = terrainProvider;

            //if this is enabled, the scene remains black
            ol3d.setEnabled(true);

        })

    </script>
  </body>
</html>

Gilbert Jeiziner

unread,

Mar 23, 2016, 3:28:36 AM3/23/16

to geoadm...@googlegroups.com, silvio.d...@gbssg.ch

Hi Silvio

did you register your domain?

Gilbert

On 22.03.2016 13:44, silvio.d...@gbssg.ch wrote:
> I'm trying to create a 2.5D view using openlayers together with
> ol3cesium. As a background map I'm using a swiss WMTS-Service in
> EPSG:4326 Projection whitch is showing fine, if I do not enable the
> ol3d Scene. However, as soon as the 3D Scene is enabled, the Scene is
> just black. As terrain Provider I use the Terrain Service provided by
> api3 (
> http://api3.geo.admin.ch/services/sdiservices.html#terrain-service

> [1]). The Metadata json file (layer.json) for the service is loaded

> --
> You received this message because you are subscribed to the Google
> Groups "GeoAdmin API" group.
> To unsubscribe from this group and stop receiving emails from it,
> send an email to geoadmin-api...@googlegroups.com.
> For more options, visit https://groups.google.com/d/optout [2].
>
>
> Links:
> ------
> [1] http://api3.geo.admin.ch/services/sdiservices.html#terrain-service
> [2] https://groups.google.com/d/optout

silvio.d...@gbssg.ch

unread,

Mar 23, 2016, 1:29:44 PM3/23/16

to GeoAdmin API, silvio.d...@gbssg.ch

Hallo Gilbert,
thank you for your answer: yes the domain is registered at swisstopo. The WMTS-Service itself without enableing the 3D scene ( ol3d.setEnabled(false);) is working as expected.
Silvio

Gilbert Jeiziner

unread,

Mar 24, 2016, 3:39:52 AM3/24/16

to geoadm...@googlegroups.com, silvio.d...@gbssg.ch

Hi Silvio

I think the reason you don't see anything is because your
cesium globe has nothing to display. It downloads the terrain
fine, but there's no overlay.

To use the overlay you defined for your 2D map with ol3, you
have to setup a Synchronizer, who takes care to 'translate' a
2D resource (wmts, wms, vector data) into a 3D resource.

See initialisation process in mf-geoadmin3:
https://github.com/geoadmin/mf-geoadmin3/blob/master/src/js/GaCesium.js#L83

I hope this helps.

Gilbert

>>> href="http://openlayers.org/en/v3.14.2/css/ol.css [2]"

>> type="text/css">
>>> <script src="http://openlayers.org/en/v3.14.2/build/ol.js

>> [3]"></script>

>>> <script src="lib/ol3/ol3-cesium-v1.11/Cesium/Cesium.js"></script>
>>
>>> <script src="lib/ol3/ol3-cesium-v1.11/ol3cesium.js"></script>
>>> </head>
>>> <body>
>>> <div id="map" class="map"></div>
>>>
>>> <script>
>>> var parser = new ol.format.WMTSCapabilities();
>>>
>>>
>>
> fetch('http://wmts10.geo.admin.ch/EPSG/4326/1.0.0/WMTSCapabilities.xml').then(function(response)

>> [4]

>>> {
>>> return response.text();
>>> }).then(function(text) {
>>> var result = parser.read(text);
>>>
>>> var options = ol.source.WMTS.optionsFromCapabilities(result,
>> {layer:
>>> 'ch.swisstopo.swisstlm3d-karte-farbe', matrixSet: '4326'});
>>> options.requestEncoding = "REST";
>>>
>>>
>>
> options.urls.push("http://wmts10.geo.admin.ch/1.0.0/ch.swisstopo.swisstlm3d-karte-farbe/default/{Time}/4326/{TileMatrix}/{TileCol}/{TileRow}.png

>> [5]")

>>>
>>> var swisstlm3d = new ol.layer.Tile({
>>> source: new ol.source.WMTS(options)
>>> });
>>>
>>> var map = new ol.Map({
>>> controls: ol.control.defaults().extend([
>>> new ol.control.ScaleLine({
>>> units: 'degrees'
>>> })
>>> ]),
>>> layers: [swisstlm3d],
>>> target: 'map',
>>> view: new ol.View({
>>> projection:'EPSG:4326',
>>> center: [8.5, 46],
>>> zoom: 10
>>> })
>>> });
>>>
>>> var ol3d = new olcs.OLCesium({map: map});
>>> var scene = ol3d.getCesiumScene();
>>> var terrainProvider = new Cesium.CesiumTerrainProvider({
>>> url:
>>>
>>
> '//3d.geo.admin.ch/1.0.0/ch.swisstopo.terrain.3d/default/20160115/4326

>> [6]'

>>> });
>>> scene.terrainProvider = terrainProvider;
>>>
>>> //if this is enabled, the scene remains black
>>> ol3d.setEnabled(true);
>>>
>>> })
>>>
>>> </script>
>>> </body>
>>> </html>
>>>
>>> --
>>> You received this message because you are subscribed to the
>> Google
>>> Groups "GeoAdmin API" group.
>>> To unsubscribe from this group and stop receiving emails from it,
>>
>>> send an email to geoadmin-api...@googlegroups.com.

>>> For more options, visit https://groups.google.com/d/optout [7]

>> [2].
>>>
>>>
>>> Links:
>>> ------
>>> [1]
>> http://api3.geo.admin.ch/services/sdiservices.html#terrain-service

>> [1]
>>> [2] https://groups.google.com/d/optout [7]

>
> --
> You received this message because you are subscribed to the Google
> Groups "GeoAdmin API" group.
> To unsubscribe from this group and stop receiving emails from it,
> send an email to geoadmin-api...@googlegroups.com.

> For more options, visit https://groups.google.com/d/optout [7].

>
>
> Links:
> ------
> [1] http://api3.geo.admin.ch/services/sdiservices.html#terrain-service

> [2] http://openlayers.org/en/v3.14.2/css/ol.css
> [3] http://openlayers.org/en/v3.14.2/build/ol.js
> [4]
> http://wmts10.geo.admin.ch/EPSG/4326/1.0.0/WMTSCapabilities.xml').then(function(response)
> [5]
> http://wmts10.geo.admin.ch/1.0.0/ch.swisstopo.swisstlm3d-karte-farbe/default/%7BTime%7D/4326/%7BTileMatrix%7D/%7BTileCol%7D/%7BTileRow%7D.png
> [6]
> http://3d.geo.admin.ch/1.0.0/ch.swisstopo.terrain.3d/default/20160115/4326
> [7] https://groups.google.com/d/optout

silvio.d...@gbssg.ch

unread,

Mar 29, 2016, 11:07:55 AM3/29/16

to GeoAdmin API, silvio.d...@gbssg.ch

Hi Gilbert,
thank you very much for your help. I followed your suggestion an implemented my own Synchronizer following mf-geoadmin3 like this:

            olcs.GaRasterSynchronizer = function(map, scene) {
                olcs.RasterSynchronizer.call(this, map, scene);
            };
            ol.inherits(olcs.GaRasterSynchronizer, olcs.RasterSynchronizer);

            olcs.GaRasterSynchronizer.prototype.convertLayerToCesiumImageries = function(olLayer, viewProj)
            {
                console.log('here'); //this is never logged
                ....                  //the rest like in mf_geoadmin3

and later:
            var ol3d = new olcs.OLCesium({map: map, createSynchronizers: function(map, scene) {
                    return [
                        new olcs.GaRasterSynchronizer(map, scene),
                        new olcs.VectorSynchronizer(map, scene)
                    ];
            }});

However the convertLayerToCesiumImageries Method is never called. And again no javascript errors and still no loading of terrain-tiles or wmts-tiles.
I think I still miss something.

Silvio

Gilbert Jeiziner

unread,

Mar 30, 2016, 1:47:53 AM3/30/16

to geoadm...@googlegroups.com, silvio.d...@gbssg.ch

Hi Silvio

do you see access the the layer.json of the terrain definition?

Gilbert

>> [1]

>> [2]

>>>> [1]
>>>>> [1]). The Metadata json file (layer.json) for the service is
>>>> loaded
>>>>> but afterwards no terrain tiles are loaded and also no map
>> tiles.
>>>> Has
>>>>> anyone an idea what's gooing wrong? Below my code. Any help is
>>>> much
>>>>> apreciated.
>>>>>
>>>>> <!DOCTYPE html>
>>>>> <html>
>>>>> <head>
>>>>> <title></title>
>>>>> <link rel="stylesheet"

>>>>> href="http://openlayers.org/en/v3.14.2/css/ol.css [3] [2]"
>>>> type="text/css">
>>>>> <script src="http://openlayers.org/en/v3.14.2/build/ol.js [4]

>>>> [3]"></script>
>>>>> <script
>> src="lib/ol3/ol3-cesium-v1.11/Cesium/Cesium.js"></script>
>>>>
>>>>> <script src="lib/ol3/ol3-cesium-v1.11/ol3cesium.js"></script>
>>>>> </head>
>>>>> <body>
>>>>> <div id="map" class="map"></div>
>>>>>
>>>>> <script>
>>>>> var parser = new ol.format.WMTSCapabilities();
>>>>>
>>>>>
>>>>
>>>
>>
> fetch('http://wmts10.geo.admin.ch/EPSG/4326/1.0.0/WMTSCapabilities.xml').then(function(response)

>> [5]

>>>> [4]
>>>>> {
>>>>> return response.text();
>>>>> }).then(function(text) {
>>>>> var result = parser.read(text);
>>>>>
>>>>> var options = ol.source.WMTS.optionsFromCapabilities(result,
>>>> {layer:
>>>>> 'ch.swisstopo.swisstlm3d-karte-farbe', matrixSet: '4326'});
>>>>> options.requestEncoding = "REST";
>>>>>
>>>>>
>>>>
>>>
>>
> options.urls.push("http://wmts10.geo.admin.ch/1.0.0/ch.swisstopo.swisstlm3d-karte-farbe/default/{Time}/4326/{TileMatrix}/{TileCol}/{TileRow}.png

>> [6]

>>>> [5]")
>>>>>
>>>>> var swisstlm3d = new ol.layer.Tile({
>>>>> source: new ol.source.WMTS(options)
>>>>> });
>>>>>
>>>>> var map = new ol.Map({
>>>>> controls: ol.control.defaults().extend([
>>>>> new ol.control.ScaleLine({
>>>>> units: 'degrees'
>>>>> })
>>>>> ]),
>>>>> layers: [swisstlm3d],
>>>>> target: 'map',
>>>>> view: new ol.View({
>>>>> projection:'EPSG:4326',
>>>>> center: [8.5, 46],
>>>>> zoom: 10
>>>>> })
>>>>> });
>>>>>
>>>>> var ol3d = new olcs.OLCesium({map: map});
>>>>> var scene = ol3d.getCesiumScene();
>>>>> var terrainProvider = new Cesium.CesiumTerrainProvider({
>>>>> url:
>>>>>
>>>>
>>>
>>
> '//3d.geo.admin.ch/1.0.0/ch.swisstopo.terrain.3d/default/20160115/4326

>> [7]

>>>> [6]'
>>>>> });
>>>>> scene.terrainProvider = terrainProvider;
>>>>>
>>>>> //if this is enabled, the scene remains black
>>>>> ol3d.setEnabled(true);
>>>>>
>>>>> })
>>>>>
>>>>> </script>
>>>>> </body>
>>>>> </html>
>>>>>
>>>>> --
>>>>> You received this message because you are subscribed to the
>>>> Google
>>>>> Groups "GeoAdmin API" group.
>>>>> To unsubscribe from this group and stop receiving emails from
>> it,
>>>>
>>>>> send an email to geoadmin-api...@googlegroups.com.

>>>>> For more options, visit https://groups.google.com/d/optout [8]

>> [7]
>>>> [2].
>>>>>
>>>>>
>>>>> Links:
>>>>> ------
>>>>> [1]
>>>>
>> http://api3.geo.admin.ch/services/sdiservices.html#terrain-service

>> [2]
>>>> [1]
>>>>> [2] https://groups.google.com/d/optout [8] [7]

>>>
>>> --
>>> You received this message because you are subscribed to the
>> Google
>>> Groups "GeoAdmin API" group.
>>> To unsubscribe from this group and stop receiving emails from it,
>>
>>> send an email to geoadmin-api...@googlegroups.com.

>>> For more options, visit https://groups.google.com/d/optout [8]

>> [7].
>>>
>>>
>>> Links:
>>> ------
>>> [1]
>> http://api3.geo.admin.ch/services/sdiservices.html#terrain-service
>> [2]

>>> [2] http://openlayers.org/en/v3.14.2/css/ol.css [3]
>>> [3] http://openlayers.org/en/v3.14.2/build/ol.js [4]
>>> [4]
>>>
>>
> http://wmts10.geo.admin.ch/EPSG/4326/1.0.0/WMTSCapabilities.xml').then(function(response)
>> [9]
>>> [5]
>>>
>>
> http://wmts10.geo.admin.ch/1.0.0/ch.swisstopo.swisstlm3d-karte-farbe/default/%7BTime%7D/4326/%7BTileMatrix%7D/%7BTileCol%7D/%7BTileRow%7D.png
>> [6]
>>> [6]
>>>
>>
> http://3d.geo.admin.ch/1.0.0/ch.swisstopo.terrain.3d/default/20160115/4326
>> [7]
>>> [7] https://groups.google.com/d/optout [8]

>
> --
> You received this message because you are subscribed to the Google
> Groups "GeoAdmin API" group.
> To unsubscribe from this group and stop receiving emails from it,
> send an email to geoadmin-api...@googlegroups.com.