I. Requirements description

A requirement was encountered during development:

  1. The map needs to be displayed, but does not affect page scrolling by default.
  2. After clicking on the map, scroll the mouse wheel over the map to zoom in and out.
  3. When you click somewhere outside the map and go back to the map to scroll the wheel, the page scrolls up and down, but the map does not zoom.





Second, development environment

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.





Three, coding

<template> <! <div tabindex="2" id="map" class="map__x"></div> </template> <script setup> import {ref, 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 = Function initMap() {map.value = new map ({target: 'map', // map corresponds to the map element on the page: [// Layer New Tile({// Tile source: new OSM() // OSM base})], View: New View({// map view projection: "EPSG:4326", // Projection rule center: [113.120444,23.034742], // Center point zoom: </script> <style lang=" SCSS "scoped>.map__x { width: 600px; height: 600px; border: 1px solid #eee; } </style>Copy the code

The most important part of the code above is that the tabIndex attribute is added to the map container (HTML) section. With this attribute, mouse over the map container is not selected by default, so scrolling will trigger the page scroll, not the map.

This is actually a native HTML property that specifies the TAB key to control order. The W3C says Safari doesn’t support this property, but it does in my tests!





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)

If you don’t know what OpenLayers is, read: “Vite + Vue3 + OpenLayers start”