数据可视化中高德地图的使用

234 阅读1分钟

1. 工作台申请key和安全密钥

高德地图01.png

高德地图02.png

2. 项目引入申请key和安全密钥

// index.html
<script>
   window._AMapSecurityConfig = {
     securityJsCode: 安全密钥,
   };
</script>
<script src="//webapi.amap.com/maps?v=2.0&key=key值"></script>
<script src="//webapi.amap.com/loca?v=2.0&key=key值"></script>

3. 去除下标高德logo

.amap-logo {
  display: none !important;
}
​
.amap-copyright {
  opacity: 0;
}

4. 高德自定义地图

高德地图03.png

高德地图04.png

(1)说明:
图片创建地图

上传图片,根据上传图片的主要颜色分布,来填充地图

我的自定义地图

高德地图05.png

(2)创建透明地图样式:

区域面积、通道里面颜色设为透明

(3)发布地图样式,获取地图样式链接:

高德地图06.png

5. 地理数据获取方式

datav.aliyun.com/portal/scho… 中国地图数据

6. 高德地图数据可视化API

(1)LOCA 数据可视化 API:

lbs.amap.com/api/loca-v2…