ArcGIS API for Javascript4.10加载天地图（墨卡托投影）

最新推荐文章于 2025-04-12 11:23:18 发布

原创

最新推荐文章于 2025-04-12 11:23:18 发布

· 4.6k 阅读

12 ·

版权

文章标签：

#ArcGIS API for JS4 #天地图 #三维

本文档详细介绍了如何使用ArcGIS API for Javascript 4.10版本加载天地图的矢量地图、影像地图和地形图，包括申请秘钥、扩展BaseTileLayer、自定义TiandiMapLayer和TiandiAnnoLayer模块，以及源码下载和注意事项。

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

本篇主要介绍利用ArcGIS API for Javascript 4版本的最新版本4.10加载天地图的矢量地图、影像地图和地形图（墨卡托投影），以加载矢量地图为例，我们通过扩展BaseTileLayer来自定义矢量地图图层TiandiMapLayer模块。

1、示例运行效果：

【矢量地图】
在这里插入图片描述
【影像地图】

【地形图】

2、申请秘钥

从2019年开始，天地图访问需要申请账户秘钥，在【控制台】—【应用管理】中新建一个应用，此时就会生成对应的秘钥。
在这里插入图片描述

3、扩展类BaseTileLayer——定义TiandiMapLayer、TiandiAnnoLayer

参考官方文档说明，我们主要设置三部分：请求url、getTileUrl()、fetchTile()。getTileUrl()主要是根据请求级别、行列号生成url；fetchTile()主要是发送动态的url请求并得到返回的图片，同时，可以根据需求进行合并图像。矢量图层的代码如下：

define(["dojo/_base/declare", "dojo/_base/lang","esri/config","esri/layers/BaseTileLayer","esri/request"],
    function (declare,lang,esriConfig,BaseTileLayer,esriRequest) {
   
        return BaseTileLayer.createSubclass({
   
            properties: {
   
                urlTemplate: null
            },
            getTileUrl: function(level, row, col) {
   
                var url = "http://t"+col % 8 +".tianditu.gov.cn/DataServer?T=vec_w&tk=申请的秘钥&x="+col+"&y="+row+"&l="+level;
                return url;
            },
            fetchTile: function(level, row, col)

最低0.47元/天解锁文章