vue+天地图

引入到public index.html
<script src="http://api.tianditu.gov.cn/api?v=4.0&tk=********"type="text/javascript"></script>

显示地图
 <div id="mapDiv"></div>
 mounted() {
    this.loadmap();
 },
 methods: {
    loadmap() {
    	var map = new T.Map("mapDiv");
        //设置显示地图的中心点和级别
        map.centerAndZoom(new T.LngLat(116.48982938, 39.92381118), 12);
         //允许鼠标双击放大地图
        map.enableScrollWheelZoom(); 


       // 地图标区域轮廓
          let style = {
              color: "#0064fc",
              weight: 2,
              opacity: 1,
              lineStyle: "dashed", // 虚线
              fillColor: "transprent",
              fillOpacity: 0, // 透明度
          };
          let points = [];
          this.lines.forEach('(line) => {     //this.lines经纬度的数据,经纬度格式([lng,lat])
              var point = new T.LngLat(line[0], line[1]);
              points.push(point);
          });
          var poly = new T.Polygon(points, style);	
          var poly = new T.Polyline(points, style);	  //或者用线Polyline（用Polyline避免图层点击事件不生效问题）
          map.addOverLay(poly);
    }

点击标点：
 	  addMapClick();
      function addMapClick() {
        removeMapClick();
        map.addEventListener("click", MapClick);
      }

      function removeMapClick() {
        map.removeEventListener("click", MapClick);
      }
      var that = this;
      function MapClick(e) {
        console.log(e.lnglat.getLng() + "," + e.lnglat.getLat());
        // var latlng = new T.LngLat(e.lnglat.getLng(), e.lnglat.getLat());
        map.clearOverLays();
        //创建标注对象
        var marker = new T.Marker(
          new T.LngLat(e.lnglat.getLng(), e.lnglat.getLat())
        );
        //向地图上添加标注
        map.addOverLay(marker);
        var markerInfoWin = new T.InfoWindow(
          e.lnglat.getLng() + "," + e.lnglat.getLat()
        );
        marker.addEventListener("click", function () {
          marker.openInfoWindow(markerInfoWin);
        }); // 将标注添加到地图中
        that.lng = e.lnglat.getLng();
        that.lat = e.lnglat.getLat();
        that.change(e.lnglat.getLng(), e.lnglat.getLat(), true);
      }
 }

搜索

API
1，根据搜索内容获取经纬度
let addresServer = `http://api.tianditu.gov.cn/geocoder?ds={"keyWord":"${this.form.parkAddress}"}&tk=*****`;
2，根据检索内容获取搜索出来的内容
(传的值官网有示例，代表什么意思)
 let addresServer = `https://api.tianditu.gov.cn/v2/search?type=query&postStr={"yingjiType":0,"keyWord":"${_that.title}",       "queryType":"1","start":"${_that.page}","mapBound":"116.3636070390624,39.94890260847703,116.52840196093695,39.965942503798544","queryTerminal":10000,"level":13,"count":"${_that.pageSize}"}&tk=******`;

搜索事件走api接口
点击搜索出来的文字：
 goaddress(val) {
   const _lonlat = val.lonlat.split(",");
   this.searchResult({ lng: _lonlat[0], lat: _lonlat[1] });
 }
搜素出来的内容点击标点
 searchResult(){
     var iconImg = "http://api.tianditu.gov.cn/v4.0/image/marker-icon.png";
     this.marker = new T.Marker(new T.LngLat(result.lng, result.lat), {    //result.lng, result.lat经纬度
        icon: new T.Icon({
          iconUrl: iconImg,   //图标
          iconSize: new T.Point(25, 41),
          iconAnchor: new T.Point(30, 31),
        }),
      });
      map.addOverLay(this.marker);
  }

轨迹播放

