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 install2.安装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>四、效果展示
