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)">// Enhanced road network visualization.</span>
<span style="color:var(--devsite-code-keywords-color)">var</span> roadNetwork = [
{stylers: [{saturation: -<span style="color:var(--devsite-code-numbers-color)">100</span>}]}, {
featureType: <span style="color:var(--devsite-code-strings-color)">'road.highway'</span>,
elementType: <span style="color:var(--devsite-code-strings-color)">'geometry.fill'</span>,
stylers: [{color: <span style="color:var(--devsite-code-strings-color)">'#000055'</span>}, {weight: <span style="color:var(--devsite-code-numbers-color)">2.5</span>}]
},
{
featureType: <span style="color:var(--devsite-code-strings-color)">'road.highway'</span>,
elementType: <span style="color:var(--devsite-code-strings-color)">'geometry.stroke'</span>,
stylers: [{color: <span style="color:var(--devsite-code-strings-color)">'#000000'</span>}, {weight: <span style="color:var(--devsite-code-numbers-color)">2</span>}]
},
{
featureType: <span style="color:var(--devsite-code-strings-color)">'road.arterial'</span>,
elementType: <span style="color:var(--devsite-code-strings-color)">'geometry'</span>,
stylers: [{color: <span style="color:var(--devsite-code-strings-color)">'#FF0000'</span>}, {weight: <span style="color:var(--devsite-code-numbers-color)">1.8</span>}]
},
{
featureType: <span style="color:var(--devsite-code-strings-color)">'road.local'</span>,
elementType: <span style="color:var(--devsite-code-strings-color)">'geometry'</span>,
stylers: [{color: <span style="color:var(--devsite-code-strings-color)">'#00FF55'</span>}, {weight: <span style="color:var(--devsite-code-numbers-color)">1.5</span>}]
}
];
<span style="color:var(--devsite-code-types-color)">Map</span>.setOptions(
<span style="color:var(--devsite-code-strings-color)">'roadNetwork'</span>, {iconChange: iconChange, roadNetwork: roadNetwork});
</code></span>
然后将重新设置地图的样式,如下所示:
“作弊代码”
还有一种无需调整任何选项即可创建自定义基本地图样式的简单方法:输入Snazzy Maps,这是一个用于为 Google 地图创建和共享出色样式的社区项目。他们的网站提供了 JavaScript 片段,可以从他们的网站复制并粘贴到 Earth Engine 中,以快速创建备用基本地图样式。
要应用 Snazzy Maps 样式,可以执行以下操作:
<span style="color:var(--devsite-code-color)"><code><span style="color:var(--devsite-code-keywords-color)">var</span> snazzyBlack = [
{
featureType: <span style="color:var(--devsite-code-strings-color)">'administrative'</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)">'labels.text.fill'</span>,
stylers: [{color: <span style="color:var(--devsite-code-strings-color)">'#444444'</span>}]
},
{
featureType: <span style="color:var(--devsite-code-strings-color)">'landscape'</span>,
elementType: <span style="color:var(--devsite-code-strings-color)">'all'</span>,
stylers: [{color: <span style="color:var(--devsite-code-strings-color)">'#000000'</span>}, {visibility: <span style="color:var(--devsite-code-strings-color)">'on'</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)">'road'</span>,
elementType: <span style="color:var(--devsite-code-strings-color)">'all'</span>,
stylers: [{saturation: -<span style="color:var(--devsite-code-numbers-color)">100</span>}, {lightness: <span style="color:var(--devsite-code-numbers-color)">45</span>}]
},
{
featureType: <span style="color:var(--devsite-code-strings-color)">'road'</span>,
elementType: <span style="color:var(--devsite-code-strings-color)">'geometry.fill'</span>,
stylers: [{color: <span style="color:var(--devsite-code-strings-color)">'#ffffff'</span>}]
},
{
featureType: <span style="color:var(--devsite-code-strings-color)">'road'</span>,
elementType: <span style="color:var(--devsite-code-strings-color)">'geometry.stroke'</span>,
stylers: [{color: <span style="color:var(--devsite-code-strings-color)">'#eaeaea'</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>}]},
{
featureType: <span style="color:var(--devsite-code-strings-color)">'road'</span>,
elementType: <span style="color:var(--devsite-code-strings-color)">'labels.text.fill'</span>,
stylers: [{color: <span style="color:var(--devsite-code-strings-color)">'#dedede'</span>}]
},
{
featureType: <span style="color:var(--devsite-code-strings-color)">'road'</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>}]
},
{
featureType: <span style="color:var(--devsite-code-strings-color)">'road.highway'</span>,
elementType: <span style="color:var(--devsite-code-strings-color)">'all'</span>,
stylers: [{visibility: <span style="color:var(--devsite-code-strings-color)">'simplified'</span>}]
},
{
featureType: <span style="color:var(--devsite-code-strings-color)">'road.arterial'</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>}]
},
{featureType: <span style="color:var(--devsite-code-strings-color)">'transit'</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)">'water'</span>,
elementType: <span style="color:var(--devsite-code-strings-color)">'all'</span>,
stylers: [{color: <span style="color:var(--devsite-code-strings-color)">'#434343'</span>}, {visibility: <span style="color:var(--devsite-code-strings-color)">'on'</span>}]
}
];
<span style="color:var(--devsite-code-keywords-color)">var</span> snazzyColor = [
{elementType: <span style="color:var(--devsite-code-strings-color)">'labels'</span>, stylers: [{visibility: <span style="color:var(--devsite-code-strings-color)">'off'</span>}]}, {
featureType: <span style="color:var(--devsite-code-strings-color)">'road'</span>,
elementType: <span style="color:var(--devsite-code-strings-color)">'geometry.fill'</span>,
stylers: [{color: <span style="color:var(--devsite-code-strings-color)">'#0F0919'</span>}]
},
{
featureType: <span style="color:var(--devsite-code-strings-color)">'water'</span>,
elementType: <span style="color:var(--devsite-code-strings-color)">'geometry.fill'</span>,
stylers: [{color: <span style="color:var(--devsite-code-strings-color)">'#E4F7F7'</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>}]}, {
featureType: <span style="color:var(--devsite-code-strings-color)">'poi.park'</span>,
elementType: <span style="color:var(--devsite-code-strings-color)">'geometry.fill'</span>,
stylers: [{color: <span style="color:var(--devsite-code-strings-color)">'#002FA7'</span>}]
},
{
featureType: <span style="color:var(--devsite-code-strings-color)">'poi.attraction'</span>,
elementType: <span style="color:var(--devsite-code-strings-color)">'geometry.fill'</span>,
stylers: [{color: <span style="color:var(--devsite-code-strings-color)">'#E60003'</span>}]
},
{
featureType: <span style="color:var(--devsite-code-strings-color)">'landscape'</span>,
elementType: <span style="color:var(--devsite-code-strings-color)">'geometry.fill'</span>,
stylers: [{color: <span style="color:var(--devsite-code-strings-color)">'#FBFCF4'</span>}]
},
{
featureType: <span style="color:var(--devsite-code-strings-color)">'poi.business'</span>,
elementType: <span style="color:var(--devsite-code-strings-color)">'geometry.fill'</span>,
stylers: [{color: <span style="color:var(--devsite-code-strings-color)">'#FFED00'</span>}]
},
{
featureType: <span style="color:var(--devsite-code-strings-color)">'poi.government'</span>,
elementType: <span style="color:var(--devsite-code-strings-color)">'geometry.fill'</span>,
stylers: [{color: <span style="color:var(--devsite-code-strings-color)">'#D41C1D'</span>}]
},
{
featureType: <span style="color:var(--devsite-code-strings-color)">'poi.school'</span>,
elementType: <span style="color:var(--devsite-code-strings-color)">'geometry.fill'</span>,
stylers: [{color: <span style="color:var(--devsite-code-strings-color)">'#BF0000'</span>}]
},
{
featureType: <span style="color:var(--devsite-code-strings-color)">'transit.line'</span>,
elementType: <span style="color:var(--devsite-code-strings-color)">'geometry.fill'</span>,
stylers: [{saturation: -<span style="color:var(--devsite-code-numbers-color)">100</span>}]
}
];
<span style="color:var(--devsite-code-types-color)">Map</span>.setOptions(
<span style="color:var(--devsite-code-strings-color)">'snazzyBlack'</span>, {snazzyBlack: snazzyBlack, snazzyColor: snazzyColor});
</code></span>
然后生成的地图将使用 Snazzy Maps 样式,如下所示:
最后,为了在为基本地图创建自定义样式时获得视觉反馈,还可以使用mapstyle。创建地图,复制 JavaScript 片段并将其粘贴到 Google 地球引擎 JavaScript 编辑器中。以下样式是使用 mapstyle 向导创建的。
<span style="color:var(--devsite-code-color)"><code><span style="color:var(--devsite-code-keywords-color)">var</span> mapStyle = [
{elementType: <span style="color:var(--devsite-code-strings-color)">'geometry'</span>, stylers: [{color: <span style="color:var(--devsite-code-strings-color)">'#ebe3cd'</span>}]},
{elementType: <span style="color:var(--devsite-code-strings-color)">'labels.text.fill'</span>, stylers: [{color: <span style="color:var(--devsite-code-strings-color)">'#523735'</span>}]},
{elementType: <span style="color:var(--devsite-code-strings-color)">'labels.text.stroke'</span>, stylers: [{color: <span style="color:var(--devsite-code-strings-color)">'#f5f1e6'</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: [{color: <span style="color:var(--devsite-code-strings-color)">'#c9b2a6'</span>}]
},
{
featureType: <span style="color:var(--devsite-code-strings-color)">'administrative.land_parcel'</span>,
elementType: <span style="color:var(--devsite-code-strings-color)">'geometry.stroke'</span>,
stylers: [{color: <span style="color:var(--devsite-code-strings-color)">'#dcd2be'</span>}]
},
{
featureType: <span style="color:var(--devsite-code-strings-color)">'administrative.land_parcel'</span>,
elementType: <span style="color:var(--devsite-code-strings-color)">'labels.text.fill'</span>,
stylers: [{color: <span style="color:var(--devsite-code-strings-color)">'#ae9e90'</span>}]
},
{
featureType: <span style="color:var(--devsite-code-strings-color)">'administrative.land_parcel'</span>,
elementType: <span style="color:var(--devsite-code-strings-color)">'labels.text.stroke'</span>,
stylers: [{color: <span style="color:var(--devsite-code-strings-color)">'#000040'</span>}, {visibility: <span style="color:var(--devsite-code-strings-color)">'simplified'</span>}]
},
{
featureType: <span style="color:var(--devsite-code-strings-color)">'administrative.neighborhood'</span>,
elementType: <span style="color:var(--devsite-code-strings-color)">'labels.text.fill'</span>,
stylers: [{color: <span style="color:var(--devsite-code-strings-color)">'#408080'</span>}]
},
{
featureType: <span style="color:var(--devsite-code-strings-color)">'landscape.man_made'</span>,
elementType: <span style="color:var(--devsite-code-strings-color)">'geometry.fill'</span>,
stylers: [{color: <span style="color:var(--devsite-code-strings-color)">'#800040'</span>}]
},
{
featureType: <span style="color:var(--devsite-code-strings-color)">'landscape.natural'</span>,
elementType: <span style="color:var(--devsite-code-strings-color)">'geometry'</span>,
stylers: [{color: <span style="color:var(--devsite-code-strings-color)">'#dfd2ae'</span>}]
},
{
featureType: <span style="color:var(--devsite-code-strings-color)">'landscape.natural'</span>,
elementType: <span style="color:var(--devsite-code-strings-color)">'geometry.fill'</span>,
stylers: [{color: <span style="color:var(--devsite-code-strings-color)">'#737c03'</span>}]
},
{
featureType: <span style="color:var(--devsite-code-strings-color)">'landscape.natural.terrain'</span>,
elementType: <span style="color:var(--devsite-code-strings-color)">'geometry.fill'</span>,
stylers: [{color: <span style="color:var(--devsite-code-strings-color)">'#000040'</span>}]
},
{
featureType: <span style="color:var(--devsite-code-strings-color)">'poi'</span>,
elementType: <span style="color:var(--devsite-code-strings-color)">'geometry'</span>,
stylers: [{color: <span style="color:var(--devsite-code-strings-color)">'#dfd2ae'</span>}]
},
{
featureType: <span style="color:var(--devsite-code-strings-color)">'poi'</span>,
elementType: <span style="color:var(--devsite-code-strings-color)">'labels.text'</span>,
stylers: [{visibility: <span style="color:var(--devsite-code-strings-color)">'off'</span>}]
},
{
featureType: <span style="color:var(--devsite-code-strings-color)">'poi'</span>,
elementType: <span style="color:var(--devsite-code-strings-color)">'labels.text.fill'</span>,
stylers: [{color: <span style="color:var(--devsite-code-strings-color)">'#93817c'</span>}]
},
{featureType: <span style="color:var(--devsite-code-strings-color)">'poi.business'</span>, stylers: [{visibility: <span style="color:var(--devsite-code-strings-color)">'off'</span>}]},
{
featureType: <span style="color:var(--devsite-code-strings-color)">'poi.park'</span>,
elementType: <span style="color:var(--devsite-code-strings-color)">'geometry.fill'</span>,
stylers: [{color: <span style="color:var(--devsite-code-strings-color)">'#a5b076'</span>}]
},
{
featureType: <span style="color:var(--devsite-code-strings-color)">'poi.park'</span>,
elementType: <span style="color:var(--devsite-code-strings-color)">'labels.text.fill'</span>,
stylers: [{color: <span style="color:var(--devsite-code-strings-color)">'#447530'</span>}]
},
{
featureType: <span style="color:var(--devsite-code-strings-color)">'road'</span>,
elementType: <span style="color:var(--devsite-code-strings-color)">'geometry'</span>,
stylers: [{color: <span style="color:var(--devsite-code-strings-color)">'#f5f1e6'</span>}]
},
{
featureType: <span style="color:var(--devsite-code-strings-color)">'road'</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>}]
},
{
featureType: <span style="color:var(--devsite-code-strings-color)">'road.arterial'</span>,
elementType: <span style="color:var(--devsite-code-strings-color)">'geometry'</span>,
stylers: [{color: <span style="color:var(--devsite-code-strings-color)">'#fdfcf8'</span>}]
},
{
featureType: <span style="color:var(--devsite-code-strings-color)">'road.highway'</span>,
elementType: <span style="color:var(--devsite-code-strings-color)">'geometry'</span>,
stylers: [{color: <span style="color:var(--devsite-code-strings-color)">'#f8c967'</span>}]
},
{
featureType: <span style="color:var(--devsite-code-strings-color)">'road.highway'</span>,
elementType: <span style="color:var(--devsite-code-strings-color)">'geometry.stroke'</span>,
stylers: [{color: <span style="color:var(--devsite-code-strings-color)">'#e9bc62'</span>}]
},
{
featureType: <span style="color:var(--devsite-code-strings-color)">'road.highway.controlled_access'</span>,
elementType: <span style="color:var(--devsite-code-strings-color)">'geometry'</span>,
stylers: [{color: <span style="color:var(--devsite-code-strings-color)">'#e98d58'</span>}]
},
{
featureType: <span style="color:var(--devsite-code-strings-color)">'road.highway.controlled_access'</span>,
elementType: <span style="color:var(--devsite-code-strings-color)">'geometry.stroke'</span>,
stylers: [{color: <span style="color:var(--devsite-code-strings-color)">'#db8555'</span>}]
},
{
featureType: <span style="color:var(--devsite-code-strings-color)">'road.local'</span>,
elementType: <span style="color:var(--devsite-code-strings-color)">'labels.text.fill'</span>,
stylers: [{color: <span style="color:var(--devsite-code-strings-color)">'#806b63'</span>}]
},
{featureType: <span style="color:var(--devsite-code-strings-color)">'transit'</span>, stylers: [{visibility: <span style="color:var(--devsite-code-strings-color)">'off'</span>}]},
{
featureType: <span style="color:var(--devsite-code-strings-color)">'transit.line'</span>,
elementType: <span style="color:var(--devsite-code-strings-color)">'geometry'</span>,
stylers: [{color: <span style="color:var(--devsite-code-strings-color)">'#dfd2ae'</span>}]
},
{
featureType: <span style="color:var(--devsite-code-strings-color)">'transit.line'</span>,
elementType: <span style="color:var(--devsite-code-strings-color)">'labels.text.fill'</span>,
stylers: [{color: <span style="color:var(--devsite-code-strings-color)">'#8f7d77'</span>}]
},
{
featureType: <span style="color:var(--devsite-code-strings-color)">'transit.line'</span>,
elementType: <span style="color:var(--devsite-code-strings-color)">'labels.text.stroke'</span>,
stylers: [{color: <span style="color:var(--devsite-code-strings-color)">'#ebe3cd'</span>}]
},
{
featureType: <span style="color:var(--devsite-code-strings-color)">'transit.station'</span>,
elementType: <span style="color:var(--devsite-code-strings-color)">'geometry'</span>,
stylers: [{color: <span style="color:var(--devsite-code-strings-color)">'#dfd2ae'</span>}]
},
{
featureType: <span style="color:var(--devsite-code-strings-color)">'water'</span>,
elementType: <span style="color:var(--devsite-code-strings-color)">'geometry.fill'</span>,
stylers: [{color: <span style="color:var(--devsite-code-strings-color)">'#b9d3c2'</span>}]
},
{
featureType: <span style="color:var(--devsite-code-strings-color)">'water'</span>,
elementType: <span style="color:var(--devsite-code-strings-color)">'labels.text.fill'</span>,
stylers: [{color: <span style="color:var(--devsite-code-strings-color)">'#92998d'</span>}]
}
];
<span style="color:var(--devsite-code-types-color)">Map</span>.setOptions(<span style="color:var(--devsite-code-strings-color)">'mapStyle'</span>, {mapStyle: mapStyle});
</code></span>
生成的基本地图如下所示: