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

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. kubernetes常用命令

    #.查询信息 kubectl get [需要查询的服务]   node 节点componentstatuses 简写 cs 组件状态namespaces 简写 ns 名命空间pod pod信息 添加  ...

  2. 莫烦keras学习自修第四天【分类问题】

    1.代码实战 #!/usr/bin/env python #! _*_ coding:UTF-8 _*_ # 导入numpy import numpy as np np.random.seed(133 ...

  3. Yii2后台管理系统常规单据模块最佳实践

    后台管理系统的常规单据通常包括数据,页面,功能:其中数据,页面,功能又可以细分如下: 分类  二级分类  主要内容  注意事项  例如 数据 数据库迁移脚本  用于数据表生成及转态回滚 1.是否需要增 ...

  4. git 提交的步骤

    1. git init //初始化仓库   2. git add .(文件name) //添加文件到本地仓库   3. git commit -m "first commit" / ...

  5. 使用Spring的@Scheduled实现定时任务参数详解

    Spring配置文件xmlns加入 xmlns:task="http://www.springframework.org/schema/task" xsi:schemaLocati ...

  6. 学习 Spring (二) Spring 注入

    Spring入门篇 学习笔记 常用的两种注入方式 设值注入 构造注入 示例准备工作 添加 InjectionDAO: public interface InjectionDAO { void save ...

  7. 利用random模块生成验证码

    random模块 该模块用于数学或者数据相关的领域,使用方法非常简单下面介绍常用的放法 1.随机小数 random.random() 2.随机整数random.randint(1,5) # 大于等于1 ...

  8. x = x &(x-1)

    判断一个数(x)的二进制含有几个1 int func(x) { ; while(x) { countx ++; x = x&(x-); } return countx; } 假定x = 999 ...

  9. python 机械学习之sklearn的数据正规化

    from sklearn import preprocessing    #导入sklearn的处理函数用于处理一些大值数据 x_train, x_test, y_train, y_test = tr ...

  10. #186 path（容斥原理+状压dp+NTT）

    首先只有一份图时显然可以状压dp,即f[S][i]表示S子集的哈密顿路以i为终点的方案数,枚举下个点转移. 考虑容斥,我们枚举至少有多少条原图中存在的边(即不合法边)被选进了哈密顿路,统计出这个情况下 ...