//拖拽要素
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要素拖拽的更多相关文章

  1. OpenLayers学习笔记(六)— 拖拽叠加层overlayer

    是在官网例子基础上增加的拖拽功能 GitHub:八至 作者:狐狸家的鱼 本文链接:拖拽叠加层overlayer 全部代码 <!DOCTYPE html> <html> < ...

  2. OpenLayers学习笔记(五)— 拖拽Feature图层

    参考文档的例子可以知道如何拖动矢量图层feature GitHub: 八至 作者:狐狸家的鱼 本文链接:拖拽Feature图层 全部代码 <!DOCTYPE html> <html& ...

  3. openlayers中实现点的拖拽(modify),在layer中增加修改删除point。

    最近忙着整地图,都忘记了总结来沉淀自己,自我检讨一下. 总结一下最近使用openlayer时学习的内容,先说下我的业务逻辑吧,在室内地图中 1,点击新增在地图上新增一个可以拖拽的点,拖拽完成后确定位置 ...

  4. HTML5图片拖拽预览原理及实现

    一.前言 这两天恰好有一位同事问我怎样做一个图片预览功能.作为现代人的我们首先想到的当然是HTML5啦,其实HTML5做图片预览已经是一个老生常谈的问题了.我在这里就简单说说其中相关的一些东西,当然会 ...

  5. 使用原生JavaScript的Canvas实现拖拽式图形绘制,支持画笔、线条、箭头、三角形、矩形、平行四边形、梯形以及多边形和圆形,不依赖任何库和插件,有演示demo

    前言 需要用到图形绘制,没有找到完整的图形绘制实现,所以自己实现了一个 - - 一.实现的功能 1.基于oop思想构建,支持坐标点.线条(由坐标点组成,包含方向).多边形(由多个坐标点组成).圆形(包 ...

  6. 原生js实现Canvas实现拖拽式绘图,支持画笔、线条、箭头、三角形和圆形等等图形绘制功能,有实例Demo

    前言 需要用到图形绘制,没有找到完整的图形绘制实现,所以自己实现了一个 - - 演示地址:查看演示DEMO 新版本支持IE5+(你没看错,就是某软的IE浏览器)以上任意浏览器的Canvas绘图:htt ...

  7. JavaScript动画-拖拽改变元素大小

    ▓▓▓▓▓▓ 大致介绍 拖拽改变元素大小是在模拟拖拽上增加了一些功能 效果:拖拽改变元素大小 ▓▓▓▓▓▓ 拖拽改变元素大小原理 首先这个方块得知道我们想要改变这个它的大小,所以我给它设定一个范围,当 ...

  8. javascript动画系列第一篇——模拟拖拽

    × 目录 [1]原理介绍 [2]代码实现 [3]代码优化[4]拖拽冲突[5]IE兼容 前面的话 从本文开始,介绍javascript动画系列.javascript本身是具有原生拖放功能的,但是由于兼容 ...

  9. javascript动画系列第四篇——拖拽改变元素大小

    × 目录 [1]原理简介 [2]范围圈定 [3]大小改变[4]代码优化 前面的话 拖拽可以让元素移动,也可以改变元素大小.本文将详细介绍拖拽改变元素大小的效果实现 原理简介 拖拽让元素移动,是改变定位 ...

随机推荐

  1. 【java基础】String、StringBuilder和StringBuffer的区别

    关于这三个类在字符串处理中的位置不言而喻,那么他们到底有什么优缺点,到底什么时候该用谁呢?下面我们从以下几点说明一下 1.三者在执行速度方面的比较:StringBuilder >  String ...

  2. python文件与输入输出

    注:本文档是学习<Python核心编程(第二版)>时的整理. 1.文件对象 文件对象不仅可以用来访问普通的磁盘文件,也可以访问任何其他类型抽象层面上的"文件".一旦设置 ...

  3. 批量解决win10图标上有两个蓝色箭头的方法

    双击“此电脑”,点击“C盘”,可以看到一个”用户“文件夹,双击”用户“, 选择现在正在使用的用户名,双击用户名,找到该文件夹下的”桌面“或”Desktop“点击“属性”, 在“常规”选项卡中的属于项中 ...

  4. 团队第一次作业(By七个小矮人)

    一.团队简介 1.团队名称:七个小矮人 2.团队成员列表 201731024137 马驰(队长) 201731021227 于丁 201731024114 杨汶桐 201731024125 李朋珂 2 ...

  5. JavaWeb高级编程(上)

    好久没更新了,发一篇以前记录学习的笔记. 面向读者:已经具有丰富的Java语言和Java SE平台知识的软件开发者和软件工程师. 预掌握知识: Internet.TCP.HTTP协议 HTML(5) ...

  6. djgango装饰器

    from django.http import HttpResponse from django.views import View class MyView(View): def get(self, ...

  7. Docker基础内容之端口映射

    随机映射 docker run -d -P training/webapp python app.py # -P会随机映射一个 49000~49900 的端口到内部容器开放的网络端口 映射所有接口地址 ...

  8. LeetCode 381. Insert Delete GetRandom O(1) - Duplicates allowed O(1) 时间插入、删除和获取随机元素 - 允许重复(C++/Java)

    题目: Design a data structure that supports all following operations in averageO(1) time. Note: Duplic ...

  9. kubernetes容器端口设置的坑

    1.使用dockerhub上面的镜像的时候,先到dockerhub上看镜像的相关信息. 2.不能随便修改容器应用的镜像,会出问题.

  10. ubuntu 14.04 安装wordpress

    转者注:若没有Apache + PHP + MySQL环境,请参考我的这篇博客 (1)首先下载wordpress, sudo wget http://wordpress.org/latest.tar. ...