基于天地图使用Leaflet.js进行WebGIS开发实战

前言

一、天地图的key

1、创建应用

2、调用限制策略

注：

（1）日服务调用超量会暂时拒绝访问，次日自动开启；

（2）如果服务调用过程中存在数据爬取或者下载行为，服务调用会被自动拒绝。

二、使用Leaflet调用天地图的底图服务

1、天地图提供的地图服务

2、实际加载底图

三、Leaflet调用天地图的地理编码接口

1、地理编码接口介绍

2、实现自定义的地理编码查询

四、总结

前言

在之前的博客中，我们曾介绍了天地图这个官方的网站，除了介绍它在线提供的功能，同时也介绍了它的API服务能力，在博客的最后还使用QGIS进行了在线底图的调用展示。其实在平常的开发或者学习工作中，我们接触到的都是WebGIS，而之前介绍得都是桌面GIS的使用和学习方式，有了天地图之后，其实大家都可以做出比较好用的WebGIS应用，依赖天地图，我们可以实现不同的底图的在线切换，还能实现根据中文地名查找其对应的经纬度信息并且在地图上进行展示。

本文重点介绍如何基于天地图使用Leaflet来开发WebGIS的应用，首先讲解如何在天地图上申请个人的key，然后讲解在天地图中不同的账户的调用限制策略，最后使用Leaflet开发一个加载天地图影像底图和影像文字标注，在地图的基础之上实现一个全国范围内的地名地址检索。在自己没有对应的地图服务器和地理查询服务器的时候，使用天地图来实现业务的快速支撑。感兴趣的你不妨来这里看看。

一、天地图的key

天地图的key是我们的第三方应用访问天地图的凭证，现在天地图的key分为浏览器端的key和服务端的key，以前是可以两者混用的，现在必须要分开，否则在请求时就会报错，无法返回对应的数据。因此在这里重点讲一下如何在天地图中申请key。

1、创建应用

首先使用注册的邮箱登录到天地图的官方网站，然后切换到开发资源目录，如下图所示：

其实在官网上也大致的说了如何申请key，在成为注册用户之后，还要申请陈伟开发则会，然后获取服务许可也就是key，最后通过key来访问api或者服务（比如在线的地图）。我们可以点击任意一个api的地址，然后在他的官方说明文档都会有创建key的说明，如下图所示：

点击申请key的超链接之后，系统将自动跳转到应用管理页面，在应用中来创建不同的key。管理页面如下所示。

在上面的页面中其实就管理了我们申请的两个应用。这是我之前申请过的，默认是空白的。点击创建应用发起新建操作。

在创建应用的过程当中，根据页面的提示来进行创建即可，唯一需要注意的就是，应用的类型这里。主要包含三种浏览器端、服务端、Android平台。这其实分别代表了使用浏览器访问、后台接口模式（如使用java进行接口调用），以及移动端的调用。在以前的天地图中，key是可以混用的，现在应用类型分开之后就需要分开，务必按照实际的应用来填写。填写完毕之后，系统会自动创建应用出来，里面包含了服务的类型，还有第三方的应用，如下图所示：

默认会包含上面这些接口，比如搜索引擎、地理编码、逆地理编码、公交引擎等。可以看到下面有一些第三方服务，暂时我们用不到，使用默认的即可。在线上服务器，我们其实可以限制访问的应用ip，不输入的话默认是不限制的。

因新系统升级，自公告之日起，应用类型tk严格区分，浏览器端JavaScript开发请选择“浏览器端”类型tk，“服务端tk”不再支持“浏览器端”应用，请注意检查您的应用类型。

上面的公众确实要仔细查看，历史的应用需要进行调整，否则可能访问不了。经过以上的步骤我们大概就已经创建好了应用，同时可以在应用列表中看到产生的key。在访问天地图的服务时就可以带上这些key即可（按场景和应用类型分开）。

2、调用限制策略

天地图网站其实根据不同的账号类型有不同的访问限制策略，这里摘录其官网的配置说明。

类别	服务名称	个人开发者	工商企业	政府机构
类别	服务名称	日配额	日配额	日配额
地图API	影像底图	10000	3000000	5000000
	矢量底图	10000	3000000	5000000
	矢量注记	10000	3000000	5000000
	影像注记	10000	3000000	5000000
	地形晕渲	10000	3000000	5000000
	地形注记	10000	3000000	5000000
	矢量英文注记	10000	3000000	5000000
	影像英文注记	10000	3000000	5000000
	全球境界	10000	3000000	5000000
	三维地名	10000	3000000	5000000
	三维地形	10000	3000000	5000000
