zoukankan      html  css  js  c++  java
  • 百度地图(4)-自定义地图样式

    百度地图提供了地图样式的定制,定制种类相当繁多,可以细致到道路、

    1. 访问地址

    http://lbsyun.baidu.com/apiconsole/custommap

    2. 特色服务平台-个性化地图-新建。

    打开后,有三种方式:

    第一种根据模板选择:里面有些官方模板,根据场景分深色和浅色,根据行业分全部行业、出行行业、物流行业。如果对地图

              没有特殊需求的话,从中选择一个区别于官方标准地图样式已足够。

    第二种根据配色色系选则:提供各种色系,然后地图根据选择色系自行调整。

    第三种:根据图片的颜色进行配色:

    可以从截图中看到,其实是提取了图片中对应不为的几种颜色作为色系进行地图渲染。作为某些logo或者场景进行定制是很不错的。

            

     4. 发布新创建的地图。

      可以在编辑器中直接选择发布,也可以在我的地图中,对选择的地图进行发布。 这里也可以通过点击下载样式文件,将样式下载为json文件, 后面调用。

    发布成功后,有个样式ID,是后面调用时需要用到的。

    5. 调用样式。

     从第4步,我们也能了解到,调用地图样式有两种方式,一种是通过样式ID调用,一种是通过样式JSON文件调用。

    我们分别来看一下:

     第一种通过样式ID:

    1 /**
    2  * 使用样式ID设置地图样式
    3  */
    4 function setMapStyleFromId(){
    5   map.setMapStyleV2({
    6     styleId:'29f56e7ce69278af249c1182f10533c7' //此样式为测试用,随时可能会被删除,请修改为自己的ID
    7  }); 

    8 }

    第二种通过调用JSON文件:此处 $ 需要引用jquery.

     1 /**
     2  * 使用样式Json文件设置地图样式
     3  */
     4 function setMapStyleFromJson() {
     5 
     6   $.getJSON('/bdMap/data/custom_map_config.json', function (json) {
     7     map.setMapStyleV2({
     8       styleJson: json
     9     });
    10   });
    11 }

    6. 页面显示:

    7. 参考代码

    https://github.com/WhatGIS/bdMap

  • 相关阅读:
    WebStorm 2017.1.2 汉化破解
    gulp实时刷新页面
    图片转base64
    swiper使用案例一
    js生成GUID
    css实现0.5像素
    mac上搭建appium+IOS自动化测试环境(二)
    6. 使用antd pro构建web页面
    5. 使用Flask蓝图(blueprint)
    4. 为HelloWorld添加日志
  • 原文地址:https://www.cnblogs.com/googlegis/p/14680866.html
Copyright © 2011-2022 走看看