天地图简用

常用的地图平台

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

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

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

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

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

接下来简单的说明一下天地图的使用方法和常用的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

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值