OpenLayers 移动视图, 控制视图平移

OpenLayers 移动视图, 控制视图平移

1. 控制语句

const view = map.value.getView()  // 获取视图对象
const center = view.getCenter()   // 获取当前视图中心坐标
view.setCenter([center[0] + 1000, center[1] + 1000])  // 设置新的中点坐标
map.value.render()  // 重新渲染地图

2. 上下左右键控制地图视图平移, 完整代码

<script setup>
import { ref, onMounted, onUnmounted } from 'vue' // vue相关方法
import { Map, View } from 'ol'      // 地图实例方法、视图方法
import TileLayer from 'ol/layer/Tile'
import { XYZ } from 'ol/source'
import { fromLonLat } from "ol/proj";
import 'ol/ol.css'

const map = ref(null) // 存放地图实例

onMounted(() => {

  getCurrentLocation()
  window.addEventListener('keydown', kenDown)

})

onUnmounted(() => {
  window.removeEventListener('keydown', kenDown)
})

const kenDown = (e) => {
  const view = map.value.getView()
  const center = view.getCenter()
  switch (e.keyCode) {
    case 38:
      view.setCenter([center[0], center[1] + 1000])
      break;
    case 40:
      view.setCenter([center[0], center[1] - 1000])
      break;
    case 37:
      view.setCenter([center[0] - 1000, center[1]])
      break;
    case 39:
      view.setCenter([center[0] + 1000, center[1]])
      break;
  }
  map.value.render()
}

function initMap(center = [119, 31]) {
  map.value = new Map({
    target: 'container',
    layers: [
      new TileLayer({
        source: new XYZ({
          url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
        })
      }),
    ],
    view: new View({
      center: fromLonLat(center),
      zoom: 12
    })
  })
}

function getCurrentLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(position => {
      const {longitude, latitude} = position.coords;
      console.log(`当前定位：经度 ${longitude}, 纬度 ${latitude}`);
      initMap([longitude, latitude]); // 更新地图中心为当前位置
    }, error => {
      console.error('获取定位失败', error);
    });
  } else {
    console.error('浏览器不支持地理定位');
  }
}

</script>

<template>
  <div class="title">openlayers vue3 地图示例</div>

  <div id="container"></div>
</template>

<style scoped>
.title {
  margin: 20px 0;
  width: 100%;
  color: #48bb78;
  text-align: center;
  font-size: 2.2em;
  font-weight: bold;
  text-shadow: #000 0 2px 7px;
  position: fixed;
  z-index: 999;
}

#container {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}
</style>