openlayers中map.on()与map.once()区别实战对比

原创

已于 2024-06-28 17:39:14 修改 · 538 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #arcgis

于 2024-06-28 17:37:50 首次发布

文章目录

map.on()效果示例
map.once()效果示例
附源码

map.on()效果示例

通过map.on监听moveend地图移动触发事件，测试发现事件会多次触发，每移动一次都会触发到moveend事件。我们看效果：
在这里插入图片描述

map.once()效果示例

通过map.once监听的moveend事件，地图移动时始终只触发一次。

在这里插入图片描述

附源码

<template>
  <div id="map" class="imap">
  </div>

</template>
<script setup>
  // openlayers中map.on()与map.once()区别对比
  import {
    onMounted,
    ref
  } from 'vue'
  import 'ol/ol.css';
  import {
    Map,
    View
  } from 'ol';
  import TileLayer from 'ol/layer/Tile';
  import XYZ from 'ol/source/XYZ';
  var map = null
  onMounted(() => {
    map = new Map({
      target: 'map',
      layers: [
        new TileLayer({
          source: new XYZ({
            url: "",