参考文档的例子可以知道如何拖动矢量图层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. Appscanner实验还原code3

    # Author: Baozi #-*- codeing:utf-8 -*- import _pickle as pickle from sklearn import ensemble import ...

  2. socket基础编程-1

    server端和client端 1.server端: import socket server=socket.socket() server.bind(('localhost',8080)) serv ...

  3. Redis五大数据类型

    首先说明下,Redis是:单线程+多路IO复用技术!!! string set  >  key  +  zset          list hash 常用的几个命令: >keys * 查 ...

  4. 【转】使用 lsof 查找打开的文件

      在 UNIX® 环境中,文件无处不在,这便产生了一句格言:“任何事物都是文件”.通过文件不仅仅可以访问常规数据,通常还可以访问网络连接和硬件.在有些情况下,当您使用 ls 请求目录清单时,将出现相 ...

  5. Kettle转换工具Windows版安装

    一.简介 Kettle是一款国外开源的ETL工具,纯java编写,可以在Window.Linux.Unix上运行,绿色无需安装,数据抽取高效稳定. Kettle 中文名称叫水壶,该项目的主程序员MAT ...

  6. shell中的>，2>&1，&>file 解析记录

    0  表示标准输入1  表示标准输出2  表示标准错误输出>  默认为标准输出重定向,与 1> 相同2>&1  意思是把 标准错误输出 重定向到 标准输出.&> ...

  7. vue element-ui 绑定@keyup事件无效

    解决办法: <el-input @keyup.native="ajax"></el-input> 加上.native覆盖原有封装的keyup事件即可

  8. 好用的UI框架收集

    1. we-ui 专门为微信内网页和微信小程序设计的UI框架

  9. Vue.js文档

    参考网址:https://vuefe.cn/ 第一  安装 1.下载到本地后使用<script>标签直接引入 2.使用CDN引入 例如:使用CDN引入 <script src=&qu ...

  10. vue ajax

    局部get: this.$http.get(url,{param:jsonData}).then(successCallback,failCallBack) 局部post: this.$http.po ...