zoukankan      html  css  js  c++  java
  • 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);
  • 相关阅读:
    vue中滚动页面,改变样式&&导航栏滚动时,样式透明度修改
    flatpickr插件的使用
    初始化react项目
    带框和三角的样式
    手机号掩码
    微信小程序中自定义modal
    js 发送短信验证码倒计时
    js模拟输入支付密码
    python接口自动化测试十三:url编码与解码
    python接口自动化测试十一:传参数:data与json
  • 原文地址:https://www.cnblogs.com/gislover/p/14056128.html
Copyright © 2011-2022 走看看