环境vue3.0项目

最初是以npm i ol -s方式安装的ol，import方式导入引用，但是实际使用的时候一直报ol is not defined,最后选择在HTML以script标签引入ol，如下

  <link rel="stylesheet" href="<%= BASE_URL %>./css/gr-ol.css" type="text/css">
  <script src="<%= BASE_URL %>./js/gr-ol.js" type="text/javascript"></script>

然后在src内的js文件就可以直接使用ol了，要实现框选放缩，要使用ol库里面的DragZoom控件,实例化一个DragZoom对象，添加到地图对象（这里是kpst）里面，原本从ol库引入的Map是带有DragZoom的，但是改变里面condition 的name从默认的‘shiftKeyOnly’到‘always’还没有找到方法，就重新实例化了一个DragZoom添加到现有地图

在map组件的js文件内添加控件

import { Map, View } from 'ol';
import DragZoom from 'ol/interaction/DragZoom'
 kpst._this = new Map(_op)
   // 为了改变DragZoom的内容，重新实例化一个控件
    var dragZoom = new DragZoom({
      condition: ol.events.condition.always,
      out: true, // 此处为设置拉框完成时放大还是缩小 true缩小
    });
    // 默认控件不激活状态
    dragZoom.setActive(false);
    // 将控件添加到地图
    kpst._this.addInteraction(dragZoom);

点击特定按钮激活控件

         // 获取拉框控件DragZoom进行引用
      var dragzoom = me.map._this.interactions.getArray()[8]
      // 获取地图容器dom
      var map_container = document.querySelector("#map_container")
      // 绑定放大缩小按钮事件
      if (data.name == "拉框放大" || data.name == "拉框缩小") {
        // 设置鼠标样式为十字瞄准线
        map_container.style.cursor = "crosshair";
        // 激活拉框控件DragZoom
        dragzoom.setActive(true)
        if (data.name == "拉框放大") {
          // 设置拉框放大
          dragzoom.out_ = false;
        } else {
          // 设置拉框缩小 
          dragzoom.out_ = true;
        }
      } else {
        // 禁用DragZoom控件
        dragzoom.setActive(false);
        map_container.style.cursor = "default";
      }

openlayer之框选放缩DragZoom（vue项目）

原文：https://www.cnblogs.com/wwj007/p/11438163.html