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

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. [转帖]NotePad++编辑Linux中的文件

    NotePad++编辑Linux中的文件 https://blog.csdn.net/chengqiuming/article/details/78882692 原作者 未经允许不允许转帖 加密自己参 ...

  2. POI解析Excel代码

    // 批量区域数据导入 @Action(value = "area_batchImport") public String batchImport() throws IOExcep ...

  3. 谷歌浏览器报错 Active resource loading counts reached to a per-frame

    Active resource loading counts reached to a per-frame limit while the tab is in background. Network ...

  4. Object.defineProperties()与Proxy对象代理

    Object.defineProperties() 了不起啊..vue.js通过它实现双向绑定的 Object.defineProperties(obj,props) 方法直接在一个对象上定义新的属性 ...

  5. LeetCode & Online Programming Learning Platform

    leetcode LeetCode is the best platform to help you enhance your skills, expand your knowledge and pr ...

  6. 老男孩python学习自修第二十四天【多进程】

    1. 体验多进程的运行速度 #!/usr/bin/env python # _*_ coding:UTF-8 _*_ from multiprocessing import Pool import t ...

  7. sql 用户相关命令

    查看所有用户 select distinct concat(user, '@', host,';') as userList from mysql.user; select  #查找 distinct ...

  8. 存储过程中的 SET XACT_ABORT ON 和事务

    在存储过程中写SET XACT_ABORT ON 有什么用? SET XACT_ABORT ON是设置事务回滚的!当为ON时,如果你存储中的某个地方出了问题,整个事务中的语句都会回滚为OFF时,只回滚 ...

  9. SQL Server 数据库try catch 存储过程

    SQL Server 在生产环境中这样写存储过程的坑都避免了吗? 原文链接: http://www.cnblogs.com/chenmh/p/7856777.html 概述 最近因为业务的需求写了一段 ...

  10. Wpf ViewModel中 ObservableCollection不支持从调度程序线程以外的线程对其 SourceCollection 进行的更改

    Wpf中ViewModel类里面经常会需要用到ObservableCollection来管理列表数据,在做异步通信的时候也会碰到“不支持从调度程序线程以外的线程对其 SourceCollection ...