倚栏听风倚栏听风

不积跬步
无以至千里

使用 OpenLayers 类库加载天地图的 wmts 接口

一、申请天地图账号

先注册天地图账号,然后创建应用,类型选择浏览器端,得到 token。

天地图的接口列表:
http://lbs.tianditu.gov.cn/server/MapService.html
可以到看到一共开放了 18 个接口,地图、卫星图都有。如果用 url 直接拼接 token,可能会返回 400 错误,这是因为有一个专门的接口用来获取原信息。

二、用 Openlayers 加载

用 npm 管理依赖很方便,官网有一个 wmts 的示例:
https://openlayers.org/en/latest/examples/wmts.html

在在这个示例上,主要修改几个参数,这几个参数都是从元数据接口获取到的,地址是:http://t0.tianditu.gov.cn/vec_w/wmts?tk=xx&request=GetCapabilities&service=wmts
返回了 xml 格式的文本,包含等会要用到的参数。其中 layer、mattrixSet、format、style 这几个参数的值是从元数据得到的。
关键代码是:

    source: new WMTS({
        url: wmtsUrl_1 + key,
        crossOrigin: 'tianditu.gov.cn',
        layer: 'vec',
        matrixSet: 'w',
        format: 'tiles',
        projection: projection,
        tileGrid: new WMTSTileGrid({
            origin: getTopLeft(projectionExtent),
            resolutions: resolutions,
            matrixIds: matrixIds
        }),
        style: 'default',
        wrapX: true
    })

后记

遇到的第一个问题是直接访问接口有的返回 200,有的返回 400,于是把所有的接口放到了一个 txt 文件中,用 Python 遍历了一遍。

import requests
for line in open('c:/wang-work/tdt.txt'):
    line = line.strip()
    if(len(line) == 0):
        continue
    line = line + '&request=GetCapabilities&service=wmts'
    resp = requests.get(line, headers={
                        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36'})
    print(resp.status_code, line)

第二个问题是我厂自己搭建的 wmts 服务,它的接口描述 url 和实际获取瓦片的 url 不一样(天地图是一样的),这时候需要从 GetTile 标签里找出真正的 URL。

<ows:Operation name="GetCapabilities">
    <ows:DCP>
        <ows:HTTP>
            <ows:Get xlink:href="https://tiles.xxxx.org/WMTS/1.0.0/WMTSCapabilities.xml">
                <ows:Constraint name="GetEncoding">
                    <ows:AllowedValues>
                        <ows:Value>RESTful</ows:Value>
                    </ows:AllowedValues>
                </ows:Constraint>
            </ows:Get>
            <ows:Get xlink:href="https://tiles.xxxx.org/maps.cgi?">
                <ows:Constraint name="GetEncoding">
                    <ows:AllowedValues>
                        <ows:Value>KVP</ows:Value>
                    </ows:AllowedValues>
                </ows:Constraint>
            </ows:Get>
        </ows:HTTP>
    </ows:DCP>
</ows:Operation>
<ows:Operation name="GetTile">
    <ows:DCP>
        <ows:HTTP>
            <ows:Get xlink:href="https://tiles.xxxx.org">
                <ows:Constraint name="GetEncoding">
                    <ows:AllowedValues>
                        <ows:Value>RESTful</ows:Value>
                    </ows:AllowedValues>
                </ows:Constraint>
            </ows:Get>
            <ows:Get xlink:href="https://tiles.xxxx.org/maps.cgi?">
                <ows:Constraint name="GetEncoding">
                    <ows:AllowedValues>
                        <ows:Value>KVP</ows:Value>
                    </ows:AllowedValues>
                </ows:Constraint>
            </ows:Get>
        </ows:HTTP>
    </ows:DCP>
</ows:Operation>

在这个例子中,https://tiles.xxxx.org/maps.cgi? 就是那个真正的可以用在 Openlayers 的地址。

本原创文章未经允许不得转载 | 当前页面:倚栏听风 » 使用 OpenLayers 类库加载天地图的 wmts 接口

评论