引入 官网示例JS文件
  <script src="http://cdn.bootcss.com/d3/3.5.17/d3.js " charset="utf-8"></script>
  <script src="./js//D3.js"></script>   //官网的D3SvgOverlay.js文件   拿到本地来了
  <script src="http://lbs.tianditu.gov.cn/api/js4.0/opensource/openlibrary/CarTrack.js"></script>
	
  isCarTake() {
      this.carTrack = new T.CarTrack(this.map, {
        interval: 5,
        speed: 10,
        dynamicLine: true,
        polylinestyle: { color: "#2C64A7", weight: 5, opacity: 0.9 },
        Datas: this.timeList.map((item) => {   //经纬度数据处理
          var coordinates = item.lng;
          var lnlat = new T.LngLat(coordinates[0], coordinates[1]);
          return lnlat;
        }),
      });
    }, 
    this.carTrack.start(); //开始
    this.carTrack.pause(); //暂停
    this.carTrack.stop();  //结束

热力图

引入
<script type="text/javascript" src="http://lbs.tianditu.gov.cn/api/js4.0/opensource/openlibrary/HeatmapOverlay.js"></script>
使用
  // 热力图开启
  openHeatmap() {
      var points = this.convertData();
      this.heatmapOverlay = new T.HeatmapOverlay({
        radius: 30,
   });
      this.map.addOverLay(this.heatmapOverlay);
      this.heatmapOverlay.setDataSet({ data: points, max: 300 });
      this.heatmapOverlay.show();
    },
    //关闭
    closeHeatmap(){
       this.heatmapOverlay.hide()
    },
    convertData() {
      var res = [];
      for (var i = 0; i < this.data.length; i++) {
        var geoCoord = this.geoCoordMap[this.data[i].name];
        if (geoCoord) {
          res.push({
            name: this.data[i].name,
            lat: geoCoord[1],
            lng: geoCoord[0],
            count: this.data[i].value,
          });
        }
      }
      return res;
   },
 数据格式
   geoCoordMap: {
        海门: [121.15, 31.89],
   }
   data: [
        { name: "海门", value: 9 },
   ]

标注+信息窗口

	  var data_info = this.carList; //数据源
      var that = this;
      let iconImg = require("../../assets/images/cl.png");   图标
      let iconImg1 = require("../../assets/images/cl1.png");
      for (var i = 0; i < data_info.length; i++) {
        var marker = new T.Marker(
          new T.LngLat(data_info[i].longtitude, data_info[i].latitude),   //经纬度
          {
            icon: new T.Icon({
              iconUrl: data_info[i].cartype == "cc" ? iconImg1 : iconImg,
              iconSize: new T.Point(44, 40),
              iconAnchor: new T.Point(30, 31),
            }),
          }
        );
        that.map.addOverLay(marker); // 将标注添加到地图中
        that.addClickHandler(data_info[i], marker);  //点击事件
        that.markers.push(marker);					 
        //清除用
       		 for (var i = 0; i < this.markers.length; i++) {
                this.map.removeOverLay(this.markers[i]);
             }
        //点击
        mounted(){
        	 window.chosenMap = this.chosenMap;   //信息弹框的点击事件
        }
       addClickHandler(data, marker) {
    		marker.addEventListener("click", function (e) {
    			//点击标注走详情接口展示详情
    			let content = "";
                var html = "";
                html += `<div>***${***}</div>`;
                html += `<button  onclick="chosenMap('${***}','${**}','${***}')">查看轨迹</button>`;
                content = html;
                var point = e.lnglat;
                that.show_carTrack = false;
                that.map.centerAndZoom(point, 12);   //点击回中心
                marker = new T.Marker(point); // 创建标注
                var markerInfoWin = new T.InfoWindow(content, {
                  offset: new T.Point(0, -30),
                }); // 创建信息窗口对象
                that.map.openInfoWindow(markerInfoWin, point); //开启信息窗口 
		  }
		}
		        //关闭信息窗口
                this.map.closeInfoWindow();        

海量密集点

	  let that = this;
      let lnglats = []; 
      let data_info = this.pfList   //数据
      for (var i = 0; i < data_info.length; i++) {
        var arr = new T.LngLat(data_info[i].lon, data_info[i].lat);
        arr.id = data_info[i].id;
        lnglats.push(arr);
      }
      that.cloud = new T.CloudMarkerCollection(lnglats, {
        color: "blue",
        SizeType: TDT_POINT_SIZE_SMALL,
      });
      that.map.addOverLay(this.cloud);
      that.addClickHandler(this.cloud)		//点击事件  和标注信息窗口一样
	  //关闭
	  this.cloud.clear()