参考文档的例子可以知道如何拖动矢量图层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. AngularJS双向数据绑定

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. day 7-4 互斥锁与队列

    一. 基本定义 互斥锁(英语:英语:Mutual exclusion,缩写 Mutex)是一种用于多线程编程中,防止两条线程同时对同一公共资源(比如全局变量)进行读写的机制.该目的通过将代码切片成一个 ...

  3. Day 5-7 exec 和元类的创建.

    exec方法 元类 exec(str_command,globals,locals)参数1:字符串形式的命令参数2:全局作用域(字典形式). 如果不指定,默认globals参数3:局部作用(字典形式) ...

  4. sqlserver常用语法

    --临时表 IF OBJECT_ID('tempdb..#Entry') is not null BEGIN   DROP TABLE #Entry   END ------------------- ...

  5. WIndows下使用Grafana+InfluxDB打造监控系统

     前言 对于一个运维DBA来说,了解数据库的TPS.QPS很有必要(QPS:每秒查询数,即对数据库每秒的DML的操作数:TPS:每秒事物处理,即对数据库每秒DDL操作数),通过了解他们,可以掌握一个实 ...

  6. RandomStringUtils

    System.out.println(RandomStringUtils.random(5));//随机多少个随机字符中文环境乱码 System.out.println(RandomStringUti ...

  7. k8s HPA自动收缩

    HPA自动收缩 autoscale 自动调整一个 Deployment, ReplicaSet, 或者 ReplicationController 的副本数量 #创建一个replicaset测试 [r ...

  8. CMD & Git Shell & Bash Shell

    CMD & Git Shell & Bash Shell https://mvdan.cc/sh/cmd/shfmt PC

  9. 莫烦keras学习自修第三天【回归问题】

    1. 代码实战 #!/usr/bin/env python #!_*_ coding:UTF-8 _*_ import numpy as np # 这句话不知道是什么意思 np.random.seed ...

  10. 使用PHP进行SOCKET编程

    一.SOCKET原理图 二.SOCKET常用函数 1.创建socket函数: resource socket_create ( int $domain , int $type , int $proto ...