公告:所有在
2025 年 4 月 15 日之前注册使用 Earth Engine 的非商业项目都必须
验证是否符合非商业性质的资格条件,才能继续使用 Earth Engine。
ui.Thumbnail
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
根据 ee.Image 异步生成的固定大小的缩略图。
用法 | 返回 |
---|
ui.Thumbnail(image, params, onClick, style) | ui.Thumbnail |
参数 | 类型 | 详细信息 |
---|
image | 图片(可选) | 要从中生成缩略图的 ee.Image。默认为空的 ee.Image。 |
params | 对象,可选 | 如需了解可能使用的参数,请参阅 ui.Thumbnail.setParams()。默认值为一个空对象。 |
onClick | 函数(可选) | 点击缩略图时触发的回调。 |
style | 对象,可选 | 一个包含允许的 CSS 样式及其要为此标签设置的值的对象。默认为空对象。 |
示例
代码编辑器 (JavaScript)
// The goal is to create a series of thumbnail images for an elevation dataset
// with different backgrounds. The background layers and image visualization
// are previewed in the Code Editor map before creating the thumbnails.
// Define a black background.
var blackBg = ee.Image.rgb(0, 0, 0)
.visualize({min: 0, max: 255});
Map.addLayer(blackBg, {}, 'Black background');
// Define a water / land background.
var waterLandBg = ee.Image('NOAA/NGDC/ETOPO1').select('bedrock').gt(0.0)
.visualize({palette: ['cadetblue', 'lightgray']});
Map.addLayer(waterLandBg, {}, 'Water / land background');
// A map display of a digital elevation model (DEM).
var image = ee.Image('AU/GA/DEM_1SEC/v10/DEM-S').select('elevation')
.visualize({
min: -10.0,
max: 1300.0,
palette: [
'3ae237', 'b5e22e', 'd6e21f', 'fff705', 'ffd611', 'ffb613', 'ff8b13',
'ff6e08', 'ff500d', 'ff0000', 'de0101', 'c21301', '0602ff', '235cb1',
'307ef3', '269db1', '30c8e2', '32d3ef', '3be285', '3ff38f', '86e26f'
],
});
Map.addLayer(image, {}, 'Elevation');
// Set the center of the map.
var lon = 133.95;
var lat = -24.69;
Map.setCenter(lon, lat, 4);
// Set the basic parameters for the thumbnail.
// Half-width of the thumbnail in degrees in EPSG:3857.
var delta = 22;
// Width and Height of the Thumbail image.
var pixels = 256;
var areaOfInterest = ee.Geometry.Rectangle(
[lon - delta, lat - delta, lon + delta, lat + delta], null, false);
var parameters = {
dimensions: [pixels, pixels],
region: areaOfInterest,
crs: 'EPSG:3857',
format: 'png'};
// Create a thumbnail with no background fill.
// Masked pixels will be transparent.
print(ui.Thumbnail({image: image, params: parameters}));
// Use a black background to replace masked image pixels.
var imageWithBlackBg = blackBg.blend(image);
print(ui.Thumbnail({
image: imageWithBlackBg, params: parameters}));
// Use the water / land background to replace masked image pixels.
var imageWithWaterLandBg = waterLandBg.blend(image);
print(ui.Thumbnail({
image: imageWithWaterLandBg, params: parameters}));
如未另行说明,那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可,并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情,请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2025-07-26。
[null,null,["最后更新时间 (UTC):2025-07-26。"],[[["\u003cp\u003e\u003ccode\u003eui.Thumbnail\u003c/code\u003e creates a fixed-size thumbnail image from an \u003ccode\u003eee.Image\u003c/code\u003e asynchronously.\u003c/p\u003e\n"],["\u003cp\u003eThumbnail generation is customizable with parameters like dimensions, region, CRS, and format.\u003c/p\u003e\n"],["\u003cp\u003e\u003ccode\u003eui.Thumbnail\u003c/code\u003e allows for setting an \u003ccode\u003eonClick\u003c/code\u003e callback function and custom styles.\u003c/p\u003e\n"],["\u003cp\u003eBackgrounds can be blended with the primary image for thumbnail visualizations.\u003c/p\u003e\n"],["\u003cp\u003eThe example demonstrates thumbnail creation for an elevation dataset with different background options.\u003c/p\u003e\n"]]],[],null,["# ui.Thumbnail\n\n\u003cbr /\u003e\n\nA fixed-size thumbnail image generated asynchronously from an ee.Image.\n\n\u003cbr /\u003e\n\n| Usage | Returns |\n|------------------------------------------------------------------|--------------|\n| `ui.Thumbnail(`*image* `, `*params* `, `*onClick* `, `*style*`)` | ui.Thumbnail |\n\n| Argument | Type | Details |\n|-----------|--------------------|-----------------------------------------------------------------------------------------------------------|\n| `image` | Image, optional | The ee.Image from which to generate the thumbnail. Defaults to an empty ee.Image. |\n| `params` | Object, optional | For an explanation of the possible parameters, see ui.Thumbnail.setParams(). Defaults to an empty object. |\n| `onClick` | Function, optional | A callback fired when the thumbnail is clicked. |\n| `style` | Object, optional | An object of allowed CSS styles with their values to be set for this label. Defaults to an empty object. |\n\nExamples\n--------\n\n### Code Editor (JavaScript)\n\n```javascript\n// The goal is to create a series of thumbnail images for an elevation dataset\n// with different backgrounds. The background layers and image visualization\n// are previewed in the Code Editor map before creating the thumbnails.\n\n// Define a black background.\nvar blackBg = ee.Image.rgb(0, 0, 0)\n .visualize({min: 0, max: 255});\nMap.addLayer(blackBg, {}, 'Black background');\n\n// Define a water / land background.\nvar waterLandBg = ee.Image('NOAA/NGDC/ETOPO1').select('bedrock').gt(0.0)\n .visualize({palette: ['cadetblue', 'lightgray']});\nMap.addLayer(waterLandBg, {}, 'Water / land background');\n\n// A map display of a digital elevation model (DEM).\nvar image = ee.Image('AU/GA/DEM_1SEC/v10/DEM-S').select('elevation')\n .visualize({\n min: -10.0,\n max: 1300.0,\n palette: [\n '3ae237', 'b5e22e', 'd6e21f', 'fff705', 'ffd611', 'ffb613', 'ff8b13',\n 'ff6e08', 'ff500d', 'ff0000', 'de0101', 'c21301', '0602ff', '235cb1',\n '307ef3', '269db1', '30c8e2', '32d3ef', '3be285', '3ff38f', '86e26f'\n ],\n });\nMap.addLayer(image, {}, 'Elevation');\n\n// Set the center of the map.\nvar lon = 133.95;\nvar lat = -24.69;\nMap.setCenter(lon, lat, 4);\n\n// Set the basic parameters for the thumbnail.\n// Half-width of the thumbnail in degrees in EPSG:3857.\nvar delta = 22;\n// Width and Height of the Thumbail image.\nvar pixels = 256;\n\nvar areaOfInterest = ee.Geometry.Rectangle(\n [lon - delta, lat - delta, lon + delta, lat + delta], null, false);\n\nvar parameters = {\n dimensions: [pixels, pixels],\n region: areaOfInterest,\n crs: 'EPSG:3857',\n format: 'png'};\n\n// Create a thumbnail with no background fill.\n// Masked pixels will be transparent.\nprint(ui.Thumbnail({image: image, params: parameters}));\n\n// Use a black background to replace masked image pixels.\nvar imageWithBlackBg = blackBg.blend(image);\nprint(ui.Thumbnail({\n image: imageWithBlackBg, params: parameters}));\n\n// Use the water / land background to replace masked image pixels.\nvar imageWithWaterLandBg = waterLandBg.blend(image);\nprint(ui.Thumbnail({\n image: imageWithWaterLandBg, params: parameters}));\n```"]]