前端学习openLayers配合vue3（图层中心点的偏移）

有了上一步的学习，我们知道了如何创建一个地图，现在我们来尝试更改一下图层的中心点

关键代码

  let view = map.getView();//获取视图层
  let center = view.getCenter();
  //表示当前中心点的位置，调增经纬度就可以进行位置的便宜，下移，左移右移也同理
  console.log(center);//[经度，纬度]
  center[1] -= 0.1;

  view.setCenter(center);//设置中心点位置
  map.render();//重新渲染地图

完整代码

<script setup>
import { onMounted, reactive, ref } from "vue";
import { Map, View } from "ol";
import TileLayer from "ol/layer/Tile";
import { XYZ } from "ol/source";
import { fromLonLat } from "ol/proj";
defineProps({
  msg: String,
});
let map = reactive("");
let view = reactive("");
onMounted(() => {
  initMap();
});
let initMap = () => {
  (view = new View({
    center:[114.305469,30.592876],
    // center: fromLonLat([114.08, 30.59]),
    zoom: 10,
    projection:'EPSG:4326'
  })),
    (map = new Map({
      target: "map", //挂载视图的容器
      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}",
            wrapX: false,
          }),
        }), //图层
      ],

      //视图
      view: view,
    }));
};
let up = () => {
  let view = map.getView();//获取视图层
  let center = view.getCenter();
  //表示当前中心点的位置，调增经纬度就可以进行位置的便宜，下移，左移右移也同理
  console.log(center);
  center[1] -= 0.1;
  view.setCenter(center);//设置中心点位置
  map.render();//重新渲染地图
};
</script>

<template>
//在页面上展示对应的按钮
  <div id="map">
    <div class="btns">
      <div @click="up">上移</div>
      <div>下移</div>
      <div>左移</div>
      <div>右移</div>
    </div>
  </div>
</template>

<style scoped>
.btns {
  display: flex;
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 999;
}
.btns div {
  width: 100px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.read-the-docs {
  color: #888;
}
#map {
  margin: 0;
  width: 100vw;
  height: 100vh;
}
</style>