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

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

一、本文简介

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-project
npm install

# 3、安装 ol
npm i ol -S

# 4、启动项目
npm run dev


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



三、思路与编码

  1. 获取当前缩放级别
  2. 点击放大或缩小按钮,原缩放级别加一或减一





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



四、推荐

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

本例仓库(vite+vue3+ol)


ol在vue2中使用(预览)

ol在vue2中使用(仓库)


OpenLayers 官网

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

你可能感兴趣的:(Vite + Vue3 + OpenLayers 手动控制缩放级别)