源码分析之Openlayers中默认Controls控件渲染原理

原创

已于 2025-01-03 23:06:23 修改 · 597 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#Openlayers

于 2024-12-10 16:52:59 首次发布

访问Openlayers网站(https://jinuss.github.io/Openlayers_map_pages/，网站是基于Vue3 + Openlayers，里面有大量的实践和案例。觉得还不错，可以给个小星星Star，鼓励一波 https://github.com/Jinuss/OpenlayersMap哦~

概述

Openlayers 中默认的三类控件是Zoom、Rotate和Attribution

源码分析

`defaults`方法

Openlayers 默认控件的集成封装在defaults方法中，该方法会返回一个Collection的实例，Collection是一个基于数组封装了一些方法，主要涉及到数组项的添加会注册触发一些事件。关于Collection类可以参考源码分析之 Openlayers 中的 Collection 类

defaults方法实现如下：

export function defaults(options) {
   
   
  options = options ? options : {
   
   };

  const controls = new Collection();

  const zoomControl = options.zoom !== undefined ? options.zoom : true;
  if (zoomControl) {
   
   
    controls.push(new Zoom(options.zoomOptions));
  }

  const rotateControl = options.rotate !== undefined ? options.rotate : true;