Jack Huang's Blog


  • 首页

  • 标签

  • 归档

  • 搜索

Cesium摄像头进入地面下问题跟踪

发表于 2020-09-06 | 更新于 2020-09-27

Cesium摄像头进入地面下的Bug已经在Cesium 1.66版本中修复。

1.66.0 - 2020-02-03

Deprecated ⏳

  • The property Scene.sunColor has been deprecated and will be removed in Cesium 1.69. Use scene.light.color and scene.light.intensity instead. #8493

Additions 🎉

  • useBrowserRecommendedResolution flag in Viewer and CesiumWidget now defaults to true. This ensures Cesium rendering is fast and smooth by default across all devices. Set it to false to always render at native device resolution instead at the cost of performance on under-powered devices. #8548
  • Cesium now creates a WebGL context with a powerPreference value of high-performance. Some browsers use this setting to enable a second, more powerful, GPU. You can set it back to default, or opt-in to low-power mode, by passing the context option when creating a Viewer or CesiumWidget instance:
    1
    2
    3
    4
    5
    6
    7
    var viewer = new Viewer('cesiumContainer', {
    contextOptions : {
    webgl : {
    powerPreference: 'default'
    }
    }
    });
  • Added more customization to Cesium’s lighting system. #8493
    • Added Light, DirectionalLight, and SunLight classes for creating custom light sources.
    • Added Scene.light for setting the scene’s light source, which defaults to a SunLight.
    • Added Globe.dynamicAtmosphereLighting for enabling lighting effects on atmosphere and fog, such as day/night transitions. It is true by default but may be set to false if the atmosphere should stay unchanged regardless of the scene’s light direction.
    • Added Globe.dynamicAtmosphereLightingFromSun for using the sun direction instead of the scene’s light direction when Globe.dynamicAtmosphereLighting is enabled. See the moonlight example in the Lighting Sandcastle example.
    • Primitives and the globe are now shaded with the scene light’s color.
  • Updated SampleData models to glTF 2.0. #7802
  • Added Globe.showSkirts to support the ability to hide terrain skirts when viewing terrain from below the surface. #8489
  • Added minificationFilter and magnificationFilter options to Material to control texture filtering. #8473
    Updated earcut to 2.2.1. #8528
  • Added a font cache to improve label performance. #8537

Fixes 🔧

  • Fixed a bug where the camera could go underground during mouse navigation. #8504
  • Fixed a bug where rapidly updating a PolylineCollection could result in an instanceIndex is out of range error. #8546
  • Fixed issue where RequestScheduler double-counted image requests made via createImageBitmap. #8162
  • Reduced Cesium bundle size by avoiding unnecessarily importing Cesium3DTileset in Picking.js. #8532
  • Fixed a bug where files with backslashes were not loaded in KMZ files. #8533
  • Fixed WebGL warning message about EXT_float_blend being implicitly enabled. #8534
  • Fixed a bug where toggling point cloud classification * visibility would result in a grey screen on Linux / Nvidia. #8538
  • Fixed a bug where a point in a PointPrimitiveCollection was rendered in the middle of the screen instead of being clipped. #8542
  • Fixed a crash when deleting and re-creating polylines from CZML. ReferenceProperty now returns undefined when the target entity or property does not exist, instead of throwing. #8544
  • Fixed terrain tile picking in the Cesium Inspector. #8567
  • Fixed a crash that could occur when an entity was deleted while the corresponding Primitive was being created asynchronously. #8569
  • Fixed a crash when calling camera.lookAt with the origin (0, 0, 0) as the target. This could happen when looking at a tileset with the origin as its center. #8571
  • Fixed a bug where camera.viewBoundingSphere was modifying the offset parameter. #8438
  • Fixed a crash when creating a plane with both position and normal on the Z-axis. #8576
  • Fixed BoundingSphere.projectTo2D when the bounding sphere’s center is at the origin. #8482

参考链接

  1. Camera Controller can go underground,by cesium.
  2. Prevent camera from going underground during mouse navigation,by cesium.

求三个球交点的方法

发表于 2020-09-04 | 更新于 2020-10-01

我们知道,在使用美国GPS时,需要获得三颗GPS卫星信号,才能够定位自身位置。那么其背后的原理是什么呢?很简单,用数学语言表述,就是通过求解三个球的交点。通常三个球的交点会有两个点,排除位置较高的那个点,剩下的点就是我们空间位置点。

GPS定位原理示意图

图1 GPS定位原理示意图

参考链接

  1. How Does GPS Work?,by Aryaman Sharda.
  2. 三个球的交点,by sinat_27504423.

简单英语写作方法

发表于 2020-09-04 | 更新于 2022-03-29

简介

This guide begins with an introduction called, ‘So what’s plain English?’

The guide then looks at the main ways to make writing clearer.

  • Keep your sentences short
  • Prefer active verbs
  • Use ‘you’ and ‘we’
  • Use words that are appropriate for the reader
  • Don’t be afraid to give instructions
  • Avoid nominalisations
  • Use lists where appropriate

The guide then looks at the difficult subject of apologising, and deals with some of the myths that can get in the way of clear communication.

The guide finishes with a summary and a list of words to avoid.

什么是简单英语

First let’s say what plain English isn’t and destroy some of the myths about it.

  • It’s not ‘cat sat on the mat’ or ‘Janet and John’ writing. Almost anything - from leaflets and letters to legal documents - can be written in plain English without being patronising or oversimplified.
  • It doesn’t mean reducing the length of your message or changing its meaning. Most of the UK’s biggest insurance companies produce policies that explain everything fully in plain English.
  • It’s not about banning new words, killing off long words or promoting completely perfect grammar. Nor is it about letting grammar slip.
  • It is not an amateur’s method of communication. Most forward-looking senior managers always write in plain English.
    And finally, it is not as easy as we would like to think.

句子尽量短

Most experts would agree that clear writing should have an average sentence length of 15 to 20 words.

使用主动语态

Do you want your letters to sound active or passive - crisp and professional or stuffy and bureaucratic?

合适使用被动语态

There are times of course when it might be appropriate to use a passive.

  • To make something less hostile - ‘this bill has not been paid’ (passive) is softer than ‘you have not paid this bill’ (active).
  • To avoid taking the blame - ‘a mistake was made’ (passive) rather than ‘we made a mistake’ (active).
  • When you don’t know who or what the doer is - ‘the England team has been picked’.
  • If it simply sounds better.

使用你们和我们

Try to call the reader ‘you’, even if the reader is only one of many people you are talking about generally. If this feels wrong at first, remember that you wouldn’t use words like ‘the applicant’ and ‘the supplier’ if you were speaking to somebody sitting across a desk from you.

使用适合读者的字词

When you are talking to your reader, say exactly what you mean, using the simplest words that fit. This does not necessarily mean only using simple words - just words that the reader will understand.

At the end of this guide there is a list of a few of the words that we suggest you avoid. But for most words you will have to decide yourself whether they are suitable.

Jargon is a type of language that is only understood by a particular group of people. You can use jargon when writing to people who will understand the terms and phrases. It can be a useful form of shorthand. But try to avoid using specialist jargon on the general public.

So in general, keep to everyday English whenever possible. And again, imagine talking to your reader across a table.

不用担心使用祈使句

Sit!

Brush your teeth.

Please send it to me.

These are all commands - officially called imperatives. They are the fastest and most direct way of giving someone instructions.

However, if we asked a hardened bureaucrat to write these expressions, we would end up with something like the following.

避免使用名词

A nominalisation is a type of abstract noun. (Is that plain English?) In other words, it is the name of something that isn’t a physical object, such as a process, technique or emotion.

Nominalisations are formed from verbs.

参考链接

  1. How to write in plain English,by plainenglish.
  2. 英语中表达并列,and前加不加逗号?,by zhihu.
  3. 英文中关于逗号使用方法,by 桃子爱不完.
  4. 状语,by wikipedia.
  5. 英语动名词作定语的用法形式有哪些,by 大山教育.
  6. 考研英语:英语语法中只有三大从句,by yanzhaowang.
  7. 过去分词在句子中做状语的用法总结,by 古月月.
  8. 现在分词在句子中作状语的用法,by 古月月.
  9. 副词修饰动词时在英语句子中不同的位置,by yufa.
  10. 定语,by wikipedia.
  11. English learning,by 一飞同学.
  12. 表语,by wikipedia.

js拖放功能的实现

发表于 2020-09-03 | 更新于 2020-10-01

拖放是网页中一种很常见的交互手段。下面简单介绍使用js实现拖放功能的方法。

拖放流程

拖放元素的流程如下:

选中元素—>拖动元素—>释放元素

下面介绍上述拖放元素流程的具体实现方法。

选中元素

在HTML5标准中,为了使元素可拖动,把draggable属性设置为true。文本、图片和链接是默认可以拖放的,它们的draggable属性自动被设置成了true。图片和链接按住鼠标左键选中,就可以拖放。文本只有在被选中的情况下才能拖放。如果显示设置文本的draggable属性为true,按住鼠标左键也可以直接拖放。

draggable属性:设置元素是否可拖动。语法:

1
<element draggable="true | false | auto" >

其中:

  • true: 可以拖动
  • false: 禁止拖动
  • auto: 跟随浏览器定义是否可以拖动

拖动元素

每一个可拖动的元素,在拖动过程中,都会经历三个过程,拖动开始–>拖动过程中–> 拖动结束。

针对对象 事件名称 说明
被拖动的元素 dragstart 在元素开始被拖动时候触发
drag 在元素被拖动时反复触发
dragend 在拖动操作完成时触发
目的地对象 dragenter 当被拖动元素进入目的地元素所占据的屏幕空间时触发
dragover 当被拖动元素在目的地元素内时触发
dragleave 当被拖动元素没有放下就离开目的地元素时触发

释放

到达目的地之后,释放元素事件

针对对象 事件名称 说明
目的地对象 drop 当被拖动元素在目的地元素里放下时触发,一般需要取消浏览器的默认行为。

DataTransfer对象

与拖放操作所触发的事件同时派发的对象是DragEvent,它派生于MouseEvent,具有Event与MouseEvent对象的所有功能,并增加了dataTransfer属性。该属性用于保存拖放的数据和交互信息,返回DataTransfer对象。

DataTransfer对象常用的属性和方法如下:

属性 说明
types 只读属性。它返回一个我们在dragstart事件中设置的拖动数据格式的数组。 格式顺序与拖动操作中包含的数据顺序相同。IE10+、Edge、safari3.1、Firefox3.5+ 和Chrome4以上支持该属性
files 返回拖动操作中的文件列表。包含一个在数据传输上所有可用的本地文件列表。如果拖动操作不涉及拖动文件,此属性是一个空列表。
dropEffect 获取当前选定的拖放操作的类型或将操作设置为新类型。它应该始终设置成effectAllowed的可能值之一【none、move、copy、link】。dragover事件处理程序中针对放置目标来设置dropEffect。
effectAllowed 指定拖放操作所允许的效果。必须是其中之一【 none, copy, copyLink, copyMove, link, linkMove, move, all, uninitialized】默认为uninitialized 表示允许所有的效果。ondragstart处理程序中设置effectAllowed属性
方法 说明
void setData(format, data) 将拖动操作的拖动数据设置为指定的数据和类型。format可以是MIME类型
String getData(format) 返回指定格式的数据,format与setData()中一致
void clearData([format]) 删除给定类型的拖动操作的数据。如果给定类型的数据不存在,此方法不执行任何操作。如果不给定参数,则删除所有类型的数据。
void setDragImage(img, xOffset, yOffset) 指定一副图像,当拖动发生时,显示在光标下方。大多数情况下不用设置,因为被拖动的节点被创建成默认图片。x,y参数分别指示图像的水平、垂直偏移量

浏览器文件拖拽示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
document.addEventListener("dragenter",function(e) {
e.preventDefault();
e.stopPropagation();
},false);

document.addEventListener("dragover",function(e) {
e.preventDefault();
e.stopPropagation();
},false);

document.addEventListener("dragleave",function(e) {
e.preventDefault();
e.stopPropagation();
},false);

document.addEventListener("drop",function(e) {
e.preventDefault();
e.stopPropagation();

var df = e.dataTransfer;
var dropFiles=[];

if (df.items !==undefined){
for(var i=0;i<df.items.length;i++){
var item= df.items[i];
if(item.kind==="file" && item.getAsEntry().isFile){
var file =item.getAsFile();
dropFiles.push(file);
}
}
}
},false);

参考链接

  1. js控制文件拖拽,获取拖拽内容。,by segmentfault.
  2. HTML5原生拖拽/拖放 Drag & Drop 详解,by weiqinl.
  3. 原生JS快速实现拖放(drag and drop)效果,by MudOnTire.

Simulink模块参数在线修改方法

发表于 2020-08-14 | 更新于 2021-05-19

Simulink在建立系统模型方面非常的便捷,利用其提供的各种已封装好的组件,可以很快地构建各种模型,如飞机、导弹、诱饵弹等。但是在将导弹、诱饵弹装配到飞机上时就比较复杂了。例如,在飞机发射导弹时,如何将飞机的速度、位姿状态传递给导弹模型就是一个难题。为解决该难题,Simulink必须能够在线修改模型的参数。幸运的是,尽管比较艰难,通过一些特殊的技巧,Simulink还是能够实现在线修改模型参数的。具体的解决方案如下:

  • 模型实例化问题。以飞机携带多枚导弹为例,因为飞机携带导弹数量有限,可以直接生成多个导弹模块。如果数量实在太多,可以考虑for each subsystem。

  • 在线修改模型参数问题。利用Simulink的s函数,在Update函数中使用set_param函数修改模型参数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function Update(block)
