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

一、功能分析

上一篇文章中分享了点、线、面的添加，下一步将为大家分享基础的信息绑定。

在地理信息系统中经常可以看到用户浏览地图时，鼠标移动至地图上某个目标或者点击地图上某个目标，地图都会有相对应的响应。通常当鼠标移动到某个特殊位置上时，首先地图自动显示出一个框关于此位置上的一些简要的信息，鼠标移走之后，信息框随之消失。这个信息框就是tooltips。

而当在我们点击地图上某个目标后，随之出现的信息框就是popup。通常Popup包含有更多的信息，如所点击对象的属性表信息，根据需求必要时Popup信息框中还可能包含与地图交换或者其他交互的功能。如果有地理信息系统经验的同学很容易理解。

二、代码实现

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 等功能又会让这篇太长，不好读记。后面再把这些内容补上，先这样吧，希望对大家有帮助。