首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

有没有办法在openlayers中获得修改后的多边形的新坐标?

在OpenLayers中,可以通过以下步骤获得修改后的多边形的新坐标:

  1. 创建一个多边形要素(feature)并添加到矢量图层(vector layer)中。
  2. 监听多边形要素的修改事件(modify event)。
  3. 在修改事件的回调函数中,可以通过获取多边形要素的几何对象(geometry)来获得新的坐标。

以下是一个示例代码:

代码语言:txt
复制
// 创建一个矢量图层
var vectorLayer = new ol.layer.Vector({
  source: new ol.source.Vector()
});

// 创建一个多边形要素并添加到矢量图层中
var polygon = new ol.geom.Polygon([[[-10, 0], [0, 10], [10, 0], [0, -10], [-10, 0]]]);
var feature = new ol.Feature(polygon);
vectorLayer.getSource().addFeature(feature);

// 监听多边形要素的修改事件
feature.getGeometry().on('change', function(event) {
  var geometry = event.target;
  var coordinates = geometry.getCoordinates();
  console.log('新坐标:', coordinates);
});

// 创建一个地图并添加矢量图层
var map = new ol.Map({
  target: 'map',
  layers: [vectorLayer],
  view: new ol.View({
    center: [0, 0],
    zoom: 2
  })
});

在上述代码中,我们创建了一个矢量图层,并在其中添加了一个多边形要素。然后,我们监听了多边形要素的修改事件,并在事件回调函数中获取了修改后的新坐标。你可以根据实际需求对新坐标进行进一步处理或应用。

