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

在openlayers中绘制多边形后无法获取几何

,可能是由于以下几个原因导致的:

  1. 事件监听问题:在openlayers中,绘制多边形后,需要通过事件监听来获取绘制的几何信息。可能是事件监听没有正确设置或者没有绑定到正确的绘制图层上,导致无法获取几何信息。

解决方法:确保正确设置事件监听,并将事件监听绑定到绘制多边形的图层上。可以使用drawend事件来监听绘制结束,然后通过事件回调函数获取几何信息。

  1. 几何对象未添加到图层:在openlayers中,绘制的几何对象需要添加到图层中才能进行后续操作。如果没有将绘制的多边形几何对象添加到图层中,就无法获取几何信息。

解决方法:在绘制结束后,将几何对象添加到对应的图层中。可以使用addFeature方法将几何对象添加到图层中。

  1. 几何对象未正确保存:在openlayers中,绘制的几何对象需要保存到矢量数据源中才能进行后续操作。如果没有正确保存几何对象,就无法获取几何信息。

解决方法:在绘制结束后,将几何对象保存到对应的矢量数据源中。可以使用addFeature方法将几何对象添加到矢量数据源中。

总结:在openlayers中绘制多边形后无法获取几何信息,可能是事件监听问题、几何对象未添加到图层或几何对象未正确保存导致的。需要确保正确设置事件监听、将几何对象添加到图层中并保存到矢量数据源中。具体的代码实现可以参考openlayers官方文档和示例。

