//拖拽要素
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. docker扫盲,面试连这都不会就等着挂吧!

    现在很多公司项目部署都是采用K8S docker容器方式,出门面试被问的概率极大,如果被面试官问docker相关知识点直接懵逼,那么基本就是被pass了,除非其他方面技术过硬.所以这种相对前沿的技术, ...

  2. mac系统安装、启动与关闭redis

    一.下载 打开官网:https://redis.io/ Download---Stable---Download5.0.4,下载最新稳定版,看具体情况而定我这里是5.0.4版本. 二.安装 下载完成后 ...

  3. springboot-mybatis配置问题

    org.apache.ibatis.binding.BindingException: Invalid bound statement (not found)问题

  4. 记一次golang的内存泄露

    程序功能 此程序的主要功能是将文件中数据导入到clickhouse数据库中. [问题描述] 服务器内存每隔一段时间会耗尽 [问题分析] 由于使用的是go语言开发的,所以采用了业界流行的工具pprof. ...

  5. FFMPEG学习----打印视频信息

    FFMPEG学习资料少之又少,在此推荐雷神的博客: http://blog.csdn.net/leixiaohua1020 在这里,我们把打印视频里的相关信息作为学习FFMPEG的 Hello Wor ...

  6. Angular 从入坑到挖坑 - Angular 使用入门

    一.Overview angular 入坑记录的笔记第一篇,完成开发环境的搭建,以及如何通过 angular cli 来创建第一个 angular 应用.入坑一个多星期,通过学习官方文档以及手摸手的按 ...

  7. FPGA VGA+PLL+IP核笔记

    1.实现了预定功能!整个工程,没有使用例程的25MHZ,全部统一使用50MHZ.2.分辨率使用了800*600@72HZ.3.实现了只显示白色部分,黑色部分RGB == 0,要显示背景色.VGA图形基 ...

  8. windows 使用ssh连接docker容器

    在Windows上搭建docker服务器需要在Windows模拟一个Linux平台,然后在Linux平台上搭建的docker服务器,所以在使用ssh工具连接docker容器的时候,使用的ip地址不是d ...

  9. CCF_201509-1_数列分段

    水. #include<iostream> #include<cstdio> using namespace std; int main() { ]; cin >> ...

  10. EOJ Monthly 2019.2 E 中位数 (二分+中位数+dag上dp)

    题意: 一张由 n 个点,m 条边构成的有向无环图.每个点有点权 Ai.QQ 小方想知道所有起点为 1 ,终点为 n 的路径中最大的中位数是多少. 一条路径的中位数指的是:一条路径有 n 个点,将这  ...