cesium修改TileCoordinatesImageryLayer源码实现随机颜色，点选显示坐标

cesium修改TileCoordinatesImageryLayer源码实现随机颜色，点选显示坐标。

1、修改函数requestImage：实现了随机颜色的瓦片覆盖。

TileCoordinatesImageryProvider.prototype.requestImage = function (
    x,
    y,
    level,
    request
  ) {
    /*随机获取颜色*/
    function getRandomColor() {
        var r = Math.floor(Math.random() * 256);
        var g = Math.floor(Math.random() * 256);
        var b = Math.floor(Math.random() * 256);
        var a=0.3//设置透明度
        return "rgba(" + r + ',' + g + ',' + b + ',' + a +")";
        //return '#' + Math.floor(Math.random() * 0xffffff).toString(16);
     }  

    var canvas = document.createElement("canvas");
    canvas.width = 256;
    canvas.height = 256;
    var context = canvas.getContext("2d");

    var cssColor = this._color.toCssColorString();    
    context.strokeStyle = cssColor;    
    context.lineWidth = 2;
    context.strokeRect(1, 1, 255, 255);
    
    context.fillStyle = getRandomColor();
    context.fillRect(1, 1, 255, 255);

 /*    context.font = "bold 25px Arial";
    context.textAlign = "center";
    context.fillStyle = cssColor;
    context.fillText("L: " + level, 124, 86);
    context.fillText("X: " + x, 124, 136);
    context.fillText("Y: " + y, 124, 186); */

    return canvas;
  };

2、编写函数pickFeatures：实现点选瓦片操作，并在四个角标出经纬度。

TileCoordinatesImageryProvider.prototype.pickFeatures = function (
    x,
    y,
    level,
    longitude,
    latitude
  ) {

    var interval = 180.0 / Math.pow(2, level);
    var lon = (x + 0.5) * interval-180;
    var lat = 90 - (y + 0.5) * interval;
    var step=0.5*interval;

    var labelLevel = 'L:' + level;
    var labelLonMin = 'Lo:'+(lon-step);
    var labelLatMin = 'La:'+(lat-step);
    var labelLonMax = 'Lo:'+(lon+step);
    var labelLatMax = 'La:'+(lat+step);
    

    var canvas = document.createElement("canvas");
    canvas.width = 256;
    canvas.height = 256;
    var context = canvas.getContext("2d");

    //var cssColor = this._color.toCssColorString();

    context.strokeStyle = "#FF0000";//cssColor;
    context.lineWidth = 5;
    context.strokeRect(1, 1, 255, 255);

    context.font = "bold 15px Arial";    
    context.fillStyle = "#000080"//cssColor; 
    context.textAlign = "center";   
    context.fillText(labelLevel, 124, 128);
    context.textAlign = "left";
    context.fillText(labelLonMin, 5, 20);
    context.fillText(labelLatMax, 5, 35);
    
    context.fillText(labelLonMin, 5, 230);
    context.fillText(labelLatMin, 5, 245);

    context.textAlign = "right";
    context.fillText(labelLonMax, 250, 20);
    context.fillText(labelLatMax, 250, 35);
    
    context.fillText(labelLonMax, 250, 230);
    context.fillText(labelLatMin, 250, 245);    
    //console.log(canvas);
      
    var pintest=canvas.toDataURL();
    var imageryLayers = viewer.imageryLayers;
    viewer.entities.removeAll();
    viewer.entities.add({
      name: 'heatmap',
      rectangle: {
          coordinates: Cesium.Rectangle.fromDegrees(lon-step, lat-step, lon+step, lat+step),
          material: new Cesium.ImageMaterialProperty({
              image: pintest,
              transparent: true
          })
  
      }
  });

    return canvas;
  };