将 MapBox 图像添加到 Cesium BaseLayerPicker

Question

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

  // 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
    })
  });

为了完成，我的 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 URL 正确，但这是我为其他人寻找的解决方案：

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

Adding MapBox imagery to Cesium BaseLayerPicker

cesium