最近使用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)
【1】是理想结果,实际情况应该是这样,不管怎么更改底图style,底图都不会有变化。即使我们已经将token更改。
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更改为刚刚发布的地图

结果展示。

















