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

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(--devsite-code-comments-color)&