精华内容
下载资源
问答
  • openlayers绘制圆形时设置半径以米为单位
    2020-12-23 16:48:23

    ol.geom.Circle半径参数radius单位是什么?

    ol.geom.Circle方法有三个参数其中radius便是半径,但是官方文档没有明确说明其单位,只是说radius是number类型,很坑。

    ol.geom.Circle设置半径的单位是随投影的单位。

    然后继续看api文档发现 setRadius 这个方法是设置图形的半径。然后一句关键的话,官网原话:

    Set the radius of the circle. The radius is in the units of the projection.

    翻译过来也就是ol.geom.Circle设置半径的单位是随投影的单位。

    那么我们就有思路了,就先获取到当前投影然后在获取当前投影的单位,在进行单位转换。

    获取当前投影的单位getUnits

    在ol.proj.Projection找到getUnits方法可以获取当前投影的单位

    投影有哪些单位 ?

    Projection units: 'degrees', 'ft', 'm', 'pixels', 'tile-pixels' or 'us-ft'.

    ol.proj.Units可以查看有哪些单位,发现其中有'm'就是米这个单位。

    单位转换 ?

    那么如果将当前投影的单位转换成'm'米呢?

    继续寻找api发现在ol.proj.Projection有getMetersPerUnit()方法

    Get the amount of meters per unit of this projection.

    这样不管当前投影是什么单位都可以设置以米为单位的半径值了。

    因为ol.geom.Circle设置半径的单位是随投影的单位,所以需要将单位m转换成投影的单位

    到此问题已经解决,代码如下:/**

    * 获取转换后单位的半径

    * @param {Number} radius 以米为单位的半径的值

    * @returns {Number} circleRadius 以投影的单位为单位的半径的值

    */

    let getRadius = (radius)=>{

    let metersPerUnit = map.getView().getProjection().getMetersPerUnit();

    let circleRadius = radius / metersPerUnit;

    return circleRadius;

    }

    更多相关内容
  • How to get Circle radius in metersMay be this is existing question, but i am not getting proper result. I am trying to create Polygon in postgis with same radius &... center getting from openlayers c...

    How to get Circle radius in meters

    May be this is existing question, but i am not getting proper result. I am trying to create Polygon in postgis with same radius & center getting from openlayers circle.

    To get radius in meters I followed this.

    Running example link.

    var radiusInMeters = circleRadius * ol.proj.METERS_PER_UNIT['m'];

    After getting center, radius (in meters) i am trying to generate Polygon(WKT) with postgis (server job) & drawing that feature in map like this.

    select st_astext(st_buffer('POINT(79.25887485937808 17.036647682474722 0)'::geography, 365.70644956827164));

    But both are not covering same area. Can any body please let me know where i am doing wrong.

    Basically my input/output to/from Circle will be in meters only.

    解决方案

    ol.geom.Circle might not represent a circle

    OpenLayers Circle geometries are defined on the projected plane. This means that they are always circular on the map, but the area covered might not represent an actual circle on earth. The actual shape and size of the area covered by the circle will depend on the projection used.

    This could be visualized by Tissot's indicatrix, which shows how circular areas on the globe are transformed when projected onto a plane. Using the projection EPSG:3857, this would look like:

    w3Hl0.jpg

    The image is from OpenLayer 3's Tissot example and displays areas that all have a radius of 800 000 meters. If these circles were drawn as ol.geom.Circle with a radius of 800000 (using EPSG:3857), they would all be the same size on the map but the ones closer to the poles would represent a much smaller area of the globe.

    This is true for most things with OpenLayers geometries. The radius, length or area of a geometry are all reported in the projected plane.

    So if you have an ol.geom.Circle, getting the actual surface radius would depend on the projection and features location. For some projections (such as EPSG:4326), there would not be an accurate answer since the geometry might not even represent a circular area.

    However, assuming you are using EPSG:3857 and not drawing extremely big circles or very close to the poles, the Circle will be a good representation of a circular area.

    ol.proj.METERS_PER_UNIT

    ol.proj.METERS_PER_UNIT is just a conversion table between meters and some other units. ol.proj.METERS_PER_UNIT['m'] will always return 1, since the unit 'm' is meters. EPSG:3857 uses meters as units, but as noted they are distorted towards the poles.

    Solution (use after reading and understanding the above)

    To get the actual on-the-ground radius of an ol.geom.Circle, you must find the distance between the center of the circle and a point on it's edge. This could be done using ol.Sphere:

    var center = geometry.getCenter()

    var radius = geometry.getRadius()

    var edgeCoordinate = [center[0] + radius, center[1]];

    var wgs84Sphere = new ol.Sphere(6378137);

    var groundRadius = wgs84Sphere.haversineDistance(

    ol.proj.transform(center, 'EPSG:3857', 'EPSG:4326'),

    ol.proj.transform(edgeCoordinate, 'EPSG:3857', 'EPSG:4326')

    );

    More options

    If you wish to add a geometry representing a circular area on the globe, you should consider using the method used in the Tissot example above. That is, defining a regular polygon with enough points to appear smooth. That would make it transferable between projections, and appears to be what you are doing server side. OpenLayers 3 enables this by ol.geom.Polygon.circular:

    var circularPolygon = ol.geom.Polygon.circular(wgs84Sphere, center, radius, 64);

    There is also ol.geom.Polygon.fromCircle, which takes an ol.geom.Circle and transforms it into a Polygon representing the same area.

    展开全文
  • ol.geom.Circle可能不代表圆圈OpenLayers Circle几何在投影平面上定义。 这意味着它们在地图上始终是圆形的,但所覆盖的区域可能并不代表地球上的实际。 圆圈所覆盖区域的实际形状和大小取决于所使用的投影。这...

    ol.geom.Circle可能不代表圆圈

    OpenLayers Circle几何在投影平面上定义。 这意味着它们在地图上始终是圆形的,但所覆盖的区域可能并不代表地球上的实际圆。 圆圈所覆盖区域的实际形状和大小取决于所使用的投影。

    这可以通过天梭的指标来显示,其显示当投影到平面上时地球上的圆形区域如何变换。 使用投影EPSG:3857,这看起来像:

    图像来自OpenLayer 3的天梭示例 ,显示半径为800 000米的区域。 如果将这些圆圈绘制为半径为800000的ol.geom.Circle (使用EPSG:3857),则它们在地图上的大小都相同,但靠近极点的那些将代表地球的小得多的区域。

    对于OpenLayers几何体的大多数事情都是如此。 几何的半径,长度或面积都在投影平面中报告。

    因此,如果您有ol.geom.Circle ,获取实际表面半径将取决于投影和ol.geom.Circle位置。 对于某些投影(例如EPSG:4326),由于几何图形甚至可能不代表圆形区域,因此不会有准确的答案。

    但是,假设您正在使用EPSG:3857而不是绘制极大的圆圈或非常接近极点,圆圈将是圆形区域的良好表示。

    ol.proj.METERS_PER_UNIT

    ol.proj.METERS_PER_UNIT只是米和其他单位之间的转换表。 ol.proj.METERS_PER_UNIT['m']将始终返回1 ,因为单位'm'是米。 EPSG:3857使用米作为单位,但如上所述,它们向极点扭曲。

    解决方案(阅读后了解并理解上述内容)

    要获得ol.geom.Circle的实际地面半径,您必须找到圆的中心与其边缘上的点之间的距离。 这可以使用ol.Sphere来完成:

    var center = geometry.getCenter()

    var radius = geometry.getRadius()

    var edgeCoordinate = [center[0] + radius, center[1]];

    var wgs84Sphere = new ol.Sphere(6378137);

    var groundRadius = wgs84Sphere.haversineDistance(

    ol.proj.transform(center, 'EPSG:3857', 'EPSG:4326'),

    ol.proj.transform(edgeCoordinate, 'EPSG:3857', 'EPSG:4326')

    );

    更多选择

    如果要在地球上添加表示圆形区域的几何图形,则应考虑使用上述天梭示例中使用的方法。 也就是说,定义具有足够点的正多边形以显得平滑。 这将使它可以在投影之间转换,并且看起来就像你在做服务器端。

    var circularPolygon = ol.geom.Polygon.circular(wgs84Sphere, center, radius, 64);

    还有ol.geom.Polygon.fromCircle ,它接受ol.geom.Circle并将其转换为代表相同区域的Polygon。

    展开全文
  • Openlayers3 绘制

    2019-04-26 01:23:32
    NULL 博文链接:https://jjxliu306.iteye.com/blog/2371473
  • 在平面坐标系3857 下 使用ol.geom.Circle(center,radiu) 绘制的会比实际测量小一圈, 这种情况下需要指定地球参数来获得准确的圆形: ol.geom.Polygon.circular(sphere, center, radius,opt_n) 其中sphere 为...

    在平面坐标系3857 下 使用 ol.geom.Circle(center,radiu) 绘制的圆会比实际测量小一圈,

    这种情况下可以使用指定地球参数来获得准确的圆形:

    ol.geom.Polygon.circular(sphere, center, radius, opt_n) 

    其中sphere 为椭球半径 4326 坐标系的sphere 为 ol.Sphere(6378137)

         center 为中心点经纬度坐标

        radius 为半径距离,单位米

        opt_n 为割圆步长默认32

         circle4326 = new ol.geom.Polygon.circular(new ol.Sphere(6378137),[110.1,35.2],300,64)

        circle3857 =  circle4326.clone().transform('EPSG:4326', 'EPSG:3857')

    展开全文
  • openlayer 画圆Circle实际半径解决方案

    千次阅读 2022-01-06 14:17:39
    openlayers 获取Circle实际半径距离
  • OpenLayers的API只交代了lineDash的类型是个数组,在没有其它了。每次用起来都感觉一脸懵逼。今天好好研究了一下,现跟大家分享一下: lineDash的值是一个数组类型,这个值是绘制的虚线重复的最小单位;开始画重点 ...
  • Openlayers6将(Circle)对象转化为多边形(Polygon) 在openlayers中如何通过一个(ol.geom.Circle)对象得到一个(ol.geom.Polygon)对象呢? 解决方法: openlayers的ol.geom.Polygon提供了fromCircle这个...
  • 我们需要实现如图所示的范围扩散的,同时需要准确的显示在的边上的文字,至于颜色。。这个想必不用我多提。 主要思路 如果offsetX、offsetY 文字 不可以到达的边上也就是我们想要的准确的位置,那我们是否可以...
  • openlayers开发&绘制点、、多边形

    千次阅读 2019-04-23 20:27:55
    这个例子是使用openlayers来绘制矢量点、、和polygon的。首先需要创建一个地图。如下的代码。注意这里接入的是osm地图,相应的设置地图飞至的中心点,缩放层级。 var flyPt= ol.proj.fromLonLat([106.671670,26....
  • Openlayers API整理

    2020-12-19 11:16:09
    'pixels'的值表示像素中的x值,默认为'fraction' anchorYUnits:'fraction',//指定锚点y值的单位。'fraction'的值表示y值是图标的'fraction'。'pixels'的值表示像素中的y值,默认为'fraction' color:color,//颜色、渐变...
  • Openlayers 概述

    2021-03-15 16:42:34
    Openlayers 概述 地图控件 导航控件、ZoomSlider、鼠标位置、比例尺、鹰眼、图层选择。 常用的到是鹰眼控件(使用场景:当地图进行缩放移动时,鹰眼控件可以清楚方便的知道地图所在位置)。 地图操作 1. 基础操作*...
  • OpenLayers API整理

    2022-02-10 16:32:23
    'pixels'的值表示像素中的x值,默认为'fraction' anchorYUnits:'fraction',//指定锚点y值的单位。'fraction'的值表示y值是图标的'fraction'。'pixels'的值表示像素中的y值,默认为'fraction' color:color,//颜色、渐变...
  • openLayers 3知识回顾

    2020-12-20 12:32:10
    openlayers 知识前段时间帮助同事重构一个地图类的项目,然后就学习了openLayer3这个框架,但是官网上没有中文版,也没有详细的例子解释,我只能遇到看不懂的就翻译成中文来用,为了方便以后再用这个ol,能够更快的...
  • Openlayers 6.2.1 浅尝心得(三)

    千次阅读 2020-04-03 17:10:18
    中国有句古话:“授之以鱼不如授之以渔”,所以今天我要记录的主要是关于 OpenLayers 的应用开发思路,而非某一具体的功能或代码。 OpenLayers 作为一个开源项目,我们首先需要知道的就是它的 官网 和 源码地址。...
  • openlayers加载地图 显示崇左区域轮廓线。轮廓线的数据是geojson格式,以openlayers添加图层的方式加载 将坐标点以聚合方式标注在地图上,并携带一些参数(这些参数为设备详情数据) 监听坐标点,地图放大时显示详情...
  • 然后在经度-180度(或+180)的地方从上到下剖开地球,然后按照赤道方向来展开成一张平面,那么这个平面的边长,就等于以地球赤道半径按照来计算的周长。近似的按照6378137米为地球半径来计算,那么整个赤道周长的...
  • 刷demo,仅为基础理解 注意,access token失效后,地图会调用失败 获取access token网址:Maps, geocoding, and navigation APIs & SDKs | Mapbox OpenLayers官方案例文档直达:OpenLayers Examples 部分归纳: map...
  • 4.2、OpenLayers默认使用的分辨率 一、瓦片地图简介  瓦片地图(切片地图)源于一种大地图解决方案,针对一整块非常大的地图进行切片,分成很多相同大小的小块地图,在用户访问的时候,再一块一块小地图加载,...
  • 而展开时,因为纬度范围有缩减,所以肯定只能以经度来展开,即在经度-180度的地方从上到下剖开地球,然后按照赤道方向来展开成一张平面,那么这个平面的长,就等于以地球赤道半径按照来计算的周长。 近似的按照...
  • OpenLayers 3 之 绘制图形(ol.interaction.Draw)详解

    万次阅读 多人点赞 2015-09-21 09:57:25
    在地图上绘制各种各样的矢量图形,很多应用...这次我们看看怎么利用 OpenLayers 3 绘制各种各样的图形,并添加到图层显示。在 OpenLayers 3 中负责绘制任务的是 ol.interaction.Draw 类,下面介绍这个类和功能的用法。

空空如也

空空如也

1 2 3 4
收藏数 73
精华内容 29
关键字:

openlayers圆半径单位