写点什么

Vite + Vue3 + OpenLayers 手动控制缩放级别

用户头像
学习委员
关注
发布于: 2 小时前
Vite + Vue3 + OpenLayers 手动控制缩放级别

一、本文简介


除了用鼠标滚轮在地图上缩放外,还可以使用 ol 提供的 api 设置地图缩放级别。


  • 获取当前缩放级别:View.getZoom()

  • 设置缩放级别:View.setZoom()


【注意:本文使用的图源是 OSM ,正式开发不能用 OSM ,因为 OSM 的中国边界有点问题!!!】


二、环境搭建

Vite + Vue3 + ol6


# 1、使用 Vite 创建项目;取个好听的项目名;拉取 vue 的代码模板npm init vite@latest
# 2、初始化项目cd you-projectnpm install
# 3、安装 olnpm i ol -S
# 4、启动项目npm run dev
复制代码


使用 Vite 初始化项目并安装 ol ,更详细做法可以查看 『Vite + Vue3 + OpenLayers 起步』


三、思路与编码

  1. 获取当前缩放级别

  2. 点击放大或缩小按钮,原缩放级别加一或减一


<template>  <!-- 地图容器 -->  <div id="map" class="map__x"></div>
<!-- 提示信息 --> <div class="zoom__info"> <p>当前zoom: {{currentZoom}}</p> <p>minZoom: {{minZoom}}</p> <p>maxZoom: {{maxZoom}}</p> </div>
<!-- 控制按钮 --> <div> <button @click="zoomIn">放大</button> <button @click="zoomOut">缩小</button> </div></template>
<script setup>import { ref, computed, onMounted } from 'vue'import { Map, View } from 'ol'import Tile from 'ol/layer/Tile'import OSM from 'ol/source/OSM'import 'ol/ol.css'
const map = ref(null)
const zoom = 12 // 初始化zoomconst minZoom = 10 // 最小zoomconst maxZoom = 14 // 最大zoom
// 初始化function initMap () { // 地图实例 map.value = new Map({ target: 'map', // 对应页面里 id 为 map 的元素 layers: [ // 图层 new Tile({ source: new OSM() // 图层数据源 }) ], view: new View({ // 地图视图 projection: "EPSG:4326", // 坐标系,有EPSG:4326和EPSG:3857 center: [114.064839, 22.548857], // 中心坐标 zoom, // 地图缩放级别(打开页面时默认级别) minZoom, // 地图缩放最小级别 maxZoom // 地图缩放最大级别 }) })}
// 实时获取当前地图的 zoomconst currentZoom = computed(() => { if (map.value) { return map.value.getView().getZoom() } return zoom})
// 放大1级function zoomIn() { let view = map.value.getView() // 获取当前视图 let zoom = view.getZoom() // 获取当前缩放级别 view.setZoom(zoom + 1) // 设置缩放级别}
// 缩小1级function zoomOut() { let view = map.value.getView() // 获取当前视图 let zoom = view.getZoom() // 获取当前缩放级别 view.setZoom(zoom - 1) // 设置缩放级别}
onMounted(() => { // 在元素加载完之后再执行地图初始化 initMap()})</script>
<style lang="scss" scoped>.map__x { width: 600px; height: 600px; border: 1px solid #eee;}
.zoom__info { display: flex;
p { margin-right: 60px; }}</style>
复制代码


本例分别创建了放大和缩小的控制函数,但实际开发中其实只需写成一个函数,通过传参的方式进行控制即可。


四、推荐

本例展示地址(vite+vue3+ol)


本例仓库(vite+vue3+ol)


ol在vue2中使用(预览)


ol在vue2中使用(仓库)


OpenLayers 官网


《WebGIS之OpenLayers全面解析(第2版)》

发布于: 2 小时前阅读数: 2
用户头像

学习委员

关注

反派 2019.03.19 加入

用键盘绣花

评论

发布
暂无评论
Vite + Vue3 + OpenLayers 手动控制缩放级别