是在官网例子基础上增加的拖拽功能

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的更多相关文章

  1. # go微服务框架kratos学习笔记六(kratos 服务发现 discovery)

    目录 go微服务框架kratos学习笔记六(kratos 服务发现 discovery) http api register 服务注册 fetch 获取实例 fetchs 批量获取实例 polls 批 ...

  2. java之jvm学习笔记六-十二(实践写自己的安全管理器)(jar包的代码认证和签名) (实践对jar包的代码签名) (策略文件)(策略和保护域) (访问控制器) (访问控制器的栈校验机制) (jvm基本结构)

    java之jvm学习笔记六(实践写自己的安全管理器) 安全管理器SecurityManager里设计的内容实在是非常的庞大,它的核心方法就是checkPerssiom这个方法里又调用 AccessCo ...

  3. Learning ROS for Robotics Programming Second Edition学习笔记(六) indigo xtion pro live

    中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS for Robotics Pr ...

  4. Typescript 学习笔记六：接口

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  5. python3.4学习笔记(六) 常用快捷键使用技巧，持续更新

    python3.4学习笔记(六) 常用快捷键使用技巧,持续更新 安装IDLE后鼠标右键点击*.py 文件,可以看到Edit with IDLE 选择这个可以直接打开编辑器.IDLE默认不能显示行号,使 ...

  6. Go语言学习笔记六： 循环语句

    Go语言学习笔记六: 循环语句 今天学了一个格式化代码的命令:gofmt -w chapter6.go for循环 for循环有3种形式: for init; condition; increment ...

  7. 【opencv学习笔记六】图像的ROI区域选择与复制

    图像的数据量还是比较大的,对整张图片进行处理会影响我们的处理效率,因此常常只对图像中我们需要的部分进行处理,也就是感兴趣区域ROI.今天我们来看一下如何设置图像的感兴趣区域ROI.以及对ROI区域图像 ...

  8. Linux学习笔记(六) 进程管理

    1.进程基础 当输入一个命令时,shell 会同时启动一个进程,这种任务与进程分离的方式是 Linux 系统上重要的概念 每个执行的任务都称为进程,在每个进程启动时,系统都会给它指定一个唯一的 ID, ...

  9. Spring Boot 学习笔记(六) 整合 RESTful 参数传递

    Spring Boot 学习笔记 源码地址 Spring Boot 学习笔记(一) hello world Spring Boot 学习笔记(二) 整合 log4j2 Spring Boot 学习笔记 ...

随机推荐

  1. C# Note32: 查漏补缺

    (1)Using的三种使用方式 (2)C#详解值类型和引用类型区别 (3)c#中字段(field)和属性(property)的区别 (4)C#中的 int? int?:表示可空类型,就是一种特殊的值类 ...

  2. 高并发之API接口限流

    在开发高并发系统时有三把利器用来保护系统:缓存.降级和限流 缓存 缓存的目的是提升系统访问速度和增大系统处理容量 降级 降级是当服务出现问题或者影响到核心流程时,需要暂时屏蔽掉,待高峰或者问题解决后再 ...

  3. flutter-StatelessWidget与StatefulWidget

    StatelessWidget和StatefulWidget是flutter的基础组件,日常开发中自定义Widget都是选择继承这两者之一. 两者的区别在于状态的改变,StatelessWidget面 ...

  4. GIT的前世今生

    在重点介绍GIT的一些操作之前,我们首先来说一说GIT的前世今生,了解整个版本控制的变迁能够让我们知道该如何去选择这些工具,另外通过这些技术的变迁也能够让我们对现在的技术有着更加深入的理解,在正式介绍 ...

  5. comparable和comparator

    Comparable Comparable可以认为是一个内部比较器,实现了Comparable接口的类有一个特点,就是这些类是可以和自己比较的,在compareTo方法中指定具体的比较方法. comp ...

  6. 莫烦theano学习自修第七天【回归结果可视化】

    1.代码实现 from __future__ import print_function import theano import theano.tensor as T import numpy as ...

  7. 莫烦theano学习自修第四天【激励函数】

    1. 定义 激励函数通常用于隐藏层,是将特征值进行过滤或者激活的算法 2.常见的激励函数 1. sigmoid (1)sigmoid() (2)ultra_fast_sigmoid() (3)hard ...

  8. Armstrong公理

    从已知的一些函数依赖,可以推导出另外一些函数依赖,这就需要一系列推理规则,这些规则常被称作“Armstrong 公理”. 设U 是关系模式R 的属性集,F 是R 上成立的只涉及U 中属性的函数依赖集. ...

  9. redis两种持久化

    Redis 提供了不同级别的持久化方式: RDB持久化方式能够在指定的时间间隔能对你的数据进行快照存储. AOF持久化方式记录每次对服务器写的操作,当服务器重启的时候会重新执行这些命令来恢复原始的数据 ...

  10. caffemodel模型

    resnet18 https://github.com/HolmesShuan/ResNet-18-Caffemodel-on-ImageNet