openlayers之框选放缩DragZoom(vue项目)
环境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";
}
openlayers之框选放缩DragZoom(vue项目)的更多相关文章
- vue 项目 多选 问题
近期 vue 项目用到多选功能,引用的elementUI的级联多选 Cascader,但是没有效果. 后来发现是elementUI版本问题,我们项目用的是2.7.2版本,版本太低. 后来 卸载了 重新 ...
- vue封装一个简单的div框选时间的组件
记录一下我前段时间封装的一个vue组件吧.技术需要积累,有时间我把我之前写的还不错的组件都开源出来.并尝试vue和react 两种方式的组件封装.今天简单写下鼠标框选div选中效果的封装吧. div框 ...
- 在vue项目中添加全局提示框
1.写一个提示框组件:msg.vue (注明:这里用两个div的原因是成功和失败的提示不能用同一个div,因为他们可能紧接着出现,所以不能从始至终只有一个提示框在工作) 2.写一个调用此组建的js : ...
- webpack+vue项目实战(四,前端与后端的数据交互和前端展示数据)
地址:https://segmentfault.com/a/1190000010063757 1.前言 今天要做的,就是在上一篇文章的基础上,进行功能页面的开发.简单点说呢,就是与后端的数据交互和怎么 ...
- vue项目实现记住密码到cookie功能(附源码)
实现功能: 1.记住密码勾选,点登陆时,将账号和密码保存到cookie,下次登陆自动显示到表单内 2.不勾选,点登陆时候则清空之前保存到cookie的值,下次登陆需要手动输入 大体思路就是通过存/取/ ...
- Geoserver+Openlayers拉框查询
1.代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" co ...
- 利用vue-cli3快速搭建vue项目详细过程
一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vue ...
- 使用HBuilderX实现打包vue项目成app
一.准备开发工具 开发工具:HBuilderX 官网地址:http://www.dcloud.io (标准版需要自己安装插件,app开发版已经把app开发常用的插件安装好了,开箱即用,建议使用开发版) ...
- Vue项目经验
Vue项目经验 setInterval路由跳转继续运行并没有及时进行销毁比如一些弹幕,走马灯文字,这类需要定时调用的,路由跳转之后,因为组件已经销毁了,但是setInterval还没有销毁,还在继续后 ...
随机推荐
- C++入门经典-例3.3-if-else语句的奇偶性判别
1:代码如下: // 3.3.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> using ...
- JS基础_强制类型转换
强制类型转换 将一个数据类型强制转换为其他的数据类型 类型转换主要指,将其他数据类型,转换为 string.number.boolean 1.将其他数据类型转换为string(返回值是强转后类型的值) ...
- C#开启一个进程
Process myProc = null; myProc = Process.Start(@"E:\QQ轻聊\Tencent\QQLite\Bin\QQScLauncher.exe&quo ...
- 安装源配置文件“/etc/apt/sources.list”问题
安装docker过程中使用以下命令设置稳定存储库. $ sudo add-apt-repository \ "deb [arch=amd64] https://download.docker ...
- redhat下配置SEED DVS6446开发环境3
1.运行arm_v5t_le-gcc,报错为: 64bit的Linux操作系统,无法运行32bit的应用程序 /lib/ld-linux.so.2: bad ELF interpreter: No s ...
- Python基本语法_输入/输出语句详解
目录 目录 前言 输入 raw_input input raw_input 和 input 的区别 输出 print print 基本格式化输出 print复杂格式化输出 flags标志位 width ...
- Git 提交 .gitignore文件
问题描述 不知道小伙伴有木有遇到这种情况:想在工程里增加 .gitignore 文件,用于在以后提交后,过滤哪些文件或者目录. 但是,在当前工程的根目录下,执行如下执行命令后,依然不能把 .gitig ...
- C# 中的字符串内插
$ 特殊字符将字符串文本标识为内插字符串. 内插字符串是可能包含内插表达式的字符串文本. 将内插字符串解析为结果字符串时,带有内插表达式的项会替换为表达式结果的字符串表示形式. 此功能在 C# 6 及 ...
- Java编程思想——标准 I / O
将Syetem.out转换成PrintWriter 标准I/O重定向: 控制台信息量大,滚动快,查看困难 setIn(InputStream) setOut(...) setErr(...) 新I/O ...
- 【Qt开发】Qt应用程序发布封装
问题:在使用Qt5.3.2编写程序并release,文件夹中已经添加了必要的dll,但在其他机子上运行程序失败,出现了下面的情况: 解决方法一:在C:\Qt\Qt5.3.2\5.3中进入mingw48 ...