Web服务API	静态地图	3000	6000000	8000000
	行政区划服务	3000	6000000	8000000
	逆地理编码	7000	6000000	8000000
	地理编码	7000	6000000	8000000
	公交规划	3000	6000000	8000000
	驾车规划	3000	6000000	8000000
	地图搜索	3000	6000000	8000000

对于个人开发来说，调用次数远远是不够的，对于对外提供服务的，还是需要升级到企业账号，调用次数才能上一个档次。同时这里需要说明的是：

注：

（1）日服务调用超量会暂时拒绝访问，次日自动开启；

（2）如果服务调用过程中存在数据爬取或者下载行为，服务调用会被自动拒绝。

我们可以在应用中对我们的请求次数进行监控，看是否会有超的情况，在访问统计中可以看到如下的界面：

上图中就很明显的展示了服务的调用次数。

二、使用Leaflet调用天地图的底图服务

在掌握了如何申请天地图的key以后，我们就可以拿着申请的key进行相关的服务调用。首先我们来看一下如何在leaflet中调用天地图的地图服务。

1、天地图提供的地图服务

在加载天地图的地图服务之前，首先我们要知道它提供了哪些在线底图。在他的地图API页面有明确的展示。

通过上面的API列表可以看到，天地图提供了不同类型的地图资源，比如矢量图层还有影像图层。还有地形晕渲的效果，在提供底图的在线图源同时，还有有注记信息。通过辅助的注记信息，让我们在地图的展示时更加的友好和明确，能抓住地图的重点。

为了简单的演示在leaflet中如何加载具体的图层，我们这里展示如何加载球面墨卡托投影的影像底图和对应的注记图层。在官网提供了如何进行瓦片进行数据请求的说明：

（2）地图瓦片获取

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=您的密钥。

可以看到，这里不同的除了key之外，还有一个图层的不一样，其它的都是一样的。因此我们只要替换上述的红色部分的内容即可。

2、实际加载底图

关于如何在地图上使用Leaflet来进行地图加载，相信大家已经非常熟悉了，如果还不太了解的可以先去学习一下基础知识，也可以看一些我之前的一些博客，均有非常详细的说明。这里仅以具体加载瓦片的javascript代码为主进行讲解。首先定义地图实例对象和天地图的key，这里的可以我们选取浏览器端的key，因为我们要实现的webgis的功能。

var map = L.map('mapid',{/*crs:L.CRS.CustomEPSG4326*/}).setView([34.669359, 113.642578], 10);
	
var tdt_client_key = "xxx";//天地图客户端的key

加载影像底图和影像注记，关键代码如下所示：

L.tileLayer('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=' +tdt_client_key, {
		maxZoom: 18,
		attribution: 'Map data &copy; <a href="http://www.tianditu.gov.cn/">TianDiTu</a>, <a href="http://www.esri.com/">Esri</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
	}).addTo(map);
	
//标签 
L.tileLayer('http://t1.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk='+ tdt_client_key, {maxZoom: 18
}).addTo(map);

经过上述的步骤，我们打开可以看到以下的结果，如果能看到以下结果就表明成功集成了天地图的在线底图的功能。

三、Leaflet调用天地图的地理编码接口

在前面的小节中，我们掌握了如何调用天地图的在线底图功能，下面来深入一个更有意思的功能模块，比如我们知道一个地点，但是如何快速知道它的经纬度坐标呢？我们可以购买相应的POI数据，也可以从某度或者某德等厂商进行获取，当你有了天地图之后，其实是可以直接利用天地图的在线查询功能，直接调用它的地理编码接口，实现我们的业务目标。

本节的目标就是学会在前端调用天地图的地理编码接口，以这个接口为例，详细的讲解如何进行web api 的交互和调用。这里很重要，利用好官方的信息获取渠道，做一些有意思的应用。

1、地理编码接口介绍

