openlayers+vite+vue3加载离线地图并实现初始化（一）

前景提示：本文主要讲解使用vite工具构建的项目，利用openlayers实现离线地图的主要一些功能，包括初始化地图、打点、画线、弹窗等等，这些后续有时间会持续为大家更新，本文主要阐述如何实现其首要功能离线地图的初始化。

目录

一、环境搭建

1.使用vite创建一个vue项目

2.安装ol

二、开始编码、初始化地图

1.创建地图容器

2.引入ol

3.创建渲染地图的方法

3.初始化地图

4.在 onMounted 后渲染地图

三、全部代码

四、效果展示

---

一、环境搭建

1.使用vite创建一个vue项目

npm init vite@latest

输入以上命令后会有相应的提示，首先是输入项目名，后面是选择要使用的框架，这里选择 vue 即可。

Select a framework:
    vanilla
    vue
    react
    preact
    lit-element
    svelte

然后进入项目，使用命令初始化项目

cd 你的项目名（我创建的是map-openlayers）
npm install

2.安装ol

待上述步骤实现完成后，需要安装ol

npm i ol 

然后启动项目

npm run dev

二、开始编码、初始化地图

1.创建地图容器

在项目中新建一个vue文件，然后创建地图容器，这一步关键的一点是地图容器需要一个id，另外一定要在css中设置地图的宽高，如果不设置将会出现地图不显示的现象。

<template>
  <div id="container" class="map"></div>
</template>
<style lang="less" scoped>
#container {
  width: 100%;
  height: 100%;
  position: absolute;
}
</style>

2.引入ol

在<script>中引入以下方法，这个根据需要引入即可

import { onMounted, reactive, ref } from 'vue'
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'

3.创建渲染地图的方法

let map = ref(null)

//地图图层参数
const mapView = reactive({
  center: fromLonLat([120.299, 31.568]), // 地图中心点，这里我选用以无锡为例
  zoom: 10, // 初始缩放级别
  minZoom: 10, // 最小缩放级别
  maxZoom: 15 // 最大缩放级别
})
const mapUrl = ref('')//这里填写离线地图的瓦片地址，我这里就暂不展示了

3.初始化地图

// 初始化地图
const init = () => {
  // 使用瓦片渲染方法
  const tileLayer = new TileLayer({
    source: new XYZ({
      url: mapUrl.value
    })
  })

  map.value = new Map({
    layers: [tileLayer],
    view: new View(mapView),
    target: 'container'
  })
}

4.在 onMounted 后渲染地图

onMounted(() => {
  init()
})

三、全部代码

因为分阶段书写想让开始学习这个的小伙伴也能一步步了解，下面附上全部代码

<template>
  <div id="container" class="map"></div>
</template>
<script setup>
import { onMounted, reactive, ref } from 'vue'
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'
let map = ref(null)

//地图图层参数
const mapView = reactive({
  center: fromLonLat([120.299, 31.568]), // 地图中心点
  zoom: 10, // 初始缩放级别
  minZoom: 10, // 最小缩放级别
  maxZoom: 15 // 最大缩放级别
})
const mapUrl = ref('')//这里是离线地图的瓦片地址
// 初始化地图
const init = () => {
  // 使用瓦片渲染方法
  const tileLayer = new TileLayer({
    source: new XYZ({
      url: mapUrl.value
    })
  })

  map.value = new Map({
    layers: [tileLayer],
    view: new View(mapView),
    target: 'container'
  })
  addGeoJson()
}

onMounted(() => {
  init()
})
</script>
<style lang="less" scoped>
#container {
  width: 100%;
  height: 100%;
  position: absolute;
}
</style>

四、效果展示