使用天地图的 JavaScript API 创建一个交互式地图网页

目录

1.天地图介绍

2.天地图的API使用方法

3.查看JavaScript API 4.0的步骤 

4.网页成果展示

5.总结 

---

1.天地图介绍

        天地图是中国国家测绘地理信息局（National Administration of Surveying, Mapping and Geoinformation，简称NASG）主导推动的一项全球领先的地理信息服务项目。它致力于为用户提供高质量、全球范围内的地理信息数据和服务。

        这里是一些关于天地图的主要特点和内容：

        1.地图数据： 天地图提供了包括底图、卫星影像、三维地图等多种地理信息数据。这些数据覆盖了全球范围，用户可以浏览不同地区的地图信息。

        2.多维数据： 天地图不仅提供传统的二维地图，还包括了三维地图、卫星影像等多种维度的地理信息，使用户能够更全面地了解目标地区的地形和地貌。

        3.在线服务： 天地图通过在线服务的方式向用户提供地理信息，用户无需下载大量数据，即可在浏览器或相关应用程序中实时访问地图服务。

        4.开放接口： 天地图提供了一系列的开放接口（API），使开发者能够集成天地图的地理信息服务到自己的应用程序中，实现定制化的地图展示和功能。

        天地图与百度地图和高德地图相比较而言，天地图对卫星图可以进行较大级别的查看，很多百度地图和高德地图无法查看的地区，天地图都可以清晰的进行查看。

2.天地图的API使用方法

        1.登录天地图官网：天地图API (tianditu.gov.cn)

        2.注册以及key的申请（官方地址有详细说明，并且可以免费使用）

天地图API使用步骤

         当成功申请key时，可以在天地图控制台设置并查看key；需要注意的是，我们需要创建一个交互式地图网页，通过浏览器的方式呈现出来，因此我们需要将应用类型设置为浏览器端，否则浏览器无法正常显示地图。

天地图控制台截图

3.查看JavaScript API 4.0的步骤 

        请各位博客朋友注意以下图片所展示的查看步骤：
 

步骤一：打开控制台网页

步骤2：点击开发

步骤3：点击JavaScript API 4.0

步骤4：在入门指导网页左边选择代码示例

步骤5：在代码示例网页选择引擎工具接口

步骤6：点击搜索，选择根据关键字本地搜索

       

        此时可以注意到步骤6中截图所示的源代码编辑器，此代码可直接复制粘贴使用。我用的是pycharm开发环境，因此我直接把步骤6中截图所示的源代码编辑器中的代码粘贴到pycharm中，如下图所示：

pycharm截图

        需要注意的一点，代码有一处需要修改调用天地图API的key，如下面代码所示：

<script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=您的密钥"></script>

        另外，你可以自行修改代码调整网页的排版格式，使其更美观。

4.网页成果展示

        运行开发环境的代码，可以在网页显示出天地图提供的交互式地图服务，代码完全开源，可以此为基础，设计自己喜欢的网页内容。

网页成果截图

 

5.总结 

        使用天地图的 JavaScript API 来创建一个交互式地图网页，可以根据天地图的引擎接口工具源代码创建出各种功能的地图服务网页。