I. Introduction to this paper

In addition to zooming on the map with the mouse wheel, you can also set the map zooming level using the API provided with OL.

  • Gets the current zoom level:View.getZoom()
  • Set the zoom level:View.setZoom()

Note: The graph source used in this article isOSMOfficial development is not availableOSMBecause theOSMThere is something wrong with the Chinese border!! 】




Second, environment building

Vite + Vue3 + ol6

# 1. Create a project using Vite. Give it a nice project name; CD you-project NPM install # 3, install OL NPM I ol-s # 4, start project NPM run devCopy the code

Initialize the project using Vite and install OL. See “Vite + Vue3 + OpenLayers Starting” for more details.




Third, ideas and coding

  1. Gets the current zoom level
  2. Click the zoom or zoom button to add or subtract one from the original zoom level
<template> <! - the map container -- > < div id = "map" class = "map__x" > < / div > <! - prompt information - > < div class = "zoom__info" > < p > the current zoom: {{currentZoom}} < / p > < p > minZoom: {{minZoom}} < / p > < p > maxZoom: {{maxZoom}}</p> </div> <! <button @click="zoomOut"> 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 // initialize zoom const minZoom = 10 // minZoom const maxZoom = 14 // maxZoom // initialize function initMap Map. value = new map ({target: 'map', // corresponding to the map element on the page: [// new Tile({source: New OSM() // layer data source})], view: new View({// map view projection: "EPSG:4326", // coordinate system, with EPSG:4326 and EPSG:3857 center: [114.064839, 22.548857], // center coordinates zoom, // map zoom level (default level when opening the page) minZoom, // Minimum level of map zoom maxZoom // Maximum level of map zoom})})} // Get the zoom of the current map in real time const currentZoom = computed(() => {if (map.value) {return Function zoomIn() {let view = map.value.getView().getzoom ()} return zoom} SetZoom (zoom + 1) // Set the zoom level} function zoomOut() {let view = Map.value.getview () let zoom = view.getzoom () setZoom(zoom-1) set the zoom level} onMounted(() => { </script> <style lang=" SCSS "scoped>. Map__x {width: 600px; height: 600px; border: 1px solid #eee; } .zoom__info { display: flex; p { margin-right: 60px; } } </style>Copy the code

In this example, control functions of zoom in and zoom out are created respectively. However, in actual development, only a function is needed to be written and controlled by passing parameters.




Fourth, to recommend

This example shows address (vite+vue3+ OL)

This example repository (vite+vue3+ OL)

Ol used in VUe2 (preview)

Ol is used in VUe2 (warehouse)

OpenLayers website

WebGIS: OpenLayers (2nd Edition)