【数据可视化】高德Api使用自定义底图没有变化（Antv中自定义高德地图的使用）

最近使用Antv做一些可视化功能，想对底图进行更改。

底图的更改方法有

1、自定义数据更改（mapbox等第三方地图平台）

2、高德底图

3、其他

在这里，笔者尝试了2；想试一试高德底图在Antv中的使用。

1、L7中调用高德地图的方式，style即为地图样式，对其修改，可以切换不同的风格。

const L7AMap = new GaodeMap({
  pitch: 35.210526315789465,
  style: 'dark',
  center: [104.288144, 31.239692],
  zoom: 4.4,
  token: 'xxxx - token',
  plugin: [], // 可以不设置
});

（dark-normal-light）

 2、【1】是理想结果，实际情况应该是这样，不管怎么更改底图style，底图都不会有变化。即使我们已经将token更改。

为此，笔者换了很多次token，发现都没有用，然后从官网文档中发现。现在的加载方式有点变化了。

JSAPI 的加载-入门-教程-地图 JS API v2.0 | 高德地图API高德开放平台官网https://lbs.amap.com/api/jsapi-v2/guide/abc/load

2.1、解决方法

链接中一共提到了两种方法，笔者采用的是方法二（原文中极不推荐的方法）

<script type="text/javascript">
        window._AMapSecurityConfig = {
            securityJsCode:'「您申请的安全密钥」',
        }
</script>
<script src="https://webapi.amap.com/loader.js"></script>

 ***注意！在这里引入了密钥！L7中的token依旧要填写！

至此，便可以使用高德地图中提供的style了。

3、自定义地图样式的使用

高德地图提供了自定义地图样式的模块，可以根据自己的喜好、使用场景来对地图进行修改；包括注记删减、自定义数据的上传、图层的增加、删除、样式更改等；

在这里，只简单介绍如何调用自定义底图，具体发布流程便不做介绍。

首先在【基础模板】选择自己想选择的底图，点击【使用该模板】

页面左侧为图层，可以对当前显示的数据进行修改；右上角为当前图层发布等功能按钮；

点击那个向上的箭头。

 点击【发布】

 

 回到用户界面，即可看到发布的地图。

点击【分享】，获取调用地址。

【JS API】即为我们需要获取的值；

 在L7中，将style更改为刚刚发布的地图

 结果展示。