最近又双叒叕在搞gis地图，由于项目的特殊性，被开发环境的限制，地图服务地址都是甲方内网环境才能访问。每次本地开发，都是用gis 官网的提供的地图服务地址，不过大部分时间要么打不开，要么显示不全，非常拉跨....

       今天决定用国内的地图服务地址，找了一圈，就选择了天地图的了。

        天地图的官网：https://www.tianditu.gov.cn/
        先注册，注册成功后，先进行开发者认证，认证成功后，去服务中心控制台（点击右上角用户名进入），找到开发管理-->用户管理-->我的应用.然后点击创建新应用。

         由于我这里是在前端开发环境使用，所有我这里的应用类型选择的是浏览器端。提交完后可以看到列表出现了刚才新增的一条。

          在当前列表的操作列，点击设置，进入设置弹窗界面，在这里需要把本地的地址加入到白名单中，如果不设置，在调用天地地图服务地址的时候，就会报418 之类的。

        在域名白名单输入框中，不要输入localhost,这样没有用，也校验不通过，最好输入本机的ip地址： 192.168.100.39（这个是我本机的ip地址）,或者127.0.0.1都是可以的。

配置完之后就可以调用天地图的服务地址了。
天地图服api相关地址：http://lbs.tianditu.gov.cn/server/MapService.html

上面的服务地址不要直接放到项目中，往下滑动，看到下面的请求示例：

      前端vue部分关键代码：
 

   var webTiledLayer = new WebTileLayer({
         urlTemplate: "http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=创建的tk值",
         subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"] // 天地图的子域名列表
    });

这里urlTemplate 地址中最后参数tk=值就是上面创建应用对应的密钥。

 this.map = new Map({
            layers: [webTiledLayer],
 });

this.view = new MapView({
       container: this.$refs.mapViewContainer,
       map: this.map,
       zoom: 16,
       center: [106.56, 29.557],

 });

 await this.view.when(() => {
 })

最后渲染结果如下：

调用天地图的服务地址也加载成功了。

转载自CSDN-专业IT技术社区

原文链接：https://blog.csdn.net/wuyu0920/article/details/161087794