arcgis for js 4.x 引入天地图的地图服务

wuyu09202026-05-15 13:27

最近又双叒叕在搞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部分关键代码：

javascript 复制代码

   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=值就是上面创建应用对应的密钥。

javascript 复制代码

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

javascript 复制代码

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

 });

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

最后渲染结果如下：

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