280：vue+openlayers 自定义上下左右移动键

在Vue中使用OpenLayers时，可以通过监听moveend事件来自定义地图移动后的行为。以下是一个简单的例子，展示了如何使用Vue和OpenLayers实现自定义的上下左右键控制地图移动：

<template>
  <div id="map" class="map"></div>
</template>
 
<script>
import 'ol/ol.css';
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
 
export default {
  data() {
    return {
      map: null,
      view: null,
      speed: 100 // 单位毫秒，控制移动速度
    };
  },
  mounted() {
    this.initMap();
    this.addKeyboardEvents();
  },
  methods: {
    initMap() {
      this.map = new Map({
        target: 'map',
        layers: [
          new TileLayer({
            source: new OSM()
          })
        ],
        view: new View({
          center: [0, 0],
          zoom: 2
        })
      });
    },
    addKeyboardEvents() {
      document.addEventListener('keydown', (e) => {
        switch (e.keyCode) {
          case 37: // 左键
            this.moveMap(-this.speed, 0);
            break;
          case 38: // 上键
            this.moveMap(0, this.speed);
            break;
          case 39: // 右键
            this.moveMap(this.speed, 0);
            break;
          case 40: // 下键
            this.moveMap(0, -this.speed);
            break;
          default:
            return; // 忽略其他按键
        }
        e.preventDefault(); // 阻止默认的按键行为
      });
    },
    moveMap(dx, dy) {
      const view = this.map.getView();
      const currentCenter = view.getCenter();
      const newCenter = currentCenter 
        ? [currentCenter[0] + dx, currentCenter[1] + dy] 
        : [0, 0];
      
      view.animate({
        center: newCenter,
        duration: 1000,
      });
    }
  }
};
</script>
 
<style>
.map {
  width: 100%;
  height: 400px;
}
</style>

在这个例子中，我们监听了键盘按下事件，并根据按下的按键代码（37、38、39、40分别代表左、上、右、下）来计算地图中心点的变化，然后使用animate方法平滑地移动地图视图。这样，用户可以使用上下左右键来控制地图的移动。