在调用地理编码接口前，首先先来了解什么事地理编码接口。在天地图的官网上有相应的解释。我们来详细的看一下。天地图地理编码API是一类简单的HTTP/HTTPS接口，是指由结构化地址数据（如：北京市海淀区莲花池西路28号）转换为对应坐标点（经纬度）功能，地址解析仅限于国内。这里请注意，地理编码接口仅限于国内，国外的数据暂时没有。

参数值	参数说明	参数类型	是否必备	备注（值域）
keyWord	请求关键字	string	是	无

地理编码响应示例：

请求： http://api.tianditu.gov.cn/geocoder?ds={"keyWord":"北京市延庆区延庆镇莲花池村前街50夕阳红养老院"}&tk=您的密钥

{
    "location": {
        "lon": "116.001688",
        "level": "地名地址",
        "lat": "40.453228"
    },
    "status": "0",
    "msg": "ok",
    "searchVersion": "4.8.0"
}

响应参数：

参数值	参数说明	参数类型	备注（值域）
status	返回状态	string	0：正常返回，101：结果为空，404：出错。
msg	返回信息	string	OK：正常，其他异常。
location	地址信息	json	地址信息

location参数信息：

参数值	参数说明	参数类型	备注（值域）
lon	坐标点显示经度	Double	必须返回。
lat	坐标点显示纬度	Double	必须返回。
level	类别名称	string	非必须返回。
typeRound	附近相似点	Array	开启周边查询必需返回。

在了解上述的API接口之后，结合上面的地图展示页面，我们来实现一个地名地址的检索功能。

2、实现自定义的地理编码查询

为了在界面上实现地理编码查询，首先我们需要在地图界面上定义一个输入框，在输入框中输入我们需要查询的地名信息。然后通过ajax来获取从天地图服务器端返回的地理信息。然后在界面上展示，同时展示其它的辅助信息。

首先定义一个信息输入框，用于输入待查询的地址信息。如下所示：

<div style="position:absolute;z-index:403;top:50px;left:60px;">
	<input type="text" style="width:300px;height:20px;" name="address" id="address"></input>
	<input type="button" value="查询" onclick="execQuery('');"></input><br/>
</div>

然后在按钮中定义相应的响应事件，向天地图的服务器发送地理编码查询请求，关键的代码如下：

function execQuery(){
		var keyWord = $("#address").val();
		console.log(keyWord);
		$.ajax({
			type: "get",
			url: "http://api.tianditu.gov.cn/geocoder?ds={'keyWord':'" + keyWord + "'}&tk=" + tdt_client_key,
			data: {},
			success: function(rsData) {
				console.log(rsData);
				var rsObj = jQuery.parseJSON(rsData); 
				var loc_info = rsObj.location;
				L.marker([loc_info.lat, loc_info.lon]).addTo(map).bindPopup("level:"+loc_info.level + ",score:"+ loc_info.score).openPopup();
				map.setView([loc_info.lat, loc_info.lon]);
			}
		});
	}

经过上面的代码之后，我们来看一下现在的界面展示如下所示：

可以看到在界面中就出现了搜索栏，在搜索栏中输入我们需要查询的地名或者地址，点击查询按钮就会进入查询，比如我们查询橘子洲景区。点击查询可以跳转以下定位。

我们发现，使用天地图的地理编码功能还是非常好用的，可以直接返回相应的信息。

我们也可以通过观察网络服务请求来看一下向天地图的后台发送请求的过程以及响应情况。

通过网络的监控，可以看到前端页面已经向后端发送请求，同时后端也及时返回了响应。到此，我们就已经实现了如何适用Leaflet进行天地图的在线底图的调用和地理编码接口的调用。相信大家都掌握了相关的知识。

四、总结

以上就是本文的主要内容，本文重点介绍如何基于天地图使用Leaflet来开发WebGIS的应用，首先讲解如何在天地图上申请个人的key，然后讲解在天地图中不同的账户的调用限制策略，最后使用Leaflet开发一个加载天地图影像底图和影像文字标注，在地图的基础之上实现一个全国范围内的地名地址检索。在自己没有对应的地图服务器和地理查询服务器的时候，使用天地图来实现业务的快速支撑。感兴趣的你不妨来这里看看，通过本文您不仅可以掌握如何调用天地图的地图资源，同时还掌握如何进行地理编码的查询，对于提高系统的可用性有很大的帮助。行文仓促，难免有不足之处，如有不当之处，还请各位专家朋友在评论区留言指出，不甚感激。