高德地图api使用天地图图层wmts

本文展示了如何在高德地图中运用天地图图层(WMTS)并支持3D模式,提供详细的代码示例和参数设置。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

高德地图api使用天地图图层wmts

生成高德地图实例

                map = new AMap.Map("container", {
                    //设置地图容器id
                    viewMode: "3D", //是否为3D地图模式
                    pitch: 40,
                    zoom: 9, //初始化地图级别
                    center: center_lnglat, //初始化地图中心点位置
                });
                // 值得一提的是,在使用高德地图时是可以将天地图转成3d的 

定义图层

                var wms = new AMap.TileLayer.WMTS({
                    url: "http://t4.tianditu.gov.cn/img_w/wmts",
                    blend: false,
                    tileSize: 256,
                    params: {
                        Layer: "img",
                        Version: "1.0.0",
                        Format: "tiles",
                        TileMatrixSet: "w",
                        STYLE: "default",
                        tk: T_key,  // 申请的天地图开发者key
                    },
                });

将图层添加到地图中

wms.setMap(map)

效果图

其他图层服务对应的url

这里我们用的是影像底图,如果想使用其他的图层替换对应的字段就行了

访问方式分两种:

/*访问地址1*/
`t${s}.tianditu.gov.cn/DataServer?t=${t}&x=${x}&y=${y}&l=${z}&tk=${k}`
/*访问地址2*/
`t${s}.tianditu.gov.cn/${t}/wmtsservice=WMTS&request=GetTile&version=1.0.0&layer${l}&style=default&tilematrixset=w&format=tiles&tilematrix=${z}&tilecol=${x}&tilerow=${y}&tk=${k}` 
  • {s} 是可用的子域之一,用于克服浏览器对每个主机的并发请求数的限制,支持 0/1/2/3/4/5/6/7。
  • {t} 和 {l} 是天地图图层类型,具体参见下表。
  • {x} 是 WMTS 切片方案中的图块X坐标,其中0是最西端的图块。
  • {y} 是 WMTS 切片方案中的图块Y坐标,其中0是最北端的图块。
  • {z} 是 WMTS 切片方案中切片的级别,零级是四叉树金字塔的根。
  • {k} 是天地图访问所需的 key,需要自行去天地图官网申请。

在这里插入图片描述

### 整合高德地图 APIVue3 项目 为了在 Vue3 项目中整合高德地图 API 并设置地图的最大缩放等级,需遵循特定步骤配置环境和编写代码。 #### 初始化高德地图实例 首先,在页面加载完毕之后初始化高德地图对象。这通常是在组件挂载阶段完成的操作: ```javascript import { onMounted } from 'vue'; export default { setup() { let map; onMounted(() => { map = new AMap.Map('container', { zoom: 10, maxZoom: 18, // 设置最大缩放级别为18级 minZoom: 3 // 同时也可以设定最小缩放级别 }); // 地图初始化后的回调函数 onMapInit(map); }); return {}; } } ``` 此段代码展示了如何通过 `new AMap.Map` 创建一个新的地图实例,并指定了容器 ID (`'container'`) 和一些选项,其中包括 `maxZoom` 属性用于定义最大的缩放比例[^4]。 #### 添加额外的地图功能 一旦地图被成功初始化,可以通过自定义的方法进一步增强其功能性。例如,添加三维模型或瓦片图层等功能可提升用户体验: ```javascript function onMapInit(map) { get3dmap(map).then(layers => { layers.forEach(layer => { map.add(layer); }); }); const key = window.KEY || ''; const wmts = new AMap.TileLayer({ tileUrl: `http://t0.tianditu.gov.cn/DataServer?T=img_w&tk=${key}&x=[x]&y=[y]&l=[z]`, zIndex: 1, }); map.add(wmts); } ``` 上述 JavaScript 方法演示了如何向已有的地图实例中加入来自天地图的服务作为底图瓦片图层,以及异步获取并渲染3D建筑模型数据[^1]。 #### 用户交互优化 考虑到实际应用场景中的需求,如允许用户选择地理位置以便记录下精确坐标信息,则可以在地图上监听鼠标事件来捕获用户的点击位置: ```javascript map.on('click', function(e){ console.log(`经度:${e.lnglat.getLng()},纬度:${e.lnglat.getLat()}`); }); ``` 这段脚本实现了当用户单击地图上的任意一点时打印该点对应的地理坐标至控制台的功能[^3]。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值