GEE JS教程（2）：自定义地图样式

最新推荐文章于 2025-06-07 09:55:15 发布

原创

最新推荐文章于 2025-06-07 09:55:15 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#python #javascript

本文介绍了如何在Google Earth Engine中自定义地图样式，包括改变底图的色调、亮度、饱和度和伽马，以及控制地图元素如几何图形、标签和图标。此外，还提到了使用Snazzy Maps和mapstyle工具来快速创建独特的地图样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Earth Engine 中的默认地图

Earth Engine 的基本地图是 Google Map API 中的地图。默认选项包括：

路线图，显示默认路线图视图，
卫星，显示谷歌地球卫星图像，
混合，显示正常和卫星视图的混合，
地形，根据地形信息显示物理地图。

更改基本地图样式

我们可以从改变底图的样式开始。一个简单的解决方法是反转亮度以获得更暗的背景，如下所示：

<span style="color:var(--devsite-code-color)"><code><span style="color:var(--devsite-code-keywords-color)">var</span> baseChange = [{featureType: <span style="color:var(--devsite-code-strings-color)">'all'</span>, stylers: [{invert_lightness: <span style="color:var(--devsite-code-keywords-color)">true</span>}]}];

<span style="color:var(--devsite-code-types-color)">Map</span>.setOptions(<span style="color:var(--devsite-code-strings-color)">'baseChange'</span>, {<span style="color:var(--devsite-code-strings-color)">'baseChange'</span>: baseChange});
</code></span>

主要的造型器选项包括：

色调：表示基本颜色
亮度：表示元素亮度的百分比变化
饱和度：表示元素基本颜色的百分比变化
伽马：元素的伽马校正（0.01 和 10.0）
反转亮度：反转现有亮度
可见性：更改元素的可见性选项（打开、关闭或简化）
颜色：设置元素的颜色（使用 RGB 十六进制字符串）
权重：以像素为单位设置特征的权重

更改地图元素

Google Maps API（以及扩展的 Earth Engine）使您能够控制大量地图功能和元素。

您可以在 Google 地图文档中找到可以修改的完整元素列表：https://developers.google.com/maps/documentation/javascript/style-reference

完整的功能列表（也在上面链接的 Google Maps API 文档中）包括几何图形、标签、图标等。所有样式器选项都适用于这些功能中的每一个。

例如，要删除图标和自定义路线图样式，可以按如下方式定义样式：

<span style="color:var(--devsite-code-color)"><code><span style="color:var(--devsite-code-comments-color)">// Remove icons.</span>
<span style="color:var(--devsite-code-keywords-color)">var</span> iconChange = [
  {
    <span style="color:var(--devsite-code-comments-color)">// Change map saturation.</span>
    stylers: [{gamma: <span style="color:var(--devsite-code-numbers-color)">0.2</span>}]
  },
  {
    <span style="color:var(--devsite-code-comments-color)">// Change label properties.</span>
    elementType: <span style="color:var(--devsite-code-strings-color)">'labels'</span>,
    stylers: [{visibility: <span style="color:var(--devsite-code-strings-color)">'off'</span>, color: <span style="color:var(--devsite-code-strings-color)">'#000055'</span>}]
  },
  {
    <span style="color:var(--devsite-code-comments-color)">// Change road properties.</span>
    featureType: <span style="color:var(--devsite-code-strings-color)">'road'</span>,
    elementType: <span style="color:var(--devsite-code-strings-color)">'geometry'</span>,
    stylers: [{visibility: <span style="color:var(--devsite-code-strings-color)">'off'</span>, color: <span style="color:var(--devsite-code-strings-color)">'#000055'</span>}]
  },
  {
    <span style="color:var(--devsite-code-comments-color)">// Change road labels.</span>
    featureType: <span style="color:var(--devsite-code-strings-color)">'road'</span>,
    elementType: <span style="color:var(--devsite-code-strings-color)">'labels'</span>,
    stylers: [{visibility: <span style="color:var(--devsite-code-strings-color)">'off'</span>}]
  },
  {
    <span style="color:var(--devsite-code-comments-color)">// Change icon properties.</span>
    elementType: <span style="color:var(--devsite-code-strings-color)">'labels.icon'</span>,
    stylers: [{visibility: <span style="color:var(--devsite-code-strings-color)">'off'</span>}]
  },
  {
    <span style="color:var(--devsite-code-comments-color)">// Change POI options.</span>
    featureType: <span style="color:var(--devsite-code-strings-color)">'poi'</span>,
    elementType: <span style="color:var(--devsite-code-strings-color)">'all'</span>,
    stylers: [{visibility: <span style="color:var(--devsite-code-strings-color)">'off'</span>}]
  },
  {
    featureType: <span style="color:var(--devsite-code-strings-color)">'administrative'</span>,
    elementType: <span style="color:var(--devsite-code-strings-color)">'geometry.fill'</span>,
    stylers: [{visibility: <span style="color:var(--devsite-code-strings-color)">'off'</span>}]
  },
  {
    featureType: <span style="color:var(--devsite-code-strings-color)">'administrative'</span>,
    elementType: <span style="color:var(--devsite-code-strings-color)">'geometry.stroke'</span>,
    stylers: [{visibility: <span style="color:var(--devsite-code-strings-color)">'off'</span>}]
  }
];

<span style="color:var(--devsit