基於Vue的天地圖入門專題(二)

圖層切換組件以及其他小功能

上次已經能把地圖加載出來啦，這次的目標是添加地圖切換組件以及其他小功能。

圖層組件

可以用繼承於TControl的MapType類來構造圖層組件。示例代碼的參數是個數組，如果什么都不傳會有一個默認的圖層系列。

以下這些圖層都可以在官方的api里找到

    //添加切換地圖圖層的組件
    addCtrl() {
      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/satellite.png",
          layer: TMAP_SATELLITE_MAP,
        },
        {
          title: "衛星混合",
          http: "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: TMAP_TERRAIN_MAP,
        },
        {
          title: "地形混合",
          icon: " http://api.tianditu.gov.cn/v4.0/image/map/maptype/terrainpoi.png",
          layer: TMAP_TERRAIN_HYBRID_MAP,
        },
      ]);
      this.map.addControl(ctrl);

效果如下：

獲取地圖中心坐標點

    getMapCenter() {
      this.$message(
        "地圖中心坐標點:" +
          this.map.getCenter().getLng() +
          "," +
          this.map.getCenter().getLat()
      );
    },

效果如下：

獲取地圖縮放級別

    getMapZoom() {
      this.$message("地圖縮放級別:" + this.map.getZoom());
    },

效果如下：

獲取地圖當前可視范圍坐標

    getMapBounds() {
      let bs = this.map.getBounds(); //獲取可視區域
      let bssw = bs.getSouthWest(); //可視區域左下角
      let bsne = bs.getNorthEast(); //可視區域右上角
      this.$message(
        "當前地圖可視范圍是:" +
          bssw.getLng() +
          "," +
          bssw.getLat() +
          "到" +
          bsne.getLng() +
          "," +
          bsne.getLat()
      );
    },

效果如下：

目前的這些api都可以從天地圖官網找到，如果你需要要更多需求，官方也許也有現成的api。建議先熟悉一下官方api再進行開發。

參考鏈接

• 天地圖官網：https://www.tianditu.gov.cn/
• 項目源碼：https://github.com/lululutx/vue-tianditu