1.接口返回圆心坐标和半径,直接通过new Circle(center,radius)添加圆形feature变小问题。

  解决办法:

  new  Feature()的geometry参数不能直接赋值new  Circel()得到的geometry,

  要通过‘ol/geom/Polygon.js’中的fromCircle方法将new  Circel()得到的geometry转化一遍然后赋值给new  Feature()的geometry。

  另:如果接口直接返回的坐标点画圆,则使用‘ol/geom/Polygon.js’中的circular方法。

import {circular as circularPolygon, fromCircle as fromCirclePolygon} from CC;
eg1:
let lng = parseFloat(d[0].lng);
let lat = parseFloat(d[0].lat);
let radius = parseFloat(d[0].radius);
let circle = new Circle(transform([lng, lat], 'EPSG:4326', 'EPSG:3857'), radius);
feature = new Feature({
position: transform([lng, lat], 'EPSG:4326', 'EPSG:3857'),
radius: radius,
type: 'circle',
id: 'N',
geometry: fromCirclePolygon(circle)
}) eg2:
let lng = item.coordinateList[0].lng;
let lat = item.coordinateList[0].lat;
let radius = item.coordinateList[0].radius;
let circle4326 = circularPolygon([lng, lat],radius,64);
let circle3857 = circle4326.clone().transform('EPSG:4326', 'EPSG:3857');
feature = new Feature(circle3857);

  

2.测距不准问题。

  解决办法:

  使用'ol/sphere.js'中的getLength()方法计算。

  

/*格式化测量长度
*@params line: type geometry
*/
formatLength (line) {
//定义长度变量
let length = getLength(line);
let output;
if (length > 100) {
output = `${(Math.round(length / 1000 * 100) / 100)} 公里`;
} else {
output = `${(Math.round(length * 100) / 100)} 米`;
}
return output;
},

  

openlayers5实战--踩坑总结的更多相关文章

  1. Android 上传开源项目到 jcenter 实战踩坑之路

    本文微信公众号「AndroidTraveler」首发. 背景 其实 Android 上传开源项目到 jcenter 并不是一件新鲜事,网上也有很多文章. 包括我本人在将开源项目上传到 jcenter ...

  2. deno+mongo实战踩坑记

    自从 deno 1.0 发布以来,有关 deno 的文章很多,大多数都是在讨论怎么安装 deno .deno 有哪些特点 .deno 和 node 有哪些异同.deno是不是 node 的替代品等.咱 ...

  3. swagger实战踩坑1

    1.swagger error 有详细的错误信息 自己根据详细信息找问题 2.swagger error 无详细的错误信息 Controller是否重名=>重名,指定不同的   [Route(& ...

  4. nuxt.js实战踩坑记录

    读万卷书不如行万里路,必须实践出真理! 看官方文档安装项目vue init nuxt-community/starter-template <project-name>注意:这是新手项目不 ...

  5. node+express第一次实战踩坑记录

    读万卷书不如行万里路,必须实践出真理! 问题1:项目结构该搭建成什么样? 我一个node.js小白,完全没有想法!再见! 找找别人的项目看看别人放的什么项目结构,再结合自己的项目需求我来想想!

  6. Asp.Net Core 2.0 项目实战(5)Memcached踩坑,基于EnyimMemcachedCore整理MemcachedHelper帮助类。

    Asp.Net Core 2.0 项目实战(1) NCMVC开源下载了 Asp.Net Core 2.0 项目实战(2)NCMVC一个基于Net Core2.0搭建的角色权限管理开发框架 Asp.Ne ...

  7. 新书推荐《再也不踩坑的Kubernetes实战指南》

      <再也不踩坑的Kubernetes实战指南>终于出版啦.目前可以在京东.天猫购买,京东自营和当当网预计一个星期左右上架. 本书贴合生产环境经验,解决在初次使用或者是构建集群中的痛点,帮 ...

  8. NET Core2.0 Memcached踩坑,基于EnyimMemcachedCore整理MemcachedHelper帮助类。

    DotNetCore2.0下使用memcached缓存. Memcached目前微软暂未支持,暂只支持Redis,由于项目历史原因,先用博客园开源项目EnyimMemcachedCore,后续用到的时 ...

  9. 微信小程序踩坑集合

    1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...

随机推荐

  1. 设置了winform的背景图片随窗体的变化而变化

    private void mainform_Paint(object sender, PaintEventArgs e) { Graphics g = e.Graphics; System.Drawi ...

  2. 手机调试 --- 通过chrome测试手机网站

     移动端有时候我们要调试手机网站. Chrome怎么调试手机页面呢? 毕竟有时候手机支持的JS度跟PC不一样.最开始就遇见了.手机端浏览器不支持执行string.includes. PC端支持该函数, ...

  3. SQL语句大全从基础到熟练(不含数据库高端操作)日常用户 三、

    前言 昨天晚上回家忘记带钥匙导致在楼下站街三小时,鬼天气热的不要不要的然后我就在车里坐了会之后就.....zzZZ,哈哈睡的挺香的毕竟累了一天了 上两篇文章都是介绍的语法语句,本篇文章介绍下函数的使用 ...

  4. Spring基础(4) : bean重写

    @Configuration public class Config1 { @Bean() public Person getP(){ Person p = new Person(); p.setNa ...

  5. 当堆遇到STL 代码焕发光芒

    来自度娘的释义,堆的含义大概是这样的: 感性理解: 堆(英语:heap)是计算机科学中一类特殊的数据结构的统称.堆通常是一个可以被看做一棵树的数组对象.堆总是满足下列性质: 堆中某个节点的值总是不大于 ...

  6. [android] 新闻客户端主界面部分

    当我们使用activity加fragment的时候,每个界面都要建立一个fragment,每个fragment里面都要重写onCreate(),onCreateView(),onActivityCre ...

  7. 自己写一个java的mvc框架吧(四)

    自己写一个mvc框架吧(四) 写一个请求的入口,以及初始化框架 上一章写了获取方法的入参,并根据入参的参数类型进行数据转换.这时候,我们已经具备了通过反射调用方法的一切必要条件.现在我们缺少一个htt ...

  8. HDFS 操作命令总结

    1 hadoop fs   这个是FS  shell 提供的 .上传下载文件  查看文件大小 改变文件权限都用这个命令. 具体命令的 用法可以到这个文档来查询 http://hadoop.apache ...

  9. 继续畅通工程(hdu1879)并查集

    继续畅通工程 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Sub ...

  10. layui 三级菜单

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...