参考文档的例子可以知道如何拖动矢量图层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. Linux 下面 Sqlserver 2017 的简单安装

    1. 公司网络太烂 yum 在线安装失败 2. 解决方法 找微软的官网 百度网盘 离线下载rpm包. https://packages.microsoft.com/rhel/7/mssql-serve ...

  2. sqlyog Can't connect to MySQL server on localhost (0)

    https://blog.csdn.net/l1336037686/article/details/78940223

  3. java日志框架之logback(一)——logback工程简介

    Logback工程 致力于成为log4j工程的继承者 Logback的架构足够泛型化,故能够应用于许多不同的环境.当前,logback划分为三个组件: logback-core logback-cla ...

  4. 版本控制--git+idea

  5. Golang的interface实践

    这是第二个我在别的语言里面没有见过的实现,go的interface可以说是独树一帜,让我们仔细来实践一下. interface类型是什么?interface类型定义了一组方法,如果某个对象实现了某个接 ...

  6. 离线安装redis-cluster

    #离线安装redis-cluster https://cache.ruby-lang.org/pub/ruby/2.4/ruby-2.4.5.tar.gz #安装ruby .tar.gz cd rub ...

  7. MyBatis基础：MyBatis数据基本操作（2）

    1. MyBatis映射器 2. MyBatis数据基本操作 示例项目结构: <project xmlns="http://maven.apache.org/POM/4.0.0&quo ...

  8. 老男孩python学习自修【第一天】文件IO用法

    第一天   文件IO处理 1.读文件实例 file_split.python f = file('myFile.txt', 'r') for line in f.readlines(): line = ...

  9. 如何在mac下安装php

    步骤如下: 1.下载php源码并解压 2.进入php源码并configure 3.安装openssl 4.sudo make及make test 5.sudo make install 具体命令如下: ...

  10. Python自动化测试之selenium从入门到精通

    1. 安装selenium 首先确保python安装成功,输入python -V 在windows下使用pip安装selenium,详情如图所示: 在ubuntu下使用pip install sele ...