ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

openlayers绘制圆形的几种方式

2020-11-29 14:03:45  阅读:1420  来源: 互联网

标签:ol polygon EPSG 圆形 openlayers var new circle 绘制


情况说明:1、底图坐标系为EPSG:4326;2、根据给定的中心点坐标和半径绘制圆形;

方式一:利用ol api 把半径米单位转换为EPSG:4326坐标系上的单位,代码如下:

//绘制圆形缓冲区         var metersPerUnit = map.getView().getProjection().getMetersPerUnit();         var circleRadius = radius / metersPerUnit;         var circle = new ol.geom.Circle(center, circleRadius);         var polygon = new ol.geom.Polygon.fromCircle(circle);//转换为polygon,用于空间查询         var circleFeature = new ol.Feature({             geometry: polygon,         }); 效果图: 方式二:先绘制坐标系为EPSG:3857下的圆形,再进行坐标转换,代码如下:        var _center = ol.proj.transform(center, "EPSG:4326", "EPSG:3857");         var circle = new ol.geom.Circle(_center, radius);         var polygon = new ol.geom.Polygon.fromCircle(circle);//用于空间查询geometry传递         polygon = polygon.clone().transform("EPSG:3857", "EPSG:4326");         var circleFeature = new ol.Feature({             geometry: polygon,         }); 效果图:

 

方式三:利用开源turf.js 进行绘制,代码如下:

        var options = { units: "meters" };         var circle = turf.circle(center, radius, options);         var circleFeature = new ol.format.GeoJSON().readFeature(circle);

 

 

标签:ol,polygon,EPSG,圆形,openlayers,var,new,circle,绘制
来源: https://www.cnblogs.com/gislover/p/14056128.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有