- 微信
- 微博
  
  分享文章到微博
- 复制链接
  
  复制链接到剪贴板

GEE用特定的方式加载指定的图片和素材

此星光明发表于 2022/10/04 16:28:31 2022/10/04

【摘要】今天分享一个非常有趣的GEE加载图片的功能，但是值得注意的是，这里的图片都智能来源于特定的网站（https://fonts.google.com/icons）这个网站的主要内容：材料符号是我们最新的图标，在一个单一的字体文件中整合了超过2500个字形，具有广泛的设计变体。符号有三种风格和四种可调整的可变字体风格（填充、重量、等级和光学尺寸）。进入网站后选择我们所需的标签，然后再顶部选择链接...

今天分享一个非常有趣的GEE加载图片的功能，但是值得注意的是，这里的图片都智能来源于特定的网站（https://fonts.google.com/icons）

这个网站的主要内容：材料符号是我们最新的图标，在一个单一的字体文件中整合了超过2500个字形，具有广泛的设计变体。符号有三种风格和四种可调整的可变字体风格（填充、重量、等级和光学尺寸）。

进入网站后选择我们所需的标签，然后再顶部选择链接分享的图表，就会跳出来一个链接，我们直接copy link即可：

具体的操作流程：

// 你可以包括从https://fonts.google.com 提供的材料图标。
// 1.进入https://fonts.google.com/icons
// 2、找到并选择你喜欢的图标。
// 3.在右下角，右击SVG按钮并复制URL。
// 4.将URL粘贴为imageUrl参数。

同样也可以从https://www.gstatic.com获取图片：

// 你也可以包括从https://www.gstatic.com 提供的图片。这些都是谷歌托管的图片。
//主要用于品牌宣传。这里显示的是地球引擎的标志。你可以用gstatic这个选项做的事情并不多。
// 选项，你能做的并不多。

第三种方式：

// 1.用一些数据URI制作一个JSON文件（使用Python的base64包进行编码）。
// 2.将JSON文件上传到云存储桶中
// 3.在EE中把JSON文件作为blob加载，并处理成字典。
// 4.从字典中获取图像数据URI

代码：

//  __  __    __    ____  ____  ____  ____    __    __        ____   ___  _____  _  _  ___ 
// (  \/  )  /__\  (_  _)( ___)(  _ \(_  _)  /__\  (  )      (_  _) / __)(  _  )( \( )/ __)
//  )    (  /(  )\   )(   )__)  )   / _)(_  /(  )\  )(__      _)(_ ( (__  )(_)(  )  ( \__ \
// (_/\/\_)(__)(__) (__) (____)(_)\_)(____)(__)(__)(____)    (____) \___)(_____)(_)\_)(___/


print(ui.Label({imageUrl: 'https://fonts.gstatic.com/s/i/materialiconsoutlined/rocket_launch/v1/24px.svg'}));
print(ui.Label({imageUrl: 'https://fonts.gstatic.com/s/i/materialiconstwotone/satellite_alt/v1/20px.svg'}));
print(ui.Label({imageUrl: 'https://fonts.gstatic.com/s/i/materialicons/location_on/v15/24px.svg'}));
print(ui.Label({imageUrl: 'https://fonts.gstatic.com/s/i/materialiconsround/park/v10/24px.svg'}));
print(ui.Label({imageUrl: 'https://fonts.gstatic.com/s/i/materialiconsoutlined/pedal_bike/v14/24px.svg'}));



//   ___  ___  ____    __    ____  ____   ___ 
//  / __)/ __)(_  _)  /__\  (_  _)(_  _) / __)
// ( (_-.\__ \  )(   /(  )\   )(   _)(_ ( (__ 
//  \___/(___/ (__) (__)(__) (__) (____) \___)

// 你也可以包括从https://www.gstatic.com 提供的图片。这些都是谷歌托管的图片。
//主要用于品牌宣传。这里显示的是地球引擎的标志。你可以用gstatic这个选项做的事情并不多。
// 选项，你能做的并不多。
print(ui.Label({imageUrl: 'https://www.gstatic.com/images/icons/product/earth_engine-128.png'}));
// Earth Engine logo



//   ___  __    _____  __  __  ____       ___  ____  _____  ____    __     ___  ____ 
//  / __)(  )  (  _  )(  )(  )(  _ \     / __)(_  _)(  _  )(  _ \  /__\   / __)( ___)
// ( (__  )(__  )(_)(  )(__)(  )(_) )    \__ \  )(   )(_)(  )   / /(  )\ ( (_-. )__) 
//  \___)(____)(_____)(______)(____/     (___/ (__) (_____)(_)\_)(__)(__) \___/(____)

// 1.用一些数据URI制作一个JSON文件（使用Python的base64包进行编码）。
// 2.将JSON文件上传到云存储桶中
// 3.在EE中把JSON文件作为blob加载，并处理成字典。
// 4.从字典中获取图像数据URI
var eeDict = ee.Blob('gs://ee-blob-test/blog.json').string().decodeJSON();
eeDict.evaluate(function(eeDict) {
  print(ui.Label({imageUrl: eeDict.img1}));
});
// Banana man


// JSON文件中的URI看起来是这样的（一个加载旋钮） ↓
var spinnerUri = 'data:image/gif;base64,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';

// 找到了一个 GIF 微调器，调整它的大小，然后上传到 https://www.base64-image.de/
// 复制 HTML <img> 的结果数据 URI 并粘贴到代码编辑器中或添加到 JSON 对象，如上所示。您还可以使用 base64 库在 Python 中创建 URI。
print(ui.Label({imageUrl: spinnerUri}));
// Loading spinner

本文所需用到的函数：

ee.Blob(url)

Loads a Blob from a Google Cloud Storage URL.