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 里面的源码可能有点乱，能够根据功能来找对应的代码。后面会陆续整理完善。