自定义地图样式

Airmusic 发布于2019-08-30 15:56 / 1320人阅读

摘要：官方接口一般在线地图服务提供商都提供的多种风格的地图，可直接调用，也可以根据需求自定义编辑样式。

1 官方接口

一般在线地图服务提供商都提供的多种风格的地图，可直接调用，也可以根据需求自定义编辑样式。
高德 https://lbs.amap.com/api/java...
百度 http://lbsyun.baidu.com/index...

如果使用的osm地图，可以借助mapbox实现自定义风格，注册可获取免费token
https://docs.mapbox.com/mapbo...

2 地图渲染引擎

如果是自己搭建的地图服务，可以在使用地图渲染引擎渲染地图阶段自己设置样式

3 css滤镜

1的方法针对于特定的地图，2的方法相对麻烦，而且如果遇上需要兼容多种地图切换的场景（比如我遇见过的需要同一系统需要支持百度地图和osm地图展示的情况），上面的方法就显得更加一言难尽，如果你也不巧遇上了相似场景，使用css滤镜可以简单快捷实现地图风格自定义。

比如：在使用了osm地图+leafletde 情况下只需前端样式文件中添加

.leaflet-tile-pane img{
  -webkit-filter:invert(1) grayscale(0) saturate(0.5)  brightness(1.6)  opacity(1) hue-rotate(334deg) sepia(10%) !important;
   -ms-filter:invert(1) grayscale(0) saturate(0.5)  brightness(1.6)  opacity(1) hue-rotate(334deg) sepia(10%) !important;
   -moz-filter:invert(1) grayscale(0) saturate(0.5)  brightness(1.6)  opacity(1) hue-rotate(334deg) sepia(10%) !important;
   filter: invert(1) grayscale(0) saturate(0.5)  brightness(1.6)  opacity(1) hue-rotate(334deg) sepia(1%) !important;
 }

效果：https://codepen.io/houhou/pen...

原理就是通过css滤镜改变地图图片颜色，需要注意的是，因为是对地图图片整体修改，所以无法对地图细节部分进行多带带设置，另外通过滤镜是基于图片本身进行处理的颜色，所以无法精准获取某种特定风格颜色，但是可以通过设置透明度+设施背景颜色的方法对整体颜色进行二次微调。

GPU云服务器云服务器自定义地图自定义按钮样式 h5视频播放器可自定义样式 html表格定义样式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117553.html

FineReport如何操作离线点地图

摘要：问题描述当用户没有网络，使用点地图时会发现图层无法显示，这时怎么办呢解决方法可以用组合地图的方式，将区域地图作为底层数据为空，在其中添加点地图进行展示。问题描述当用户没有网络，使用点地图时会发现gis图层无法显示，这时怎么办呢？解决方法可以用组合地图的方式，将区域地图作为底层（数据为空），在其中添加点地图进行展示。示例3.1 准备数据新建工作薄，添加内置数据集tourism...

figofuture 2019-08-21 11:47 评论0 收藏0
FineReport如何操作离线点地图

摘要：问题描述当用户没有网络，使用点地图时会发现图层无法显示，这时怎么办呢解决方法可以用组合地图的方式，将区域地图作为底层数据为空，在其中添加点地图进行展示。问题描述当用户没有网络，使用点地图时会发现gis图层无法显示，这时怎么办呢？解决方法可以用组合地图的方式，将区域地图作为底层（数据为空），在其中添加点地图进行展示。示例3.1 准备数据新建工作薄，添加内置数据集tourism...

mdluo 2019-08-15 10:48 评论0 收藏0
FineReport如何操作离线点地图

摘要：问题描述当用户没有网络，使用点地图时会发现图层无法显示，这时怎么办呢解决方法可以用组合地图的方式，将区域地图作为底层数据为空，在其中添加点地图进行展示。问题描述当用户没有网络，使用点地图时会发现gis图层无法显示，这时怎么办呢？解决方法可以用组合地图的方式，将区域地图作为底层（数据为空），在其中添加点地图进行展示。示例3.1 准备数据新建工作薄，添加内置数据集tourism...

curried 2019-08-29 12:55 评论0 收藏0
FineReport如何操作离线点地图

摘要：问题描述当用户没有网络，使用点地图时会发现图层无法显示，这时怎么办呢解决方法可以用组合地图的方式，将区域地图作为底层数据为空，在其中添加点地图进行展示。问题描述当用户没有网络，使用点地图时会发现gis图层无法显示，这时怎么办呢？解决方法可以用组合地图的方式，将区域地图作为底层（数据为空），在其中添加点地图进行展示。示例3.1 准备数据新建工作薄，添加内置数据集tourism...

zhichangterry 2019-08-01 17:09 评论0 收藏0
如何自定义谷歌地图按钮（缩放，全屏，地形图，卫星图）的位置

摘要：默认情况下，谷歌地图会在地图的左上角排放地图类型按钮，比如卫星图，地形图。在方法中生成一个谷歌地图，在配置的时候将设置为。此时地图上没有任何控制按钮，纯粹就是一张地图。谷歌地图确实提供了支持。默认情况下，谷歌地图会在地图的左上角排放地图类型按钮，比如卫星图，地形图。在右上角排放全屏按钮，在右下角排放缩放按钮。如下图所示： showImg(https://segmentfault.co...

Lin_R 2019-08-26 10:11 评论0 收藏0