Openlayers高级交互（8/20）：选取feature，平移feature

最新推荐文章于 2025-02-05 15:34:02 发布
最新推荐文章于 2025-02-05 15:34:02 发布
阅读量941 收藏 30
点赞数 41
CC 4.0 BY-SA版权
分类专栏： # Openlayers 高级应用20例 文章标签： 大剑师 Openlayers教程 Openlayers高级 Openlayers示例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/cuclife/article/details/143110531

本示例介绍如何在vue+openlayers中使用Translate，选取feature，平移feature。选择的时候需要按住shift。Translate 功能通常是指在地图上平移某个矢量对象的位置。在 OpenLayers 中，可以通过修改矢量对象的几何位置来实现这一功能。

效果图

在这里插入图片描述

配置方式

1）查看基础设置：https://blog.youkuaiyun.com/cuclife/article/details/126195754
2）将上述的源代码，粘贴到src/views/Home.vue中，npm run serve 运行即可。

源代码 (共79行)

/*
* @Author: 大剑师兰特（xiaozhuanlan），还是大剑师兰特
了解本专栏 订阅专栏 解锁全文
openlayers：实现平移特征交互(附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
01-30 112
openlayers：实现平移特征交互(附完整源码）
20个 openlayers 高级交互应用（包含示例效果图和源代码）
大剑师兰特的GIS世界
10-15 1564
本专栏列出Openlayers的高级应用20个示例，对有一定基础的Openlayers开发者帮助非常大。 除了本高级应用外，作者还有提供Openlayers另两个专栏供学习。https://dajianshi.blog.youkuaiyun.com/article/details/132230735https://blog.youkuaiyun.com/cuclife/article/details/127420739https://blog.youkuaiyun.com/cuclife/article/details/126779219ht
openlayers translate实现要素在限制图形内移动
u012881935的博客
12-18 312
点只能在线上移动 /** * 点只能在线上移动 * @param {*} pointFeature 可移动的点 * @param {*} lineFeature 限制的线段 */ const pointInLine = (pointFeature, lineFeature) => { const pointGeom = pointFeature.getGeometry(); const pointCoordinates = pointGeom.getCoordinates(); c
openlayers小车按坐标点循环匀速移动（配自动转向功能）
_小郑有点困了的博客
07-13 2909
openlayers小车按坐标点循环匀速移动 效果图： 代码如下： data.js let dataArr =[ [10836932.628965743, 4998172.218425438] , [10638182.82599503, 3781582.515392581] , [10897159.841987172, 3552719.105911153] , [11120000.530166456, 4986126.775821152] , [11360909.382252172
OpenLayer基础概念翻译
前端知识总结
09-21 852
最近正在学习gis，openlayer学习记点笔记。 0penLayer基本概念翻译笔记MAP openlayer组件核心是map，它被渲染到一个目标容器 target (e.g. web页面上一个包含map的div元素）。 所有的map参数可以在构建地图时配置，也能使用setter方法设置，e.g. setTarget()。 <div id="map" style="width: 1...
openlayers地图上要素拖动交互
dong__xue的博客
04-28 4668
参考代码：//拖动交互 function addMoveInteraction(){ var app = {}; app.Drag = function() { ol.interaction.Pointer.call(this, { handleDownEvent: app.Drag.prototype.handleDownEvent, ...
简单实现矢量特征的选择和拖动 -来自openlayers
zw3413的专栏
12-29 626
矢量元素的选择和拖动操作，如果自己实现会比较麻烦，openlayers官方提供了实现相应功能的interaction，代码如下： <!DOCTYPE html> <html> <head> <title>Translate Features</title> <link rel="stylesheet" hre..
73.在 Vue3 中使用 OpenLayers 选取 Feature 并拖拽平移
最新发布
小彭的博客
02-05 1210
这些都可以在后续的开发中进一步优化和完善。是一个功能强大的 JavaScript 库，常用于 Web 地图开发。来组织代码，并且 OpenLayers 作为地图核心库。是 OpenLayers 默认的交互集合，我们通过。交互，我们可以轻松实现对地图数据的交互操作。来实现对地图上的要素进行选择和拖拽操作。交互允许用户点击地图上的要素进行选中。如果你是 Vue3 项目，先安装。交互允许选中的要素被拖拽移动。在这个示例中，我们将加载一个。在 WebGIS 领域，
开源框架Openlayers：就业必学，打造3D互动式地图
2403_88103571的博客
01-22 1158
OpenLayers 3简称ol3，它是一个开源的Web GIS引擎，使用了JavaScript、最新的HTML5技术及CSS技术，支持dom，canvas和webgl三种渲染方式。除了支持网页端，还支持移动端（目前移动端还不成熟，有待进一步完善）。在地图数据源方面，支持各种类型的瓦片地图，既支持在线的，也支持离线的。比如OSM, Bing, MapBox, Stamen, MapQuest等等；还支持各种矢量地图，比如GeoJSON，TopoJSON，KML，GML等等。
OpenLayers学习笔记高级篇（四、地图开发实战之地图要素的增删改查）
MagicMHD的博客
06-18 3481
一切都准备好了，现在终于可以通过ol3加载配置好的数据了。上一节中最后的预览结果，大家已经看到了，此处我们自己通过ol来实现这个预览页面，直接上代码如下： 1、加载Geoserver发布的wfs地图服务，直接上代码如下： <!doctype html> <html lang="en"> <head> <meta charset="UTF...
有关OpenLayers中ol.interaction.Translate的hitTolerance属性的问题
a20100997的博客
01-05 2823
在使用OpenLayers的ol.interaction.Translate功能的时候，遇到了以下问题： 当hitTolerance不为0时（默认为0），在数据量较大时，地图交互出现了明显的延迟和卡顿： this.select = new ol.interaction.Select( { layers:[editableLayer], }); Map.addInteraction(this.
059：vue+openlayers点击选择feature，并设置特定的颜色（图文代码）
大剑师兰特的GIS世界
08-15 1470
本示例的目的是介绍如何在vue+openlayers中singleclick点击选取feature，并设定为相应的颜色。
6、openlayers6 拖拽Feature图层
qq_41939902的博客
10-09 778
```html <template> <div id="map"></div> </template> <script> import "ol/ol.css"; import { Map, View, Feature, Collection } from "ol"; import XYZ from "ol/source/XYZ"; import { Vector as VectorSource } from "ol/source"; impo
全网最新版openlayers视频教程
02-27
学习关于二维地理图层渲染，投影转换，各种数据类型渲染，OGC服务，各种地图交互
Openlayers 教程 04 - 图形要素对象 Feature 的移动和编辑
非科班Java出身GISer的博客
06-05 4979
Openlayers 开发中经常会遇到需要操作图形要素 Feature，本示例介绍单体要素 Feature 和 矢量图层所有要素的编辑和平移操作。
openlayers3——点
weixin_42255789的博客
01-07 3656
本篇文章主要是介绍运用openlayers3新增点、移动点，删除点。 新增点 步骤：1、新增元素 2、把元素添加到图层数据源上 3、把图层数据源放到图层上 4、把图层添加到地图上 // 新增元素 that.pointFeature = new ol.Feature({ geometry: new ol.geom.Point([data.longitude, data.latitude]), // 经纬度 key: data.id, }); // 把元素添加到图层数据
openlayers之selectfeature
LZUGIS
05-26 5429
在本文叙述如何在openlayers中实现鼠标经过某一对象时，对象高亮；点击某一对象时，弹出该对象的信息。重点为OpenLayers.Layer.Vector和OpenLayers.Control.SelectFeature
Openlayers实战：选择feature，列表滑动，定位到相应的列表位置
大剑师兰特的GIS世界
08-13 499
在Openlayers的实际项目中，点击某个图层的feature，在左侧的列表中显示出来，滚动条滑动，能显示在视觉区内，具体的方法请参考源代码。
openlayers6 踩坑系列（三）绘制和编辑（矩形，圆，多边形，点，线）
热门推荐
qq_39404437的博客
11-23 1万+
openlayers6 下的点、线、圆形、矩形、多边形的绘制与编辑
评论 34
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

还是大剑师兰特

打赏一杯可口可乐

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值