Vue3 + OpenLayers 创建地图

Vue3 + OpenLayers 创建地图

如图示例:

1. 安装 OpenLayers

npm i ol -S

2. 引入 OpenLayers
   创建地图容器, 编写渲染方法, 执行渲染方法

import { Map, View } from 'ol'      // 地图实例方法、视图方法
import TileLayer from 'ol/layer/Tile'
import { XYZ } from 'ol/source'
import 'ol/ol.css'

• Map： 一个地图容器最最最核心的部分可以加载各类地图与功能控件，也用于渲染、表现动态地图。每一个地图都是一个 Map 对象。。
• View：是地图视图，控制地图缩放等基础交互，以及地图投影坐标系、地图中心、分辨率、旋转角度等。
• TileLayer： TileLayer 用来承放所需的底图。
• XYZ： 使用 xyz 图源
• ol/ol.css： 引入所需的 css，这项是必须的。如果没引入此文件，地图渲染出来的样子会很奇怪的，甚至无法交互。

3. 完整代码，根据当前定位加载该位置的地图

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

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

onMounted(() => {

  getCurrentLocation()

})

function initMap(center = [119, 31]) {
  // 地图实例
  map.value = new Map({
    target: 'container',                   // 对应页面里 id 为 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}'
        })
      }),
    ],
    view: new View({                       // 地图视图
      projection: "EPSG:4326",             // 坐标系，有EPSG:4326和EPSG:3857
      center: 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>

禁止默认的交互, 结构如下

import { defaults } from "ol/interaction";

map.value = new Map({
  target: 'container',
  // 禁止默认的交互
  interactions: defaults({
    doubleClickZoom: false, // 禁止双击缩放
    dragPan: false, // 禁止平移
    pinchRotate: false, // 禁止旋转
    pinchZoom: false, // 禁止缩放
    keyboard: false,  // 禁止键盘操作
    mouseWheelZoom: false,  // 禁止鼠标滚轮缩放
    shiftDragZoom: false, // 禁止拖拽缩放
    // ...
  }),
  layers: [],
  view: new View({})
})