GIS初学者,最新OpenLayers WMTS 天地图,OpenLayers加载天地图、调用天地图WMTS示例、tianditu、EPSG:3857、EPSG:4326

本文是GIS初学者使用OpenLayers加载天地图WMTS的实践教程。通过在天地图官网注册并获取应用密钥,利用WMTS接口创建地图服务,并详细解析了OpenLayers代码中关键参数的设定,包括layer、matrixSet、format和style。同时展示了如何通过GetCapabilities获取正确参数,并列举了天地图的不同底图服务。

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

2018最新OpenLayers天地图加载可行方案,天地图WMTS调用,OpenLayers 天地图 WMTS GetCapabilities GetTile

最近要了解Web GIS方面的知识,对我这些外行人来说比较吃力,用OpenLayers加载天地图也遇到了小打击,一番折腾,终于做到仅仅显示了,把过程简单记录下:

首先是百度一轮,看了不少博客,感觉差不多后,自己动手就是不成功,继续摸索后勉强算把地图加载出来了,下面是我的基本过程:

 

1、天地图现在要注册才能用,以前应该不用注册(网上的代码以前写的,我使用不成功)

我到 http://www.tianditu.gov.cn/ 注册登录后,在 https://console.tianditu.gov.cn/api/key 创建一个应用,如图:

接着到 http://lbs.tianditu.gov.cn/server/MapService.html 可看到提供的WMTS接口列表,如图:

### 在 OpenLayers 中集成和显示天地图影像图层 为了在 OpenLayers 中成功集成并显示天地图影像图层,需遵循特定配置方法。首先,确保已获取有效的天地图 API Key[^5]。 #### 导入必要的库文件 通过 `<script>` 标签导入 OpenLayers 库以及天地图 JavaScript API 到 HTML 文件头部: ```html <script src="https://cdn.jsdelivr.net/npm/ol@v6.15.1/build/ol.js"></script> <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=你的天地图KEY"></script> ``` 注意替换 `你的天地图KEY` 为实际申请到的密钥字符串[^4]。 #### 创建 Map 实例与添加 Tianditu 图层 下面展示了一个完整的代码片段用于创建包含天地图影像的地图实例: ```javascript import 'ol/ol.css'; import {Map, View} from 'ol'; import TileLayer from 'ol/layer/Tile'; import XYZ from 'ol/source/XYZ'; const map = new Map({ target: 'map', layers: [ new TileLayer({ source: new XYZ({ url: 'http://{subdomain}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=你的天地图KEY' }) }) ], view: new View({ center: [104.115732, 37.55093], zoom: 4, projection: 'EPSG:4326' // 设置坐标系投影方式为中国常用的经纬度表示法 }) }); ``` 此段代码实现了基本的地图初始化工作,并指定了使用天地图提供的影像瓦片作为底图数据源。其中 `{subdomain}` 参数代表子域名占位符,通常取值范围是 a~f;而 `img` 表示图像类型的图层名称,对应于天地图中的影像服务[^1]。
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值