Vue-CLI and Leaflet （4）添加tooltips 和 popup

1、功能分析

​ 上一篇文章中分享了點、線、面的添加，下一步將爲你們分享基礎的信息綁定。

​ 在地理信息系統中常常能夠看到用戶瀏覽地圖時，鼠標移動至地圖上某個目標或者點擊地圖上某個目標，地圖都會有相對應的響應。一般當鼠標移動到某個特殊位置上時，首先地圖自動顯示出一個框關於此位置上的一些簡要的信息，鼠標移走以後，信息框隨之消失。這個信息框就是tooltips。

​ 而當在咱們點擊地圖上某個目標後，隨之出現的信息框就是popup。一般Popup包含有更多的信息，如所點擊對象的屬性表信息，根據需求必要時Popup信息框中還可能包含與地圖交換或者其餘交互的功能。若是有地理信息系統經驗的同窗很容易理解。

2、代碼實現

1）tooltip

​ Leaflet 中爲點、線、面三大類要素綁定tooltips的方法都是相同的。tooltips 繼承自 layer 類：

這裏能夠看到綁定方法接受的第一個參數就是tooltips中所顯示的內容，第一個參數的類型能夠是 字符串，HTML，函數， tooltips 類。這裏的函數是一個用於構造 tooltip 內容的函數，所以，函數必需要有返回值。下面以marker 演示添加 tooltips 的方法：

// src/views/Map.2.vue 

   addToolitps() {
      let pngJpgIcon = this.$utils.map.createIcon({
        iconUrl: require("./../assets/images/tree.png"),
        iconSize: [52, 42]
      });
      let marker = this.$utils.map.createMakerByXY(this.map, [-0.09, 51.49], {
        icon: pngJpgIcon
      });
      let toolitps = `<h4> Test tooltips </h4> <p> test tooltips message</p>`
      marker.bindTooltip(toolitps);
    }
複製代碼

調用方法放在了組件 MapTools 上，效果以下：

這裏對 tooltips 中的內容的樣式控制須要，能夠經過在全局樣式中編寫 tooltips 對應的元素，更好的方法先爲這個 tooltips 設置一個類名，而後在將內容作爲子元素進行控制：

// 這裏我使用的是 less，也能夠是 css, sass, stylus 等， 記得在引用
// src/assets/style/index.less

.sample-tooltips {
  text-align: left;
  padding: 0 15px;

  h1 {
    font-size: 16px;
  }

  p {
    font-size: 14px;
    font-weight: 200;
    color: red;
  }
}

複製代碼

// src/views/map.2.vue

addToolitps() {
    let pngJpgIcon = this.$utils.map.createIcon({
        iconUrl: require("./../assets/images/tree.png"),
        iconSize: [52, 42]
    });
    let marker = this.$utils.map.createMakerByXY(this.map, [-0.09, 51.49], {
        icon: pngJpgIcon
    });
    let toolitps = () => {
        let tpl = `<h1> tooltips <h1><p>test massage for tooltips</p>`;
        return tpl;
    };
    // 爲 tooltips 指定 class 類名
    marker.bindTooltip(toolitps,{className: "sample-tooltips"});
}
複製代碼

tooltips的狀態和相關屬性設置時放在第二參數option中,

這裏值得一提的是，若是 marker 設置的 click 事件，最好把 tooltips 的交互關掉，即：interactive 屬性設置爲 false， 不然 marker 的 click 事件沒法響應。

靈活使用 tooltips 可在地圖上實現多種實用的效果，如靈活使用 permanent 屬性並配合 tooltipopen 能實現相似下圖的地圖統計功能，後面也許會將加上這個效果的分享。

2）popup

popup 相較於 tooltip 更加獨立，即它不須要依附於圖層或者圖形上。所以 popup 的展現形式更加豐富，再代碼的上實現的方法也相對多一些。

(1) 直在地圖上展現 popup

popup 做爲一個對象存在不依附於圖形或圖層。咱們先根據 官方 API 文檔，先添加構造popup 的方法

// src\utils\map.js

......
const createPopup = (map, options) => {
  let popup = $L.popup(options);
  popup.addTo(map);
  return popup;
};

// 經過數組建立 latlng
const createLatlonByArray = (coordinate) => {
  let latLng = $L.latLng(coordinate[0],coordinate[1]);
  return latLng;
};
......
複製代碼

而後再完成展現 **popup **的功能。這裏注意一點，爲了控制 popup 中內容樣式，最好 popup 配置上 className 屬性

// src\views\map2.vue

......

addPopUp() {
    let popup = this.$utils.map.createPopup(this.map, {
        maxWidth: 200,
        minWidth: 100,
        className: "sample-popup"
    });

    popup
        .setLatLng(this.$utils.map.createLatlonByArray([51.505, -0.09]))
        .setContent(
        `<h1>popup demo</h1><p>This is the content of the popup demo. The length of the content might be so very that maybe beyond the maxWidth that we set on the popup</p>`
    )
        .openOn(this.map);
}

......
複製代碼

(2) 綁定 popup

下面以 Maker 爲爲例展現 Popup 綁定。關於圖層綁定 popup 的功能我打算到 Vue-CLI and Leaflet: 添加各種圖圖層 這一篇裏面爲你們介紹。

// src\views\map2.vue



bindPopup() {
    // 1. 建立 popup
    let popup = this.$utils.map.createPopup(this.map, {
        maxWidth: 200,
        minWidth: 100,
        className: "sample-popup"
    });

    popup.setContent(
        `<h1>popup demo</h1><p>This is the content of the popup demo. The length of the content might be so very that maybe beyond the maxWidth that we set on the popup</p>`
    );

    let gifIcon = this.$utils.map.createIcon({
        iconUrl: require("./../assets/images/sample.gif"),
        iconSize: [32, 32]
    });
    
    // 2. 建立 marker
    let marker = this.$utils.map.createMakerByXY(this.map, [-0.095, 51.505], {
        icon: gifIcon
    });
    
    // 3.爲 marker 綁定 popup
    marker.bindPopup(popup);
}

複製代碼

三）總結

寫完以後，才以爲這篇有些太簡單。若是要展開講到 tooltip 的靈活運用或者爲圖層綁定 popup 等功能又會讓這篇太長，很差讀記。後面再把這些內容補上，先這樣吧，但願對你們有幫助。

---

目錄

（一） Vue-CLI and Leaflet：起步 - 在 Vue-CLI 中使用 Leaflet

（二） Vue-CLI and Leaflet:地圖基本操做（放大，縮小，平移，定位等）

（三） Vue-CLI and Leaflet: 添加 marker, polyline, polygon

（四） Vue-CLI and Leaflet: 添加 tooltips 和 popup

（五） Vue-CLI and Leaflet: 點 繪製

（六） Vue-CLI and Leaflet: 線 繪製

（七） Vue-CLI and Leaflet: 面 繪 制

（八） Vue-CLI and Leaflet ：加載 Esri ArcGIS Map Service

（九） Vue-CLI and Leaflet: 圖層控制基本功能的實現

（十） Vue-CLI and Leaflet: AGS 屬性查詢與點圖查詢

（十一）Vue-CLI and Leaflet: 點聚合 Leaflet.markercluster

源碼請參看 個人GitHub,因爲文章是一邊coding，一邊寫的因此 Github 裏面的源碼可能有點亂，能夠根據功能來找對應的代碼。後面會陸續整理完善。