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