推荐的腾讯云相关产品:腾讯云地图(https://cloud.tencent.com/product/tianditu)

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

php判断坐标是否指定多边形

如何判断一个坐标点是否一个多边形,具体应用场景就是,外卖派送,用户提供坐标是否是在外卖派送范围之内。...用户坐标可以通过手机设备获取到,派送范围就是通过地图上,进行多边形绘制,获取多个坐标点连接起来配送范围。下面来看看代码上是如何简单判断。...$a = new Coordinate(39.916527, 116.397128); $b = new Coordinate(39.901305, 116.397128); //判断是否执行多边形...if ($geo->contains($a)) { echo "a点在多边形范围内"; } else { echo "a点不在多边形范围内"; } echo "";...if ($geo->contains($b)) { echo "b点在多边形范围内"; } else { echo "b点不在多边形范围内"; } 结果: ?

1.5K20

Android获得控件屏幕绝对坐标

(location);//获取整个屏幕内绝对坐标 location [0]--->x坐标,location [1]--->y坐标 getLocationOnScreen 计算该视图全局坐标x...,y值,(注意这个值是要从屏幕顶端算起,也就是索包括了通知栏高度)//获取在当前屏幕内绝对坐标 getLocationInWindow 计算该视图它所在widnow坐标x,y值,获取整个窗口内绝对坐标...getLeft , getTop, getBottom,getRight 这一组是获取相对它父亲里坐标 如果在ActivityOnCreate()事件输出那些参数,是全为0,要等UI控件都加载完了才能获取到这些...onWindowFocusChanged(boolean hasFocus)获取为好 即覆写ActivityonWindowFocusChanged(boolean hasFocus)方法 XXX_Activity...int[] location2 = new int[2] ; view.getLocationOnScreen(location2);//获取整个屏幕内绝对坐标

2K20

php判断坐标是否指定多边形「建议收藏」

如何判断一个坐标点是否一个多边形,具体应用场景就是,外卖派送,用户提供坐标是否是在外卖派送范围之内。...用户坐标可以通过手机设备获取到,派送范围就是通过地图上,进行多边形绘制,获取多个坐标点连接起来配送范围。下面来看看代码上是如何简单判断。...$a = new Coordinate(39.916527, 116.397128); $b = new Coordinate(39.901305, 116.397128); //判断是否执行多边形...if ($geo->contains($a)) { echo "a点在多边形范围内"; } else { echo "a点不在多边形范围内"; } echo "";...if ($geo->contains($b)) { echo "b点在多边形范围内"; } else { echo "b点不在多边形范围内"; } 结果: php开发中常用Composer

1.1K30

基于 HTML5 OpenLayers3 实现 GIS 电信资源管理系统

,主要是将节点像素坐标转为 OpenLayers ol.Cordinate 地图视图投影坐标并存储到节点业务属性(HT 一个可以存储任意值对象),这样我们只需要通过获取或设置节点业务属性...这里我子类 GraphViewControl 重载了父类 ol.control.Control setMap 方法,在此方法中将 HT 拓扑组件 graphView 添加到 OpenLayers...insertBefore 指定已有子节点(参数二)之前插入子节点(参数一) 并对数据容器增删变化事件进行监听,通过监听当前加入数据容器节点类型,将当前节点像素坐标转为地图视图投影坐标存储节点业务属性...重设拓扑在这边意思就是将拓扑图中节点坐标从我们一开始设置 HT 像素坐标重新通过地图缩放或者移动将地图视图投影坐标转为像素坐标设置到节点上,这时候前面存储业务属性 coord 就派上用场了...我们可以 graphView 上进行绘制节点编辑、绘制连线、绘制直角连线以及绘制多边形

3.7K60

OpenLayers入门(二)

,其实第一篇也是很基础很简单,但是意外是看的人是最多,这让我意识到可能即使是贴一下代码对一些人也是有帮助,这就是这一篇主要目的,可能有一些地方会看不懂,但是不要问,问我也不知道,如果你恰好了解的话十分欢迎评论里分享...虽然是基于v3版本介绍,很多api可能变了,但还是值得一看,除了OpenLayers本身介绍,还会有一些地理基础知识分享,这种相对全面的中文教程真的很稀有,且看且珍惜。...import { Style, Stroke, Fill } from 'ol/style' import { Vector as VectorLayer } from 'ol/layer' // data为多边形每个点经纬度坐标数组...,使用几何类型里多边形类创建一个要素就可以了。...添加阴影效果 OpenLayers样式对象并不支持直接设置阴影效果,所以需要获取到canvas绘图上下文来自行添加,原理是监听图层prerender(一个图层渲染前触发)和postrender(

2.6K51

OpenLayers入门(一)

OpenLayers简介 OpenLayers(https://openlayers.org/)是一个用来帮助开发Web地图应用高性能、功能丰富JavaScript类库,可以满足几乎所有的地图开发需求...、TopoJSON、KML、GML和其他格式矢量数据 支持OGC制定WMS、WFS等GIS网络服务规范 支持移动设备上运行 可以通过css来为地图控件设置样式 面向对象开发方式,OpenLayers...万物皆对象 和另一个流行地图库leaflet不同,openLayers完全是用面向对象方式开发,且几乎内置了所有地图开发需要功能,而leaflet核心库只提供基本功能,其他功能都是通过第三方插件进行扩展...显示要素 地图上显示一些自定义元素可以说是最基本也是最常见需求,如果要显示元素结构或样式比较复杂,可以使用Overlay,它可以将DOM元素地图上进行显示,并将随地图一起移动。...就可以了,比如绘制不规则多边形为POLYGON,具体类型可以查看文档:https://openlayers.org/en/latest/apidoc/module-ol_geom_GeometryType.html

4.7K40

GIS拓扑讲解点线面几何体拓扑关系判断及运算分析_turf案例

坐标筛选,pointsWithinPolygon筛查出在多边形坐标、GRIDS:网格,生成各种网格classification:分类,nearestPoint,寻找最靠近目标的点BOOLEANS:...//两条线是否平行点在线上:booleanPointOnLine(point,line) //点是否在线上点在面上:booleanPointInPolygon(point,polygon) //点是否官方文档已经讲非常详细...,不必多说拓扑运算分析拓扑关系及运算分析:关系描述缓冲区分析(Buffer)包含所有的点在一个指定距离内多边形和多多边形。...如辐射范围,使用该方法凸壳分析(ConvexHull)包含几何形体所有点最小凸壳多边形(外包多边形)登高先交叉分析(Intersection)A∩B 交叉操作就是多边形AB中所有共同点集合联合分析...∩B) AB形状对称差异分析就是位于A或者B但不同时AB所有点集合推荐阅读《代数拓扑\集合拓扑\代数拓扑\拓扑关系\拓扑结构_笔记》拓扑示意图turf关系分析函数turf.js关系分析函数主要在

2.3K10

EchartOpenlayers应用-热力图

概述 在前文中,有一篇文章讲述了Openlayers2结合Echart实现地图统计图,还以一篇文章讲述了结合heatmap.js实现Openlayers热力图展示。...本文,书接前文,讲述Openlayers如何结合Echart实现热力图。 效果 ? 全图效果 ?...放大效果 实现 1、关键点 echart实现heatmap关键点在与屏幕坐标,所以,地图中,应通过地理坐标到屏幕坐标的转换函数,将地理坐标转换为屏幕坐标。...2、实现代码 我将热力图扩展成为了一个openlayerslayer扩展,实现代码如下: OpenLayers.Layer.EchartHeatmap = OpenLayers.Class(OpenLayers.Layer...(this, arguments); }, CLASS_NAME : "OpenLayers.Layer.EchartHeatmap" } ); 前台调用代码如下

2.6K30

原 HTML5 网络拓扑图整合 OpenL

