常用的地图平台

在这里就不多介绍百度地图和高德地图了，因为百度和高德是大家经常使用的地图平台，他们的优点非常多，因为存在着广大的开源社区。那么缺点也非常明显，如不能对卫星图进行较大级别的查看，很多地区存在无法查看的现象。

那么在很多业务场景中需要我们查看清晰的卫星图，怎么办呢？于是使用到了天地图。

那么在开始之前，先简单介绍一下天地图。

天地图：“天地图”是国家测绘地理信息局建设的地理信息综合服务网站。它是“数字中国”的重要组成部分，是国家地理信息公共服务平台的公众版。“天地图”的目的在于促进地理信息资源共享和高效利用，提高测绘地理信息公共服务能力和水平，改进测绘地理信息成果的服务方式，更好地满足国家信息化建设的需要，为社会公众的工作和生活提供方便。

通过上面的介绍大家可以看出来它的优势在于什么地方了吧！没错，他是国家绘制地理信息局建设的，依靠着强大的背景，也就完全避免了上述两种地图的问题（当然区域仅限于中国）。

接下来简单的说明一下天地图的使用方法和常用的api

接入天地图
- 注册以及key的申请（天地图官方地址有详细说明）
- 引入外链天地图js文件这里我们有两种方法
  
  第一种方案：直接引入
```
<script src="http://api.tianditu.gov.cn/api?v=4.0&tk=您的密钥" type="text/javascript"></script>
```
  第二种方案： loadjs引入
```
loadJS('http://api.tianditu.gov.cn/api?v=4.0&tk=您的秘钥', callback)
```
- 在我们的全局中就会拥有一个变量 "T"

使用天地图

创建地图实例，设置地图参数

const map = new T.Map("map-container"); // 创建实例
map.centerAndZoom(new T.LngLat(116.40769, 39.89945), 8); // 设置地图中心以及缩放级别
map.setMapType(TMAP_SATELLITE_MAP); // 设置地图类型

地图类型包括

圈画行政区域（天地图支持的最小级别是区县，可以通过天地图的code或者行政区域名称进行查询然后圈画）

var district = new T.AdministrativeDivision();// 创建区划实例
 var config = {
   	needSubInfo: false,
   	needAll: false,
   	needPolygon: true,
   	needPre: true,
   	searchType: 1, // 1：通过名称查找，2： 通过天地图code查找
   	searchWord: '北京市'
 };
 district.search(config, callback);// callback会接收到对应行政区的信息，包括区域坐标点、区域名称、code等
 function callback ({data}) {
     data.some((i) => {
        if (JSON.stringify(i).indexOf(names[0]) > -1) {
         var pointsArr = [];
         const points = i['points']; // 获取行政区域所有坐标点信息
         for (var i = 0; i < points.length; i++) {
             var regionLngLats = [];
             var regionArr = points[i].region.split(",");
             for (var m = 0; m < regionArr.length; m++) {
                 var lnglatArr = regionArr[m].split(" ");
                 var lnglat = new T.LngLat(lnglatArr[0], lnglatArr[1]);
                 regionLngLats.push(lnglat);
                 pointsArr.push(lnglat);
             }                  	
 	     var polygon = new T.Polygon(regionLngLats,{color: "#fff", weight: 2, opacity: 1, fillOpacity: 0.1, fillColor: '#5079f6' });//创建面对象
             map.addOverLay(polygon); //向地图上添加行政区划面/
             map.setViewport(pointsArr);/显示最佳比例尺
             }
          } 
     })  
   }

标记点的使用

 var icon = new T.Icon({
     iconUrl: imgsrc,  // 图标url
     iconSize: new T.Point(30, 40) // 图标大小
  }); // 创建标记点使用的图标
 var marker = new T.Marker(new T.LngLat(info['oriLongitude'] , info['oriLatitude']), {
     icon: icon
  })  ; // 创建标记点实例， 第一个参数为坐标点天地图经纬度， 第二个参数是配置项
  map.addOverLay(marker); // 显示此坐标点
  map.removeOverLay(marker); // 隐藏此坐标点
  marker.addEventListener("click", callback); // 绑定marker的点击事件， 这里我们可以做一些操作， 比如弹出信息窗体等

划线

  var line = new T.Polyline(path, {weight: 8,opacity: 0.7}); //path为天地图经纬度数组，第二个参数为配置项
  map.addOverLay(line);  // 绘制线到地图上
  map.removeOverLay(line);// 移除线

信息窗体显示与隐藏

 var  infoWindow = new T.InfoWindow(); // 创建信息窗体实例
 infoWindow.setContent('<div></div>'); // 设置信息窗体内容， 也可以在vue中使用ref
 infoWindow.setLngLat(new T.LngLat(e['lnglat']['lng'], e['lnglat']['lat'])); // 设置信息窗标准点
 map.addOverLay(infoWindow);// 打开信息窗体
 map.removeOverLay(infoWindow);//关闭信息窗体

工具类使用

 var lineConfig = {
    showLabel: true,
    color: 'red'
};
 var lineTool = new T.PolylineTool(this.map, lineConfig); // 创建测距工具
 lineTool.open() // 打开测距工具 可以开始打点测距
 lineTool.close() ;// 关闭测距工具
 lineTool.clear() ;// 清除所有点
 var polygonConfig =  {
    showLabel: true,
    color: "red", weight: 3, opacity: 0.5, fillColor: "#FFFFFF", fillOpacity: 0.5
};
 var polygonTool = new T.PolygonTool(this.map, polygonConfig);// 创建测面工实例， 其使用方式与测距相同

天地图的待优化点（坑）
- 地图无法自定义样式，只提供了三种样式（默认， black, indigo）
- web服务不稳定，有的时候数据无法顺利返回
- 天地图的行政区code与其他的地图不一致, 天地图行政区code为156拼接行政区code（例如：辽宁省156210000）
- 部分行政区域（区县及以上）存在划分不准的情况，可以及时提问题到邮箱：tdt@ngcc.cn

如果对天地图感兴趣，可以尝试接入O