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

本文主要是介绍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;};