天地图简用

常用的地图平台

• 百度地图
• 高德地图
• 天地图

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

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

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

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

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

接下来简单的说明一下天地图的使用方法和常用的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,  // 图标urliconSize: 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中使用refinfoWindow.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