OpenLayers学习笔记(六)— 拖拽叠加层overlayer
是在官网例子基础上增加的拖拽功能
GitHub:八至
作者:狐狸家的鱼
本文链接:拖拽叠加层overlayer
全部代码
<!DOCTYPE html>
<html>
<head>
<title>Icon Symbolizer</title>
<link rel="stylesheet" href="https://openlayers.org/en/v3.20.1/css/ol.css" type="text/css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://openlayers.org/en/v3.20.1/build/ol.js"></script>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
#map {
position: relative;
}
#popup {
cursor: pointer;
}
.popupStyle{
position:relative;
width:100px;
height:100px;
text-align:center;
line-height:100px;
color:white;
background-color:rgba(0,0,0,0.4);
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<div id="popup"><div class="popupStyle">Null Island</div></div> <script>
var element = document.getElementById('popup');
var iconFeature = new ol.Feature({
geometry: new ol.geom.Point([0, 0]),
name: 'Null Island' });
var lineStyle = new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#ffcc33',
width: 3,
lineDash:[10,10]
})
});
var line = new ol.geom.LineString([0,0],[0,0]);
var lineFeature = new ol.Feature(line);
var iconStyle = new ol.style.Style({
image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
src: 'https://openlayers.org/en/v3.20.1/examples/data/icon.png'
}))
}); iconFeature.setStyle(iconStyle); var vectorSource = new ol.source.Vector({
features: [iconFeature,lineFeature]
}); var vectorLayer = new ol.layer.Vector({
source: vectorSource,
style:[lineStyle],
updateWhileInteracting: true,//自动更新位置
}); var rasterLayer = new ol.layer.Tile({
source: new ol.source.TileJSON({
url: 'https://api.tiles.mapbox.com/v3/mapbox.geography-class.json?secure',
crossOrigin: ''
})
}); var map = new ol.Map({
layers: [rasterLayer, vectorLayer],
target: document.getElementById('map'),
view: new ol.View({
center: [0, 0],
zoom: 3
})
}); var popup = new ol.Overlay({
element: element,
positioning: 'bottom-center',
stopEvent: false,
dragging: false,
offset: [0, -50]
});
popup.setPosition([0,0]);
map.addOverlay(popup); // display popup on click
var dragPan;
map.getInteractions().forEach(function(interaction){
if (interaction instanceof ol.interaction.DragPan) {
dragPan = interaction;
}
}); element.addEventListener('mousedown', function(evt) {
dragPan.setActive(false);
popup.set('dragging', true);
console.info('start dragging');
});
// var translateLine = new ol.interaction.Translate({
// //features:new ol.Collection([lineFeature])
// layers:new ol.Collection([popup])
// });
// map.addInteraction(translateLine); // var coord; // translateLine.on('translatestart',function (evt){
// coord = popup.getCoordinates();
// });
// translateLine.on('translating', function (evt) {
// line.setCoordinates([coord, evt.coordinate]);
// });
map.on('pointermove', function(evt) {
var startPoint=iconFeature.getGeometry().getCoordinates();
if (popup.get('dragging')) {
var dd2=map.getPixelFromCoordinate(evt.coordinate);
var newX=dd2[0]-0;//减去偏移量
var newY=dd2[1]-(-50);
var newPoint=map.getCoordinateFromPixel([newX,newY]);
popup.setPosition(newPoint);
lineFeature.getGeometry().setCoordinates([startPoint,evt.coordinate]);
// } }
});
map.on('pointerup', function(evt) {
if (popup.get('dragging') === true) {
console.info('stop dragging');
dragPan.setActive(true);
popup.set('dragging', false);
}
});
</script>
</body>
</html>
OpenLayers学习笔记(六)— 拖拽叠加层overlayer的更多相关文章
- # go微服务框架kratos学习笔记六(kratos 服务发现 discovery)
目录 go微服务框架kratos学习笔记六(kratos 服务发现 discovery) http api register 服务注册 fetch 获取实例 fetchs 批量获取实例 polls 批 ...
- java之jvm学习笔记六-十二(实践写自己的安全管理器)(jar包的代码认证和签名) (实践对jar包的代码签名) (策略文件)(策略和保护域) (访问控制器) (访问控制器的栈校验机制) (jvm基本结构)
java之jvm学习笔记六(实践写自己的安全管理器) 安全管理器SecurityManager里设计的内容实在是非常的庞大,它的核心方法就是checkPerssiom这个方法里又调用 AccessCo ...
- Learning ROS for Robotics Programming Second Edition学习笔记(六) indigo xtion pro live
中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS for Robotics Pr ...
- Typescript 学习笔记六:接口
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
- python3.4学习笔记(六) 常用快捷键使用技巧,持续更新
python3.4学习笔记(六) 常用快捷键使用技巧,持续更新 安装IDLE后鼠标右键点击*.py 文件,可以看到Edit with IDLE 选择这个可以直接打开编辑器.IDLE默认不能显示行号,使 ...
- Go语言学习笔记六: 循环语句
Go语言学习笔记六: 循环语句 今天学了一个格式化代码的命令:gofmt -w chapter6.go for循环 for循环有3种形式: for init; condition; increment ...
- 【opencv学习笔记六】图像的ROI区域选择与复制
图像的数据量还是比较大的,对整张图片进行处理会影响我们的处理效率,因此常常只对图像中我们需要的部分进行处理,也就是感兴趣区域ROI.今天我们来看一下如何设置图像的感兴趣区域ROI.以及对ROI区域图像 ...
- Linux学习笔记(六) 进程管理
1.进程基础 当输入一个命令时,shell 会同时启动一个进程,这种任务与进程分离的方式是 Linux 系统上重要的概念 每个执行的任务都称为进程,在每个进程启动时,系统都会给它指定一个唯一的 ID, ...
- Spring Boot 学习笔记(六) 整合 RESTful 参数传递
Spring Boot 学习笔记 源码地址 Spring Boot 学习笔记(一) hello world Spring Boot 学习笔记(二) 整合 log4j2 Spring Boot 学习笔记 ...
随机推荐
- [服务器]Gartner:2018年第四季度全球服务器收入增长17.8% 出货量增长8.5%
Gartner:2018年第四季度全球服务器收入增长17.8% 出货量增长8.5% Gartner 是不是也是花钱买榜的主啊.. 简单看了一下 浪潮2018Q4的营收18亿刀 (季度营收110亿人民币 ...
- mac下php开发环境的搭建
1.phpstorm 在官网:https://www.jetbrains.com/phpstorm/,下载最新版:phpstorm-2016.2.1 在http://15.idea.lanyus.co ...
- checkbox操作判断 Jquery选择器
function checkAll(d){ console.log(d); console.log(d.checked); //注意 这里是d不是$(d) 不是jQuery对象 if(d.checke ...
- debug2
调试常用功能介绍 日常java开发中实际写代码的时间并不会很多,花在整理思路,代码重构,调试bug会占用很大部分时间. 熟练掌握调试工具,了解调试相关技巧,是java开发中减少调试时间,提高效率不可或 ...
- python爬虫之git的使用(coding.net的使用)
1.注册coding.net账号,然后登陆. 2.创建项目 套路和github都一样. 1.1.我们在远程仓库上创建了一个仓库,这样的话,我们需要在本地随便建立一个文件普通文件夹,进去以后,执行git ...
- HTTP协议 - 使用php模拟get/post请求
首先 有个疑问, 是不是只有浏览器才能发送http 请求? 答案肯定是错的,第一篇就说了,http是由请求行,请求头,请求主体三个部分组成,那么我们可不可以用代码来模拟一下get和post请求呢: 首 ...
- Using MongoDB with Web API and ASP.NET Core
MongoDB is a NoSQL document-oriented database that allows you to define JSON based documents which a ...
- Civil 3D 二次开发 新建CLR项目出现错误C2143
新建CLR项目出现错误C2143 按照Objectarx Training创建.net混合项目,编译时出现一下错误: 原因不明: 解决方法: 在Stdafx.h文件中添加: #define WIN32 ...
- js查漏补缺【未完】
1.初始 1.小补. 1.在文本字符串中使用反斜杠对代码行进行换行. document.write("Hello \ World!"); 2.document.write docu ...
- mysql 下载地址
新浪的镜像站 http://mirrors.sohu.com/mysql yum安装: 首先要到MySQL yum库的下载页面http://dev.mysql.com/downloads/repo/y ...