OpenLayers要素拖拽
//拖拽要素
function dragFeature (_map,_dragEndCallback) {
let selFeature = null;
_map.on("pointerdrag", function (evt) {
selFeature = _map.getFeaturesAtPixel(evt.pixel, function (feature) {
return feature;
});
});
let translate = new ol.interaction.Translate({//拖拽移动interaction
features: selFeature//拖拽的为选择的要素
});
_map.encmap.addInteraction(translate);
translate.on('translateend', function (f) {
if(_dragEndCallback){
let obj = {};
obj.features=f.features;
obj.coordinate=f.coordinate;
_dragEndCallback(obj);//拖拽完成事件,可以获取拖拽后的要素
}
_map.removeInteraction(translate);
});
};
OpenLayers要素拖拽的更多相关文章
- OpenLayers学习笔记(六)— 拖拽叠加层overlayer
是在官网例子基础上增加的拖拽功能 GitHub:八至 作者:狐狸家的鱼 本文链接:拖拽叠加层overlayer 全部代码 <!DOCTYPE html> <html> < ...
- OpenLayers学习笔记(五)— 拖拽Feature图层
参考文档的例子可以知道如何拖动矢量图层feature GitHub: 八至 作者:狐狸家的鱼 本文链接:拖拽Feature图层 全部代码 <!DOCTYPE html> <html& ...
- openlayers中实现点的拖拽(modify),在layer中增加修改删除point。
最近忙着整地图,都忘记了总结来沉淀自己,自我检讨一下. 总结一下最近使用openlayer时学习的内容,先说下我的业务逻辑吧,在室内地图中 1,点击新增在地图上新增一个可以拖拽的点,拖拽完成后确定位置 ...
- HTML5图片拖拽预览原理及实现
一.前言 这两天恰好有一位同事问我怎样做一个图片预览功能.作为现代人的我们首先想到的当然是HTML5啦,其实HTML5做图片预览已经是一个老生常谈的问题了.我在这里就简单说说其中相关的一些东西,当然会 ...
- 使用原生JavaScript的Canvas实现拖拽式图形绘制,支持画笔、线条、箭头、三角形、矩形、平行四边形、梯形以及多边形和圆形,不依赖任何库和插件,有演示demo
前言 需要用到图形绘制,没有找到完整的图形绘制实现,所以自己实现了一个 - - 一.实现的功能 1.基于oop思想构建,支持坐标点.线条(由坐标点组成,包含方向).多边形(由多个坐标点组成).圆形(包 ...
- 原生js实现Canvas实现拖拽式绘图,支持画笔、线条、箭头、三角形和圆形等等图形绘制功能,有实例Demo
前言 需要用到图形绘制,没有找到完整的图形绘制实现,所以自己实现了一个 - - 演示地址:查看演示DEMO 新版本支持IE5+(你没看错,就是某软的IE浏览器)以上任意浏览器的Canvas绘图:htt ...
- JavaScript动画-拖拽改变元素大小
▓▓▓▓▓▓ 大致介绍 拖拽改变元素大小是在模拟拖拽上增加了一些功能 效果:拖拽改变元素大小 ▓▓▓▓▓▓ 拖拽改变元素大小原理 首先这个方块得知道我们想要改变这个它的大小,所以我给它设定一个范围,当 ...
- javascript动画系列第一篇——模拟拖拽
× 目录 [1]原理介绍 [2]代码实现 [3]代码优化[4]拖拽冲突[5]IE兼容 前面的话 从本文开始,介绍javascript动画系列.javascript本身是具有原生拖放功能的,但是由于兼容 ...
- javascript动画系列第四篇——拖拽改变元素大小
× 目录 [1]原理简介 [2]范围圈定 [3]大小改变[4]代码优化 前面的话 拖拽可以让元素移动,也可以改变元素大小.本文将详细介绍拖拽改变元素大小的效果实现 原理简介 拖拽让元素移动,是改变定位 ...
随机推荐
- idea实现svn拉分支和合并分支的教程
原文地址:https://blog.csdn.net/qq_27471405/article/details/78498260 今天测试了一下svn拉分支和合并分支的教程,决定分享给大家 拉分支教程: ...
- 2019杭电多校赛第九场 Rikka with Mista
Problem Description Rikka is a fervent fan of JoJo's Bizarre Adventure. As the last episode of Golde ...
- 创建dynamics CRM client-side (二) - Client API
如果我们想用script来直接在form上做一些修改, 我们需要用到client api 来做交互. 我们可以用以下来理解: Form <---> Client API <---&g ...
- php编译完php.ini加载问题-Loaded Configuration File (none)
编译安装php7时指定了--with-config-file-path=/usr/local/php7/etc,修改了 php.ini 的配置后重启,但就是不生效. 出现Loaded Configur ...
- 将Ubuntu下网卡名称enss改为eth0
将Ubuntu下网卡名称enss改为eth0 sudo nano /etc/default/grub 找到GRUB_CMDLINE_LINUX=""改为GRUB_CMDLINE ...
- reactNative-解决react native使用fetch函数 Network request failed 问题
解决react native使用fetch函数Network request failed问题 最近公司新开发一个app, 用react native架构好后,用xcode模拟器打开app,对接登陆接 ...
- ajax--->请求异常 jQuery提示parsererror错误解决办法
ajax请求异常 jQuery提示parsererror错误解决办法 原因:出现这个错误是因为后端返回的数据类型和前端请求中dataType的要求类型不一致导致的. dataType简介:jquery ...
- springIOC源码接口分析(十一):ConfigurableApplicationContext
一 实现接口 关系图: ConfigurableApplicationContext接口实现了三个接口,ApplicationContext, Lifecycle, Closeable, Applic ...
- BIO、NIO
1. BIO和NIO 我们平常使用的IO是BIO(Blocking-IO),即阻塞IO.而NIO(No-blocking-IO)则是非阻塞IO,二者有什么区别呢? 预先知识准备 同步:发起调用后,调用 ...
- openstack启动云主机的流程
看一下openstack启动云主机的流程图 通过上图分析可以知道: 1. 用户使用Dashboard或者CLI 把认证信息通过REST请求发送给keystone进行认证.2. Keystone校验用户 ...