ui.Thumbnail
Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang
Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.
Hình thu nhỏ có kích thước cố định được tạo không đồng bộ từ ee.Image.
Cách sử dụng | Giá trị trả về |
---|
ui.Thumbnail(image, params, onClick, style) | ui.Thumbnail |
Đối số | Loại | Thông tin chi tiết |
---|
image | Hình ảnh (không bắt buộc) | ee.Image mà từ đó tạo hình thu nhỏ. Mặc định là ee.Image trống. |
params | Đối tượng, không bắt buộc | Để biết nội dung giải thích về các tham số có thể có, hãy xem ui.Thumbnail.setParams(). Mặc định là một đối tượng trống. |
onClick | Hàm, không bắt buộc | Một lệnh gọi lại được kích hoạt khi người dùng nhấp vào hình thu nhỏ. |
style | Đối tượng, không bắt buộc | Một đối tượng gồm các kiểu CSS được phép có giá trị được đặt cho nhãn này. Giá trị mặc định là một đối tượng trống. |
Ví dụ
Trình soạn thảo mã (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}));
Trừ phi có lưu ý khác, nội dung của trang này được cấp phép theo Giấy phép ghi nhận tác giả 4.0 của Creative Commons và các mẫu mã lập trình được cấp phép theo Giấy phép Apache 2.0. Để biết thông tin chi tiết, vui lòng tham khảo Chính sách trang web của Google Developers. Java là nhãn hiệu đã đăng ký của Oracle và/hoặc các đơn vị liên kết với Oracle.
Cập nhật lần gần đây nhất: 2025-07-26 UTC.
[null,null,["Cập nhật lần gần đây nhất: 2025-07-26 UTC."],[[["\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```"]]