Vue 引入天地图 & 地图类型切换

Vue项目引入天地图

• 在vue的静态资源目录下的index.html中引入天地图的底图 http://lbs.tianditu.gov.cn/api/js4.0/guide.html
• 在引入了vue项目以后及将需要用到的功能从window对象下赋值给当前项目的Data

<script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=你申请的key"> 
// 引入天地图底层图

具体页面代码

<template>

  

    <div id="viewDiv" style=" 100%;

    height: 100%;

    margin: 0;

    padding: 0;

    overflow: hidden;

    position: absolute;

    top: 0;

    left: 0;">

  

  </div>

</template>

<script>

export default {

  name: "Data",

 

  mounted() {

   

      var T = window.T;

      var imageURL = 'http://t0.tianditu.gov.cn/img_w/wmts?' +

        'SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles' +

        '&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=f40b5d54d28af08fcca0003dc581e55c';

      var lay = new T.TileLayer(imageURL, { minZoom: 1, maxZoom: 16 });

      var config = { layers: [lay] };

      this.map = new T.Map('viewDiv', config); // 地图实例

      this.map.centerAndZoom(new T.LngLat(116.40969, 39.89945), 3);

      // //允许鼠标双击放大地图

      this.map.enableScrollWheelZoom();

      //创建地图图层对象

      let mapTypeSelect = [{

        'title': '地图', //地图控件上所要显示的图层名称

        'icon': 'http://api.tianditu.gov.cn/v4.0/image/map/maptype/vector.png', //地图控件上所要显示的图层图标（默认图标大小80x80）

        'layer': window.TMAP_NORMAL_MAP //地图类型对象，即MapType。

      },

        {

          'title': '卫星',

          'icon': ' http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellite.png',

          'layer': window.TMAP_SATELLITE_MAP

        }, {

          'title': '卫星混合',

          'http': 'api.tianditu.gov.cn/v4.0/image/map/maptype/satellitepoi.png',

          'layer': 'TMAP_HYBRID_MAP'

        }, {

          'title': '地形',

          'icon': ' http://api.tianditu.gov.cn/v4.0/image/map/maptype/terrain.png',

          'layer': window.TMAP_TERRAIN_MAP

        },

        {

          'title': '地形混合',

          'icon': ' http://api.tianditu.gov.cn/v4.0/image/map/maptype/terrainpoi.png',

          'layer': window.TMAP_TERRAIN_HYBRID_MAP

        }];

      var ctrl = new T.Control.MapType({ mapTypes: mapTypeSelect }); // 初始化地图类型选择控件

      this.map.addControl(ctrl); //添加地图选择控件

      this.map.setMapType(window.TMAP_HYBRID_MAP);      // 设置地图位地星混合图层

      

      this.GetMaps ()

  },

  

        methods: {

     GetMaps () {

        let T = window.T;

        //设置显示地图的中心点和级别

        this.map.clearOverLays();

       this.map.centerAndZoom(new T.LngLat(116.40969, 39.89945), 3);

         // console.log(index);

          var icon = new T.Icon({

            iconUrl: 'http://api.tianditu.gov.cn/img/map/markerA.png',

            iconSize: new T.Point(33, 33),

            iconAnchor: new T.Point(10, 25)

          });

          var latlng = new T.LngLat(21,22,); // 设置坐标点传入经度纬度

          let marker = new T.Marker(latlng, { icon: icon });// 创建标注

          

          const that = this;

          marker.addEventListener('click', function (e) { // 监听点击事件

        

            let clientx = e.lnglat.lat; // 获取marker当前经纬度

            let clientY = e.lnglat.lng; 

            that.map.centerAndZoom(new T.LngLat(clientY, clientx), 10); // 重新创建地图对象

            // 这里获取的经度纬度是实际经纬度四舍五入后的获取的

          });

            }

      

      }

};

</script>

上面一段是我从自己项目中抠出来的，本来不想发出来的，但是现在百度上搜天地图的资源实在是少得可怜，很多天地图的error因为Vue框架的问题需要从window中获取，但是在百度上搜到的，几乎没有人会把这个发出来，从而导致开发效率大幅的降低。因于心不忍，故此次前来造福百姓