码迷,mamicode.com
首页 > 其他好文 > 详细

自定义地图样式

时间:2019-03-20 19:23:31      阅读:293      评论:0      收藏:0      [点我收藏+]

标签:获取   直接   lte   jsp   index   过滤   php   lbs   ant   

 1 官方接口
一般在线地图服务提供商都提供的多种风格的地图,可直接调用,也可以根据需求自定义编辑样式。
高德 https://lbs.amap.com/api/javascript-api/guide/map/map-style/
百度 http://lbsyun.baidu.com/index.php?title=jspopular/guide/custom

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

2 地图渲染引擎

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

3 css滤镜

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


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

.leaflet-zoom-animated 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/moGQVj

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

 

自定义地图样式

标签:获取   直接   lte   jsp   index   过滤   php   lbs   ant   

原文地址:https://www.cnblogs.com/houxiaohang/p/10566744.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!