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

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

圖層元件

可以用繼承於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