参考文档的例子可以知道如何拖动矢量图层feature

GitHub: 八至

作者：狐狸家的鱼

本文链接：拖拽Feature图层

全部代码

<!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;

      }

    </style>

  </head>

  <body>

    <div id="map" class="map"></div>

   <script>

      var coord1 = [-5707673.76, -3499420.81];

      var coord2 = [-6707673.76, -3499420.81];

      var lineStyle = new ol.style.Style({

          stroke: new ol.style.Stroke({

              color: '#ffcc33',

              width: 3,

              lineDash:[10,10]

            })

        });

        var styleMarker = new ol.style.Style({

          image: new ol.style.Icon({

            scale: .7, anchor: [0.5, 1],

            src: 'marker.png'

          })

        });

        var marker1 = new ol.geom.Point(coord1);

        var featureMarker1 = new ol.Feature(marker1);

        var marker2 = new ol.geom.Point(coord2);

        var featureMarker2 = new ol.Feature(marker2);

        var line = new ol.geom.LineString([coord1, coord2]);

        var lineFeature = new ol.Feature(line);

        var vector = new ol.layer.Vector({

          source: new ol.source.Vector({

            features: [lineFeature, featureMarker1, featureMarker2]

          }),

          style: [lineStyle, styleMarker]

        });

        var map = new ol.Map({

          target: 'map',

          layers: [new ol.layer.Tile({ source: new ol.source.OSM() }), vector],

          view: new ol.View({ center: coord1, zoom: 5 })

        });

        var translate1 = new ol.interaction.Translate({

          features: new ol.Collection([featureMarker1])

        });

        var translate2 = new ol.interaction.Translate({

          features: new ol.Collection([featureMarker2])

        });

        map.addInteraction(translate1);

        map.addInteraction(translate2);

        var coordMarker1, coordMarker2;

        translate1.on('translatestart', function (evt) {

          coordMarker2 = marker2.getCoordinates();

        });

        translate1.on('translating', function (evt) {

          line.setCoordinates([coordMarker2, evt.coordinate]);

        });

        translate2.on('translatestart', function (evt) {

          coordMarker1 = marker1.getCoordinates();

        });

        translate2.on('translating', function (evt) {

          line.setCoordinates([coordMarker1, evt.coordinate]);

        });

        map.on('pointermove', function(e) {

          if (e.dragging) return;

          var hit = map.hasFeatureAtPixel(map.getEventPixel(e.originalEvent));

          map.getTargetElement().style.cursor = hit ? 'pointer' : '';

        });

   </script>

  </body>

</html>

JSFiddle

OpenLayers学习笔记（五）— 拖拽Feature图层的更多相关文章

  1. 学习笔记(五）： Feature Crosses

    目录 Feature Crosses Encoding Nonlinearity Kinds of feature crosses Glossay Crossing One-Hot Vectors P ...

  2. （转）Qt Model/View 学习笔记 (五)——View 类

    Qt Model/View 学习笔记 (五) View 类 概念 在model/view架构中,view从model中获得数据项然后显示给用户.数据显示的方式不必与model提供的表示方式相同,可以与 ...

  3. C#可扩展编程之MEF学习笔记(五)：MEF高级进阶

    好久没有写博客了,今天抽空继续写MEF系列的文章.有园友提出这种系列的文章要做个目录,看起来方便,所以就抽空做了一个,放到每篇文章的最后. 前面四篇讲了MEF的基础知识,学完了前四篇,MEF中比较常用 ...

  4. java之jvm学习笔记五(实践写自己的类装载器)

    java之jvm学习笔记五(实践写自己的类装载器) 课程源码:http://download.csdn.net/detail/yfqnihao/4866501 前面第三和第四节我们一直在强调一句话,类 ...

  5. Learning ROS for Robotics Programming Second Edition学习笔记(五) indigo computer vision

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

  6. Typescript 学习笔记五：类

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

  7. ES6学习笔记<五> Module的操作——import、export、as

    import export 这两个家伙对应的就是es6自己的 module功能. 我们之前写的Javascript一直都没有模块化的体系,无法将一个庞大的js工程拆分成一个个功能相对独立但相互依赖的小 ...

  8. muduo网络库学习笔记(五) 链接器Connector与监听器Acceptor

    目录 muduo网络库学习笔记(五) 链接器Connector与监听器Acceptor Connector 系统函数connect 处理非阻塞connect的步骤: Connetor时序图 Accep ...

  9. python3.4学习笔记(五) IDLE显示行号问题，插件安装和其他开发工具介绍

    python3.4学习笔记(五) IDLE显示行号问题,插件安装和其他开发工具介绍 IDLE默认不能显示行号,使用ALT+G 跳到对应行号,在右下角有显示光标所在行.列.pycharm免费社区版.Su ...

随机推荐

  1. C#Note13：如何在C#中调用python

    前言 IronPython 是一种在 .NET 及 Mono上的 Python 实现,由微软的 Jim Hugunin(同时也是 Jython 创造者) 所发起,是一个开源的项目,基于微软的 DLR ...

  2. liunx 运维知识三部分

    一. 用户级用户组相关 二. 文件属性和链接知识及磁盘已满故障案例 三. 通配符 四. 特殊符号 五. 基础正则 六. 扩展正则 七. sed实践 八. awk实践

  3. linux下使用sha256sum生成sha256校验文件，并校验其一致性

    [root@localhost ]# " >test.zip 生成sha256文件校验文件 [root@localhost ]# sha256sum test.zip >test ...

  4. Java 8 函数式接口

    函数式接口(Functional Interface)就是一个有且仅有一个抽象方法,但是可以有多个非抽象方法的接口. 函数式接口可以被隐式转换为 lambda 表达式. Lambda 表达式和方法引用 ...

  5. 阿里云ECS服务器，CentOS 7.4配置jdk+tomcat+mysql

    参考博客: https://mp.weixin.qq.com/s?__biz=MzIxMzk3Mjg5MQ==&mid=2247484020&idx=1&sn=6e0aa07f ...

  6. mysql 数据库的主从同步

    1.复制准备 操作系统 centOS 主库(mysql master):  ip为123.56.94.1   port为3306  mysql 版本 5.7.16 从库(mysql slave):   ...

  7. fiddler 笔记-重定向

    重定向功能:主要是进行会话的拦截,然后替换原始资源的功能 选择请求-到autoresponser面板-勾选 enable rules :add rules 设置如下: 2 在浏览器中请示url-页面跳 ...

  8. lr分布式测试--笔记

    LR 架构: controller做测试控制 scenario做测试场景的控制 vuser模拟用户和 load generator做负载产生 通过MI listener 跨防火墙监听 来实现分布式测试 ...

  9. js 插件使用总结

    1:树形菜单插件: z-tree 和dtree 2: 弹窗插件layer 3: 前端ui框架ace ,  h-ui , layui 4:产品设计图绘制软件Axure和Mockplus(推荐)

  10. string.Format出现异常：输入字符串的格式不正确 Exception during StringFormat

    错误信息:Exception during StringFormat:输入字符串的格式不正确 “System.FormatException”类型的未经处理的异常在 mscorlib.dll 中发生 ...