GEE 底图加载——自定义底图样式加载案例分析（含免费引如多款底图）

2024-03-08 21:12
文章标签 分析 加载 自定义 案例 免费 样式 gee 多款 底图 引如

本文主要是介绍GEE 底图加载——自定义底图样式加载案例分析（含免费引如多款底图），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在本教程中，您将学习如何更改地图对象的选项，以便为底层基础地图定义自己的样式。

地球引擎中的默认地图

地球引擎的基础地图是 Google Map API 中的地图。默认选项包括

  • roadmap，显示默认的路线图视图、
  • 卫星，显示谷歌地球卫星图像、
  • 混合视图，显示普通视图和卫星视图的混合视图，以及
  • 地形：显示基于地形信息的物理地图。

函数

Map.setOptions(mapTypeId, styles, types)

Modifies the Google Maps basemap. Allows for:

1) Setting the current MapType. 2) Providing custom styles for the basemap (MapTypeStyles). 3) Setting the list of available mapTypesIds for the basemap.

If called with no parameters, resets the map type to the google default.

Returns the map.

修改 Google 地图基图。允许

1) 设置当前地图类型。2) 为基图提供自定义样式（MapTypeStyles）。3) 为基图设置可用的 mapTypesIds 列表。

如果调用时没有参数，则将地图类型重置为谷歌默认类型。

返回地图。

Arguments:

mapTypeId (String, optional):

A mapTypeId to set the basemap to. Can be one of "ROADMAP", "SATELLITE", "HYBRID" or "TERRAIN" to select one of the standard Google Maps API map types, or one of the keys specified in the opt_styles dictionary. If left as null and only 1 style is specified in opt_styles, that style will be used.

styles (Object, optional):

A dictionary of custom MapTypeStyle objects keyed with a name that will appear in the map's Map Type Controls. See: https://developers.google.com/maps/documentation/javascript/reference#MapTypeStyle

types (List<String>, optional):

A list of mapTypeIds to make available. If omitted, but opt_styles is specified, appends all of the style keys to the standard Google Maps API map types.

Returns: ui.Map

更改基本地图样式

我们可以从改变基础地图的风格开始。其中一个简单的方法是反转亮度以获得更暗的背景，就像这样： 

var baseChange = [{featureType: 'all', stylers: [{invert_lightness: true}]}];Map.setOptions('baseChange', {'baseChange': baseChange});

背景暗的情况

背景亮的情况 

主要的造型器选项包括

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

更改地图元素

谷歌地图应用程序接口（以及延伸的地球引擎）可让您控制大量地图功能和元素。

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

功能的完整列表（也可在上述链接的谷歌地图 API 文档中找到）包括几何图形、标签、图标等。所有造型器选项均可与这些功能配合使用。

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

 自己更改代码

