最近使用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: [], // 可以不设置
});

android 高德地图层级改变后中心点会更改 高德地图界面变了_高德地图

android 高德地图层级改变后中心点会更改 高德地图界面变了_高德地图_02

android 高德地图层级改变后中心点会更改 高德地图界面变了_高德地图_03

(dark-normal-light)

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

 

2.1、解决方法

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

android 高德地图层级改变后中心点会更改 高德地图界面变了_自定义_04

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

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

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

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

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

android 高德地图层级改变后中心点会更改 高德地图界面变了_前端_05

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

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

android 高德地图层级改变后中心点会更改 高德地图界面变了_高德地图_06

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

点击那个向上的箭头。

android 高德地图层级改变后中心点会更改 高德地图界面变了_html_07

 点击【发布】

android 高德地图层级改变后中心点会更改 高德地图界面变了_html_08

 

android 高德地图层级改变后中心点会更改 高德地图界面变了_高德地图_09

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

android 高德地图层级改变后中心点会更改 高德地图界面变了_前端_10

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

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

android 高德地图层级改变后中心点会更改 高德地图界面变了_html_11

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

android 高德地图层级改变后中心点会更改 高德地图界面变了_高德地图_12

 结果展示。

android 高德地图层级改变后中心点会更改 高德地图界面变了_javascript_13