推荐的腾讯云相关产品:腾讯云地图服务(https://cloud.tencent.com/product/tianditu)提供了丰富的地图展示和地理信息处理能力,可以与openlayers结合使用,实现更多地图相关功能。

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

相关·内容

OpenLayers入门(一)

可以通过css来为地图控件设置样式 面向对象开发方式,OpenLayers万物皆对象 和另一个流行的地图库leaflet不同,openLayers完全是用面向对象的方式开发的,且几乎内置了所有地图开发需要的功能...实例化要素 let feature = new Feature({ geometry: new Point([120.12636255813723, 30.313142215804806])// 地理几何图形选用点几何...this.tooltipOverlay.setPosition(f.getGeometry().getCoordinates()) }) }) 这样当鼠标移上去就会显示tooltip: 接下来看看如何绘制多边形..., type: 'Circle',//没错,还是Circle geometryFunction: createBox() }) 其他类型只要设置对应的type就可以了,比如绘制不规则多边形为...获取地图当前区域的范围 为了性能考虑,如果是地图上显示要素的话最好是只显示当前显示区域内的要素,要显示的数据一般从后端进行请求,那么可以把当前区域的范围发送给后端,后端只返回这个区域内的数据就好了,那么就需要获取当前的范围

4.8K40

OpenLayers入门(二)

,使用几何类型里的多边形类创建一个要素就可以了。...from 'ol/extent'; import { getCenter } from 'ol/extent'; import { fromLonLat } from 'ol/proj'; // 获取一个多边形的四个边界点...,分别是使用circular和Circle这两者有什么区别我也不太清楚,它们的入参基本一样,中心点和半径,文档上没有指出半径的单位,第二种方法是百度上搜到的,绘制完经测距测试是准确的。...添加阴影效果 OpenLayers的样式对象并不支持直接设置阴影效果,所以需要获取到canvas的绘图上下文来自行添加,原理是监听图层的prerender(一个图层渲染前触发)和postrender(...一个图层渲染触发)事件,修改canvas`上下文的绘图样式,对整个图层都是有影响的,所以最好把要添加阴影的要素放到一个单独的图层里: import { Vector as VectorSource

2.7K51

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

_graphView = new ht.graph.GraphView();// 拓扑图组件 我控件还给 graphView 拓扑组件添加了一些事件的监听,由于 OpenLayers 和 HT 是两款不同的...js 库,有着各自的交互系统和坐标系,首先我们将某些我们需要获取 HT 上做的交互事件并停止事件传播到 OpenLayers 上: // 拖拽 node 时不移动地图 var stopGraphPropagation...这里我子类 GraphViewControl 重载了父类 ol.control.Control 的 setMap 方法,在此方法中将 HT 的拓扑组件 graphView 添加到 OpenLayers..._graphView.sm().ss(edge);// 设置选中您当前连线 } editableFunc();// 绘制结束 工具条选中“编辑”项 this....我们可以 graphView 上进行绘制节点的编辑、绘制连线、绘制直角连线以及绘制多边形

3.8K60

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

脱节:Disjoint几何形状没有共有的点 A∩B=∅, 检查两个几何对象是否相交。相等:Equals:判断两个图形是否是同一个类型并且平面上的点是否是相同的位置。...,feature2) //feature1是否完全feature2相交判断:booleanCrosses(feature1,feature2) //feature1,feature2是否相交相离判断...如辐射范围,使用该方法凸壳分析(ConvexHull)包含几何形体的所有点的最小凸壳多边形(外包多边形)登高先交叉分析(Intersection)A∩B 交叉操作就是多边形AB中所有共同点的集合联合分析...B但不同时AB的所有点的集合推荐阅读《代数拓扑\集合拓扑\代数拓扑\拓扑关系\拓扑结构_笔记》拓扑示意图turf关系分析函数turf.js关系分析函数主要在TRANSFORMATION下,api参考...OL4结合turf.js实现等值线使用leafletjs、turfjs前端绘制点线面缓冲区参考资料:利用Turf.js实现点线面几何体的拓扑关系判断  https://blog.csdn.net/u013240519

2.4K10

Vue ArcGis鼠标打点、中心打点绘制多边形

一、前言 ArcGis绘制多边形这里没有用官方提供的api,官方提供的api是鼠标点击打点然后大于三个点位实时绘面,这种绘制多边形的方式pc端体验感较佳,但在移动端会差点意思,所以这里提供了另一种绘制多边形的思路以供各位看官参考...先上效果图 二、监听地图点击发布点位 这里地图创建完毕监听地图点击并且发布一个全局eventBus(vuex同理) mapView.on("click", (event) => { // 获取点击地图时的点...$emit('addSpot',pt); }); 复制代码 点击绘制多边形订阅这个全局eventBus,并push进你的点位数组 this.$eventBus....outline: {color: [255, 255, 255, 0]}, }, }) this.sketchViewModel.add(spot); // 绘制层添加当前几何图形...: {color: [255, 255, 255, 0]}, }, }) this.sketchViewModel.add(spot); // 绘制层添加当前几何图形

1.3K20

Python地信专题 | 基于geopandas的空间数据分析—数据结构篇

完成安装,下面我们开始对geopandas的系统性学习之旅。...: 图14 同一个GeoSeries可以混合上述类型的多种几何对象,这意味着点线面概念上相异的几何对象可以共存于同一份数据 2.1.2 GeoSeries常用属性 类似pandas的Series...LinearRing格式边框线集合: 图20 is_valid shapely涉及到很多拓扑计算操作时,对几何对象的合法性有要求。...这时几何对象列的名称可以自由设置,但一定要利用GeoDataFrame.set_geometry()方法将添加的矢量列指定为矢量主列。...因为每个GeoDataFrame若在定义之处没有指定矢量列,无法进行与适量信息挂钩的所有操作(GeoSeries所有属性都可同样作用于GeoDataFrame,因为所有空间操作实际上都直接作用于其矢量主列

1.8K20

(数据科学学习手札74)基于geopandas的空间数据分析——数据结构篇

完成安装,下面我们开始对geopandas的系统性学习之旅。...图12 LinearRing LinearRing对应shapely.geometry的LinearRing,是一种特殊的几何对象,可以理解为闭合的线或无孔多边形的边框,创建时传入数据的格式与Polygon...图14   同一个GeoSeries可以混合上述类型的多种几何对象,这意味着点线面概念上相异的几何对象可以共存于同一份数据 2.1.2 GeoSeries常用属性   类似pandas的...图20 is_valid   shapely涉及到很多拓扑计算操作时,对几何对象的合法性有要求,譬如定义多边形时坐标按顺序连线时穿过了之前定义的边就属于非法,因为geopandas对矢量对象的计算依赖于...,这时几何对象列的名称可以自由设置,但一定要利用GeoDataFrame.set_geometry()方法将添加的矢量列指定为矢量主列,因为每个GeoDataFrame若在定义之处没有指定矢量列,无法进行与适量信息挂钩的所有操作

2.7K20

基于Turf.js教你快速实现地理围栏的合并拆分

可是Turf.js目前还没有提供多边形的拆分方法,另外多边形的合并虽然已有union方法,但在实际应用无法很好解决部分共边的多边形的合并问题,所以只能在Turf的基础上自行实现符合业务需求的拆分合并功能...无法将其拼接在一起 切割线多边形外的部分会形成外部多边形,如下图所示 [17212074aa9c98ce?...但是处理部分共边的多边形时,仍然存在点、线关系判定没有容限的问题,导致点被判定在线外而无法完全合并。...这个转换过程我将其称为点注入,将多边形B的顶点注入到多边形A,即遍历B的顶点进行判断,若其A的某个线段上且不是线段端头,就将其插入到A的路径。...产品推广 JSAPI GL上实现的图形编辑器集成了几何图形的绘制、编辑、删除功能,相较于JSAPI v2功能更加完善且便于使用。

2.9K30

hover 背后的数学和图形学

Canvas 绘制的图形都是一个 元素内,并不能向 DOM 或 SVG 一样使用 CSS 伪类或js事件实现某个图形的hover效果。...这是一个纯粹的几何数学问题,理论上有很多种解法,其中工程领域使用最普遍的是射线法,这是目前综合计算复杂度和性能消耗的最优解之一。...射线法可以适用于任意多边形,包括有洞(hole)的多边形,具体的推导过程就不贴了,感兴趣的话可以自己查一下相关资料。 射线法涉及以下三个问题: 如何获取多边形的各条边的端坐标?...如果多边形的某条边是曲线怎么办? 如何判断两条线段有交点? 如何获取多边形的各条边的端坐标? 这其实并不是一个图形绘制领域的问题,而是数据制备领域的问题。...所以WebGL的任何图形本质上都是多边形,既然是多边形就可以按照上文的方案解决点与多边形的相对位置判断问题。 如何判断两条线段有交点?

1.3K10

OSG绘制空间凹多边形并计算其面积

思路 这个问题其实涉及到OSG的两个问题:多边形分格化和几何图元遍历。 1) 多边形分格化 OpenGL/OSG,由于效率的原因,默认是直接显示的简单的凸多边形。...OSG是通过osgUtil::Tessellator类来实现多边形分格化的。 2) 几何图元遍历 对于二维的凹多边形,可以有办法计算其面积。但是对于三维空间的凹多边形,计算其面积却很困难。...而我们知道,任何复杂的图形都是通过分解成三角形进行绘制的,只要获取分解成的三角形,计算其面积并相加(空间三角形的面积计算比较简单),就可以得到凹多边形的总面积。...几何体类osg::Geometry提供了遍历几何图元的访问器接口。 2. 实现 其具体实现如下。注意在查找多边形分格化的资料的时候,提到了环绕数和环绕规则的概念。OSG里面也有相应的参数设置。...参考 OSG学习笔记(三)之如何将非三角面转换为三角面 osg几何体的图元的遍历 OSG计算并绘制模型每一个三角面片的法向量 OSG(OpenSceneGraph)基础学习9:OSG多边形分格化

1.4K40

ArcGisPolygon方法应用

一、前言 Polygon多边形实际项目开发中有许多的妙用,可以用多边形圈出不同的区域并进行分类,不同的分类用不同的颜色进行区分并配已相关统计弹窗以达到一目了然的效果,今天我们来尝试绘制一个多边形地图上...二、效果图 两种背景色的多边形 image.png image.png 三、Polygon 官方解释 一个多边形包含一个环数组和一个spatialReference(几何体的空间参考)。...const polygon = new Polygon({ attributes: "remove", // 自定义信息,可在点击图形时获取,不限制类型 hasZ:...true, // 指示几何图形是否具有 M 值 hasM: true, // 指示几何图形是否具有 z 值...(高程) rings: rings, spatialReference: { wkid: 4326 } // 几何体的空间参考 symbol: {

1.3K10

Basemap系列教程:使用shapefiles绘制地图

shapefile 文件名,而且不应含有扩展名,因为Basemap假设给定名的 shapefile 文件,其 shp,sbf, shx文件均存在 第二个参数为之后 Basemap实例要从shapefile文件获取的信息名称...第二个参数名为 lightnings ,而且是 Basemap 实例映射,因此可以使用 map.lightning 获取shapefile文件几何元素,map.lightning_info 获取元素...当迭代字典时,使用 for 循环可以迭代每一个元素 此例, 域名 amplitude 可用于判断闪电是正还是负,从而确定符号 使用 plot 绘制点时,使用 marker属性改变符号 多边形信息...,去除 marker 即可获得一条线 填充多边形 基本的绘制并不会填充多边形,下面介绍以下如何绘制填充多边形: from mpl_toolkits.basemap import Basemap import...matplotlib 使用一个名为 PatchCollection 的类用于设置填充多边形 此例,形状为 Polygon。要创建它的话,坐标必须为 numpy 数组。第二个参数设置多边形为闭合。

4.5K20

讲解python多边形裁剪

讲解Python多边形裁剪计算机图形学多边形裁剪是一个常用的技术,用于确定多边形与给定裁剪窗口之间的交集。...Python提供了各种库和算法来实现多边形裁剪。本篇文章,我们将使用shapely库来进行多边形的裁剪操作。shapely是一个Python库,提供了一些用于处理几何图形数据的功能。...) print("裁剪多边形顶点坐标:", intersection_coordinates)else: print("裁剪多边形不存在")上述代码,我们使用intersection...可视化支持:shapely库可与matplotlib等绘图库结合使用,方便地将几何对象进行可视化和生成地理图表。通过几何对象的plot方法,可以轻松地将几何对象绘制成图形。...结语通过使用shapely库,我们可以轻松地进行多边形裁剪操作,实现图形处理的裁剪需求。shapely还提供了其他强大的几何运算和功能,可以方便地处理各种几何图形数据。

23710
领券