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. 分布式理论(一) —— CAP 定理

    目录: 什么是 CAP 定理 为什么只能 3 选 2 能不能解决 3 选 2 的问题 引用 1. 什么是 CAP 定理 2000 年的时候,Eric Brewer 教授提出了 CAP 猜想,2年后,被 ...

  2. 【Java基础】6、java中使用switch-case的用法及注意事项超全总结

    1.switch-case注意事项: switch(A),括号中A的取值只能是整型或者可以转换为整型的数值类型,比如byte.short.int.char.还有枚举:需要强调的是:long和Strin ...

  3. 你真的了解 Unicode 和 UTF-8 吗?

    目录 引言 ASCII 码 什么是 ASCII 码? ASCII 码都包含哪些字符? ASCII 码的局限在哪里? Unicode 什么是 Unicode ? Unicode 的实现方式有几种? Un ...

  4. redis主从|哨兵|集群模式

    关于redis主从.哨兵.集群的介绍网上很多,这里就不赘述了. 一.主从 通过持久化功能,Redis保证了即使在服务器重启的情况下也不会损失(或少量损失)数据,因为持久化会把内存中数据保存到硬盘上,重 ...

  5. 1-1 sacc(scss)入门

    定义: CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些编程的特性,将 CSS 作为目标生成文件,然后开发者就只要使用这种语言进行编码工作. 通俗的说,“ ...

  6. HTML5+CSS (简易nav设计)

    HTML部分: <!DOCTYPE html><html> <head> <title></title> <meta charset= ...

  7. [iOS] Win8下在Vmware11中安装使用苹果系统OS X 10.10

      近来因为人事变动,领导打算安排我做 iOS 的项目,所以需要花一些时间提前准备一下iOS相关的东西.因为自己手头上并没有 Mac(过年为了闲的时候能玩玩游戏买了联想,唉),想想不能只靠每天在公司的 ...

  8. gitlab查看项目ID/projectId

    背景 最近有个CI打包平台,项目projectId弄错,导致拉取到错误仓库.笔者一直通过项目名称(project name)访问,首次接触project id,搜索一圈才找到快捷查看方法,记录于此. ...

  9. 重学C语言---02C语言概述

    1.第一个C语言实例 #include<stdio.h> int main(void) /*一个简单的C程序*/ { int num; /*定义一个num的变量*/ num = ; /*为 ...

  10. 通过递增快照备份 Azure 非托管 VM 磁盘

    概述 Azure 存储提供创建 Blob 快照的功能. 快照将捕获该时间点的 Blob 状态. 本文介绍有关如何使用快照维护虚拟机磁盘备份的方案. 如果选择不使用 Azure 备份和恢复服务,但想要为 ...