TileCoordinatesImageryProvider

TileCoordinatesImageryProvider 是一个提供瓦片坐标信息的图像提供器。它显示每个瓦片的瓦片坐标，并在每个瓦片的中心显示瓦片坐标。这在开发自定义图层时非常有用。

用法

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

构造函数

• TileCoordinatesImageryProvider(options) <a name="TileCoordinatesImageryProvider"></a>

在构造函数中，可以传递以下选项：

• tileWidth：每个瓦片的宽度（以像素为单位）。默认为 256。
• tileHeight：每个瓦片的高度（以像素为单位）。默认为 256。
• color：瓦片坐标和中心文本的颜色。默认为 Cesium.Color.WHITE。

var imageryProvider = new Cesium.TileCoordinatesImageryProvider({
  tileWidth: 512,
  tileHeight: 512,
  color: Cesium.Color.RED,
});

方法

• TileCoordinatesImageryProvider.prototype.requestImage(x, y, level) <a name="requestImage"></a>

在 TileCoordinatesImageryProvider 中，实现 requestImage 方法返回图像。这是一个必须的方法，因为 TileCoordinatesImageryProvider 继承 ImageryProvider 类。

TileCoordinatesImageryProvider.prototype.requestImage = function (x, y, level) {
  var canvas = document.createElement('canvas');
  canvas.width = this._tileWidth;
  canvas.height = this._tileHeight;

  var ctx = canvas.getContext('2d');
  ctx.strokeStyle = this._color.toCssColorString();
  ctx.lineWidth = 2;
  ctx.strokeRect(0, 0, canvas.width, canvas.height);
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.fillStyle = this._color.toCssColorString();
  ctx.font = '16px sans-serif';
  ctx.fillText(level + ' / ' + x + ' / ' + y, canvas.width / 2, canvas.height / 2);

  var dataUri = canvas.toDataURL('image/png');
  return loadImage(dataUri);
};

在此示例中，我们创建了一个具有指定大小的新画布，将瓦片坐标绘制到画布上并返回画布的数据 URI。loadImage() 函数是一个帮助程序函数，它使用 Cesium.loadImage 方法将数据 URI 转换为图像。

function loadImage(url) {
  return new Promise(function (resolve, reject) {
    var img = new Image();

    img.onload = function () {
      resolve(img);
    };

    img.onerror = function () {
      reject('Could not load image: ' + url);
    };

    img.src = url;
  });
}

示例

我们可以使用 TileCoordinatesImageryProvider 来创建和添加一个图层到地球上，该图层显示了所有瓦片的瓦片坐标。

var imageryProvider = new Cesium.TileCoordinatesImageryProvider({
  color: Cesium.Color.CYAN,
});

var layer = new Cesium.ImageryLayer(imageryProvider);

viewer.imageryLayers.add(layer);

我们可以使用 Cesium.UrlTemplateImageryProvider 构造函数的回调函数，在瓦片上添加瓦片坐标。请注意，回调中的瓦片坐标以像素为单位，因此需要将它们转换为纬度和经度坐标。

var imageryProvider = new Cesium.UrlTemplateImageryProvider({
  url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
  credit: 'World Imagery',
  getTileCredits: function () {
    return '© Esri';
  },
  maximumLevel: 17,
  tilingScheme: new Cesium.WebMercatorTilingScheme(),
  tileHeight: 256,
  tileWidth: 256,
  customTags: ['{z}', '{y}', '{x}', '{url}'],
  urlSchemeZeroPadding: false,
  pickFeaturesUrl:
    'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
  pickFeatures() {
    var tileProvider = this;
    var tilingScheme = this.tilingScheme;

    return function (x, y, level, latitudeN, longitudeW, latitudeS, longitudeE) {
      var url = tileProvider._urlFromTemplate(x, y, level);
      var sw = Cesium.Cartographic.fromDegrees(longitudeW, latitudeS);
      var ne = Cesium.Cartographic.fromDegrees(longitudeE, latitudeN);
      var nw = new Cesium.Cartographic(sw.longitude, ne.latitude);
      var se = new Cesium.Cartographic(ne.longitude, sw.latitude);
      var nwTile = tilingScheme.positionToTileXY(nw, level);
      var seTile = tilingScheme.positionToTileXY(se, level);
      var xPixelOffset = (nwTile.x - x) * tileProvider._tileWidth;
      var yPixelOffset = (seTile.y - y) * tileProvider._tileHeight;
      var canvas = document.createElement('canvas');
      canvas.width = tileProvider._tileWidth;
      canvas.height = tileProvider._tileHeight;
      var ctx = canvas.getContext('2d');
      ctx.drawImage(this._subdomainsImages[url], xPixelOffset, yPixelOffset);

      ctx.strokeStyle = Cesium.Color.CYAN.toCssColorString();
      ctx.lineWidth = 2;
      ctx.strokeRect(0, 0, canvas.width, canvas.height);
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.fillStyle = Cesium.Color.CYAN.toCssColorString();
      ctx.font = '16px sans-serif';
      var lat = tilingScheme.tileXYToNativeRectangle(x, y, level).south + (tilingScheme.projection.ellipsoid.maximumRadius * 2) / (canvas.width * Math.pow(2, level));
      var lon = tilingScheme.tileXYToNativeRectangle(x, y, level).west + (tilingScheme.projection.ellipsoid.maximumRadius * 2) / (canvas.height * Math.pow(2, level));
      ctx.fillText(level + ' / ' + x + ' / ' + y + ' / ' + lat.toFixed(3) + ' / ' + lon.toFixed(3), canvas.width / 2, canvas.height / 2);

      var dataUri = canvas.toDataURL('image/png');
      return loadImage(dataUri);
    };
  },
});