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

Openlayers -绘制多边形后获取坐标

OpenLayers是一个开源的JavaScript库,用于在Web地图上创建交互式的地理信息系统(GIS)应用程序。它提供了丰富的功能和工具,使开发人员能够在地图上绘制多边形并获取其坐标。

绘制多边形后获取坐标的步骤如下:

  1. 首先,你需要在你的应用程序中引入OpenLayers库。你可以从OpenLayers官方网站(https://openlayers.org/)下载最新版本的库文件,并将其包含在你的HTML文件中。
  2. 创建一个地图容器,可以是一个div元素,用于显示地图。
代码语言:txt
复制
<div id="map" style="width: 100%; height: 400px;"></div>
  1. 初始化地图对象,并设置地图的中心点和缩放级别。
代码语言:txt
复制
var map = new ol.Map({
  target: 'map',
  view: new ol.View({
    center: ol.proj.fromLonLat([0, 0]),
    zoom: 10
  })
});
  1. 创建一个绘制交互对象,用于绘制多边形。
代码语言:txt
复制
var draw = new ol.interaction.Draw({
  type: 'Polygon',
  source: new ol.source.Vector()
});
  1. 将绘制交互对象添加到地图上。
代码语言:txt
复制
map.addInteraction(draw);
  1. 监听绘制结束事件,获取绘制的多边形坐标。
代码语言:txt
复制
draw.on('drawend', function(event) {
  var feature = event.feature;
  var geometry = feature.getGeometry();
  var coordinates = geometry.getCoordinates();
  console.log(coordinates);
});

在上述代码中,我们创建了一个绘制交互对象draw,指定其类型为Polygon,然后将其添加到地图上。当绘制结束时,会触发drawend事件,我们可以通过获取绘制的feature对象,进而获取其geometry对象和坐标。

OpenLayers的优势在于其强大的地图渲染和交互功能,支持多种地图数据源和投影坐标系。它适用于各种地理信息系统应用,如地图展示、地图编辑、地图分析等。

腾讯云提供了一系列与地图相关的产品和服务,例如腾讯地图、腾讯位置服务等。你可以通过访问腾讯云官方网站(https://cloud.tencent.com/)了解更多相关产品和服务的详细信息。

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

相关·内容

OpenLayers入门(二)

import { Style, Stroke, Fill } from 'ol/style' import { Vector as VectorLayer } from 'ol/layer' // data为多边形每个点的经纬度坐标数组...from 'ol/extent'; import { getCenter } from 'ol/extent'; import { fromLonLat } from 'ol/proj'; // 获取一个多边形的四个边界点...]; } // 也可以直接使用工具方法:boundingExtent function getExtent (data) { return boundingExtent(data) } // 获取范围的中心点坐标...,分别是使用circular和Circle这两者有什么区别我也不太清楚,它们的入参基本一样,中心点和半径,文档上没有指出半径的单位,第二种方法是百度上搜到的,绘制完经测距测试是准确的。...添加阴影效果 OpenLayers的样式对象并不支持直接设置阴影效果,所以需要获取到canvas的绘图上下文来自行添加,原理是监听图层的prerender(在一个图层渲染前触发)和postrender(

2.6K51

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

前言 通过结合 HTML5 和 OpenLayers 可以组合成非常棒的一个电信地图网络拓扑图的应用,形成的效果可以用来作为电信资源管理系统,美食定位分享软件,片区找房,绘制铁轨线路等等,各个领域都能够涉及的一款应用...js 库,有着各自的交互系统和坐标系,首先我们将某些我们需要获取在 HT 上做的交互事件并停止事件传播到 OpenLayers 上: // 拖拽 node 时不移动地图 var stopGraphPropagation...OpenLayers 的 ol.Cordinate 地图视图投影中的坐标并存储到节点的业务属性(HT 的一个可以存储任意值的对象)中,这样我们只需要通过获取或设置节点的业务属性 coord 就可以自由获取和设置节点在..._graphView.sm().ss(edge);// 设置选中您当前连线 } editableFunc();// 绘制结束 工具条选中“编辑”项 this....我们可以在 graphView 上进行绘制节点的编辑、绘制连线、绘制直角连线以及绘制多边形

3.8K60

OpenLayers入门(一)

OpenLayers简介 OpenLayers(https://openlayers.org/)是一个用来帮助开发Web地图应用的高性能的、功能丰富的JavaScript类库,可以满足几乎所有的地图开发需求...ol/layer' import {XYZ, OSM} from 'ol/source' import { fromLonLat } from 'ol/proj' // fromLonLat方法能将坐标从经度...this.tooltipOverlay.setPosition(f.getGeometry().getCoordinates()) }) }) 这样当鼠标移上去就会显示tooltip: 接下来看看如何绘制多边形..., type: 'Circle',//没错,还是Circle geometryFunction: createBox() }) 其他类型只要设置对应的type就可以了,比如绘制不规则多边形为...获取地图当前区域的范围 为了性能考虑,如果是在地图上显示要素的话最好是只显示当前显示区域内的要素,要显示的数据一般从后端进行请求,那么可以把当前区域的范围发送给后端,后端只返回这个区域内的数据就好了,那么就需要获取当前的范围

4.7K40

百度地图电子围栏功能的实现

本篇内容实现的过程中将会解决如下几个问题: (1)实现百度地图鼠标绘制多边形功能; (2)实现根据给定的坐标绘制多边形的功能; (3)判断某个坐标点是否在绘制的区域内; (4)绘制坐标点如何在数据库中保存...1.2 获取绘制多边形个个顶点的坐标   我们画出多边形的最终目的其实都是一样的,想把这个区域的坐标信息保存到数据库,然后下次能够根据这个区域的坐标信息,把这个区域显示在地图上。...这里的添加鼠标绘制工具监听时间,用于获取绘制结果,实际上就是在这里把多边形的顶点放入overlays这个对象中,那么我们如何获取这些点的坐标呢,还是从官方文档里找答案,看下面: 1>在刚才的JavaScript...这样就可以获取多边形顶点坐标了。...2.已知经纬度坐标绘制多边形 接下来看一下已知一些坐标点如何绘制一个多边形,在代码中增加一个按钮 “绘制多边形” ,然后定义一个有坐标信息的数组: 代码如下: <input type="button

3.4K40

从零开始搭建GIS开发小框架(二)——绘制多边形

2 多边形功能实现 Polygon Function 功能菜单: 绘制多边形对象、给图形对象增加右键菜单: 多边形对象的右键菜单打开弹窗,实现窗体传值(基本玩法): 多边形对象的Tag属性和Name...属性可以存放用户自定义属性描述,我在Tag里存放完整的Json数据: 3 核心功能代码 Code 在绘制多边形方法里同时实现了坐标点缓存处理。...当开始绘制多边形时,点击左键的时候新增一个界址点,获取该点的坐标(OpenCycleMap地图是WGS84坐标),并将坐标点加到PolygonPointList中,从点击第二个点A2开始,每点击创建一个点...AN,绘制两点AN和AN-1之间的直线,作为多边形的边线;点击右键时,绘制结束,创建直线连接最后一个点和第一个点,形成封闭多边形,完成样式设置,例如颜色填充等,最后将所有的界址点数据赋值给多边形对象p,...由p生成格式化的Json数据集。

1K20

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

坐标筛选,pointsWithinPolygon筛查出在多边形内的坐标、GRIDS:网格,生成各种网格classification:分类,nearestPoint,寻找最靠近目标的点BOOLEANS:...booleanPointInPolygon(point,polygon) //点是否在面中官方文档已经讲的非常详细,不必多说拓扑运算分析拓扑关系及运算分析:关系描述缓冲区分析(Buffer)包含所有的点在一个指定距离内的多边形和多多边形...如辐射范围,使用该方法凸壳分析(ConvexHull)包含几何形体的所有点的最小凸壳多边形(外包多边形)登高先交叉分析(Intersection)A∩B 交叉操作就是多边形AB中所有共同点的集合联合分析...Turf.js应用案列Openlayers +    Turf.js 实现云朵标注这里用Turf.js 只是为了用union方法, 将多个圆拼凑起来. ...OL4结合turf.js实现等值线使用leafletjs、turfjs前端绘制点线面缓冲区参考资料:利用Turf.js实现点线面几何体的拓扑关系判断  https://blog.csdn.net/u013240519

2.4K10

hover 背后的数学和图形学

射线法可以适用于任意多边形,包括有洞(hole)的多边形,具体的推导过程就不贴了,感兴趣的话可以自己查一下相关资料。 射线法涉及以下三个问题: 如何获取多边形的各条边的端坐标?...如果多边形的某条边是曲线怎么办? 如何判断两条线段有交点? 如何获取多边形的各条边的端坐标? 这其实并不是一个图形绘制领域的问题,而是数据制备领域的问题。...),如下: [v1,v2,v3,v4,v5,v6] 前端拿到顶点数组需要使用三角剖分算法将其切割成4个三角形,最后才给到 WebGL 绘制。...也就是说,在数据制备阶段就已经将多边形的每个顶点坐标确定了,然后依序两两相接就是多边形的各条边。...当然也不排除有的技术团队在数据制备阶段就进行了三角剖分,但这么干的比较少,因为剖分数据量会增长很多,会带来额外的存储成本和网络通信耗时。 如果多边形的某条边是曲线怎么办? 这是一个伪命题。

1.3K10

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

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

1.5K20

ArcGis多边形覆盖面不理想?来让我告诉你怎么改

先上效果图 一、前言 在Vue ArcGis鼠标打点、中心打点绘制多边形这篇文章里给大家讲了ArcGis如何绘制多边形,那在ArcGis绘制多边形多边形边界不理想怎么办?想调整多边形覆盖面怎么办?...// 监听地图(mapView)点击过程 mapView.on("click", (event) => { this.mapLayerController(event); }); 复制代码 三、获取...hitTest hitTest 返回与指定屏幕坐标相交的每一层的最顶层要素。...当地图点击事件与以上相关图层中的元素相交时会返回相关结果,而我们将我们的多边形绘制在了GraphicsLayer层,当点击多边形时hitTset会返回我们当前点击的这个多边形实例。...,处理已绘制好的的多边形图形 在hitTest返回的多边形实例内判断绘制多边形时打的点位数组是否为空,因为编辑图形时update会创建一个新的可编辑的多边形,需要先删除已绘制好的多边形图形。

88540

烧脑!JS+Canvas 带你体验「偶消奇不消」的智商挑战

然后将在屏 Canvas 的宽度和高度按照所获取的像素比ratio进行放大,在绘制文字、图片的时候,坐标点 x、y 和所要绘制图形的 width、height均需要按照像素比 ratio 进行缩放。...如何绘制任意多边形图片? 任意一个多边形图形,是由多个平面坐标点所组成的图形区域。 在游戏画布内,我们以左上角为坐标原点 {x: 0, y: 0} ,一个多边形包含多个单位长度的平面坐标点。...绘制多边形代码实现如下: /** * 绘制多边形 */ export default class Block { constructor() { } init(points, itemWidth...这里我们就需要去实现如何判断玩家触摸事件的x,y坐标在哪个多边形图形内部区域,从而判断出玩家选中的是哪一个多边形图形。...在开放数据域内使用 wx.getFriendCloudStorage(obj)拉取当前用户所有同玩好友的托管数据 展示关系链数据 如果想要展示通过关系链 API 获取到的用户数据,如绘制排行榜等业务场景

1.4K30

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

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

1.1K30

HTML5-Canvas之矩阵和多边形绘制(2)

上篇文章我们了解了canvas的定义、获取和基础的绘图操作,其中的绘图功能我们讲解了线段绘制、上色、描边等方面知识点。 今天我们来讲讲矩形(Rectangle)和多边形绘制。...依旧表示需绘制的矩形的起始点坐标(相对canvas原点),width 和 height表示需绘制的矩形宽高。...,三个参数表示渐变结束圆形的中点坐标和半径。...fillStyle=”blue” 也被清空掉了,从而绘制了一个黑色的矩形: 如果不想清除掉之前定义的样式,我们可以通过clearRect来实现: 执行结果如下: ---- 最后聊一下多边形绘制...,其实现非常简单,先来个例子: 可见我们这里通过lineTo绘制多边形的每条边(注意起点跟终点是同一个坐标),然后通过 stroke() 来描边、fill() 来填充,其执行效果如下: 眼尖的朋友会发现该多边形左上角的俩条描边没有接在一起

1.3K20

使用 C# Graphics 绘图来绘制一个足球

,使用 DrawCurve 方法绘制曲线,使用 DrawPolygon 方法绘制多边形,等等。...足球绘制 使用 DrawPolygon 方法绘制多边形,我们可以简单的绘制一个足球图案。绘制足球就要绘制五边形,或者六边形。...可以使用 Math.Cos 和 Math.Sin 函数来计算五边形的顶点坐标,比如已知五边形的中心坐标点 Point(centerX,centerY) 和边长 sideLength ,我们可以通过下面的公式计算获取五个顶点的坐标...point5 }; g.DrawPolygon(Pens.Black, points); g.FillPolygon(new SolidBrush(Color.Black), points); 但是绘制了中间的五边形...,就需要根据五边形继续计算五个六边形的坐标,这样就非常麻烦了,经过几番尝试,我找到了一种比较简单的绘制足球的方法:首先绘制一个六边形,然后选择一个外部的圆心对这个六边形坐标进行旋转 72 度,这样旋转几次

52920

从零开始搭建一个GIS开发小框架(五)——GMap.Net组件WPF版使用体验

加载高德在线地图 加载OpenCycleMap离线瓦片地图 CGCS2000坐标转WGS84坐标 添加自定义图标的标记点 绘制多边形多边形对象实现双击事件和右键菜单功能,实现多边形对象带属性和属性传值...Polygon 以绘制多边形这个最干货的功能为例介绍一下WPF的实现思路以及与Winforms版本的区别。...WPF里绘制线条、绘制多边形、给多边形对象添加右键事件代码示例如下: //绘制线条 GMapRoute _routeOnPolygon = new GMapRoute(latlngs); _routeOnPolygon.ZIndex...new Path() { StrokeThickness = 1, Stroke = Brushes.Red }; MainMap.Markers.Add(_routeOnPolygon); //绘制多边形...而是注册到polygon.Shape上,因此MouseRightButtonDown 方法的sender也是polygon.Shape而不是polygon本身,所以MouseRightButtonDown 能获取到的传值只能是通过

1.1K20

你必须知道的webgl基础

顶点着色器从传过来的矩阵中,获取到模型的坐标,加工到画面上显示出来。也就是说,操作坐标变换的矩阵,就可以决定模型在画面上如何绘制。...点 线段 三角形 WebGL就是使用三角形在画面上绘制一些东西。这个三角形就是一个多边形,一个多边形至少是将三个顶点连接画出来的三角形,所以一个绘制一个多边形,最少需要三个顶点。...想要绘制复杂构造的模型的话,需要准备大量的非常小的多边形。用的多边形越少,绘制的模型的棱角就越明显。...想要绘制精美的模型,就需要更多的多边形,当然,这些多边形的数量增加的话,定点数量也会成倍成倍的增加,坐标计算的负荷就越大。...顶点链接顺序和遮挡剔除 3D渲染的世界里,看不到的东西不绘制的是减轻负担的最普通的方法。这就叫做遮挡剔除,如果设定了遮挡剔除,就只会绘制外侧看得见的多边形,内侧的所有多边形就都不再进行绘制了。

1.2K10

iOS开发——Core Graphics绘图

绘图就好比在画布上拿着画笔机械的进行画画,通过制定不同的参数来进行不同的绘制。...iOS常见的图形绘制 画线 画圆、圆弧、贝塞尔曲线 画矩形、椭圆形、多边形 绘制图片 绘制文字 ---- iOS绘图基础 在绘图之前,我们先来了解一下几个基本的概念 context:上下文,ios绘图的方法都需要传一个上下文...context,这个context在重写uiview的drawRect的方法里调用UIGraphicsGetCurrentContext()获取 path:路径,ios绘图可以想象为你拿着一支笔去画图,...画几条线或几个点从而形成一个路径,之后可以利用理解去填色或者描边 stroke,fill 描边和填充,每个路径都需要填充或者描边才能在视图中看见,他们都各自有很多样式可以设置,常见的有颜色、粗细、渐变...UIView 重写-(void)drawRect:(CGRect)rect方法 -(void)drawRect:(CGRect)rect{ [super drawRect:rect]; //获取

2.4K20

Python绘制雷达图

绘制雷达图需要先建立极坐标系,关于极坐标系可以自己了解一下。建立好极坐标可以在极坐标系中绘制折线图、柱状图等,大部分情况,都是用折线图,形成一个不规则的闭合多边形。...在subplot()函数中,将polar参数设置成True,得到的图形才是极坐标。 极坐标系设置完成,使用子图对象ax调用折线图函数plot(),即可绘出雷达图。...在极坐标系中,极径值相等的点在一个圆上,所以绘制的雷达图中,网格线默认都是圆形的。如果要绘制多边形的雷达图,则需要将圆形的网格线隐藏,然后根据刻度范围绘制多边形的网格线。...首先使用plot()函数,根据刻度范围,绘制出同心的多个多边形和多个维度方向的极轴,作为雷达图的网格线,形成一张“网”。...调用grid()方法,传入参数False,将极坐标系中的的圆形网格线隐藏。 修改完网格线,即可达到多边形的效果。

3.3K10
领券