049:vue+openlayers鼠标pointermove显示城市名片(示例代码)

Vue OpenLayers 是一种基于 Vue.js 的开源地图库，结合了 OpenLayers 的强大功能和 Vue.js 的易用性。其中，鼠标 pointermove 显示城市名片是 Vue OpenLayers 中非常有用的功能之一。下面我们来看一下示例代码。

在 Vue OpenLayers 中，我们可以使用 PointerMove() 方法来实现鼠标移动时的功能。我们可以在 mounted() 中添加以下代码：

mounted() {
  this.map.on('pointermove', this.displayCityCard);
}

这里，我们为指针移动事件添加了一个监听器，该监听器会调用 displayCityCard 方法。

接下来，我们需要实现 displayCityCard 方法，该方法会在指针移动时显示城市名片。代码如下：

methods: {
  displayCityCard(evt) {
    let features = this.map.getFeaturesAtPixel(evt.pixel);
    if (features.length) {
      let feature = features[0];
      let city = feature.get('name');
      this.city = city;
      this.showCityCard = true;
    } else {
      this.showCityCard = false;
    }
  }
}

这里，我们首先通过 getFeaturesAtPixel() 方法获取与指针所在位置对应的要素。如果有要素，则从中取出城市名，并将其赋值给 city。同时，我们将 showCityCard 属性设置为 true，以显示城市名片。如果没有要素，则将 showCityCard 设置为 false，以隐藏城市名片。

最后，我们需要在模板中添加一个 div 元素，用于显示城市名片：

<div v-if="showCityCard" class="city-card">
  {{ city }}
</div>

这里，我们使用了 v-if 指令来控制 div 元素的显示与隐藏。如果 showCityCard 为 true，则显示该元素，并将城市名字显示在其中。

以上就是在 Vue OpenLayers 中实现鼠标 pointermove 显示城市名片的示例代码。通过这个函数，我们可以更加便捷地在地图上查看城市信息。