vue2和vue3中使用openlayers离线地图（一）

概述

OpenLayers 使在任何网页中放置动态地图变得容易。它可以显示从任何来源加载的地图图块、矢量数据和标记。OpenLayers 的开发旨在进一步使用各种地理信息。它是完全免费的开源 JavaScript
官网

https://openlayers.org/

1、下载依赖

npm i ol -S

2、下载瓦片

这里使用 全能地图下载工具 也可使用别的下载工具，可以将瓦片下下来就行

https://pan.baidu.com/s/1XKcdCXrKZRdfu1xOB2wnEg?pwd=d7tg
提取码：d7tg

下载完之后呢就是这样的

由于瓦片太大，放在项目里不合适，这里将瓦片放在 nginx 里了，也可放在项目里测，不建议，加载会很慢

3、nginx 配置

server {
     listen  9098;
     server_name  127.0.0.1;
     location ^~/tiles{
         alias D:/inginx-1.20.1/tiles/;
         autoindex on;
         charset utf-8,utf-8;
     }
 }

4、vue2 使用

<template>
  <div id="map" />
</template>
<script>
import 'ol/ol.css'
import TileLayer from 'ol/layer/Tile'
import XYZ from 'ol/source/XYZ'
import { Map, View } from 'ol'
import { fromLonLat } from 'ol/proj'

export default {
  data() {
    return {
      map: null,
      mapView: {
        center: fromLonLat([108.939062, 34.374741]), // 地图中心点
        zoom: 11, // 初始缩放级别
        minZoom: 10, // 最小缩放级别
        maxZoom: 17 // 最大缩放级别
      },
      // 瓦片引入地址 nginx
      // mapUrl: `http://127.0.0.1:9098/tiles/{z}/{x}/{y}.png`
      // 瓦片本地引入 瓦片等级越高加载编译越慢
      // 在 public 下新建 tiles 文件夹，将下好的瓦片放进去
      mapUrl: `tiles/{z}/{x}/{y}.png`
    }
  },
  mounted() {
    this.initMap()
  },
  methods: {
    // 初始化地图
    initMap() {
      const tileLayer = new TileLayer({
        source: new XYZ({
          url: this.mapUrl
        })
      })
      this.map = null
      this.map = new Map({
        layers: [tileLayer],
        view: new View(this.mapView),
        target: 'map' // 将地图注入到 dom 元素中，此处写 dom id
      })
    }
  }
}
</script>

<style scoped>
#map {
  width: 100%;
  height: 100%;
  position: absolute;
}
</style>

5、vue3 使用

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

<script setup>
import 'ol/ol.css'
import TileLayer from 'ol/layer/Tile'
import XYZ from 'ol/source/XYZ'
import { Map, View } from 'ol'
import { fromLonLat } from 'ol/proj'
import { reactive, ref } from '@vue/reactivity'
import { onMounted } from 'vue'

const mapView = reactive({
  center: fromLonLat([108.939062, 34.374741]), // 地图中心点
  zoom: 11, // 初始缩放级别
  minZoom: 10, // 最小缩放级别
  maxZoom: 17 // 最大缩放级别
})
let map = ref(null)

// 此处瓦片地址和 vue2 中的一样，可在本地测
const mapUrl = ref('http://127.0.0.1:9098/tiles/{z}/{x}/{y}.png')
// const mapUrl = ref(`tiles/{z}/{x}/{y}.png`)

// 初始化地图
const init = () => {
  const tileLayer = new TileLayer({
    source: new XYZ({
      url: mapUrl.value
    })
  })
  map.value = new Map({
    layers: [tileLayer],
    view: new View(mapView),
    target: 'map'
  })
}

onMounted(() => {
  init()
})
</script>

<style scoped>
#map {
  width: 100%;
  height: 100%;
  position: absolute;
}
</style>

6、此时页面就会出现地图啦