openlayers繪制圓形的幾種方式

情況說明：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);