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:vanillavuereactpreactlit-elementsvelte

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

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>

四、效果展示