精华内容
下载资源
问答
  • 自定义地图样式

    2019-09-23 22:14:49
    1 官方接口一般在线地图服务提供商都提供的多种风格的地图,可直接调用,也可以根据需求自定义编辑样式。高德 https://lbs.amap.com/api/javascript-api/guide/map/map-style/百度 ...

     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 情况下只需前端样式文件中添加

    .lleaflet-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/moGQVj

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

     

    转载于:https://www.cnblogs.com/houxiaohang/p/10566744.html

    展开全文
  • 高德地图自定义地图样式

    千次阅读 2019-10-15 16:29:14
    但10个主题并不能满足所有场景,所以官方还提供了自定义地图样式的方法: (1)进入自定义页面,点击创建地图样式: (2)选择一个与目标样式相近的基础模版然后点击「创建」按钮: (3)在左边导航栏里选择需要...

    在高德地图开放平台官网的jsAPI中提供了自定义地图的方法:

    1. 其中官方提供了10个主题来给开发者们使用
      在这里插入图片描述
    2. 但10个主题并不能满足所有场景,所以官方还提供了自定义地图样式的方法:

    (1)进入自定义页面,点击创建地图样式:
    在这里插入图片描述

    (2)选择一个与目标样式相近的基础模版然后点击「创建」按钮:

    在这里插入图片描述

    (3)在左边导航栏里选择需要改变样式的模块,比如:陆地,并打开取色板选择想要的颜色来更换掉

    在这里插入图片描述

    (4)样式修改完成之后,点击左上角「退出」键,随即进入自定义地图界面:

    在这里插入图片描述

    (5)点击想要使用的样式中的「发布」按钮,发布成功之后,点击「使用与分享」按钮
    在这里插入图片描述

    (6)可以复制上图中的样式ID来使用,也可以点击分享地图样式给其他账号,在项目中具体使用代码如下:

    这里在引入高德地图的时候必须要使用自定义样式所在的账号的key才可以!比如我在账号A下新建的地图样式,就需要使用A的key,不然不会生效

    //引入高德地图
        <script src="https://webapi.amap.com/maps?v=1.4.15&key=你的key&plugin=Map3D,AMap.DistrictLayer,AMap.Scale,AMap.ToolBar"></script>
    
    //使用样式:在amap的配置项找到mapStyle,
    mapStyle: "amap://styles/你的样式ID"//这里样式ID,我这里就是fdb98ba86eaa2e61e2b4c054ebe4989d
    
    

    到这里就结束了,搞定收工!

    展开全文
  • 高德地图开发自定义地图样式

    千次阅读 2020-01-10 16:46:58
    1、首先打开高都地图api自定义地图界面(自定义地图) 2、点进去,进行自定义地图配置 自定义样式 3、定义结束,点击发布 4、接下来点击使用自定义地图,会生成一串码 5、点击复制,在地图初始化调用这...

    1、首先打开高都地图api自定义地图界面(自定义地图

    2、点进去,进行自定义地图配置

    自定义样式

     3、定义结束,点击发布

     4、接下来点击使用自定义地图,会生成一串码

    5、点击复制,在地图初始化调用这个就可以了

    var map = new AMap.Map('container', {
        zoom: 4,
        mapStyle: 'amap://styles/212b098c51dfc53a0a99v2b1e147a7b3', //设置地图的显示样式
    });

     

    展开全文
  • 一 、地图种类: ... 自定义地图 样式; 二、 定义地图: 1、百度地图: 百度地图个性化说明 :http://lbsyun.baidu.com/index.php?title=iossdk/guide/custom 百度地图编辑工具: http://lbsyun.baidu.c

    一 、地图种类:

    百度地图、高德地图、谷歌地图、苹果地图、openstreetmapmapbox这些地图都能 自定义地图 样式;

    二、 定义地图:

    1、百度地图:

    百度地图个性化说明 :http://lbsyun.baidu.com/index.php?title=iossdk/guide/custom

    百度地图编辑工具: http://lbsyun.baidu.com/img-editor.html


    2、高德地图:

    高德地图自定义地图说明: http://lbs.amap.com/api/ios-sdk/guide/draw-on-map/custom

     高德地图没有地图编辑工具。
    
    
    
    

    3mapbox

    mapbox 定义地图说明:https://www.mapbox.com/ios-sdk/examples/

    mapbox 地图编辑 具mapbox studio:https://www.mapbox.com/mapbox-studio/


    4、苹果地图:

    参考案例: 地图加加: www.duweis.com

    实现 较复杂:

    持导KMLKMZGPXSHPTABGeoJSONGDBMPSCSV等 多种 格式 件。

    持所有KML样式,包括:图标、热点、混 、旋转、放缩、 字标签等。 

    KMLGX扩展和Extended Data的导 。
    持导入时使 特征类为
    GIS 图层提供默认样式或属性。 

    支持在地图上直接对坐标点进行编辑。

    也得支持在详细信息中对坐标点和样式进行精细的 修改。 

    持导入时使 配准点为GIS 图层提供CRS 以外的投影转换。

    支持评论修改样式、属性、等
    

    三、对比:

    地图

    自定义程度

    实现难易程度

    收费与否

    能否在国内使

    数据精确程度

    百度地图

    精确

    高德地图

    精确

    谷歌地图

    精确

    苹果地图

    精确

    mapbox

    难(代码很简
    单,美工较麻
    烦)
    

    是(有免费版的)

    精确

    openStreetMap

    未知

    精确

    四、其他:

    will 这个app 用的是百度地图,实现方式:道路种颜色,建筑物一种颜se,其他(水系,文字,图标等)标签设置成同一种颜 。 

    展开全文
  • Android高德地图实现自定义地图样式

    千次阅读 2020-07-04 15:09:45
    现在的应用中很多地方都会用到地图这个控件,但是地图提供给我们的样式有时可能...自定义地图](https://lbs.amap.com/api/android-sdk/guide/create-map/custom) 1.申请高德地图账号 ![高德开放平台控制台](https://.
  • folium是一个做地图可视化的python包,但给定的地图样式(tiles)有限,本文介绍如何使用mapbox进行...如果这些地图样式仍然不能满足你的要求,leaflets中可以使用mapbox的自定义地图样式。 mapbox是一个开源的地图...
  • 2.自定义地图样式 3.点聚合功能 一,参照https://blog.csdn.net/liujucai/article/details/100070540#commentsedit,实现只显示长治部分的地图, 二,参照...
  • 标题创建自定义地图 vue中在index.html中引入地图key <script type="text/javascript" src="https://webapi.amap.com/maps? v=1.3&key=你申请的key"></script> 使用自定义样式 ...
  • 百度地图提供的默认的样式有时候与实际的需求不太和谐,本文简要介绍自定义百度地图样式的过程以及如何将自己创建的样式应用到网页之中。
  • 1 官方接口如果使用的osm地图,可以借助mapbox实现自定义风格,注册可获取免费tokenhttps://docs.mapbox.com/mapbo...2 地图渲染引擎如果是自己搭建的地图服务,可以在使用地图渲染引擎渲染地图阶段自己设置样式3 ...
  • 自定义地图样式-例子

    千次阅读 2018-08-08 17:13:27
    const map = this.map = new BMap.Map(this.map_container.nativeElement, { enableMapClick: true, // minZoom: 11, // maxZoom : 11 ... // 创建地图实例 // 这里我们使用BMap命名空间下的Point类来创...
  • <map layer-style="c29e758aea2d2a1873049aeb81dab986"> </map> 中间这行字符串是在高德地图上获取自定义地图样式id
  • 下载如有问题,可私信博主。下载前建议先查看博客内容,其地址为:https://blog.csdn.net/QQ98281642/article/details/118481878
  • 地图之家欢迎您的订阅 后续会不断围绕着2D、3D地图技术丰富该专栏内容 地图之家总目录(可点击查看更多内容) leaflet篇目录(可点击查看更多内容) cesium篇目录(可点击查看更多内容) 地图数据篇目录(可点击查看...
  • 先上高德自定义地图的入口 https://geohub.amap.com/mapstyle/index 进入地图自定义编辑页面可以看到一张世界地图,现在我们的目的是只展示中国区域的地图 开始操作 1.先设置水系不显示 2.设置大洲名、世界国家名...
  • 地图之家总目录(建议先查看该内容) 文章末尾处提供保证可运行完整代码包,运行如有问题,可“私信”博主。 效果如下所示: 该示例需要依赖包,需下载完整代码包才可运行 下面献上完整代码,代码重要位置会做...
  • 我是做LBS游戏的,地图样式、配色是否可以更炫一些? 我是做共享出行的,地图样式是否可以简洁明了些,重点突出城市道路? 我是做智慧景区的,地图样式是否可以和我们园区的主题匹配下? ...... 好了,以上这些...
  • 英文、中英文地图html,body,#container {width: 100%;height: 100%;}#map-styles .input-item {height: 2rem;}#map-styles .input-item span{display: inline-block;width: 4rem;}#map-styles .input-item .input-...
  • vue-baidu-map好看的自定义地图样式

    千次阅读 2020-08-31 14:37:31
    mapStyle: { styleJson: [ { featureType: "land", elementType: "geometry", stylers: { color: "#212121", }, }, { featu...
  • 高德地图自定义地图apidemo,地图样式,标注样式,自定义窗体
  • leaflet 加载百度自定义地图,支持自定义百度地图样式
  • 日常的地图使用中,平台一般只会给我们提供地图的标准样式,...目录一、实现效果二、高德提供的自定义地图样式下载和使用2.1自定义地图样式下载2.2 在Android中的离线调用三、SuspendButtonLayout悬浮扩展按钮的使用3.1
  • 自定义地图弹出样式

    2012-10-16 15:41:35
    自定义点击地图标记时,弹出的视图样式。 可以随意改变弹出视图的位置,样式,大小。
  • 使用百度地图的开放式开发接口的时候,可以自定义地图样式 默认样式朴实无华,毫无特色 使用了自定义的地图样式之后(可以修改配色以搭配整体项目氛围????????????????????????????????????????????☘️????) ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 20,859
精华内容 8,343
关键字:

自定义地图样式