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

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. 关于IWMS中遇到的问题及解决方法

    1.生成的文章上传到外网上,但是没一会儿又变成原来的样子? 解决方案:把上传页面对应的template中的.aspx页面也要上传到外网去.

  2. JQ获取URL中是否含有某个字符的话，对页面进行某种操作

    一.//JQ获取URL中是否含有某个字符的话,对页面进行某种操作 例:如果URL中含有xia的字符,就在页面引入一个cssvar str=window.location.href; //获取地址栏UR ...

  3. npm安裝、卸載、刪除、撤銷發佈包、更新版本信息

    利用npm安裝包: 全局安裝:npm install -g 模塊安裝 局部安裝(可以使用repuire(‘模塊名’)引用):npm install 模塊名稱 如果權限不夠,就是用管理員方式安裝. 本地 ...

  4. 循环神经网络RNN及LSTM

    一.循环神经网络RNN RNN综述 https://juejin.im/entry/5b97e36cf265da0aa81be239 RNN中为什么要采用tanh而不是ReLu作为激活函数?  htt ...

  5. How to enable mp3 on Ubuntu

    apt install gstreamer1.0 libavcodec57

  6. 【SSL】OV、DV和EV证书的区别

    关于https证书 https协议需要到ca申请证书,一般免费证书很少,需要交费. http是超文本传输协议,信息是明文传输,https 则是具有安全性的ssl加密传输协议. http和https使用 ...

  7. 11/5/2018模拟 Problem C

    题面 题解 我有特殊的哈希技巧 以到下一个相同字符的距离为值哈希, 如果不存在或在串外, 就是 \(|T| + 1\). 加入一个新字符 \(S_i\) 时, 同时修改它上一次出现时的值, 由 \(| ...

  8. Civil 3D 二次开发 翻转曲面高程分析颜色

    不解释,直接上代码及截图. [CommandMethod("RvsSEA")] public void ReverseSurfaceElevationAnalysis() { Ci ...

  9. .net core 2.0 webuploader上传图片

    引入文件 <link href="~/Scripts/webuploader-0.1.5/webuploader.css" rel="stylesheet" ...

  10. 【妙味课堂】JS热身课后习题

    <!--*** @Author: wyy* @Date: 2018-04-15 17:36:35* @Email: 2752154874@qq.com* @Last Modified by: w ...