// Remove icons.
var iconChange = [{// Change map saturation.stylers: [{gamma: 0.2}]},{// Change label properties.elementType: 'labels',stylers: [{visibility: 'off', color: '#000055'}]},{// Change road properties.featureType: 'road',elementType: 'geometry',stylers: [{visibility: 'off', color: '#000055'}]},{// Change road labels.featureType: 'road',elementType: 'labels',stylers: [{visibility: 'off'}]},{// Change icon properties.elementType: 'labels.icon',stylers: [{visibility: 'off'}]},{// Change POI options.featureType: 'poi',elementType: 'all',stylers: [{visibility: 'off'}]},{featureType: 'administrative',elementType: 'geometry.fill',stylers: [{visibility: 'off'}]},{featureType: 'administrative',elementType: 'geometry.stroke',stylers: [{visibility: 'off'}]}
];// Enhanced road network visualization.
var roadNetwork = [{stylers: [{saturation: -100}]}, {featureType: 'road.highway',elementType: 'geometry.fill',stylers: [{color: '#000055'}, {weight: 2.5}]},{featureType: 'road.highway',elementType: 'geometry.stroke',stylers: [{color: '#000000'}, {weight: 2}]},{featureType: 'road.arterial',elementType: 'geometry',stylers: [{color: '#FF0000'}, {weight: 1.8}]},{featureType: 'road.local',elementType: 'geometry',stylers: [{color: '#00FF55'}, {weight: 1.5}]}
];Map.setOptions('roadNetwork', {iconChange: iconChange, roadNetwork: roadNetwork});

iconChange结果 

 

roadNetwork结果 

 

简化代码：引入格式

还有一种无需调整任何选项即可创建自定义基础地图样式的简便方法：进入 Snazzy Maps，这是一个创建和分享谷歌地图优秀样式的社区项目。他们的网站提供了 JavaScript 代码段，可以从网站上复制这些代码段并粘贴到 Earth Engine 中，从而快速创建备用的基础地图样式。

要应用 Snazzy Maps 样式，可以按以下步骤操作：

引用snazzy代码

var snazzyBlack = [{featureType: 'administrative',elementType: 'all',stylers: [{visibility: 'off'}]},{featureType: 'administrative',elementType: 'labels.text.fill',stylers: [{color: '#444444'}]},{featureType: 'landscape',elementType: 'all',stylers: [{color: '#000000'}, {visibility: 'on'}]},{featureType: 'poi', elementType: 'all', stylers: [{visibility: 'off'}]}, {featureType: 'road',elementType: 'all',stylers: [{saturation: -100}, {lightness: 45}]},{featureType: 'road',elementType: 'geometry.fill',stylers: [{color: '#ffffff'}]},{featureType: 'road',elementType: 'geometry.stroke',stylers: [{color: '#eaeaea'}]},{featureType: 'road', elementType: 'labels', stylers: [{visibility: 'off'}]},{featureType: 'road',elementType: 'labels.text.fill',stylers: [{color: '#dedede'}]},{featureType: 'road',elementType: 'labels.icon',stylers: [{visibility: 'off'}]},{featureType: 'road.highway',elementType: 'all',stylers: [{visibility: 'simplified'}]},{featureType: 'road.arterial',elementType: 'labels.icon',stylers: [{visibility: 'off'}]},{featureType: 'transit', elementType: 'all', stylers: [{visibility: 'off'}]},{featureType: 'water',elementType: 'all',stylers: [{color: '#434343'}, {visibility: 'on'}]}
];var snazzyColor = [{elementType: 'labels', stylers: [{visibility: 'off'}]}, {featureType: 'road',elementType: 'geometry.fill',stylers: [{color: '#0F0919'}]},{featureType: 'water',elementType: 'geometry.fill',stylers: [{color: '#E4F7F7'}]},{elementType: 'geometry.stroke', stylers: [{visibility: 'off'}]}, {featureType: 'poi.park',elementType: 'geometry.fill',stylers: [{color: '#002FA7'}]},{featureType: 'poi.attraction',elementType: 'geometry.fill',stylers: [{color: '#E60003'}]},{featureType: 'landscape',elementType: 'geometry.fill',stylers: [{color: '#FBFCF4'}]},{featureType: 'poi.business',elementType: 'geometry.fill',stylers: [{color: '#FFED00'}]},{featureType: 'poi.government',elementType: 'geometry.fill',stylers: [{color: '#D41C1D'}]},{featureType: 'poi.school',elementType: 'geometry.fill',stylers: [{color: '#BF0000'}]},{featureType: 'transit.line',elementType: 'geometry.fill',stylers: [{saturation: -100}]}
];Map.setOptions('snazzyBlack', {snazzyBlack: snazzyBlack, snazzyColor: snazzyColor});

 snazzyBlack

 snazzyColor 

最后，在为基础地图创建自定义样式时，还可以使用 mapstyle 获得视觉反馈。创建一张地图，复制 JavaScript 代码段并粘贴到 Google 地球引擎 JavaScript 编辑器中。下面的样式就是使用 mapstyle 向导创建的。

免费引用JavaScript Map底图样式链接：

Snazzy Maps - Free Styles for Google Maps

Midnight Commander底图加载代码

var xxx=[{"featureType": "all","elementType": "labels.text.fill","stylers": [{"color": "#ffffff"}]},{"featureType": "all","elementType": "labels.text.stroke","stylers": [{"color": "#000000"},{"lightness": 13}]},{"featureType": "administrative","elementType": "geometry.fill","stylers": [{"color": "#000000"}]},{"featureType": "administrative","elementType": "geometry.stroke","stylers": [{"color": "#144b53"},{"lightness": 14},{"weight": 1.4}]},{"featureType": "landscape","elementType": "all","stylers": [{"color": "#08304b"}]},{"featureType": "poi","elementType": "geometry","stylers": [{"color": "#0c4152"},{"lightness": 5}]},{"featureType": "road.highway","elementType": "geometry.fill","stylers": [{"color": "#000000"}]},{"featureType": "road.highway","elementType": "geometry.stroke","stylers": [{"color": "#0b434f"},{"lightness": 25}]},{"featureType": "road.arterial","elementType": "geometry.fill","stylers": [{"color": "#000000"}]},{"featureType": "road.arterial","elementType": "geometry.stroke","stylers": [{"color": "#0b3d51"},{"lightness": 16}]},{"featureType": "road.local","elementType": "geometry","stylers": [{"color": "#000000"}]},{"featureType": "transit","elementType": "all","stylers": [{"color": "#146474"}]},{"featureType": "water","elementType": "all","stylers": [{"color": "#021019"}]}
]
//Midnight Commander
Map.setOptions('xxx', {xxx: xxx, snazzyColor: snazzyColor});

结果

多有代码


// hue: indicates the basic color
// lightness: indicates percentage change in brightness of an element
// saturation: indicates percentage change in basic color of an element
// gamma: gamma correction of an element (0.01 and 10.0)
// invert_lightness: inverts the existing lightness
// visibility: changes visibility options for an element (on, off, or simplified)
// color: sets the color of an element (using RGB Hex Strings)
// weight: sets the weight of a feature in pixelsvar baseChange = [{featureType: 'all', 
stylers: [{invert_lightness: true,color:'#001155',weight:0.7,hue:'red', lightness:0.6, saturation:0.5, gamma:1.5,visibility:'off'}]}];Map.setOptions('baseChange', {'baseChange': baseChange});// Remove icons.
var iconChange = [{// Change map saturation.stylers: [{gamma: 0.2}]},{// Change label properties.elementType: 'labels',stylers: [{visibility: 'off', color: '#000055'}]},{// Change road properties.featureType: 'road',elementType: 'geometry',stylers: [{visibility: 'off', color: '#000055'}]},{// Change road labels.featureType: 'road',elementType: 'labels',stylers: [{visibility: 'off'}]},{// Change icon properties.elementType: 'labels.icon',stylers: [{visibility: 'off'}]},{// Change POI options.featureType: 'poi',elementType: 'all',stylers: [{visibility: 'off'}]},{featureType: 'administrative',elementType: 'geometry.fill',stylers: [{visibility: 'off'}]},{featureType: 'administrative',elementType: 'geometry.stroke',stylers: [{visibility: 'off'}]}
];// Enhanced road network visualization.
var roadNetwork = [{stylers: [{saturation: -100}]}, {featureType: 'road.highway',elementType: 'geometry.fill',stylers: [{color: '#000055'}, {weight: 2.5}]},{featureType: 'road.highway',elementType: 'geometry.stroke',stylers: [{color: '#000000'}, {weight: 2}]},{featureType: 'road.arterial',elementType: 'geometry',stylers: [{color: '#FF0000'}, {weight: 1.8}]},{featureType: 'road.local',elementType: 'geometry',stylers: [{color: '#00FF55'}, {weight: 1.5}]}
];Map.setOptions('roadNetwork', {iconChange: iconChange, roadNetwork: roadNetwork});var snazzyBlack = [{featureType: 'administrative',elementType: 'all',stylers: [{visibility: 'off'}]},{featureType: 'administrative',elementType: 'labels.text.fill',stylers: [{color: '#444444'}]},{featureType: 'landscape',elementType: 'all',stylers: [{color: '#000000'}, {visibility: 'on'}]},{featureType: 'poi', elementType: 'all', stylers: [{visibility: 'off'}]}, {featureType: 'road',elementType: 'all',stylers: [{saturation: -100}, {lightness: 45}]},{featureType: 'road',elementType: 'geometry.fill',stylers: [{color: '#ffffff'}]},{featureType: 'road',elementType: 'geometry.stroke',stylers: [{color: '#eaeaea'}]},{featureType: 'road', elementType: 'labels', stylers: [{visibility: 'off'}]},{featureType: 'road',elementType: 'labels.text.fill',stylers: [{color: '#dedede'}]},{featureType: 'road',elementType: 'labels.icon',stylers: [{visibility: 'off'}]},{featureType: 'road.highway',elementType: 'all',stylers: [{visibility: 'simplified'}]},{featureType: 'road.arterial',elementType: 'labels.icon',stylers: [{visibility: 'off'}]},{featureType: 'transit', elementType: 'all', stylers: [{visibility: 'off'}]},{featureType: 'water',elementType: 'all',stylers: [{color: '#434343'}, {visibility: 'on'}]}
];var snazzyColor = [{elementType: 'labels', stylers: [{visibility: 'off'}]}, {featureType: 'road',elementType: 'geometry.fill',stylers: [{color: '#0F0919'}]},{featureType: 'water',elementType: 'geometry.fill',stylers: [{color: '#E4F7F7'}]},{elementType: 'geometry.stroke', stylers: [{visibility: 'off'}]}, {featureType: 'poi.park',elementType: 'geometry.fill',stylers: [{color: '#002FA7'}]},{featureType: 'poi.attraction',elementType: 'geometry.fill',stylers: [{color: '#E60003'}]},{featureType: 'landscape',elementType: 'geometry.fill',stylers: [{color: '#FBFCF4'}]},{featureType: 'poi.business',elementType: 'geometry.fill',stylers: [{color: '#FFED00'}]},{featureType: 'poi.government',elementType: 'geometry.fill',stylers: [{color: '#D41C1D'}]},{featureType: 'poi.school',elementType: 'geometry.fill',stylers: [{color: '#BF0000'}]},{featureType: 'transit.line',elementType: 'geometry.fill',stylers: [{saturation: -100}]}
];Map.setOptions('snazzyBlack', {snazzyBlack: snazzyBlack, snazzyColor: snazzyColor});var xxx=[{"featureType": "all","elementType": "labels.text.fill","stylers": [{"color": "#ffffff"}]},{"featureType": "all","elementType": "labels.text.stroke","stylers": [{"color": "#000000"},{"lightness": 13}]},{"featureType": "administrative","elementType": "geometry.fill","stylers": [{"color": "#000000"}]},{"featureType": "administrative","elementType": "geometry.stroke","stylers": [{"color": "#144b53"},{"lightness": 14},{"weight": 1.4}]},{"featureType": "landscape","elementType": "all","stylers": [{"color": "#08304b"}]},{"featureType": "poi","elementType": "geometry","stylers": [{"color": "#0c4152"},{"lightness": 5}]},{"featureType": "road.highway","elementType": "geometry.fill","stylers": [{"color": "#000000"}]},{"featureType": "road.highway","elementType": "geometry.stroke","stylers": [{"color": "#0b434f"},{"lightness": 25}]},{"featureType": "road.arterial","elementType": "geometry.fill","stylers": [{"color": "#000000"}]},{"featureType": "road.arterial","elementType": "geometry.stroke","stylers": [{"color": "#0b3d51"},{"lightness": 16}]},{"featureType": "road.local","elementType": "geometry","stylers": [{"color": "#000000"}]},{"featureType": "transit","elementType": "all","stylers": [{"color": "#146474"}]},{"featureType": "water","elementType": "all","stylers": [{"color": "#021019"}]}
]
//Midnight Commander
Map.setOptions('xxx', {xxx: xxx, snazzyColor: snazzyColor});

 

这篇关于GEE 底图加载——自定义底图样式加载案例分析（含免费引如多款底图）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/788418。

相关文章

Go标准库常见错误分析和解决办法

Go标准库常见错误分析和解决办法

《Go标准库常见错误分析和解决办法》Go语言的标准库为开发者提供了丰富且高效的工具,涵盖了从网络编程到文件操作等各个方面,然而,标准库虽好,使用不当却可能适得其反,正所谓工欲善其事,必先利其器,本文将... 目录1. 使用了错误的time.Duration2. time.After导致的内存泄漏3. jsO
阅读更多...
springboot循环依赖问题案例代码及解决办法

springboot循环依赖问题案例代码及解决办法

《springboot循环依赖问题案例代码及解决办法》在SpringBoot中,如果两个或多个Bean之间存在循环依赖（即BeanA依赖BeanB,而BeanB又依赖BeanA）,会导致Spring的... 目录1. 什么是循环依赖？2. 循环依赖的场景案例3. 解决循环依赖的常见方法方法 1：使用 @La
阅读更多...
Spring Boot 配置文件之类型、加载顺序与最佳实践记录

Spring Boot 配置文件之类型、加载顺序与最佳实践记录

《SpringBoot配置文件之类型、加载顺序与最佳实践记录》SpringBoot的配置文件是灵活且强大的工具,通过合理的配置管理,可以让应用开发和部署更加高效,无论是简单的属性配置,还是复杂... 目录Spring Boot 配置文件详解一、Spring Boot 配置文件类型1.1 applicatio
阅读更多...
使用Sentinel自定义返回和实现区分来源方式

使用Sentinel自定义返回和实现区分来源方式

《使用Sentinel自定义返回和实现区分来源方式》：本文主要介绍使用Sentinel自定义返回和实现区分来源方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Sentinel自定义返回和实现区分来源1. 自定义错误返回2. 实现区分来源总结Sentinel自定
阅读更多...
Spring事务中@Transactional注解不生效的原因分析与解决

Spring事务中@Transactional注解不生效的原因分析与解决

《Spring事务中@Transactional注解不生效的原因分析与解决》在Spring框架中,@Transactional注解是管理数据库事务的核心方式,本文将深入分析事务自调用的底层原理,解释为... 目录1. 引言2. 事务自调用问题重现2.1 示例代码2.2 问题现象3. 为什么事务自调用会失效3
阅读更多...
找不到Anaconda prompt终端的原因分析及解决方案

找不到Anaconda prompt终端的原因分析及解决方案

《找不到Anacondaprompt终端的原因分析及解决方案》因为anaconda还没有初始化,在安装anaconda的过程中,有一行是否要添加anaconda到菜单目录中,由于没有勾选,导致没有菜... 目录问题原因问http://www.chinasem.cn题解决安装了 Anaconda 却找不到 An
阅读更多...
Spring定时任务只执行一次的原因分析与解决方案

Spring定时任务只执行一次的原因分析与解决方案

《Spring定时任务只执行一次的原因分析与解决方案》在使用Spring的@Scheduled定时任务时,你是否遇到过任务只执行一次,后续不再触发的情况？这种情况可能由多种原因导致,如未启用调度、线程... 目录1. 问题背景2. Spring定时任务的基本用法3. 为什么定时任务只执行一次？3.1 未启用
阅读更多...
如何自定义Nginx JSON日志格式配置

如何自定义Nginx JSON日志格式配置

《如何自定义NginxJSON日志格式配置》Nginx作为最流行的Web服务器之一,其灵活的日志配置能力允许我们根据需求定制日志格式,本文将详细介绍如何配置Nginx以JSON格式记录访问日志,这种... 目录前言为什么选择jsON格式日志？配置步骤详解1. 安装Nginx服务2. 自定义JSON日志格式各
阅读更多...
Android自定义Scrollbar的两种实现方式

Android自定义Scrollbar的两种实现方式

《Android自定义Scrollbar的两种实现方式》本文介绍两种实现自定义滚动条的方法,分别通过ItemDecoration方案和独立View方案实现滚动条定制化,文章通过代码示例讲解的非常详细,... 目录方案一：ItemDecoration实现（推荐用于RecyclerView）实现原理完整代码实现
阅读更多...
SpringBoot项目启动报错"找不到或无法加载主类"的解决方法

SpringBoot项目启动报错"找不到或无法加载主类"的解决方法

《SpringBoot项目启动报错找不到或无法加载主类的解决方法》在使用IntelliJIDEA开发基于SpringBoot框架的Java程序时,可能会出现找不到或无法加载主类com.example.... 目录一、问题描述二、排查过程三、解决方案一、问题描述在使用 IntelliJ IDEA 开发基于
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2