2

I want to learn on how to create a baselayer picker and push maps to the baselayer picker in Cesium. The maps which I am going to push into the baselayer picker are accessed directly from the geoserver. I have referred to baselayerpicker sandcastle link, https://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Imagery%20Layers%20Manipulation.html&label=All

I have set up a local imagery server, geo server at port 8090 and I have added maps to the geoserver. I manage to access the map data from the geoserver using WebMapServiceImageryProvider

Here is my code for accessing the map from the geoserver in Cesium

<body>
  <div id="cesiumContainer"></div>
  <script>

var widget = new Cesium.CesiumWidget('cesiumContainer');

var url='http://localhost:8090/geoserver/geog4/wms'; 
var layers = widget.scene.globe.imageryLayers;
    layers.removeAll();
    layers.addImageryProvider(new Cesium.WebMapServiceImageryProvider({
        url : url,        
        layers: 'geog4:geotiff_coverage'
    }));
  </script>
</body>

Now I want to add the baselayer picker to allow user to access any of the maps accessed from the geoserver. I refer to the website, https://cesiumjs.org/Cesium/Build/Documentation/BaseLayerPicker.html for reference. After that, I implemented my code. I added two maps to the base layer picker. my code is found below..

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Use correct character set. -->
  <meta charset="utf-8">
  <!-- Tell IE to use the latest, best version. -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <title>Natural Earth II Bright</title>
  <script src="../Build/Cesium/Cesium.js"></script>
 <style>
      @import url(../Build/Cesium/Widgets/widgets.css);
      html, body, #cesiumContainer {
          width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
      }
  </style>
</head>
</head>
<body>
  <div id="cesiumContainer"></div>
  <div id="baseLayerPickerContainer" style="position:absolute;top:24px;right:24px;width:38px;height:38px;"></div>
  <script>
var viewer = new Cesium.CesiumWidget('cesiumContainer');
var cesiumWidget = new Cesium.CesiumWidget('cesiumContainer', { imageryProvider: false });

var imageryViewModels = [];
imageryViewModels.push(new Cesium.ProviderViewModel({
     name : 'Natural Earth II Bright',
     tooltip : 'This is the Natural Earth II Bright',
     creationFunction : function() {
         return Cesium.WebMapServiceImageryProvider({
             url : 'http://localhost:8090/geoserver/geog1/wms',
             layers: 'geog1:geotiff_coverage'
         });
     }
 }));
 imageryViewModels.push(new Cesium.ProviderViewModel({
     name : 'Blue Marble',
     tooltip : 'This is the Blue Marble',
     creationFunction : function() {
         return Cesium.WebMapServiceImageryProvider({
             url : 'http://localhost:8090/geoserver/geog4/wms',
             layers: 'geog4:geotiff_coverage'
         });
     }
 }));

var layers = cesiumWidget.imageryLayers;
var baseLayerPicker = new Cesium.BaseLayerPicker('baseLayerPickerContainer', {
    globe : cesiumWidget.scene.globe,
    imageryProviderViewModels : imageryViewModels
});
  </script>
</body>
</html>

the error states

Uncaught TypeError: Cannot read property 'defaultAlpha' of undefined
    at new U (Cesium.js:546)
    at c.addImageryProvider (Cesium.js:547)
    at l.set (Cesium.js:563)
    at l.n [as selectedImagery] (Cesium.js:560)
    at new l (Cesium.js:563)
    at new l (Cesium.js:564)
    at BaseLayerPicker.html:50

Can you explain what is the cause of the error and how to fix it?

1

Try creating the list of imageryViewModels before constructing the actual Cesium.Viewer, and passing in the list.

Also, you're missing the new keyword on return Cesium.WebMapServiceImageryProvider, it's required.

Give this a try:

// Create a list for the baseLayerPicker to choose from.
var imageryViewModels = [];

imageryViewModels.push(new Cesium.ProviderViewModel({
    name : 'Natural Earth II Bright',
    tooltip : 'This is the Natural Earth II Bright',
    // TODO: Update this iconUrl with a 60x60 image of your selected imagery provider.
    iconUrl : Cesium.buildModuleUrl('Widgets/Images/ImageryProviders/naturalEarthII.png'),
    creationFunction : function() {
        return new Cesium.WebMapServiceImageryProvider({
            url : 'http://localhost:8090/geoserver/geog1/wms',
            layers: 'geog1:geotiff_coverage'
        });
    }
}));
imageryViewModels.push(new Cesium.ProviderViewModel({
    name : 'Blue Marble',
    tooltip : 'This is the Blue Marble',
    // TODO: Update this iconUrl with a 60x60 image of your selected imagery provider.
    iconUrl : Cesium.buildModuleUrl('Widgets/Images/ImageryProviders/stamenWatercolor.png'),
    creationFunction : function() {
        return new Cesium.WebMapServiceImageryProvider({
            url : 'http://localhost:8090/geoserver/geog4/wms',
            layers: 'geog4:geotiff_coverage'
        });
    }
}));

// Select one from the existing list to be currently active.
var selectedImagery = imageryViewModels[0];

// Launch the viewer, with the list and the selected one chosen:
var viewer = new Cesium.Viewer('cesiumContainer', {
    imageryProviderViewModels: imageryViewModels,
    selectedImageryProviderViewModel: selectedImagery
});

Further examples can be found in createDefaultImageryProviderViewModels.js.

Your Answer

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