HT和OpenLayers组件叠加在一起之后,剩下就是拓扑里面图元摆放位置与经纬度结合问题,常规网络拓扑图中存储ht.Node图元position是逻辑位置,和经纬度没有任何关系,因此GIS应用我们需要根据图元经纬度信息换算出...position屏幕逻辑坐标信息,如果你知道投影算法也可以自己提供函数处理,但所有GIS组件都提供了类似的API函数供调用,当然这部分也没有标准化,不同GIS组件需要调用API都有差异,但基本原理是一致...,对于OpenLayers我们通过map.getPixelFromLonLat(data.lonLat)可以将经纬度信息转换成屏幕像素逻辑坐标,也就是ht.Node需要position坐标信息。...细心同学会想到转换是双向,有可能用户需要拖动图元节点改变其经纬度信息,这时候我们就需要另外一个方向函数,即根据屏幕逻辑坐标转换成当前坐标对应经纬度,OpenLayers我们通过map.getLonLatFromPixel...显示搞定后剩下就是交互问题了,HT自己有套交互体系,OpenLayers也需要地图漫游和缩放交互,两者如何结合呢?

1.8K60

HT for Web整合OpenLayers实现GIS地图应用

HT和OpenLayers组件叠加在一起之后,剩下就是拓扑里面图元摆放位置与经纬度结合问题,常规网络拓扑图中存储ht.Node图元position是逻辑位置,和经纬度没有任何关系,因此GIS应用我们需要根据图元经纬度信息换算出...position屏幕逻辑坐标信息,如果你知道投影算法也可以自己提供函数处理,但所有GIS组件都提供了类似的API函数供调用,当然这部分也没有标准化,不同GIS组件需要调用API都有差异,但基本原理是一致...,对于OpenLayers我们通过map.getPixelFromLonLat(data.lonLat)可以将经纬度信息转换成屏幕像素逻辑坐标,也就是ht.Node需要position坐标信息。...细心同学会想到转换是双向,有可能用户需要拖动图元节点改变其经纬度信息,这时候我们就需要另外一个方向函数,即根据屏幕逻辑坐标转换成当前坐标对应经纬度,OpenLayers我们通过map.getLonLatFromPixel...显示搞定后剩下就是交互问题了,HT自己有套交互体系,OpenLayers也需要地图漫游和缩放交互,两者如何结合呢?

1.8K80

HT for Web整合OpenLayers实现GIS地图应用

HT和OpenLayers组件叠加在一起之后,剩下就是拓扑里面图元摆放位置与经纬度结合问题,常规网络拓扑图中存储ht.Node图元position是逻辑位置,和经纬度没有任何关系,因此GIS应用我们需要根据图元经纬度信息换算出...position屏幕逻辑坐标信息,如果你知道投影算法也可以自己提供函数处理,但所有GIS组件都提供了类似的API函数供调用,当然这部分也没有标准化,不同GIS组件需要调用API都有差异,但基本原理是一致...,对于OpenLayers我们通过map.getPixelFromLonLat(data.lonLat)可以将经纬度信息转换成屏幕像素逻辑坐标,也就是ht.Node需要position坐标信息。...细心同学会想到转换是双向,有可能用户需要拖动图元节点改变其经纬度信息,这时候我们就需要另外一个方向函数,即根据屏幕逻辑坐标转换成当前坐标对应经纬度,OpenLayers我们通过map.getLonLatFromPixel...显示搞定后剩下就是交互问题了,HT自己有套交互体系,OpenLayers也需要地图漫游和缩放交互,两者如何结合呢?

1.5K11

【JS】1714- 重学 JavaScript API - Geolocation API

如何使用 要使用 Geolocation API,您需要按照以下步骤进行设置和调用: 2.1 获取用户地理位置权限 浏览器请求用户地理位置权限,可以使用 navigator.geolocation...您需要替换示例 YOUR_API_KEY 为您自己天气 API 密钥。...OpenLayers[4]:10k⭐,一个高性能、功能丰富 JavaScript 地图库,支持各种地图源和交互功能。...Geolib[7] :4k⭐,一个用于处理地理位置和距离计算 JavaScript 库。它提供了简单方法来计算坐标之间距离、判断点是否多边形内等功能。 5....使用建议和注意事项 使用 Geolocation API 时,您应该注意以下几点: 「提示用户」 获取地理位置信息之前,应该向用户解释获取位置信息目的,并获得用户明确授权。

29460

由判断三一点是否在三角形内部而引发思考.....

