Question

我可以为cesium查看器添加自定义基础图层选择器，并且可以添加图像视图模型，但无法弄清楚如何将Map Box添加为其中一个图层。到目前为止，这是我的代码：

  // Cesium Viewer

  var viewer = new Cesium.Viewer('cesiumContainer', {
    timeline: false,
    animation: false,
    geocoder: false,
    baseLayerPicker: false,
    imageryProvider: false
  });

  // Array of view models (map layers)

  var imageryViewModels = [];

  // MapBox layer (not working)

  imageryViewModels.push(new Cesium.ProviderViewModel({
    name : 'Map Box layer',
    iconUrl : Cesium.buildModuleUrl('Widgets/Images/ImageryProviders/mapBox.png'),
    tooltip : 'A custom layer',
    creationFunction : function() {
      return Cesium.createTileMapServiceImageryProvider({
        url : url,
        credit : 'MapBox'
      });
    }
  }));

  // Working layer from Cesium docs. 

  imageryViewModels.push(new Cesium.ProviderViewModel({
    name : 'Natural Earth\u00a0II',
    iconUrl : Cesium.buildModuleUrl('Widgets/Images/ImageryProviders/naturalEarthII.png'),
    tooltip : 'Natural Earth II, darkened for contrast.\nhttp://www.naturalearthdata.com/',
    creationFunction : function() {
      return Cesium.createTileMapServiceImageryProvider({
        url : Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII')
      });
    }
  }));

  var blp2 = new Cesium.BaseLayerPicker('baseLayerPickerContainer',  {
    globe:viewer.scene,
    imageryProviderViewModels : imageryViewModels
  });

当我添加没有Base Layer Picker的MapBox图层时，它很有效，例如：

  var viewer = new Cesium.Viewer('cesiumContainer', {
    timeline: false,
    animation: false,
    geocoder: false,
    baseLayerPicker: false,
    imageryProvider: new Cesium.UrlTemplateImageryProvider({
      url: url
    })
  });

为了完成，我的网址生成如下：

  var MAPBOX_ACCESS_TOKEN = 'access-token';
  var MAPBOX_STYLE_ID = 'style-id';
  var MAPBOX_USERNAME = 'username';
  var url = 'https://api.mapbox.com/styles/v1/' + MAPBOX_USERNAME + '/' + MAPBOX_STYLE_ID + '/tiles/256/{z}/{x}/{y}?access_token=' + MAPBOX_ACCESS_TOKEN;

当我尝试使用ProviderViewModel添加MapBox图层时，我得到404以及以下Cesium错误：

An error occurred in "b": Failed to obtain image tile X: 0 Y: 1 Level: 1.

我显然是为自定义地图图层错误地构建了ProviderViewModel，但我无法弄清楚我需要更改什么。

Answer 1

所以我必须做一些试验和错误才能正确使用MapBox网址，但这是我的解决方案，供其他人观看：

var MAPBOX_ACCESS_TOKEN = 'your_access_token';
  var MAPBOX_STYLE_ID = 'style_id_from_your_account';
  var MAPBOX_USERNAME = 'your_mapbox_username';
  var defaultMap = 'https://api.mapbox.com/styles/v1/' + MAPBOX_USERNAME + '/' + MAPBOX_STYLE_ID + '/tiles/256/{z}/{x}/{y}?access_token=' + MAPBOX_ACCESS_TOKEN;

然后：

您可以创建一个数组来存储用户可以选择的所有不同地图主题。

var providerViewModels = [];

  providerViewModels.push(new Cesium.ProviderViewModel({
    name: 'Name of your map theme (can be anything)',
    iconUrl: Cesium.buildModuleUrl("path_to_an_icon_image"),
    tooltip: 'some tooltip text (optional)',
    creationFunction: function() {
      return new Cesium.UrlTemplateImageryProvider({
        url: defaultMap
      });
    }
  }));

最后，您将图层添加到地图中：

var viewer = new Cesium.Viewer('cesiumContainer', {
  imageryProviderViewModels: providerViewModels
});

将MapBox图像添加到Cesium BaseLayerPicker

1 个答案: