openlayers5实战--踩坑总结
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实战--踩坑总结的更多相关文章
- Android 上传开源项目到 jcenter 实战踩坑之路
本文微信公众号「AndroidTraveler」首发. 背景 其实 Android 上传开源项目到 jcenter 并不是一件新鲜事,网上也有很多文章. 包括我本人在将开源项目上传到 jcenter ...
- deno+mongo实战踩坑记
自从 deno 1.0 发布以来,有关 deno 的文章很多,大多数都是在讨论怎么安装 deno .deno 有哪些特点 .deno 和 node 有哪些异同.deno是不是 node 的替代品等.咱 ...
- swagger实战踩坑1
1.swagger error 有详细的错误信息 自己根据详细信息找问题 2.swagger error 无详细的错误信息 Controller是否重名=>重名,指定不同的 [Route(& ...
- nuxt.js实战踩坑记录
读万卷书不如行万里路,必须实践出真理! 看官方文档安装项目vue init nuxt-community/starter-template <project-name>注意:这是新手项目不 ...
- node+express第一次实战踩坑记录
读万卷书不如行万里路,必须实践出真理! 问题1:项目结构该搭建成什么样? 我一个node.js小白,完全没有想法!再见! 找找别人的项目看看别人放的什么项目结构,再结合自己的项目需求我来想想!
- 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 ...
- 新书推荐《再也不踩坑的Kubernetes实战指南》
<再也不踩坑的Kubernetes实战指南>终于出版啦.目前可以在京东.天猫购买,京东自营和当当网预计一个星期左右上架. 本书贴合生产环境经验,解决在初次使用或者是构建集群中的痛点,帮 ...
- NET Core2.0 Memcached踩坑,基于EnyimMemcachedCore整理MemcachedHelper帮助类。
DotNetCore2.0下使用memcached缓存. Memcached目前微软暂未支持,暂只支持Redis,由于项目历史原因,先用博客园开源项目EnyimMemcachedCore,后续用到的时 ...
- 微信小程序踩坑集合
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...
随机推荐
- Redis列表操作
列表类似于双向链表结构,可从序列两端推入或者弹出元素. (列表常用命令) RPUSH : RPUSH key-name value [value1 value2,...] ------------将 ...
- EPPlus批量插入图片到Excel
#region 测试EPPlus插入图片 public static void Createsheel2() { WebClien ...
- 无责任Windows Azure SDK .NET开发入门(二):使用Azure AD 进行身份验证
<編者按>本篇为系列文章,带领读者轻松进入Windows Azure SDK .NET开发平台.本文为第二篇,将教导读者使用Azure AD进行身分验证.也推荐读者阅读无责任Windows ...
- 音频播放时出现 Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD
<audio id="play" controls="controls" loop="loop"> <source src ...
- Median(vector+二分)
Median Time Limit: 5 Seconds Memory Limit: 65536 KB The median of m numbers is after sorting them in ...
- Linux常用基本命令( tree, pwd, cd )
pwd与cd命令 >pwd命令是“print working directory”中每个单词的首字母缩写,其功能是显示当前工作目录的绝对路径.在实际工作中,我们在命令行操作命令时,经常会在各个目 ...
- MongoDB -的连接和使用
MongoDB 的 连接使用 在节我们将讨论 MongoDB 的不同连接方式. 启动 MongoDB 服务 在前面的,我们已经讨论了如何启动 MongoDB 服务,你只需要在 MongoDB 安装目录 ...
- 如何用JS获取页面上的所有标签
最近忙的一匹,忙着大保健,都来不及写博客,今天特意抽出点时间来写一写 前两天看到一个题,是问如何从页面上获取所有的标签的并查看他们的数量,感觉还是有点意思的,所以给大家来搞一下子 我们先来捋捋思路,那 ...
- jQuery中.bind() .live() .delegate() .on()区别
$(selector).bind(event,data,function) $(selector).live(event,data,function)//jquery1.9版本以下支持,jquery1 ...
- Javascript执行流总结
面对各种各样的JavaScript代码,我们有时候难免会犯错.可当自己仔细研究一下,哦原来是这么回事.有时候怎么会想为什么Javascript程序会是这样执行的呢?为什么没有得到自己预期的答案呢?自己 ...