而在计算我们应该避免这一点。     那有没有其他方法可循呢?         答案很定是有的.....     用行列式(涉及到大学线代里知识)。        ...http://hi.baidu.com/wayright/item/ad18e4c0c5446b2dee4665c9 如何判断一个点是否一个多边形内部       多边性存储,每一个多边形都是由一系列连续点组成...就如同走路一般地划线,从数组第一个点连到第五个点,多边行就构造出来了。       图形编程坐标的利用是不可忽视。...我们先判断一个点是否一个三角形内部。一个三角形一个坐标系(譬如由A、B、C三点组成),我们可以通过计算它有向面积来判断A、B、C三点坐标顺逆。...例如,判断P点是否多边形ABCD之中,依次判断P是否ABC-BCD、BCD-CDA、CDA-DAB、DAB-ABC各个成对三角形,PABC-BCD中表示PABC-BCD交集之中。

1.1K80

3D 可视化入门:渲染管线原理与实践

来自某不愿具名同学投稿,文章较长建议 PC 端观看~ 一、引子 玩 3D 游戏时候,有没有想过这些 3D 物体是怎么渲染出来?其中动画是怎么做?... 3D Canvas 坐标通常是右手系,坐标方向如图示 一个场景可能有多个相同模型,这些模型可以有各自不同旋转、平移、缩放变换,因此需要对它们应用模型矩阵(model matrix),将其坐标变换为世界坐标...2D 剪裁会移除不在可视平面或者视窗多边形。对于一半一半不在多边形,则会添加顶点。 3D 剪裁分为多种,一些剪裁渲染流程可以分别启用或禁用。...获得顶点法线 - 邻多边形均值 获得边与像素点光照 - 双线性差值 这种着色方式可以平滑地渲染出物体表面,但是会丢失一些高光信息。...获得顶点法线 - 邻多边形均值(和上面一样) 获得边与像素点法线 - 双线性差值 顶点法线,平面着色,高洛德着色,冯氏着色 对比 ThreeJS 示例,了解三种着色方式区别: MeshPhongMaterial

6K21

使用天地图加载Geoserver图层

一、写在前面 项目中往往使用地图作为底图(比如 天地图卫星图等),再其上覆盖你通过geoserver发布自定义图层。本文记录了我实现方法。...我解决方法是,使用geoserver作为 GIS 地图服务,发布 GEO TIFF 图层,再在Openlayers 展示。...遇到难题3:坐标系问题,无人机拍摄制作正射影像图 是EPSG:4326 坐标,要注意在 geoserver选择这个配置。配合合适底图来使用。 遇到难题4:使用什么底图合适?...无人机拍摄制作正射影像图地图展示会很突兀,卫星图上展示比较合适,我选择了支持 EPSG:4326 坐标天地图 2.2 方法和步骤 整体来说,就是先制作 正射影像图,发布成图层,并在 Web 前端展示过程...utm_id=0 openlayers快速开始:https://openlayers.org/doc/quickstart.html 三、我代码 完整代码参考如下: import '.

3.1K30

JavaScript动态图片热区(绘制多个矩形并分别跳转链接)

前言 不知道大家有没有遇到一张图片上面有很多个商品展示图,需要给每个商品添加一个链接,点击跳转到各自商品详情页。 这个需求在前端其实有一个专业术语“图像地图”,大家先看看w3c简单示例 ?...2、多边形(poly 或 polygon) 每一对 "x,y" 坐标都定义了多边形一个顶点("0,0" 是图像左上角坐标)。定义三角形至少需要三组坐标;高纬多边形则需要更多数量顶点。...多边形会自动封闭,因此列表结尾不需要重复第一个坐标来闭合整个区域。...3、矩形(rect 或 rectangle) shape="rectangle",coords="x1,y1,x2,y2" 第一个坐标是矩形一个角顶点坐标,另一对坐标是对角顶点坐标,"0,0...请注意,定义矩形实际上是定义带有四个顶点多边形一种简化方法。

3.3K30

理论基础 - 十大GIS相关算法

假如考虑边(P1,P2), 1)如果射线正好穿过P1或者P2,那么这个交点会被算作2次,处理办法是如果P坐标与P1,P2较小坐标相同,则直接忽略这种情况 2)如果射线水平,则射线要么与其无交点...3)如果射线竖直,而P0坐标小于P1,P2坐标,则必然相交。 4)再判断相交之前,先判断P是否边(P1,P2)上面,如果在,则直接得出结论:P再多边形内部。...曼哈顿距离示意图早期计算机图形学,屏幕是由像素构成,是整数,点坐标也一般是整数,原因是浮点运算很昂贵,很慢而且有误差,如果直接使用AB欧氏距离(欧几里德距离:二维和三维空间中欧氏距离就是两点之间距离...狄洛尼三角网每个三角形可视为一个平面,平面的几何特征完全由三个顶点空间坐标值(x,y,z)所决定。...在过去几十年里,分形物理学、材料科学、地质勘探、乃至股价预测等方面都得到了广泛应用或密切注意,并且由于分形引入,使得一些学科焕发了活力。数学上所说分形,是抽象

1.6K30
领券