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 学习笔记 ...
随机推荐
- Day 4-7 -configparser模块
此模块用于生成和修改常见配置文档,当前模块的名称在 python 3.x 版本中变更为 configparser. 常用方法: import configparser conf = configpar ...
- CLOUD流程设置
流程-反写规则 允许超额
- flutter中使用svg
dependencies: flutter_svg: ^0.12.1 flutter packages get import 'package:flutter_svg/flutter_svg.dart ...
- Flutter 常用工具类库common_utils
地址:https://pub.flutter-io.cn/packages/common_utils#-readme-tab- Dart常用工具类库 common_utils 1.TimelineUt ...
- 数据库及ORM
数据库概念 关系数据库编程 ORM编程
- CBV源码分析+APIVIew源码分析
{drf,resful,apiview,序列化组件,视图组件,认证组件,权限组件,频率组件,解析器,分页器,响应器,URL控制器,版本控制} 一.CBV源码分析准备工作: 新建一个Django项目 写 ...
- WPF 如何创建自己的WPF自定义控件库
在我们平时的项目中,我们经常需要一套自己的自定义控件库,这个特别是在Prism这种框架下面进行开发的时候,每个人都使用一套统一的控件,这样才不会每个人由于界面不统一而造成的整个软件系统千差万别,所以我 ...
- vue循環語句
迭代數組: v-for="site in sites”,sites表示源數組名,site表示數組元素: 迭代對象: v-for=“value in Object”, v-for=" ...
- 一、使用Navicat连接阿里云服务器宝塔面板里创建的数据库
一.数据库配置连接 (通过新增用户的方式)
- jpa 比较复杂的查询和用in关键字
in关键字使用代码