decoyID=block.DialogPrm(1).Data;
decoyName=sprintf('%s%d','JetFlighterWithDecoy/Decoys/Decoy',decoyID);

% 脉冲信号上升沿触发,设置模型参数
if(block.InputPort(4).Data==1 && block.Dwork(1).Data==0)
fligherSpeed=block.InputPort(2).Data;
decoySpeed=[fligherSpeed(1) fligherSpeed(2) fligherSpeed(3)-30];
dcm=block.InputPort(3).Data;
docoySpeedInFlatEarth=inv(dcm)*decoySpeed';
v0=join(['[' string(docoySpeedInFlatEarth') ']']);
pos0=join(['[' string(block.InputPort(1).Data') ']']);
set_param(decoyName,'ParameterArgumentValues',struct('decoySpeed',char(v0),'decoyPos',char(pos0)));
block.Dwork(1).Data = 1;%使能信号
end

参考链接

  1. Simulink模块参数在线修改方法的研究,by 郑志波.
  2. Why do I get an error when specifying a Simscape component parameter with same name as built-in Simulink parameter?,by mathworks.
  3. Parameterize Instances of a Reusable Referenced Model,by mathworks.
  4. find_system,by mathworks.

数据可视化之二维图形

发表于 2020-07-31

“有图有真相”、“一图抵千言”,这些俗语充分体现了大数据时代图的重要性。与枯燥的数据相比,丰富多样的图形更能揭示数据背后的规律,更受普罗大众的欢迎。因此有必要了解和熟悉一些常用的图,以便根据数据选择合适的图形表示。

弦图 (Chord Diagram)

描述

弦图 (Chord Diagram) 可以显示不同实体之间的相互关系和彼此共享的一些共通之处,因此这种图表非常适合用来比较数据集或不同数据组之间的相似性。

节点围绕着圆周分布,点与点之间以弧线或贝塞尔曲线彼此连接以显示当中关系,然后再给每个连接分配数值(通过每个圆弧的大小比例表示)。此外,也可以用颜色将数据分成不同类别,有助于进行比较和区分。

弦图的缺点是过于混乱,尤其是当要显示太多连接的时候。

功能

  • 比较
  • 关系

旭日图

描述

也称为「多层饼形图」或「径向树图」。

这种图表通过一系列的圆环显示层次结构,再按不同类别节点进行切割。每个圆环代表层次结构中的一个级别,中心圆表示根节点,层次结构从这点往外推移。

之后圆环会按照其与原属切片的层次关系再被分割,分割角度可以是均等平分,或者与某个数值成比例。

我们也可以用不同颜色突出显示层次分组或特定类别。

功能

  • 层次结构
  • 部分对整体

参考链接

1.数据可视化工具目录,by datavizcatalogue.

D3入门教程

发表于 2020-07-03 | 更新于 2020-07-12

D3.js(D3或Data-Driven Documents)是一个使用动态图形进行数据可视化的JavaScript程序库。与W3C标准兼容,并且利用广泛实现的SVG、JavaScript和CSS标准,改良自早期的Protovis程序库。与其他的程序库相比,D3对视图结果有很大的可控性。D3是2011年面世的,同年的8月发布了2.0.0版。到2018年4月,D3已被更新到了5.5.0版。

D3.js已被数十万个网站使用,最常被运用在在线新闻网站呈现交互式图形、呈现数据数据的图表和呈现含有地理信息的数据。另外SVG的输出功能也使得D3.js能用于印刷出版物的绘制上。

技术原理

D3.js透过预先创建好迁入于网页中的JavaScript函数来选择网页元素、创建SVG元素、调整CSS来呈现数据,并且也可以设置动画、动态改变对象状态或加入工具提示来完成用户交互功能。使用简单的D3.js函数就能够将大型的数据数据结构与SVG对象进行绑定,并且能生成格式化文本和各种图表。其数据数据结构的格式可以是JSON、CSV(以逗号分隔的数据)或GeoJSON,也可以透过自己写JavaScript函数来读取其他或自定义格式的数据,例如Shapefile。

开发工具

  • rimraf

Node下的Unix命令 rm -rf。

  • json2module

将一个JSON对象转换成ES6模块。

  • Rollup

Rollup 是一个 JavaScript 模块打包器,可以将小块代码编译成大块复杂的代码,例如 library 或应用程序。Rollup 对代码模块使用新的标准化格式,这些标准都包含在 JavaScript 的 ES6 版本中,而不是以前的特殊解决方案,如 CommonJS 和 AMD。ES6 模块可以使你自由、无缝地使用你最喜爱的 library 中那些最有用独立函数,而你的项目不必携带其他未使用的代码。ES6 模块最终还是要由浏览器原生实现,但当前 Rollup 可以使你提前体验。

  • tape

用于nodejs和浏览器的测试工具。

工程模板

请参考d3-project-template。

典型代码

当有数据而没有足够图形元素的时候,使用此方法可以添加足够的元素。

1
2
3
4
svg.selectAll("rect")   //选择svg内所有的矩形
.data(dataset) //绑定数组
.enter() //指定选择集的enter部分
.append("rect") //添加足够数量的矩形元素

当数组的长度与元素数量不一致(数组长度 > 元素数量 or 数组长度 < 元素数量)时呢?这时候就需要理解 Update、Enter、Exit 的概念。

如果数组为 [3, 6, 9, 12, 15],将此数组绑定到三个 p 元素的选择集上。可以想象,会有两个数据没有元素与之对应,这时候 D3 会建立两个空的元素与数据对应,这一部分就称为 Enter。而有元素与数据对应的部分称为 Update。如果数组为 [3],则会有两个元素没有数据绑定,那么没有数据绑定的部分被称为 Exit。

绘图流程

D3绘图流程

图1 D3绘图流程

参考链接

  1. Data-Driven Documents,by d3js.
  2. D3.js,by wikipedia.
  3. rimraf,by isaacs.
  4. json2module,by mbostock.
  5. Rollup,by rollup.
  6. tape,by substack.
  7. npm scripts 使用指南,by ruanyifeng.
  8. Webpack vs Rollup,by 余伯贤.
  9. npm运行项目报错—-Cannot find module ‘@babel/compat-data/corejs3-shipped-proposals’,by 吴小明.
  10. npm install 命令参数的一些简写方式,by 刘予川.
  11. Object.assign(),by mozilla.
  12. 第十章 理解 Update、Enter、Exit,by 馒头华华.
  13. SVG 图像入门教程,by ruanyifeng.
  14. JavaScript视口宽高、元素位置、滚动高度、尺寸属性,by 侠客有情剑无情QAQ.
  15. 【d3.js-03】shape-饼图,by PolarD.
  16. 二叉树遍历(前序、中序、后序、层次遍历、深度优先、广度优先),by zydoer.
  17. D3中常用的比例尺,by 江南陈酒.
  18. Flex 布局教程:语法篇,by ruanyifeng.
  19. 浅谈JavaScript获取元素的大小(高度和宽度)的方法,by html.
  20. mouseout、mouseover和mouseleave、mouseenter区别,by 海角在眼前.
  21. Building tooltips with d3.js,by d3-graph.
  22. 区分event对象中的[clientX,offsetX,screenX,pageX],by Rin阳.
  23. position:absolute相对哪个元素定位,by weiqing687.

如何处理前端异常

发表于 2020-07-02

参考链接

  1. 如何优雅处理前端异常?,by Jartto.

如何计算迎角的导数

发表于 2020-06-29 | 更新于 2020-06-30

在Matlab Simulink中使用Digital DATCOM Forces and Moments组件时,需要输入迎角的导数$d\alpha/dt$,可参考What is the time derivative of the angle of attack?。

迎角定义

在机体坐标系下,迎角和侧滑角如图1所示。

迎角和侧滑角

图1 迎角和侧滑角

于是,迎角定义为:

$$\alpha = \arctan \left(\frac{w}{u}\right)$$

其中速度分量$u$和$w$是随时间变化的函数。于是迎角的导数为:

$$\frac{d\alpha}{dt} = \frac{1}{1+\frac{w^2}{u^2}} \left(\frac{w}{u}\right)’= \frac{w’u - wu’}{u^2+w^2}$$

参考链接

  1. What is the time derivative of the angle of attack?,by aviation.

分布式哈希表DHT和P2P技术

发表于 2020-06-24

一篇介绍DHT和P2P技术的文章,浅显易懂,值得收藏。

分布式哈希表 (DHT) 和 P2P 技术

参考链接

  1. 分布式哈希表 (DHT) 和 P2P 技术,by Luyu Huang.
上一页1…262728…53下一页

Jack Huang

521 日志
67 标签
© 2025 Jack Huang
由 Hexo 强力驱动
|
主题 — NexT.Muse