天地图开发--打点，圈画行政区域

**

1.首先在静态页面引入天地图js文件**

 <script src="http://api.tianditu.gov.cn/api?v=4.0&tk=密钥" type="text/javascript"></script>

然后我们就拥有了一个全局变量T

2.创建地图示例，设置地图参数

要在页面挂在后渲染地图

  data() {
    return {
      cityName: "", //暂存城市名称
      icon: "",
      map:{},
    };
  },

this.$nextTick(() =>{
  this.onLoad();
});

    onLoad() {
      // 基本设置
      let that = this;
      that.map = new window.T.Map("map", {
        // 地图的投影方式 EPSG:900913(墨卡托投影)，EPSG:4326(大地平面投影)
        projection: "EPSG:4326",
        // min 0 max 18
        minZoom: 5,
        maxZoom: 18,
      });
      //centerAndZoom 是显示该地图的中心点
      that.map.centerAndZoom(new T.LngLat(104.075931, 30.651651), 5); 

      // 添加控件
      var ctrl = new T.Control.MapType([
        {
          title: "地图", //地图控件上所要显示的图层名称
          icon: "http://api.tianditu.gov.cn/v4.0/image/map/maptype/vector.png", //地图控件上所要显示的图层图标（默认图标大小80x80）
          layer: TMAP_NORMAL_MAP, //地图类型对象，即MapType。  此地图类型展示普通街道视图
        },
        {
          title: "卫星混合",
          icon: "http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellitepoi.png",
          layer: TMAP_HYBRID_MAP, // 此地图类型展示卫星和路网混合视图
        },
      ]);
      that.map.addControl(ctrl);
      //这里是修改一下覆盖在地图上面的标点
      this.icon = new T.Icon({
        iconUrl: require("../../assets/earthquake1.gif"),          //图标地址
        iconSize: new T.Point(36, 36),           //图标大小
        iconAnchor: new T.Point(15, 30),
      });
    },

天地图的功能使用

1. 关于天地图打点并且鼠标移入标点显示标点相关信息

      staList：[
         {
          staLatitude: 119.507244,
          staLongitude: 27.656711,
          staname:111
        },
          {
          staLatitude: 119.507544,
          staLongitude: 27.63512,
           staname:222
        },]
      staList.forEach((item) => {
        var marker = new T.Marker(
          new T.LngLat(item.staLongitude, item.staLatitude),
          { icon: this.icon }
        );
        that.map.addOverLay(marker); //addOverLay方法，将覆盖物添加到地图中，一个覆盖物实例只能向地图中添加一次。
        marker.disableDragging(); //关闭标注拖拽功能,这里不关闭，标点就可以随便拖动
        //这里是标点过多，以防找不到，这里直接定位到第一个标点出
        that.map.centerAndZoom(
          new T.LngLat(
           staList[0].staLongitude,
           staList[0].staLatitude
          ),
          5
        );

        // 悬停显示窗体
        marker.addEventListener("mousemove", function () {
          console.log(112);
          var sContent = `<div>${item.staName}\r${item.staLongitude}\r${item.staLatitude}</div>`;
          marker.openInfoWindow(sContent, { closeButton: false });
        }); // 将标注添加到地图中
        marker.addEventListener("mouseout", function () {
          console.log(55);
          marker.closeInfoWindow();
        });
      });


//如果标点后端返回的格式是另一种=====================================
      var lnglats = [
        "116.479920,31.737813",
        "116.339000,31.748890",
        "116.38525035406,31.732588298908",
        "118.64865,37.25144",
      ];
            lnglats.forEach((item) => {
        let point = item.split(",");
        let latlng = new T.LngLat(point[0], point[1]);
        // that.map.panTo(latlng, 16);
        // let marker = new T.Marker(latlng, { draggable: true }); //e.lnglat，标注点的地理坐标
        let marker = new T.Marker(latlng, { icon: this.icon }); //e.lnglat，标注点的地理坐标
        that.map.addOverLay(marker); //addOverLay方法，将覆盖物添加到地图中，一个覆盖物实例只能向地图中添加一次。
        marker.disableDragging(); //关闭标注拖拽功能
      });

2 . 对于行政区域进行圈画

      let dde = [];
      let style = {
        color: "blue",
        weight: 2,
        opacity: 2,
        lineStyle: "dashed", // 虚线
        fillColor: "#5079f6",
        fillOpacity: 0.1, // 透明度
      };
            let provice = [
        {
          lat: 119.507244,
          lin: 27.656711,
        },
        {
          lat: 119.507544,
          lin: 27.63512,
        },
        {
          lat: 119.504115,
          lin: 27.632399,
        },
        {
          lat: 119.506514,
          lin: 27.621061,
        }，
      ];
            for (let j = 0; j < provice.length; j++) {
        var point = new T.LngLat(provice[j].lat, provice[j].lin);
        dde.push(point);
      }
      const poly = new T.Polygon(dde, style);
      this.map.addOverLay(poly); //向地图上添加行政区划面/
      this.map.setViewport(dde); //显示最佳比例尺
   
   //   如果区域范围后端返回的格式是另一种=====================================
         var points= 
        "116.479920 31.737813,
        116.339000 31.748890,
        116.38525035406 31.732588298908,
        118.64865 37.25144",
      ;
       var pointsArr = [];
            for (var i = 0; i < points.length; i++) {
             var regionLngLats = [];
             var regionArr = points[i].split(",");       //这里是regionArr = [“116.479920 31.737813”,“116.339000 31.737813”]
             for (var m = 0; m < regionArr.length; m++) {
                 var lnglatArr = regionArr[m].split(" ");   //lnglatArr = [116.479920,31.737813]
                 //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);//显示最佳比例尺
             }
          }