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

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# Note26: [MethodImpl(MethodImplOptions.Synchronized)]与lock机制

    在进行.NET开发时,经常会遇见如何保持线程同步的情况.在众多的线程同步的可选方式中,加锁无疑是最为常用的.如果仅仅是基于方法级别的线程同步,使用System.Runtime.CompilerServ ...

  2. hive条件过滤

    where 过滤 %代表任意个字符,_代表一个字符; \\ 转移字符.\\_代表下划线

  3. WPF程序中App.Config文件的读与写

    WPF程序中的App.Config文件是我们应用程序中经常使用的一种配置文件,System.Configuration.dll文件中提供了大量的读写的配置,所以它是一种高效的程序配置方式,那么今天我就 ...

  4. word2vec训练&IC分词(待)

    参考http://www.52nlp.cn/%E4%B8%AD%E8%8B%B1%E6%96%87%E7%BB%B4%E5%9F%BA%E7%99%BE%E7%A7%91%E8%AF%AD%E6%96 ...

  5. JAVA js WEB 疑难点总结

    1.获取combox的Value 和 Text    $('#id').combobox('getValue').$('#id').combobox('getText'): 2.ajax 直接访问ht ...

  6. hdu1878-并查集，欧拉回路

    纯裸题..写着方便理解... 题意:判断一个无向图是否存在欧拉回路... 解题思路:并查集判断一下是否联通,然后再判断一下点的度数是否为偶数就行了: #include<iostream> ...

  7. 实验吧 WEB 貌似有点难

    错误!你的IP不在允许列表之内! 提示:代码审计 这个提示可谓是非常良心了,一看源代码是一个识别ip地址的东西,如果IP为1.1.1.1那么就会得到KEY. 第一个if是判断是否有client-ip ...

  8. 高度可配置的 Linux 内存守护程序 Nohang！

    导读 Nohang 是一个 Linux 守护程序,也是一个高度可配置的 OOM(内存溢出)阻止工具,适用于 Linux 系统,能够有效地防止内存不足的情况. 部分功能特性 具有良好注释的配置文件,配置 ...

  9. git 出现错误时

    Your local changes to the following files would be overwritten by merge: 解决办法 如果希望保留生产服务器上所做的改动,仅仅并入 ...

  10. Vue——显示微信用户名称中enjoin表情

    后端做了处理转为了Unicode编码存入数据库,但是取出来没做处理,所以前端就做下简单的处理 转换代码: function decodeUnicode(str) { str = str.replace ...