openlayers3（五）根据坐标点画圆、线、多边形

这个是上一篇博客中的电子围栏中的一部分功能，但是因为有点小坑啥的我自己就单独拎出来写了。所以我写的也算是基于上一篇：openLayers3（四）电子围栏—使用画图工具绘图

话不多说，代码附上

代码

class drawFence{//转换坐标点（多）transPoints(points) {let arr = points.split(';');let point = [];arr.forEach(item = > {let newPoint = item.split(',');point.push(newPoint)})let _points = point.map(item = > {item = [parseFloat(item[0]), parseFloat(item[1])]item = ol.proj.transform(item, 'EPSG:4326', 'EPSG:3857');return item;})return _points;}//转换圆的transPoint(point) {let item = point.split(',')item = [parseFloat(item[0]), parseFloat(item[1])]let _point = ol.proj.transform(item, 'EPSG:4326', 'EPSG:3857');return _point;}/*** * @param {*} fenceId 围栏id* @param {*} center 中心坐标* @param {*} radius 半径* @param {*} name 围栏名*/showCircle(fenceId, center, radius, name) {let centerPoint = this.transPoint(center)radius = parseFloat(radius)var circleFeature = new ol.Feature({ //路线geometry: new ol.geom.Circle(centerPoint, radius),});circleFeature.setId(fenceId)//将所有矢量图层添加进去this.source.addFeature(circleFeature);}/**** @param {*} fenceId 围栏id* @param {*} points 多边形坐标点* @param {*} name 围栏名*/showPolygon(fenceId, points, name) {let _points = this.transPoints(points)_points = [_points]//多边形的数据格式是[[[lng,lat],[lng,lat]……]]外围两个中括号var polygonFeature = new ol.Feature({ //路线geometry: new ol.geom.Polygon(_points)});polygonFeature.setId(fenceId)this.source.addFeature(polygonFeature);console.log(this.source.getFeatures())}/*** * @param {*} fenceId 围栏id* @param {*} points 线型的点坐标* @param {*} name 围栏名字*/showPolyline(fenceId, points, name) {let _points = this.transPoints(points)var lineFeature = new ol.Feature({ //路线geometry: new ol.geom.LineString(_points, 'XY'),});lineFeature.setId(fenceId)//将所有矢量图层添加进去this.source.addFeature(lineFeature);}//回显围栏showFence(obj) {let {fenceId,name,type,center,radius,points} = obj;if (type == 'polygon') {this.showPolygon(fenceId, points, name)}if (type == 'circle') {this.showCircle(fenceId, center, radius, name)}if (type == 'polyline') this.showPolyline(fenceId, points, name)}}

这里不得不多说一句，这个多边形外边包着两个中括号，我一开始直接用的线性坐标点格式，死活都出不来，还是在上一篇画图那里画多边形成功后的回调中获取坐标点才发现他外边有两层。

使用


$('#showPolygonFence').on('click', function () {var obj = {fenceId: '12',name: '围栏1',center: '',radius: '',type: 'polygon',points: '113.963223,22.549299;113.969655,22.553504;113.972242,22.547797;113.967176,22.544425;113.95945,22.544959;113.95981,22.551235;113.95981,22.551235'}fence.showFence(obj)
})
$('#showCircleFence').on('click', function () {var obj = {fenceId: '121',name: '围栏2',center: '113.959127,22.552036',radius: '152.96',type: 'circle',points: ''}fence.showFence(obj)
})
$('#showPolygonFence').on('click', function () {var obj = {fenceId: '12',name: '围栏3',center: '',radius: '',type: 'polyline',points: '113.960623,22.546082;113.958197,22.544029;113.956526,22.543245;113.953562,22.544563'}fence.showFence(obj)
})

效果

openlayers3（五）根据坐标点画圆、线、多边形相关推荐

python根据坐标点画线_Openlayers 根据坐标点画点线圆多边形
根据坐标点画点线圆多边形,代码如下 Geometry type Point LineString Polygon Circle None Bezier 绘制绘制圆形绘制线段绘制多边形绘制单个点 ...
Openlayers 根据坐标点画点线圆多边形
根据坐标点画点线圆多边形,代码如下 Geometry type Point LineString Polygon Circle None Bezier 绘制绘制圆形绘制线段绘制多边形绘制单 ...
openlayers6 踩坑系列（三）绘制和编辑（矩形，圆，多边形，点，线）
重要:博客内使用地图全替换为WMap,想使用的请参考我这篇博客(WMap) 最近在做矢量图形这一块,发现圆形和多边形,都可以使用openlayers自带的Modify类进行编辑,然后随意放大缩小旋转, ...
计算机图形学E3——OpenGL 中点画圆
其他计算机图形学实验见链接 #include<iostream> #include<GL/glut.h> using namespace std;float bx, by, ...
c语言计算机图形来画八分画圆,计算机图形学：中点画圆算法
在平面解析几何中,圆的方程可以描述为(x – x0)2 + (y – y0)2 = R2,其中(x0, y0)是圆心坐标,R是圆的半径,特别的,当(x0, y0)就是坐标中心点时,圆方程可以简化为x2 ...
依据地图上的经纬度坐标计算某个点到多边形各边的距离
http://www.th2w.com/article/85 依据地图上的经纬度坐标计算某个点到多边形各边的距离最近公司有一个需求:依据地图上的经纬度坐标计算某个点到多边形各边的距离. 主要原理: ...
牛客网暑期ACM多校训练营（第三场） J Distance to Work 计算几何求圆与多边形相交面积模板...
链接:https://www.nowcoder.com/acm/contest/141/J 来源:牛客网 Eddy has graduated from college. Currently, he ...
计算机图形学——八分法中点画圆
八分法中点画圆实现方法:从0°到45°开始画,其余部分进行求对称 1 .绘制X^2+Y^2=R^2的圆,将圆划分为⑧等份.我们从第二份开始绘制分析: 最大位移方向是Y方向,因此令y每增加1,x不变 ...
使用CAD圆和多边形内、外接圆命令绘制图形。使用CAD多线段命令绘制图形
如下图所示根据标注的尺寸,用CAD画图软件绘制出一样的图形: 目标对象操作工具操作系统:Windows10 CAD软件:CAD梦想画图(轻量级CAD.国产CAD软件) 步骤 1.先使用CAD圆命令 ...

openlayers3（五）根据坐标点画圆、线、多边形

代码

使用

效果

openlayers3（五）根据坐标点画圆、线、多边形相关推荐

最新文章

热门文章