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]代码优化 前面的话 拖拽可以让元素移动,也可以改变元素大小.本文将详细介绍拖拽改变元素大小的效果实现 原理简介 拖拽让元素移动,是改变定位 ...
随机推荐
- xsd 和 wsdl
xsd : 可用方便 不同的语言之间的 用命令行来 转换对应语言的. wsdl: 可用方便不同语言的类描述 用命令行 来相互转换. 类似 thift me ?
- 用路由系统生成输出URL 在视图中生成输出URL 高级路由特性 精通ASP-NET-MVC-5-弗瑞曼
Using the Routing System to Generate an Outgoing URL 结果呢:<a href="/Home/CustomVariable" ...
- Ubuntu16手动安装OpenStack——glance篇--转
全文转自https://www.voidking.com/dev-ubuntu16-manual-openstack-glance/ 目标 紧接着<Ubuntu16手动安装OpenStack—— ...
- java进阶视频分享
更多资源和教程请关注公众号:非科班的科班. 如果觉得我写的还可以请给个赞,谢谢大家,你的鼓励是我创作的动力 课程目录介绍 01.开班仪式02.并发编程专题之多线程基础03.并发编程专题之Java内存模 ...
- 解决Android studio遇见Could not find common.jar (android.arch.core:common:1.0.0).错误
不知道怎么回事就发生的错误,翻墙找到的解决方法,如下: Error:Could not find common.jar (android.arch.core:common:1.0.0).Searche ...
- ReactNative---android系统中Image组件无默认图片问题
react native的Image组件通过网络地址加载图片的时候,若加载失败iOS有默认图片等属性,但安卓没有:但可以通过其他方式来实现: {Platform.OS == 'android'?< ...
- Leetcode | 刷题日记(1)
本文记录个人刷题记录 推荐两个刷题网站: 地址:https://leetcode.com/ 另外一个地址:http://www.lintcode.com/ 1.Write a SQL query to ...
- 最新2.7版本丨DataPipeline数据融合产品最新版本发布
此次发布的2.7版本在进一步优化产品底层数据处理逻辑的同时更加注重提升用户在数据融合任务的日常管理.运行监控及资源分配等管理方面的功能增强与优化,力求帮助大家更为直观.便捷.稳定地管理数据融合任务,提 ...
- 在Navicat新建用户
1.Ctrl+Q,进入查询,创建表空间. 输入create tablespace test datafile 'D:\Oracle\test.ora' size 1000m; 这里的test为表空间名 ...
- Affinity Propagation Demo1学习
利用AP算法进行聚类: 首先导入需要的包: from sklearn.cluster import AffinityPropagation from sklearn import metrics fr ...