ICode9

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

openlayers绘制圆形的几种方式

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

标签: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

专注分享技术,共同学习,共同进步。侵权联系[admin#icode9.com]

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

ICode9版权所有