Coinidea的博客

[cesiumjs]分享一个学习cesiumjs的中文社区

Thu, 28 Jun 2018 07:23:08 +0000

在cesiumjs中文社区的时间线中我写到：

**2021年06月09日 * **QQ群807482793，群成员已满3000人，日均uv600+，Cesium中文网2群：811457177

**2020年11月05日 * **QQ群807482793，群成员超过2000人，微信群已满500人，创建微信2群。

**2019年11月26日 * ** 注册人数破400，QQ群807482793，群成员超过1000人，日均uv300+

**2019年05月13日 * **微信群2小时人数破100，若想进群，请添加Cesium中文网个人账号：

2019年05月09日 * 注册用户数破200，QQ群807482793，群成员超过450人

2018年12月20日 * 注册用户数破100，QQ群807482793，群成员超过170人

2018年11月06日 * 注册用户数65，QQ群807482793，群成员超过100人

2018年10月10日 * 注册用户数51，日uv破100 http://blog.coinidea.com/cesiumjs-1332.html

2018年06月22日 * 上线测试

2018年06月19日 * 获得cesiumcn.org域名，也可以访问网址cesium.coinidea.com

2018年05月06日 * 开始cesiumjs的二次开发

2015年04月21日 * 梳理C#版本WorldWind的代码 * 简单实现基于C#版本WorldWind的数据可视化插件

2012年09月01日 * 接触基于C++的OSSIM的源码

2009年04月01日 * 开始接触Web开发的各个方面，从HTML、CSS、JavaScript到JSP、ASP.NET、PHP、jQuery、LAMP到SSH、ThinkPHP、Yii、LNMP到SSM、nodejs、VUE… 其实可以看出，我本人有一些Web开发的经验，同时又断断续续的接触了很多GIS相关的开原系统。在前端特别是nodejs越来越成熟的尽快，浏览器对H5新特性的支持也越来越好。我认为cesiumjs在工业级或者大部分B/S架构下，会得到一个较为广泛的应用，我也开始使用、熟悉、学习它的相关API。

作为一个开发工程师，始终有一些所谓的情怀，始终有一些盈利之外的更加技术向的东西，所以，注册了org域名，http://cesiumcn.org，并且创建了一个开源Web GIS的社区cesium中文网，希望大家多多支持。可以再社区中提问题，也可以在本博客中进行浏览。

使用Cesium将CDB转换为3D Tiles

Sat, 13 Feb 2021 16:02:38 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

在Cesium，我们每天都致力于通过围绕3D Tiles扩展生态系统来推进3D地理空间技术，3D Tiles是我们创建的开放地理空间联盟（OGC）社区标准，用于传输大量异构3D数据集。今天，我们很高兴地宣布，用户现在可以使用CDB to 3D Tiles管道将OGC CDB数据集转换为3D Tiles。

CDB通常在美国政府内部用于三维合成环境建模和仿真，它定义了一个标准化的模型和结构，用于存储、更新和归档地球的单个“版本化”的虚拟表示。CDB数据集可以存储自然环境和人造结构及其属性和关系。

通过将CDB转换为3D Tiles，数据可以高效地在支持3D Tiles的所有平台（包括ATAK和即将推出的Cesium for Unreal）之间传输，也可以在在线和离线设备之间传输，同时保留原始CDB的精度和细节。管道Pipeline保留了功能属性，支持运行时查询、样式设置和分析，以获得对数据更深入的了解。支持所有版本的CDB。

要了解更多关于联邦和国防内部解决方案的信息，请给我写信drop me a line.。

_圣地亚哥市中心的景观，包括地形、图像、固定的建筑模型、实例化的树和远处的科罗纳多桥，在CesiumJS中加载为3D Tiles。观看现场演示_See the* live demo*

原文链接：https://cesium.com/blog/2020/11/25/cdb-to-3dtiles/

作者：Brady Moore

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

用Cesium ion和Bentley的iModel.js创建数字孪生

Sat, 13 Feb 2021 16:01:40 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

iTwin服务，Bentley System系统平台，用于构建数字孪生基础设施，现在支持加载Cesium ion的3D Tiles。

金门大桥，用Cesium ion拼接成3D Tiles，用iModel.js可视化，iTwin的开源可视化组件。

这使得iTwin成为与ion集成的最新平台，越来越多的用户加入到Cesium ion中（growing number of places](https://cesium.com/integrations/)），用户可以将自己的3D数据集与ion的全球层相结合，包括Cesium OSM建筑和Cesium World Terrain。

Cesium World Terrain已经是默认的基础层，工程师在创建宾利的Context Capture数字孪生时依赖它。这种最新的集成使得从ion到iTwins的海量3D tilesets成为可能，这样工程师就随心使用他们喜欢的工具，由ion的高分辨率地理空间上下文和3D拼接器支持。

您还可以按照我们的教程（our tutorial）学习如何建立自己的数字孪生，以创建一个基于Cesium的互动的建筑企划。

原文链接：https://cesium.com/blog/2020/11/02/imodeljs-supports-cesium-ion-assets/

作者：Sarah Chow

评语：英特尔，美国联邦政府…Cesium已经逐渐从一个开源产品向企业级产品迈进。

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

Cesium与Intel Geospatial合作，为企业提供地理空间解决方案

Sat, 13 Feb 2021 16:00:55 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

Cesium很高兴地宣布与Intel Geospatial建立合作关系，为各行业的企业客户提供专业的3D地理空间解决方案。

Intel Geospatial深刻理解从3D地理空间数据收集到的人工智能支持的商业洞察的价值。Cesium很荣幸与Intel Geospatial合作，为Intel用户社区提供一流的3D地理空间技术。

Intel Geospatial结合了数据管理、可视化、分析和基于Cesium支持的3D tiling，为能源行业的数据传输和分配、资产管理和远程安全检查等用例提供解决方案。该平台旨在通过设计易于任何人使用的解决方案，将地理空间洞察的范围扩大到数据科学家之外。

利用英特尔地理空间平台中的激光雷达点云识别电线杆周围的植被侵蚀情况。

有了Intel Geospatial的平台，客户可以将多个数据集（包括Cesium World Terrain）与Cesium提供的所有灵活性和精确性结合起来。

Intel Geospatial构建定制的企业解决方案，允许客户将其所有数据与Cesium World Terrain一起纳入一个单独的可视化场景中。

使用Intel Geospatial的人工智能算法对数据集进行处理和分类，以及Cesium的GPU加速分析工具进行测量和分析，客户可以分析单层或组合数据集，以获得所需的洞察力，无论是用于对基础设施进行远程检查，以安全目的进行目视检查，或管理电线以获得更好的适应力。

访问“英特尔地理空间”（Intel Geospatial），了解更多有关行业客户如何利用地理空间技术最大化其3D数据的信息。

原文链接：https://cesium.com/blog/2020/10/27/intel-using-cesium-for-geovisual-solution/

作者：Patrick Cozzi

评语：Cesium一直专注企业级的解决方案，这也导致了2020的社区功能稍微的开发缓慢。毕竟要挣钱吃饭。

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

可供政府用户使用的喀布尔(Kabul )数据

Sat, 13 Feb 2021 15:59:13 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

我们（Cesium）支持美国联邦政府雇员在流感大流行期间在家工作，通过与Maxar公司Vricon的合作提供免费访问世界各地高分辨率模型的机会。

喀布尔，阿富汗。

我们现在为美国联邦政府工作人员感兴趣的近30个领域添加了喀布尔的三维表面模型。这些数据集已经被拼接成3D Tiles，因此它们可以以全分辨率流式传输，允许政府工作人员无论在哪里工作都可以快速访问。

如果您有有效的.gov或.mil电子邮件地址，请按照本教程访问这些数据集（follow this tutorial）。

如果你有兴趣了解更多关于Cesium是如何支持美国联邦政府的，请告诉我。我很乐意和你谈谈（let me know）。

原文链接：https://cesium.com/blog/2020/10/13/maxar-vricon-kabul-data-in-cesium-ion/

作者：Brady Moore

评语：Cesium的政企化做得越来越好了。

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

Reality Capture新增内置Cesium ion共享3D模型的支持

Sat, 13 Feb 2021 15:58:21 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

RealityCapture也加入了不断增长的直接支持Cesium ion的项目名单中，这一名单还包裹了包括Safe FME、Blender和3ds Max在内的近十几个平台，它们最近都添加了对Cesium ion的集成（https://cesium.com/integrations/）。凭借其精心策划的全球数据集、安全的云托管和强大的3D拼接管道，ion是连接数据提供商、开发人员与用户的核心。

RealityCapture的最新版本（https://www.capturingreality.com/realitycapture-supports-upload-to-cesium）中加入了与Cesium ion的集成，用户只需单击一下即可在web上共享自己的3D模型。

它的工作原理是将模型上传到您的Cesium ion帐户，在那里它被转换成3D Tiles。这使用户可以将摄影测量模型嵌入到web上或在移动设备上可视化，即使它们有数百万个三角面片，因为在场景中导航时，更高级别的细节会以流式显示。

诺里奇城堡，由RealityCapture生成，并以Cesium可视化。数据由©Jasper Mink，©Terradrone Europe捕获。

我们对这种集成支持感到振奋，因为它创建了一个从无人机照片到地理空间环境中，基于web的可视化的端到端工作流。保留原始细节的事实使其成为可视化的理想选择，因为用户可以通过电子邮件向所有参与人员发送链接，并确信他们看到的模型基于采集的最高保真度。

如果您有RealityCapture的文件，本教程（ this tutorial）将指导您如何在自己的模型上尝试此功能。

查看我们的集成指南（Check out our integration guide），了解如何将您的工具与Cesium ion连接起来，为您的用户提供一种简单的方式来共享他们的大型三维模型或激光雷达数据，或在地理空间环境中显示这些数据。

基于Cesium，就可以在网上分享摄影测量模型，而不必简化它：用户甚至可以在诺里奇城堡模型的门上看到标志！

原文链接：https://cesium.com/blog/2020/09/18/realitycapture-and-cesium-ion/

作者：Omar Shehata

评语：各类平台都在争相支持对Cesium的支持，3D Tiles是一种了不起的模型格式。

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

Cesium 2020回顾

Sat, 13 Feb 2021 15:53:23 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

虽然它遇到了一些挑战，2020年仍然一个令人难以置信的Cesium年，我们感恩Cesium作为一个团队共同取得的进展。下面是今年取得一些突出成绩：

– 与市场领先公司Komatsu Construction公司建立了智能建筑数字孪生伙伴关系（https://cesium.com/blog/2020/03/10/smart-construction/）。

Cesium CEO Patrick Cozzi在拉斯维加斯工程机械展览会Las Vegas ConExpo 3月的演讲.

– 宣布与Epic Games合作，为Unreal制作Cesium（https://cesium.com/blog/2020/06/04/cesium-for-unreal-engine/）。

– 与Epic、Microsoft和NVIDIA构建Project Anywhere（https://cesium.com/blog/2020/11/30/project-anywhere/），以显示支持云/GPU/模拟游戏的能力。

– 与史密森学会（The Smithsonian）合作开展开放获取计划（https://cesium.com/blog/2020/02/28/smithsonian/）。

– 与Intel Geospatial建立了合作关系。

（https://cesium.com/blog/2020/10/27/intel-using-cesium-for-geovisual-solution/）

– 与宾利系统公司合作进行Cesium ion/iTwin集成。

（https://cesium.com/blog/2020/11/02/imodeljs-supports-cesium-ion-assets/）

– 将Cesium Stories、Cesium OSM Buildings和CDB to 3D Tiles。

（https://cesium.com/blog/2020/11/25/cdb-to-3dtiles/）

Cesium OSM Buildings

– 获得PACT颁发的技术创业奖、Geospatial Media&Communications颁发的年度地理空间创业奖，以及美国地理空间情报基金会（USGIF）和开放地理空间联盟（OGC）举办的GEOINT创新贸易手工艺大赛大奖。

（https://cesium.com/blog/2020/08/04/usgif-tradecraft-competition-winners/）

奖杯放在Cesium Demo室

– 团队中增加了17名优秀的员工，同时我们继续招聘，以尽可能快的速度填补空缺职位。

在新泽西战舰的一次团队实地考察中戴上口罩并保持社交距离。

– 我们为Cesium开发者社区介绍了一个新家，并庆祝CesiumJS的一个重要里程碑——100万次下载。（https://cesium.com/blog/2020/05/21/one-million-cesiumjs-downloads/）

– 基于Cesium的NORAD Tracks Santa 连续8年招待了全球2000多万人。（https://cesium.com/blog/2020/12/10/cesium-santa-iss/）

感谢所有今年支持Cesium的人。为2021年做好准备！我们期待着与您合作。

2021干杯！

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

Cesium 赢得2020年PACT技术创业企业奖

Sat, 13 Feb 2021 15:50:25 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

Cesium 是2020年PACT技术创业企业奖的获得者！

该奖项由费城资本与技术联盟（PACT）每年颁发，旨在庆祝费城地区的科技创新。

作为一家技术初创企业，Cesium源于其创新平台、领导团队、增长潜力而受到认可，并在市场上取得了成功。

“丰富的创新历史，强健的技术生态系统，以及庞大的人才库，使费城成为Cesium的理想之地，”Cesium的首席执行官帕特里克·科齐在获奖感言中说。“在我们筹款期间的一次西海岸之旅中，我被告知雄心勃勃的科技企业家应该搬到硅谷。但我们对费城有着深厚的信念，我们非常自豪和感激能成为这个社区的一员。”

今年的活动由于COVID-19流感大流行而在线上举行的，我们在屋顶平台上举行了一个小规模保持社交距离的聚会，与团队成员一起在家里在线观看。

Cesium是PACT的骄傲支持者，PACT通过将我们这样的成长型公司与辅导、资金和人才等资源联系起来，推动创业。我们要感谢该组织并授予赞助商Troutman Pepper，并祝贺技术初创企业入围者ForMotiv和ZeroEyes。

作者：Andie Tursi

原文链接：https://cesium.com/blog/2020/09/10/cesium-enterprise-award/

评语：恭喜Cesium，它们的办公地在费城不在硅谷。

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

使用Flightradar24’s CesiumJS App追踪世界商用航线

Sat, 05 Sep 2020 15:24:34 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

每天，超过10万架商业航班在世界各地运送乘客。在任何特定时刻，您都可以看到几乎所有这些航班的实时位置，更不用说大量的货运和私人航班，Flightradar24是一流的航班跟踪服务。

Flightradar24为观看头顶天空的飞机爱好者、追踪空中交通事件的新闻媒体以及跟踪朋友和家人飞行的普通人提供了丰富的数据。

Flightradar24的3D视图可以在浏览器和移动应用程序中使用，它是用CesiumJS构建的。该应用程序显示了从地面和卫星ADS-B转发器、雷达，more等收集到的航班实时位置。

Flightradar24中的3D视图。

飞机由一个三维模型表示，观众可以用驾驶舱视图浏览，也可以从飞机外部进行平移和缩放，从任何角度观察飞行。当飞机在500米以下时，它也会对下面的地形投下阴影，这是根据当时太阳的实际位置来计算的。

三维视图中的一架飞机在向机场降落时投下阴影。

用户可以单击航班查看详细信息，如航班号、速度、目的地、高度、到达时间以及数据源。观众可以看到机场和其他交通，甚至可以切换飞行路线。

除了选定的航班，用户还可以看到附近的飞机。

Flightradar24的实时数据每月为数百万用户提供重要信息，Cesium是专门为支持该情况而设计。要开始用Cesium来可视化你自己的时间动态数据，请按照我们的简单教程(simple tutoria)在Cesium Stories中创建无人机飞行。

原文链接：https://cesium.com/blog/2020/08/13/flightradar24/

作者：Sarah Chow

评语：CesiumJS应用越来越广泛。

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

Cesium和Kaarta用高分辨率激光雷达可视化室内和地下环境

Sat, 05 Sep 2020 15:21:33 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

Cesium使急救人员和军事操作人员更容易快速评估和了解密集和不断变化的城市环境。

Cesium支持任何尺度的可视化，从全球到亚厘米。我们最近改进了对地下可视化的支持，探索地下环境可以直观地与地上数据无缝集成。

最近，我们将这些能力用于密集城市在线挑战的测试，该挑战由国防部的国家安全创新网络（NSI）组织Dense Urban Online Challenge，旨在解决第一响应者和军事运营商在高密度和复杂地下结构城市工作时遇到的问题。

针对这一挑战，我们与Kaarta合作，展示了Cesium如何通过汇集所有数据并将其可视化，为决策者提供所需的信息和洞察力，从而为众多应用程序解决这些操作问题提供动力。

Kaarta捕获的，纽约市东侧通道的一部分

在Hackathon上，我们展示了由Kaarta的移动3D扫描仪收集的纽约市隧道。这些点云是用他们的手持式设备捕捉到的，只要带着这个设备穿过隧道，激光精度就在3厘米以内。它生成的点云是用Cesium ion拼接和定位的。

这里的价值在于，可以快速捕捉到这些精确的三维扫描，并且可以经常这样做，这样你就可以得到一张永远是最新的地图，即使是那些正在积极开发的项目，比如纽约市东区的交通隧道。对于第一反应人员和军事操作人员来说，这些密集环境的最新地图对于决策至关重要。

由于像这样的设备使接近实时的高分辨率扫描成为可能，有了Cesium，可以将这些扫描组合起来，看看任何给定领域的所有项目是如何同时开发的。通过与其他数据集相结合，很容易计划潜在的entire，例如，通过覆盖下水道系统的地图来确保它不会变得太近。使用Cesium的测量工具，这些分析是如此简单和完整。

上图：纽约市地面视图，隧道位置用红色标出。下图：隧道内部视图。

在参加了“NSIN Dense Urban Online Challenge”的31支队伍中，我们是5支被选中参加当面黑客竞赛的队伍之一。我们很高兴能提供一个平台，让其他人能够解决这些复杂的挑战。如果你在做地下工作，或者你对Cesium用于国防感兴趣，请联系我brady@cesium.com。

原文链接：https://cesium.com/blog/2020/08/25/national-security-hackathon/

作者：Brady Moore

评语：挺牛的。

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

Cesium中文网——如何开发一款地图下载工具[一]

Mon, 27 Jul 2020 00:43:49 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

Cesium中文网的朋友们的其中一个主题是：自己独立开发一款地图（瓦片图）下载工具。

这个主题会以拆分若干期以博客文章[所有用户]+视频[付费用户]的形式介绍给大家。其中源码会不断的提交与更新，Github地址：https://github.com/hujiulin/MapDownloader。源代码对所有用户开放，如果大家觉得有益，请轻轻地给一个star进行鼓励。

重剑无锋，大巧不工。

工具最重将以C#和JavaScript的形式呈现。编程语言只是形式，如何理解内部的逻辑和流程，也可以用Java，Python，PHP或其他开发语言进行实现。

目前开源的工具非常的简单（简陋），但是我会定期更新和维护代码，大家有什么问题可以在Github上提交issue也可以在公众号：Cesium中文网；QQ群：807482793；论坛：http://cesium.coinidea.com/进行留言和提问。

准备工作

找到自己熟悉的一门开发语言，它支持：

文件网络下载。
文件IO，本地文件夹及文件的读写。
多线程。
桌面窗体，最好具有浏览器控件。

一般来说，现代的开发语言都支持上述大部分功能。本文选择的是C#。在整个主题的中部，会引入JavaScript。

瓦片图服务器

本文选择的是百度地图，其实大部分的瓦片图服务器都会有x, y, z（level）三个参数，百度地图的URL Pattern是：http://online{0}.map.bdimg.com/onlinelabel/?qt=tile&x={1}&y={2}&z={3}&styles=pl&udt=20200727&scaler=1&p=0

如果我们把x=1, y=1, z=3，在浏览器打开上述URL

http://online0.map.bdimg.com/onlinelabel/?qt=tile&x=1&y=1&z=3&styles=pl&udt=20200727&scaler=1&p=0

样例瓦片图

瓦片图下载

既然我们已经知道了瓦片图的生成规则，那我们只要指定具体的下载链接我们就可以下载对应的图片了，C#的核心下载代码是，这儿代码可以轻易地在网络上搜索到：

 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


 private static WebClient wc = null;
 private static void initWebClientInstance()
 {
 if (null == wc)
 {
 wc = new System.Net.WebClient();
 }
 }
 private static void download(string url, string filename)
 {
 // Check filename exist or not
 if (File.Exists(filename))
 {
 return;
 }

 // Create directory
 string dir = Path.GetDirectoryName(filename);
 if (!Directory.Exists(dir))
 {
 Directory.CreateDirectory(dir);
 }

 initWebClientInstance();
 wc.DownloadFile(url, filename);
 }

瓦片图批量下载

接下来我们要做的是：

批量地生成下载URL
循环下载每张瓦片图

之前提到过地图的核心思想是四叉树，所以我们可以再次简单的处理，认为瓦片图也是四叉树构成的，一共分为18级（网上可查）左右。那么

level	minX~maxX	minY~maxY
1	1~1	1~1
2	1~2	1~2
3	1~4	1~4
…
n	1~2^(n-1)	1~2^(n-1)

四叉树

批量下载的核心代码如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


 public static void downloadBatch(string urlPattern, string targetFoler, int level)
 {
 int maxX = (int)Math.Pow(2, level - 1);
 int maxY = (int)Math.Pow(2, level - 1);
 for (int x = 0; x <= maxX; x++)
 {
 for (int y = 0; y <= maxY; y++)
 {
 string url = String.Format(urlPattern, 1, x, y, level);
 string filename = Path.Combine(targetFoler, level.ToString(), x.ToString()) + "\\" + y.ToString() + ".png";
 download(url, filename);
 }
 }
 }

上述的运行代码肯定能下载，但是有很多问题。将在下一步中进行讨论。

当前软件界面

下载结果

下一步

当前代码只适合下载层级较小的情况，一旦层级较大，需要下载的图片非常多。此处需要使用多线程，甚至多台机器。
可以看到下载下来的图片和很多纯黑图片，这可能是我们的生成规则不太好。
目前浏览器控件和软件还未做到联动，不能实时勾选区域进行下载。
后续可能涉及图片拼接的处理。
当加载进具体的平台的时候，可能需要进行坐标系变化处理。
下载间隔的自动控制，IP的动态切换。

上面的这些问题将在后续的文章中进行介绍。

声明

一般来说，地图服务器需要很大的存储资源和带宽资源，本文仅从学术角度和大家探讨现在的下载软件内部原理，如有错误欢迎大家指正。

Again: Github地址：https://github.com/hujiulin/MapDownloader。源代码对所有用户开放，如果大家觉得有益，请轻轻地给一个star进行鼓励。

本文和软件仅做学术交流，严禁用于商业用途。

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

使用Cesium的地下渲染技术可视化瑞士的地质资源

Tue, 14 Jul 2020 06:43:17 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

Camptocamp为瑞士拓扑的孪生数字增加了地下可视化功能。

免费向公众提供瑞士3D地图

基于3D Tiles, 瑞士联邦Geoportal 3D Viewer提供免费访问全国的交互式地图，包括地形、桥梁、建筑，甚至树木——超过7000万个物体。

Camptocamp已经在swissgeol中实现了这些新功能，swisstopo Web端的3D地质数据浏览器。

瑞士拓扑3D门户网站是一个交互式的瑞士地图，包括自然环境和建筑环境。

虽然这张3D地图让人们印象深刻，但它并没有提供一幅完整的国家图景：地下水、矿层、地下室、停车场、地铁和其他建筑的地下部分都不见了。

看地底世界

瑞士拓扑学联邦办公室不仅想展示瑞士的地上部分，还想展示地下部分。因此，与Camptocamp合作，我们在CesiumJS 1.70版本中添加了对地下可视化的支持[ added support for underground visualization]。

瑞士地理汇集了大量地下数据集，包括钻孔、地震数据和基岩图。这些数据以前是单独分开的和二维的，但通过将它们结合在一起，瑞士地理为用户提供了一个更完整的地下情况的视图。

瑞士地理的地下钻孔，以及地面上的建筑物、地形和图像数据。

所有这些数据流顺利地传输到浏览器，感谢3D Tiles与Cesium ion的三维pipelines。Camptocamp使用FME、地质三维建模包和Python预处理数据。

用户可以调整每个层的透明度，包括表面图像，还可以查看横截面。

瑞士地理中具有透明地形和地面图像的横断面数据。

工作中的地质数据

观众可免费向公众开放，并将满足地质领域的众多需求。地质工程师将能够分析潜在的项目，如运输隧道，并进行风险分析，如岩石滑坡。决策者将有更好的基础数据用于教育或选择合适的项目地点。

例如，虽然目前斯威特兰大约75%的能源来自进口化石燃料，但他们的新能源政策“2050年能源战略”旨在增加对当地浅层地热能的依赖。

在瑞士地理可视化的地热数据集。

到目前为止，创建地热项目提案需要收集所有不同的数据集，例如地质图、钻孔、横截面、三维模型、地震数据等。每个数据集必须单独复制和存储，或者必须使用GIS或3D建模软件建立数据库连接。而数据集只能在二维可视化或基于模型的三维可视化，瑞士地理极大地简化了这一过程，将所有数据集汇集到一个可以即时共享的门户网站中。

深部地热井与复杂断层模式和地震位置的可视化。

未来展望

瑞士地理(swissgeol )目前处于测试阶段。未来，swisstopo和Camptocamp计划增加一些功能，包括增加拾取和样式，以便可以查询、过滤、分析和下载数据的相关属性。需要额外功能的注册用户，包括swisstopo的用户，也将能够访问其他功能，如上传/下载用户生成的数据，以及创建封闭用户组，以便与有限数量的用户共享敏感数据。

如果你有地下数据，可以通过 by uploading it to Cesium ion上传到Cesium ion上，把它和其他所有的二维和三维数据一起可视化。

作者：Sarah Chow

原文链接：https://cesium.com/blog/2020/07/06/camptocamp-underground-visualization-with-cesium/

评语：大家希望的基于Cesium的地底可视化，越来越完善了。

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

用Cesium可视化地下设施、矿山和地质层

Sun, 21 Jun 2020 06:55:52 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

本月的CesiumJS 1.70发布引入的一项关键改进是地下数据可视化。这允许用户无缝地从整个城市的地面功能过渡到同一场景中的地下功能，无论是水管和电缆之类的实用数据，还是洞穴和矿井之类的三维结构。

用不同的地面材料根据深度可视化钻孔。来自明尼苏达大学钻孔地球物理数据库的数据。Borehole Geophysical Database

将地下数据与三维地形和CesiumJS中的其他图层融合，这意味着可以在一个地方可视化所有相关信息，而无需在专用工具之间不断切换。例如，可以通过在场景中添加Cesium OSM建筑（Cesium OSM Buildings）来可视化地震随时间的变化，并测量它们与城市重要基础设施的距离。

2020年4，5月，在爱达荷州中部的锯齿山上观察地震。每个球体都包含地震中心震级和深度的元数据，以及这些记录的误差范围

您可以使用CesiumJS API控制地下数据的可视化方式。下面，将对隧道进行可视化摄影测量。通过保持地面大部分不透明，我们可以准确地看到哪些部分位于地面之上（只是入口），以及结构延伸了多远。我们还可以配置camera，在近距离放大时隐藏地面，这样我们就可以在隧道内行走而不受干扰。

新西兰奥克兰北头旧军事隧道摄影测量。左图：保持地面大部分不透明，以查看模型的哪些部分高于地面。右图：将地面藏在靠近camera的地方，让用户可以在隧道内行走。截图由 b_nealie提供。

试一试

上传您的地下模型数据到Cesium ion（Upload your underground data to Cesium ion）或查看下列示例代码以学习如何在Cesium app中使用地下功能。

激活地球透明。[Enable globe transparency](https://sandcastle.cesium.com/index.html?src=Globe Translucency.html)
激活地表某部分透明[Enable transparency only on a section of the ground](https://sandcastle.cesium.com/index.html?src=Globe Interior.html)
自定义地下场景显示[Customize the look of underground scenes](https://sandcastle.cesium.com/index.html?src=Underground Color.html)

如何您有任何问题或者想分享您正在做的工作，请访问let us know on the forum。

大家也可以访问Cesium中文网：http://cesium.coinidea.com/

作者：Omar Shehata

原文链接：https://cesium.com/blog/2020/06/16/visualizing-underground/

评语：这是Cesium1.70三大功能的最后一项，一两年前好多人提问如何让地球透明，或者地下模型怎么办，现在都能有解决办法。

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

CesiumJS新增官方TypeScript类型定义

Sat, 13 Jun 2020 15:37:36 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

在当前的1.70版本中，CesiumJS现在附带了正式的TypeScript类型定义！

TypeScript定义是一个长期以来被要求的特性。虽然社区已经完成了一项支持各种手动方式的工作，其中最受欢迎的是@types/cesium，但是cesium代码库的庞大规模和不断发展的特性使得手工维护成为一项永无止境的任务。官方定义文件Cesium.d.ts的数据量超过42000行，达1.9MB。

即使您不是TypeScript用户，此工作的性质也提高了CesiumJS API参考文档的正确性和完整性，并在IDE中实现了更好的intellisense支持，可以将TypeScript定义应用于推断类型，从而使整个CesiumJS社区获得了巨大的成功。

更新CesiumJS到1.70将自动利用TypeScript应用程序中的类型检查。我们使用package.json中的_types_字段，在大多数情况下不需要额外的配置。但是，如果直接导入单个Cesium源文件，则需要将“types”：[“cesium”]添加到tsconfig.json配置以便获取定义。如果您以前使用过@types/cesium，则可以将其移除。

来自CesiumJS团队的官方支持意味着最新和正确的定义文件将随每个版本一起发布。这也意味着TypeScript支持将作为CesiumJS GitHub存储库的一部分进行正式跟踪。如果您在使用带有TypeScript的CesiumJS时发现一个bug，请打开一个问题（issue）或更好的方法，一个pull request请求来解决它。如果您对CesiumJS/TypeScript有疑问，或者需要帮助调试您的项目，请在社区论坛（community forum）上提问。

如果您正在使用自定义的或@types/cesium，但尚未准备好切换，则可以在安装后删除Source/cesium.d.ts。然后，TypeScript工具将返回到它找到的下一组CesiumJS类型定义。

官方的类型定义文件，Cesium.d.ts记录了超过42000行的声明和文档，其大小达1.9MB。

深入了解

虽然我们很高兴终于正式支持TypeScript，但要做到这一点还需要一些努力。最初，我们探讨了3种选择：

手动维护定义文件

我们可以手动管理和维护自己的TypeScript定义文件，作为CesiumJS代码库的一部分，很可能是每个JavaScript文件都有一个单独的定义文件，使其易于管理，比如Cartesian3.js对应Cartesian3.d.ts。在技术层面这样易于实现，但对文件同步和维护性上来说，会造成较大伤害。

另外，我们不想只包含声明接口，也不想包含内联文档，这样用户就可以充分利用intellisense。这是我们最后的选择，但如果结果证明这是唯一可行的选择，那就是我们最终的选择。

移植CesiumJS到TypeScript

您可能会惊讶地听说我们实际上评估过用TypeScript重写所有CesiumJS。对于TypeScript开发人员来说，这将是一个巨大的改进，对于CesiumJS维护人员和代码库来说，这也是一个真正的胜利。除了强类型检查之外，它还将使我们快速使用现代约定，如template literals、arrow functions和async/await，由于兼容性和工具的原因，我们目前不允许在CesiumJS代码库中使用这些约定。

不幸的是，所需的努力程度和所工作量使它在短期内不会成为一个有吸引力的选择。这个选项仍然摆在桌面上，但正如我们去年所做的大规模ES6迁移一样，它需要大量仔细的规划、研究和基础设施工作才能正常进行。

使用TypeScript编译器生成定义文件

从TypeScript 3.7开始，编译器可以编译带有JSDoc注释的JavaScript代码，并为我们生成对应的类型定义文件。这种方法完全不需要手动维护.d.ts文件，而且还具有验证和改进我们自己的JSDoc注释的额外好处，因为它们需要准确才能生成正确的类型定义。不用说，这个选项对我们非常有吸引力，我们决定在一些初步的原型设计实验表明它可以工作后运行它。

实际上，我们花了几个星期的时间来研究这种方法Marco Hutter参与了大量的文档修复和源代码调整工作，以使编译器满意。早期的工作很有希望。正如预期的那样，它暴露了JSDoc注释中的错误和不一致，并在较小程度上暴露了我们修复的CesiumJS API。不幸的是，我们很快就碰壁了。

依赖TypeScript编译器意味着当它做了一些错误或意外的事情时，我们缺乏选择。虽然编译器在某些情况下使用JSDoc注释，但在许多情况下，它依赖于自己的类型推断，并且没有为我们提供重写它的方法。它还完全忽略了大部分JSDoc，比如在对象定义属性，并将所有私有下划线变量作为定义的一部分公开。这导致我们开始以我们不习惯的方式弯曲CesiumJS基础代码，只是为了让TypeScript编译器满意。我们提出了尝试修改TypeScript编译器本身的想法，但是我们必须深入研究编译器代码，我们甚至不确定维护人员会接受什么，也不知道这个过程需要多长时间。最终，我们最喜欢的解决方案变成了一场旷日持久的赌博，我们对这种方法失去了信心。

_左图：UrlTemplateImageryProvider_的JSDoc, 意外地添加了属性到BingMapsImageryProvider；右图：生成的BingMapsImageryProvider定义，包含了重复定义，导致编译失败。

绘图板

结果，我们对TypeScript拥有官方JSDoc支持非常兴奋，以至于完全忽略了类似的选项 tsd-jsdoc。tsd jsdoc是jsdoc的插件，它从jsdoc输出生成类型脚本定义。这使得它非常类似于TypeScript编译器方法，但提供了对生成的类型定义有了更大的自由度。

tsd-jsdoc不直接解析JavaScript，而是依赖于jsdoc生成的抽象语法树（AST）。这意味着它不受类型推断问题或缺乏JSDoc完整性的影响，这使得TypeScript编译器接近失败。如果我们可以使用JSDoc注释来表示类型，那么它就是我们希望它出现在类型定义文件中的类型。

我们已经从以前的TypeScript编译器方法的失败中学到了很多，所以我们能够相当快地完成一个可行性评估，并且我们现有的JSDoc不正确的所有问题仍然适用。事情的进展比我们想象的要快，我们知道我们找到了解决办法。

作为开发人员，有时我们过于专注于某项技术，以至于忽略了其他选择。在这种情况下，社区成员 @bampakoa去年甚至向CesiumJS和tsd-jsdoc提交了pull请求，以使它们更加兼容。我们已经知道tsd jsdoc存在，但是我们在最初的评估中忽略了它，因为我们假定了TypeScript编译器选项会更好，并且我们意外地选择性地忽视了tsd-jsdoc。

Post-processing和验证

虽然tsd-jsdoc输出是相当高质量的开箱即用，但是我们做了一些额外的后处理来进一步改进它。这包括简单的字符串操作、正则表达式查找和替换，甚至使用TypeScript编译器重写部分文件。所有这些都是作为新构建ts gulp任务的一部分发生的。如果你好奇，可以获得这些代码check out the code.。最终的结果是一个单独的Cesium.d.ts，与生成的Cesium.js模块的入口点。

除了生成输出，build-ts任务还通过使用TypeScript编译文件来验证文件。如果开发人员在JSDoc中犯了错误，比如拼错类名或引用私有或不存在的类型，那么构建过程将失败。虽然这个验证过程非常有用，但它只捕获某些类型的错误。例如，如果有人实现了一个新的ImageryProvider，但不符合正确的接口，则定义文件将编译而不出错，但TypeScript将在尝试将新类用作ImageryProvider的应用程序中发出编译错误。

我们仍在探索添加额外验证的想法，例如用TypeScript编写一些单元测试，以识别开发过程中潜在的问题区域。

JSDoc错误

我已经多次提到，基于JSDoc的方法的一个特别令人兴奋的地方是，它为我们的文档添加了另一个级别的检验和验证，使每个人都受益，而不仅仅是TypeScript开发人员。我们的文档审查过程的一大部分现在已经自动化了。我们在代码库中发现的问题可以分为以下几类：

不正确或不完整的类型- 在许多情况下，我们对类型使用了非正式或不正确的名称，例如，Image实际上是HTMLImageElement，Canvas是htmlCanvaseElement。一个有趣的例子是TypedArray，它甚至不存在于规范级别，而是完整类型列表的通用术语，例如Int8Array、Float32Array等等……我们还有不完整的泛型，例如Promise而不是Promise。
@exports – 我们使用JSDoc的@exports标签作为最终的支撑。如果开发人员无法在生成的HTML中显示某些内容，他们可能会添加@exports，这将“正常工作”。我们将@exports用于枚举、命名空间和函数，而不是@enum、@namespace和@function标记。这导致了不正确的类型生成。实践证明我们根本不需要在代码中的任何地方使用@exports。
私有类型泄露 – 公共API中引用了很多私有类型。这些私有类型不存在于HTML输出中，对于我们的文档构建步骤来说只是无声的失败。在大多数情况下，只公开私有类型是有意义的。谢天谢地，我们也有在CesiumJS中记录私有类型的习惯，因此不必编写新的JSDoc。
复制粘贴错误 – 最后一种JSDoc错误是与复制和粘贴相关的重复参数条目，例如，让ImageryProvider A，声明它正在记录ImageryProvider B上的属性，等等…

下一步

一旦社区开始使用这些定义，我们希望在接下来的几个CesiumJS版本中会出现一些小问题。我们还开始开发一个我们想要探索的想法列表，比如为实体API使用的属性接口利用泛型。最终，我们依靠社区告诉我们对开发者最重要的是什么，这样我们就可以用TypeScript路线图来塑造我们的CesiumJS 。

我们还想找出一种在CesiumJS基础代码中使用TypeScript定义的方法。我们相信VSCode有一些机制可以实现这一点，但是我们还没有探索它们。如果这被证明是可行的，那么这将是一个重大的胜利，并允许通过普通JavaScript进行另一个级别的验证，更不用说让开发CesiumJS成为比现在更好的体验了。

我敢肯定，当我说我们评估用TypeScript重写CesiumJS时，很多人都振作起来了。我绝对赞成延长时间。作为评估过程的一部分，我实际使用TypeScript编译器构建了现有的JavaScript代码库，甚至将一些基本文件（如Cartesian3.js）移植到TypeScript，以了解如何进行TS/js混合开发，而不是“一次完成”迁移策略。很像ES6，移植代码是最简单的部分。预计很快就会出现GitHub issue，它将打破所有必须发生的事情，使CesiumJS的TypeScript版本成为现实；但目前还没有承诺。

致谢

我只想再次感谢社区在过去几年中帮助产生了关于TypeScript的想法和讨论，特别向@thw0rted致谢，他是第一个改进初始TypeScript类型定义的外部贡献者，在最初的pull request中提供了很多很好的反馈。最后，非常感谢我的伙伴和维护人员 Kevin Ring，他不仅提供了大量的专家知识和反馈，还让自己投入到这项工作中，并最终对代码进行了一系列改进。

作者：Matthew Amato

原文链接：https://cesium.com/blog/2020/06/01/cesiumjs-tsd/

评语：TypeScript的引入，使得CesiumJS成为更加专业的库，同时使其更易于维护。当然移植是一个痛苦的过程。

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

Cesium1.70-介绍CesiumOSM建筑新特性

Sat, 13 Jun 2020 14:11:38 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

我们很高兴宣布Cesium OSM建筑，一个覆盖整个世界的3D建筑层，基于OpenStreetMap建筑数据。这是Cesium全球基础层套件的最新补充，包括全球地形图、航空图像和Cesium ion上已有的街景地图。

Cesium OSM建筑中的纽约市，西雅图，华盛顿特区和迪拜哈利法塔。

参观Cesium Stories – Take a tour in Cesium Stories

Cesium OSM建筑是一个很好的基础，在此基础上聚焦高分辨率数据，以提供城市环境和更加沉浸式的体验。人群来源和定期更新，该基础层数据将提供永无止境的用例：从需要城市规划、税收评估或交通管理等方面的可共享3D解决方案的城市，到想要在现实世界中把项目中的BIM模型可视化的开发商，需要创新工具进行培训和模拟的政府机构。

Cesium OSM建筑包含在从_today_开始的每一个Cesium ion订阅中，并且默认情况下包含在创建的任何新Cesium层中。您还可以使用一些简单的代码将其添加到CesiumJS应用程序中：

var viewer = new Cesium.Viewer('cesiumContainer');
viewer.scene.primitives.add(Cesium.createOsmBuildings());

Cesium OSM 建筑物由3.5亿多座建筑物组成。虽然完整的数据集的大小为数百GB，但通过3D Tiles的魔法，它可以在web上高效地流式传输和可视化。3D Tiles是一个开放的标准，所以Cesium OSM建筑可以在任何兼容它的查看器中使用，不仅仅是开源的Cesium。

OpenStreetMap在大多数城市中意味着丰富的元数据，比如建筑名称、地址和开放时间。

Cesium OSM建筑稳固地坐落在Cesium世界的地形上，边缘轮廓清晰，可单独选择和设计。在大多数城市中，与每栋建筑相关联的丰富元数据，甚至是建筑的各个部分，都可以使用动态样式设计。例如，我们可以突出显示所有的商业和住宅建筑，以查看整个城市不同社区的模式。

使用Cesium Stories以绿色高亮所有办公室和商业建筑。

CesiumOSM建筑源于著名的社区驱动地图项目OpenStreetMap。这意味着任何人都可以改进数据集！如果你曾经贡献过，衷心感谢！

请试用一下数据[ try out the data ]，让我们知道你的想法。期待您的建筑！

作者：Kevin Ring 原文链接：https://cesium.com/blog/2020/06/01/cesium-osm-buildings/ 评语：挺强大的，搞起来。但是需要联网。

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

宣布与Epic Games合作，为虚幻引擎创造Cesium

Sun, 07 Jun 2020 05:27:05 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

没有什么能比支持史诗游戏和史诗巨无霸计划（Epic MegaGrants program）为虚拟引擎构建Cesium更能体现Cesium对结合地理空间和三维计算机图形的信念了。

这标志着第一次将一个全尺寸、高精度的3D数字地球接入一个领先的游戏引擎，为Unreal的用户打开了一个充满可能性的世界。我们将共同推进培训与仿真、建筑、游戏、AR/VR、自动驾驶和其他行业，使3D Tile进虚幻世界，以精确可视化卫星和无人机捕捉到的真实世界位置——使用与CesiumJS近十年来相同的3D地理空间知识。

高分辨率摄影测量3D Tileset，由无人机拍摄，在AGI总部，Cesium孵化的地方。

“我们的愿景是允许仿真社区将不真实的引擎集成到他们的软件架构中，而不必改变他们的工作方式。与Cesium团队一起定义这个3D Tiles插件是一个非常令人兴奋的体验，因为它将允许GeoInt社区简化它们的管道。这项活动与我们对虚拟引擎的所有用户的大开放世界的愿景非常契合。——Sébastien Lozé，Epic Games仿真行业经理

当我在1994年开始图形编程时，Epic或Epic Megames在当时是一个灵感来源。他们发布的DOS游戏的图形和游戏性比我所见过的任何东西都要超前几光年。

今天，Epic的视觉质量继续受到鼓舞，特别是随着宣布的Unreal Engine 5接近电影CG的质量，Nanite虚拟化微多边形管道和Lumen动态全局照明引擎。将Unreal的优势与Cesium的全球规模、精度、性能和互操作性的优势结合起来，是推进3D地理空间的一个难道的机会。

我们的重点是使用3D Tiles格式来发展3D地理空间生态系统：OGC社区标准，用于高效地流式处理大量异构的真实世界3D数据集，以便进行可视化和分析。

3D Tiles被政府和商业实体广泛用于全球范围的地形、城市范围的摄影测量和来自激光雷达的大量点云。3D Tiles支持大量几何和纹理的流，以及由AI算法计算的语义，以便在运行时用于过滤、样式设置和分析。例如，点云中的点分类可用于过滤树叶，或摄影测量模型中建筑物侧面的材料特性可用于通信网络，因此射频传播考虑混凝土或玻璃。

Cesium for Unreal将是开源的，在Unreal Marketplace上免费提供。

Cesium for Unreal将默认连接到Cesium ion SaaS平台，以便随时使用地形和三维建筑的3D Tiles，以及一流的内容管道，以便从地形、图像和摄影测量模型等源数据生成高效的3D Tiles。Cesium for Unreal还将能够在内部私有网络上用Cesium ion传输3D Tiles。

在我们取得进展的同时，请保持关注。请随意联系，讨论合作或分享您的Cesium for Unreal用例。

作者：Patrick Cozzi 原文链接：https://cesium.com/blog/2020/06/04/cesium-for-unreal-engine/ 评语：Epic, Unreal虚幻引擎，玩游戏的朋友都应该知道，Cesium发展势头确实很好。

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

地底，TypeScript和全球3D建筑发布于CesiumJS 1.70

Sun, 07 Jun 2020 04:40:14 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

2020年6月1日Cesium JS发布1.70 release，带来了3个重要更新。

Cesium OSM建筑

Cesium OSM建筑是一个覆盖整个世界的3D建筑层，使用OpenStreetMap数据构建。它可以作为一个3D Tileset为所有Cesium ion用户提供，并带有丰富的功能数据，如建筑名称，地址，开放时间等等。

Cesium OSM建筑中的纽约市，西雅图，华盛顿特区和迪拜哈利法塔。

阅读更多关于这个新的地球图层的信息（Read more about this new global layer）以及如何在应用程序中使用它的信息。

地下支持

Cesium现在对可视化地下场景有了更好的支持，从地下的大地质层到矿山、洞穴和公用事业。CesiumJS 1.70增加了使地球半透明的功能，使数据能够在地底可视化，并允许相机自由地进入地下。

使地面变得半透明，以能够看到地下物体。在Sandcastle中探索这个例子（[Explore this example in Sandcastle ](https://sandcastle.cesium.com/index.html?src=Globe Translucency.html)）。这是爱德华·艾伦·洛克哈特博士在北威尔士的一个Parc铅矿。

这些对CesiumJS的改进是与Camptocamp的朋友合作的一部分。他们的工作支持瑞士联邦地形办公室swisstopo，该办公室利用Cesium（using Cesium）制作了一个交互式的全国三维地图。

Camptocamp正在swissgeol中使用这些新的地下特征，swissgeol是一个三维的网络地质数据查看器。它的目标是在一个场景中可视化许多不同的数据集，如钻孔、地震数据和查看地面横截面的能力。Camptocamp 在谈到这个新的基于Cesium的viewer时说：

三维地下查看器swissgeol将是swisstopo未来获取地质数据的主要入口，它可能成为瑞士及周边地区整个地球科学界必不可少的协作工具

在Camptocamp的三维地下viewer中可视化地形下的基岩。

这些实时代码示例展示了如何使用新的globe透明度功能：

如何激活透明度功能。[How to enable globe transparency](https://sandcastle.cesium.com/index.html?src=Globe Translucency.html&label=New in 1.69)
仅在地表的一部分激活透明度功能。[Enable transparency only on a section of the ground](https://sandcastle.cesium.com/index.html?src=Globe Interior.html)
自定义地下可见性。[Customize what’s visible underground](https://sandcastle.cesium.com/index.html?src=Underground Color.html&label=New in 1.69)

TypeScript

最后，在1.70版本中，CesiumJS现在附带了正式的TypeScript类型定义！最新和正确的定义文件现在将随每个新版本一起发布，TypeScript支持将作为CesiumJS GitHub库的一部分进行正式跟踪。

即使您不是TypeScript用户，这项工作的性质也提高了CesiumJS API参考文档的正确性和完整性，使它成为整个CesiumJS社区的一大胜利。

阅读更多关于这是如何工作的，以及在马特深入的建筑探索中（Matt’s deep architectural dive）所做的一切。

试用 CesiumJS 1.70

更新到最新的CesiumJS，让我们知道你的想法！你可以在这个论坛帖子[官方英文论坛：forum thread|Cesium中文社区：http://cesium.coinidea.com/]中发表任何关于这个版本的反馈和问题。

下载地址：

作者：Omar Shehata

原文链接：https://cesium.com/blog/2020/06/01/cesium-june-release/

评语：TypeScript使框架的构建更加鲁棒专业。Cesium OSM确实很好，但是需要Cesium ion，可以看出Cesium官方推Cesium ion的决心。

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

CesiumJS下载量超过1百万次

Sun, 07 Jun 2020 02:55:12 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

CesiumJS的下载总量已经超过100万。这一里程碑对我们（Cesium官方）和CesiumJS社区意义重大。

自从2012年4月CesiumJS作为开源项目发布以来，它已经被下载了超过1百万次。

100万次下载是200多个贡献者齐心协力的结果

自从2012年4月Cesium作为开源项目发布，已有200多个开发者为该项目做出了贡献。我们感谢社区所做的一切，从功能Features到错误修复到文档。想加入贡献者社区吗？试试其中一个“初学者”问题（“beginner” issues）。

Cesium的贡献者。前10贡献者之间的平均提交次数为1618次，以较大的尺寸显示。

100万次下载意味着数千个3D地理空间应用程序

CesiumJS开发者社区已经用CesiumJS在几十个行业中构建了数千个应用程序（thousands of applications with CesiumJS），从无人机到历史到极限运动。他们将商业地产空间、主要飓风、游艇比赛和火星探测器的探险活动可视化。

100万次下载意味着数百万行代码

CesiumJS是最广泛的JavaScript库之一，它提供了一个交互式的3D数字地球、星图、地形、图像、动态照明和交互式时间轴。自CesiumJS开发以来，我们每个月都会发布CesiumJS的更新和改进，随着我们不断提高在线传输海量数据的效率，CesiumJS累计添加了900多万行代码，删除了700多万行。

2013年Cesium中的珠穆朗玛峰

2020年Cesium中珠穆朗玛峰

100万次下载意味着刚刚开始

Cesium起源于Analytical Graphics，Inc.的几位工程师的工作。去年，我们成立为自己的公司，并以一种开放核心的商业模式剥离出来，确保了CesiumJS的长期可持续性。

2013年Cesium 开发者, 2013。从左到右: Hannah Pinkos, Dan Bagnell, Patrick Cozzi, Matt Amato, and Scott Hunter.

_2014年2月从事Cesium工作。当办公室停电威胁到开发速度时，研究小组前往Kevin Ring的地下室，在发电机电源上研究Cesium。围绕桌子，从左到右是：_Greg Beatty, Scott Hunter, The Captain, Patrick Cozzi, Richard Page, Matt Amato**

2020年Cesium Team……成长中

没有”你“我们做不到。感谢您使用和分享CesiumJS，感谢您参与我们的论坛（our forum），感谢您与我们分享您的工作（sharing your work with us），感谢您构建的令人难以置信的应用程序。我们期待着更多的人！

Cesium正越来越好

作者：Sarah Chow 原文链接：https://cesium.com/blog/2020/05/21/one-million-cesiumjs-downloads/ 评语：Cesium正越来越好。冉冉升起。

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

Cesium官方英文论坛

Sun, 17 May 2020 13:48:11 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

Cesium官方刚刚完成了将Google Groups论坛转移到Discourse的工作，Discourse是一个面向在线社区的现代开源平台。这是Cesium社区论坛成立以来最大的一次更新。论坛汇集了近十年的相关GIS的智慧结晶，从基本的故障排除到讨论世界可视化的最佳方式，共有30000多篇文章。

大多数人来到Cesium社区时，他们有自己想了解的真实世界的数据。通常这是他们第一次涉足3D地图。和许多人一样，通过搜索论坛了解到了为什么精度在许多应用中都很重要，或者当不考虑地球的曲率时会发生什么。

如果你曾经在Cesium论坛上问过一个问题，我想感谢您为这个独特的计算机图形学和地理空间知识档案作出贡献！

新的Cesium英文官方论坛的首页以及新的讨论分类

Cesium官方开始使用Discourse，使发现和分享Cesium和三维地理空间的知识更加容易。使用Discourse带来了更好的搜索和格式化工具；更好的布局，尤其是在移动设备上；更快的页面加载；以及更多的新功能。

关于新论坛的一切都是可定制的，所以希望它能随着我们不断增长的社区而发展。例如，刚刚启用了直接在论坛帖子中嵌入Cesium Stories：

现在可以把Cesium Stories直接嵌入进论坛帖子！上述是为美国地理学家协会会议所作的丹佛虚拟之旅。

请浏览一下论坛，告诉我们您对论坛的看法。如果您以前在旧论坛上发表过文章，请参阅此处说明，了解如何在新论坛上收回你的帐户。

新的论坛不仅使用户更容易找到需要的答案，而且是一个用户可以和更广泛的Cesium生态系统分享工作的合作场所。到时候见！

请访问：community.cesium.com

作者：Omar Shehata

原文链接：https://cesium.com/blog/2020/05/04/new-community-forum/

评语：Cesium官方的英文论坛，大家可以去搜索答案，提出问题。

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

i-Urban Renovation使用3D Tiles可视化鸟取县Munakata建筑状态

Thu, 23 Apr 2020 08:00:16 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

日本的鸟取县，使用i-Urban Renovation application built on Cesium帮助居民在线访问建筑物数据。

日本，鸟取县

日本各地方政府收集有关建筑物的数据，包括建筑物的用途、层数、建筑材料和建筑年份。位于福冈县北部的鸟取县责成它们的Urban Structure Visualization Promotion Organization以一种易于理解的方式向公众提供这些数据。

鸟取县建筑物的分布。建筑物的数量被聚合到一个区域网格（1km网格）中，并使用Cesium中显示的网格代码(mesh code)创建三维网格图。由于网格与所在地的信息和建筑物的数量相关联，因此在向居民解释当地风土人情时，可以方便地演示。

i-Urban Renovation app是基于CesiumJS构建的，用于可视化和分享数据。即时鸟取县覆盖了大约120平方米充满各种各样的建筑，app使用3D Tiles依然可以高效地流式化建筑数据。

基于用途对建筑物进行分类, 并对土地利用需求进行比较. 用户也可以基于Cesium Stories实现类似的功能。 supports 3D Tiles styling.

基于Cesium app，用户可以看到任何建筑物的当前状态。建筑物可以根据各种指标参数进行着色，包括：

用途，如住宅、商业、商业、政府、农业等，
层数，易于区分高层和低层建筑的分布，
建筑材料，如木材或钢筋混凝土，
建筑年份，显示新老建筑的分布情况。

此外，用户还可以通过将建筑数据集与土地利用分区数据集相结合来检查建筑使用与土地利用法规之间的关系。当用户单击建筑物时，将显示详细的建筑物属性。

查看建筑使用情况。点击各个建筑物查看详细数据。我们最近在Cesium Stories中新增了功能added feature picking to Cesium Stories 基于Cesium Stories实现你自己的需求.

请前往 i-Urban Renovation 或 data encoding specification.查看或者将您自己的数据上传到 Cesium ion 来轻松的生成自己的Cesium Stream 3D Tiles.

作者：Sarah Chow

原文链接：https://cesium.com/blog/2020/03/31/i-urban-renovation-visualizes-munakata/

评语：虽然依然是在苦劝大家用Cesium ion, 但是我们可以看到Cesium在大场景中的应用也不错。

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

将Cesium ion上的3D Tiles和Bing imagery应用到osgEarth

Sun, 19 Apr 2020 14:44:51 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

Pelican Mapping 激动的宣布支持加载Cesium ion上的3D Tiles和Bing图层到他们的osgEarth数字地球渲染工具上。

添加3D Tiles支持

osgEarth 绘制来自Cesium ion中的数据Melbourne, Australia

在过去的一年中，我们一直在开发对osgEarth中3D Tiles的支持，事实证明这是一种令人兴奋和高效的运行格式。我们首先开发了一个基于TinyGLTF的OpenSceneGraph的glTF读写器。在此基础上，我们为osgEarth构建了一个3D Tiles Layer的插件，用于处理流式Tiles。osgEarth根据Cesium使用的相同屏幕空间误差指标来决定何时加载和显示tiles，因此3D Tiles layer在osgEarth中的外观应该与在Cesium中相同。开发了3D Tiles loader之后，我们可以通过添加基于授权的ion token到3D Tiles layer以快速添加对Cesium ion的支持。

Bing Maps

osgEarth通过Cesium ion渲染带标记的Bing imagery

我们还增加了对Bing地图的支持，从Cesium ion到osgEarth。osgEarth已经有了一个Bing图像driver，所以我们可以使用Cesium ion的API来获取Bing的密钥和映射样式，然后在driver基础上创建一个osgEarth Bing图像层，证书由Cesium ion提供。我们希望在将来添加对更多外部图像类型的支持。

编码整合（Putting it all together）

下列是一个Earch文件的示例，用于表示如何从Cesium ion上加载内容到osgEarth。

<map name="Cesium ion">
<CesiumIonImage name="Bing Maps Aerial With Labels">
<asset_id>3</asset_id>
</CesiumIonImage>
<CesiumIon3DTiles name="Melbourne">
<asset_id>69380</asset_id>
</CesiumIon3DTiles>
</map>

可以将Cesium ion token设置为环境变量，然后使用任何基于osgEarth的应用程序加载earth文件。

export OSGEARTH_CESIUMION_KEY=YOUR_API_KEY
osgearth_viewer cesiumion.earth

作者：Jason Beverage

原文链接：https://cesium.com/blog/2020/04/02/osgearth-supports-cesium-ion-assets/

评语：osgEarch宣布支持Cesium ion。

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

从带Per-Building数据的KML/COLLADA中创建3D Tiles

Fri, 10 Apr 2020 07:13:20 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

许多Cesium的使用者经常需要将整个城市的数十万个三维建筑可视化，用于房地产、城市规划或土木工程项目。为了更便捷地为这些行业创建有用的虚拟数据（digital twins），我们刚刚添加了在将KML/COLLADA上传到Cesium ion时嵌入特征数据的支持。

这意味着您现在可以从建模工具（如CityEngine、Rhino和3DCityDB）导出您的三维建筑，并在Cesium ion web上共享数据时包含每个建筑的属性。

Philadelphia 的3D建筑与Cesium World Terrain相结合。可以单击每个建筑以显示其名称name、地址address和地块编号parcel number。

Cesium ion将你的建筑转换为3D Tiles，以优化它的网络，同时仍然允许你检查每一栋建筑。上述示例的源3D Data来自宾夕法尼亚州空间数据访问( Pennsylvania Spatial Data Access)，地址、名称、地块编号和城市所有的属性来自费城开放数据（Open Data Philly）。

为了深入了解这种可视化，我们可以使用3D Tiles Styling来突出显示Philadelphia拥有的所有属性，并单击它们以获取其包裹编号。然后，可以使用地块编号从城市数据库中查找有关每个建筑的更多信息。

您可以使用3D Tiles Styling来突出显示Philadelphia城市拥有的所有建筑物，如博物馆和历史遗迹。

要为城市创建这样的场景，源数据应该是一个或多个KML文件，用于定义每个三维模型的位置。这是一个来自KML文件的片段，用于费城建筑物。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


<Placemark>
 <name>Independence Hall</name>
 <Model>
 <Link><href>building.dae</href></Link>
 <!-- Model properties like longitude, latitude, etc... -->
 </Model>
 <ExtendedData>
 <Data name="Address">
 <value>500-36 CHESTNUT ST</value>
 </Data>
 <Data name="Parcel_ID">
 <value>313762</value>
 </Data>
 <Data name="Is_City_Owned">
 <value>True</value>
 </Data>
 </ExtendedData>
</Placemark>

Placemark的名称用作建筑物的名称。任何附加数据都可以添加到标记中。

一旦你把建筑上传到Cesium ion，你就可以用Cesium Stories来设计和检查它。您还可以将它与其他类型的内容（如CityGML或点云）组合，这些内容也可以具有嵌入特征数据。

请尝试创建Cesium ion账户并上传你的建筑creating a Cesium ion account and uploading your 3D buildings。

作者：Omar Shehata

原文链接：https://cesium.com/blog/2020/04/09/kml-collada-metadata/

评语：Cesium官方不遗余力的推动Cesium ion和Cesium Stories，大家也可以关注一下，但是我本人对online的东西不是那么信奉，毕竟大家都喜欢搞离线。数据安全也日益重要。

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

将Cesium Tools用于更好的构建管理

Thu, 02 Apr 2020 08:41:50 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

Cesium技术正在给建筑业带来革命性的变化。我们与 partnership with Komatsu合作开发的智能建筑仪表盘使我们能够比以往更快地可视化、测量和分析建筑工地的进度。下面将介绍它的工作原理。

聚集不同的数据集来评估进度

为了保持跟踪，现场管理人员必须不断地将在CAD设计中提供的计划与现场实际发生的情况进行比较，这些情况由传统调查（Traditional survey）、无人机调查（Drone survey）和智能施工车辆（Smart vehicles）的数据（包括竣工数据和车辆遥测数据）采集。

Cesium Tools应用程序将设计模型与现实世界中的时间标记数据结合，以进行测量和跟踪进度。Cesium将这些数据源作为输入，将它们融合在一起以创建工作站点的最新3D表示，并将它们处理为3D平铺，以便它们可以轻松共享和流式传输。

一种DSM和正射影像，转换成三维平铺，覆盖使用CAD软件包创建的线条文件中的矢量数据

收集数据

生成智能构建应用程序需要我们准备接收各种数据类型，以不同的方式和完整度收集。

传统调查

传统测量场地的方法是使用探测车在整个工作场地的位置网格上进行GPS测量。以这种方式收集数据需要一天或更长的时间，而且收集的数据比较少。这些数据可以编译成LandXML、DXF或其他三角形网格格式的三维网格。

无人机调查

调查也可以由无人机或UAV进行。大约一周一次，一次最多一天，一架无人机飞过现场，在工作现场的多个地点拍照。摄影测量软件将这些照片转换成地形的整体三维模型。常见的输出包括点云、DTM/DSM地形数据和正射影像。

日本大阪一个工地的点云，由无人机收集，转化成网格，再由Cesium ion平铺成3D Tiles。

无人机调查比传统调查快得多。对于英国的一家公司来说，采用基于无人机的数据采集方法，再加上Cesium的3D拼接功能，将从采集到可视化的时间从3天缩短到30分钟。每种方法的测量结果误差不到2%。

智能施工车辆

建筑业的最新趋势之一是机器跟踪，要么在建筑设备中嵌入GPS传感器，要么在设备上附加售后传感器。这些传感器跟踪每台机器在工地周围移动时的情况，提供“竣工”数据部分地形数据，当与现有地面合并时，这些数据可以提供工地地形的近乎实时的图片，通常是按小时采集的。

图中的黄色部分，最近从安装传感器的工程机械收集的“竣工”数据，与之前对整个工地进行的无人机调查相融合。Cesium可以让你在任何时候组合和可视化不同的表面。

超乎想象

尽管能够看到正发生的事情很有价值，但Cesium Tool应用程序的真正价值在于分析功能。

一个用热力图突出显示的切割和填充分析，显示需要移动多少废土和已经移动了多少废土。

例如，如果项目经理需要将结果发送给客户进行计费，他们可以理解已移动的废土的总百分比，以及仍然需要工作的区域。确定库存中剩余材料的数量非常简单，只需点击创建一个测量：程序将计算材料的体积、重量和价值。

测量库存。

项目经理还可以通过单击路径并检查坡度（作为热力图或使用二维横截面工具的纵断面图）在行进之前查看路线。

地形坡度热图。

这只是智能构建应用程序（Smart Construction app）中Cesium赋能的众多功能的概述。进入我们的construction industry，观看视频并了解更多信息。

原文链接：https://cesium.com/blog/2020/03/30/construction-with-cesium/

作者：Gabby Getz

评语：Cesium团队提供的工具和功能越来越强大，令人惊叹。

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

使用Cesium Stories在3D Tilesets中检查Features

Fri, 27 Mar 2020 14:50:31 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

我们创建了3D Tiles用以流式化、可视化和分析大量的三维内容，如整个城市或复杂的建筑模型。基于当前的Cesium Stories的更新，我们可以通过点击来检查3D Tiles中的feature数据。

现在，可以单击Cesium Stories中的任何3D Tiles feature，例如New York City tileset，以审查其数据。

假设想了解纽约市医疗设施的分布情况。你可以使用using styling来突出显示3D Tileset中的所有建筑，然后点击来查看设施容量，，是否有紧急事件以及它们的官网和联系电话。

你也可以分享自己的Cesium Story，让其他用户以同样的方式检查它，无论他们是在办公室做一个彻底的分析，还是在外地。在移动设备上，可以折叠或展开信息框，以便在三维场景的完整视图和要素数据之间轻松切换。

Cesium Stories适用于任何现代网络浏览器。在移动设备上，可以折叠或展开信息框，以便在三维场景的完整视图和要素数据之间轻松切换。

Cesium Stories中的feature拾取可在任何具有feature数据的3D Tileset上工作，且不限制feature的物理尺寸，因此这非常适合于BIM/CAD等行业，在这些行业中，需要检查非常大的管道，直至最小的阀门或螺钉。

Cesium Stories中的feature提取可以在任何包含feature数据的3D Tileset上工作，比如电厂BIM模型中的管道和阀门。

Feature拾取也适用于向量数据，比如GeoJSON、KML和CZML。向量层提供了一种简单的方式来添加或更新特征数据，即使3D Tileset本身不包含任何已定义的特征。

在下面的例子中，我们从没有feature数据的Cesium Ion Asset仓库中提取了华盛顿特区的Vricon摄影测量tileset，并将其与华盛顿特区开放数据平台的建筑能源使用CZML相结合。

结合能源使用的CZML和华盛顿特区的摄影测量，让我们可以点击任何建筑物，查看其能源得分。该CZML是自定义的，可以添加建筑物的图片。

允许用户可以点击任何一个建筑，查看它的名称，年能耗，和能源之星得分。KML和CZML支持HTML描述，因此可以添加图像、链接，或者通常自定义它的样式。

我们非常激动你将用它来构建您要的东西。学习如何在the Cesium Stories styling tutoral中使用拾取和样式化造型。

原文链接：https://cesium.com/blog/2020/03/25/explore-data-with-picking/

作者：Omar Shehata

评语：Cesium Stories功能强大，非常值得一试。

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

使用Cesium Stories来可视化时序数据

Mon, 23 Mar 2020 09:07:26 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

Cesium可以用来可视化随时间变化的数据，无论是跨越数百年的地质变化，还是需要追踪到几分之一秒的卫星轨道。作为正式发布的Cesium Stories（ launch of Cesium Stories）一部分，我们很高兴地宣布改进了对动态时序数据的支持，因此您可以拖拽动态KML或CZML来创建可视化变化数据的交互式故事。

这是一个伟大的方式来回顾收集的无人机飞行和遥测数据随着时间的推移，因为你可以看到无人机的路径——遍布全世界。

使用Cesium Stories，我们可以回顾无人机与周围景观的飞行数据，并查看收集的时序的遥测数据

或者，如果您在STK （tools like STK）等工具中进行离线分析，可以将您的工作导出为CZML并使用链接轻松共享。

卫星覆盖率由STK（System Tool Kit系统工具包）计算，并作为CZML文件导出到Cesium Stories。

时序动态数据不必是随时间移动的对象。我们的用户还绘制了房价、疾病爆发和不断变化的地形图。

Cesium Stories也支持动态KML文件。这幅图显示了1979年到2007年格陵兰岛每年的冰面融化情况。来自国家冰雪数据中心的数据。（National Snow and Ice Data Center）

Cesium Stories使你很容易看到和分享你的时序动态数据，让你控制播放速度、相机如何移动。尝试一下我们新的时序动态数据教程( with our new time-dynamic data tutorial)。或者看看你还能用Cesium Stories做些什么( you can do with Stories)。

原文链接：https://cesium.com/blog/2020/03/04/time-dynamic-stories/

作者：Omar Shehata

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

使用3D Tiles Overview学习3D Tiles

Sat, 21 Mar 2020 07:38:56 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

3D Tiles的创建是为了在web上传输大量的3D数据集。作为一个开放的规范，我们打算在许多不同的运行时引擎中使用它作为可视化和分析大量3D数据的事实规范。如今，许多引擎，包括CesiumJS、AGI的STK和Uber的loaders.gl，都支持3D Tiles来传输海量的3D地理空间数据集。

我们激动地宣布发布3D Tiles Overview，这是一个学习3D Tiles主要概念的简易指南，旨在助于将3D Tiles集成支持到运行时引擎中，以便可视化和分析大量异构的3D地理空间内容。

3D Tiles Overview的封面页突出显示了所涵盖的所有概念。

本指南对关键概念的简洁覆盖来补充详细全面的3D Tiles specification，以帮助开发人员快速使用3D Tiles。

我们很高兴与马可·赫特（Marco Hutter）合作，他是glTF的长期撰稿人，也是glTF reference的创造者，正是这个reference card激发了我们的灵感。

我们很想了解3D Tiles概述如何帮助开发者使用3D Tiles，以及如何是否又改进的建议。如果你正在寻找一个地方学习3D Tiles，前往Cesium ion策划自己的3D Tilesets，或上传您自己的数据切片，托管，转为3D Tiles流。

作者：Shehzan Mohammed

原文链接：https://cesium.com/blog/2020/03/12/3d-tiles-overview/

说明：3D Tiles Overview是Cesium官方出品的3D Tiles入门指南，非常值得大家学习。

GitHub地址是：3D Tiles Overview

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

使用EdgyGeo Cesium工具查询下载数据集

Thu, 19 Mar 2020 02:31:00 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

EdgyGeo, Inc. 带来了一件非常棒的工作支撑架构、工程和构建（AEC）工业。这次让我们来看它们的下载工具，它允许架构师、工程师、开发者和城市规划者快速地获取指定区域的海量数据集。

一个场景中的三维建筑物和路线。数据集来自Los Angeles。

有了Cesium-based viewer，EdgyGeo允许用户探索整个城市。他们数据的亮点是高分辨率的CyberCity 3D建筑，摄影测量自动建模生成。它们的高分辨率建筑库覆盖了美国近100个城市和世界其他几十个主要城市，另外还提供其他地点使用的挤压式建筑。

但EdgyGeo提供的还不止这些建筑。它们拥有来自州和地方政府（特别是城市）、公用事业、机场、商业房地产公司、市中心开发协会和第三方实体的数据集。这些数据集包括地形、环境数据、联邦应急管理局洪水数据和其他地理信息系统数据。订阅者还可以添加自己的数据资产并构建数据清单。

EdgyGeo收集并整理这些数据。利用Cesium的3D tiling pipeline，它们将这些数据集拼接成3D Tiles，并将它们融合在Cesium ion中，这样无论收集到的数据有多大，都可以高效地流式传输，并在具有三维地形和图像的地图中轻松地进行探索。

Cesium的3D tiling pipeline允许EdgyGeo同时在线共享大量数据集。

不仅场景易于浏览，用户还可以下载数据用于自己的项目。用户只需选择场景的一部分并下载该区域中的数据。他们可以一次下载多个地理信息系统数据集，包括CyberCity 3D建筑模型、3D地形、航拍图像、中心线、路缘等，上述所有数据都是精确地理定位的。

很容易找到和选择特定区域的相关数据集，如选取Cambridge, MA。

下载以Collada（DAE）和KML/KMZ格式提供，用户可以随时上传到自己Cesium ion帐户或在其他应用程序（如Rhino、SketchUp和Revit）中进行可视化。KML格式也将很快成为可用的格式。

EdgyGeo导出的三维几何图形在SketchUp中可视化。

有了这个可定制的下载选项，订阅者可以获取特定项目中所需的本地数据集，在一个简单的数据下载和传输过程中链接GIS、AEC、BIM和构建工具。

可以通过联系EdgyGeo首席执行官Kevin DeVito来试用该工具。

作者：Sarah Chow

原文链接：https://cesium.com/blog/2020/03/03/edgygeo-3d-tiles-download/

评论：Cesium ion似乎是Cesium官方主推的数据存储及管理工具。从未来发展来看，建议大家可以使用本文中的下载工具和Cesium ion。

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

探索新冠肺炎（COVID-19）对全球航班的影响

Mon, 16 Mar 2020 15:27:10 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

随着今天从欧洲到美国的旅行限制生效，以及为了减缓新冠病毒的传播更加劝导群众留在家中，我们很好奇这些措施何影响全旅行。显而易见，我们使用Cesium进行探索。

我们开始收集过去几个月每隔一天的航班数据。下列是进出北京主要国际机场的所有航班：

[随着时间的推移，北京首都国际机场（PEK）的预定航班数量已可视化出来。起飞显示为红色，到达显示为绿色。]

一月底，航班数量急剧下降，从大约900架次迅速下降到不足300架次。这与世界卫生组织（WHO）宣布全球卫生紧急状况、美国和其他国家限制从中国出发的旅行相吻合。

继中国之后，意大利受到了冠状病毒的严重影响。第一例报告病例发生在2月22日，病例迅速激增，意大利政府于3月8日实施隔离。我们可以看到那里的航班流量在下降，尽管没有那么迅速：

[进出意大利罗马da Vinci–Fiumicino机场（FCO）的航班。]

截至发稿时，伦敦的航班还没有受到任何官方限制，但3月剩余时间的定期航班仍有大幅下降。我们把所有美国航班都标记为红色。

[进出伦敦Heathrow机场的航班。]

最后，这是纽约市的肯尼迪机场，美国最大的空中交通枢纽之一。到目前为止似乎没有任何明显的变化：

[进出纽约John F. Kennedy国际机场的航班。]

如何创造上述可视化效果

飞行数据是从AeroDataBox获得的。它们的API读取一个机场代码参数，并返回在给定时间段内进出该机场的所有航班。

一旦我们有了这些预定的航线，我们就使用OpenFlights的开放数据来获取每个机场的位置。

最后，我们创建了一个CZML，它用一个时间戳为每个路线绘制一条线，并用Cesium Stories可视化了随时间变化的路线。

如果读者想创建类似的东西，我们建议你从Cesium Stories的动态时序数据教程开始。

原文作者：Omar Shehata

链接：https://cesium.com/blog/2020/03/13/covid-19-flight-impact/

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

[leetcode]Number Complement

Mon, 09 Mar 2020 13:54:50 +0000

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


class Solution {
public:
 int findComplement(int num) {
 int countDigit = 0;
 int numBak = num;
 while (0 < num) {
 num = num >> 1;
 countDigit++;
 }
 return (int)(pow(2, countDigit) - 1 - numBak);
 }
};

[leetcode]Print in Order

Sun, 23 Feb 2020 04:11:23 +0000

 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
33
34
35
36
37
38
39


class Foo {
private:
 bool isFirst;
 bool isSecond;
 bool isThird;
public:
 Foo() {
 isFirst = false;
 isSecond = false;
 isThird = true;
 }

 void first(std::function<void()> printFirst) {
 while (!isThird);
 isThird = false;
 isSecond = false;
 printFirst();
 // printFirst() outputs "first". Do not change or remove this line.
 isFirst = true;
 }

 void second(std::function<void()> printSecond) {
 while(!isFirst);
 isFirst = false;
 isThird = false;
 // printSecond() outputs "second". Do not change or remove this line.
 printSecond();
 isSecond = true;
 }

 void third(std::function<void()> printThird) {
 while(!isSecond);
 isFirst = false;
 isSecond = false;
 // printThird() outputs "third". Do not change or remove this line.
 printThird();
 isThird = true;
 }
};

Cesium近期更新及国内源码下载地址

Mon, 09 Dec 2019 01:31:00 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

有一段时间没有更新公众号和知识星球了。最近3个月做了很多人生岔路口的选择，本来已经入职一家国企，完全从事智慧城市的引擎开发。后来，阴差阳错又入职微软（亚洲）互联网工程院（STCA）从事大数据相关研发。造化弄人。没有对错，只有选择，如果大家在技术岗位上有求职、简历、面试、招聘的交流需求，可以联系我。

但是请大家放心，数据可视化方向和Cesium我会一直跟下去，目前来说，我也很看好Cesium项目，也很看好物联网和智慧城市。

接下来的一段时间会争取公众号做到周更。知识星球恢复到月更。内容尽可能做到不拖沓，有干货，希望对大家有一些帮助。如果大家对Cesium中文网有什么建议和意见也欢迎给我留言。

Cesium近期的更新：

目前Cesium依旧保持每个月月初的一次发布的频率，但是在2019年11月应该有一次失误导致，2019年11月有两次发布。截至到目前（2019年12月9日），Cesium已经更新到了Cesium-1.64。下面是更新的清单：

1.64 – 2019-12-02：Cesium-1.64.zip 引入大量内部优化。

1.63.1 – 2019-11-06：Cesium-1.63.1.zip 修复1.63中，当设置window.devicePixelRadio大于1.0时，地表和labels渲染不正确的问题。

修复1.63中，一些primitives将通过globe显示，当log depth被禁用。

1.63 – 2019-11-01：Cesium-1.63.zip Cesium迁移到ES6 modules。这可能会对您的Cesium程序造成影响，基于您如何使用Cesium。

我们将ceiumjs.org和cesium.com所有网站内容整合进cesium.com。

新增labels的UTF-8支持，极大提升了对非拉丁字母和emoji的支持。

10倍压缩Web Workers bundle大小，从8384KB(2624KB压缩后)到863KB(225KB压缩后)。提高了Cesium加载速度，尤其在低性能设备和高延迟网络中。

国内源代码下载地址（200KB/S）

考虑到GitHub上Released版本的网速十分不稳定（虽然GitHub已经被微软收购），所以，Cesium中文网提供Cesium最近版本的镜像下载地址，但是考虑到服务器和带宽的费用，不能保证所有历史版本都可以下载，也不能保证下载速度多好。实际测试100~200KB/S

下载地址：

http://cesium.coinidea.com/site/download.html

Cesium中文网交流QQ群：807482793 Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

[一]Cesium利其器——Visual Studio Code

Tue, 22 Oct 2019 15:01:55 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

IDE

Web前端刚入门的朋友，常常想选择一个快速、好用、流行（其实我也不知道为什么要流行，或许是在技术的路上，工程师希望自己走在主流的路上？）的IDE（Integrated Development Environment：集成开发环境）。IDE重要么？重要也不重要。不重要是因为：它只是一个工具，我们更应该关注的是需求、逻辑、算法、知识等。重要是因为：它是一个工具，工欲善其事必先利其器，工具选好了常常能够达到事半功倍的效果。

CesiumJS官方并没有特别推荐IDE，但在入门教程Cesium入门2 - Cesium环境搭建及第一个示例程序有这么一段话：

If you’re already a seasoned developer, you most likely have a favorite editor or development environment; for example, most of the Cesium team uses Eclipse. If you’re just starting out, a great free and open-source editor is Notepad++, which you can download from their website. Ultimately any text editor will do, so go with the one that you are most comfortable with.

可以看到Cesium团队主要使用开源的Eclipse或者推荐使用Notepad++。

根据笔者自身的使用情况简单列了一些使用过的IDE：

Notepad（Windows自带）或TextEdit（Mac自带）

价格：免费

下载地址：系统自带

开启速度：极快

操作系统：Windows/Mac

Notepad即记事本，工程师（Note:以后笔者会将程序员称为工程师，尊重自己赢得尊重）的终极梦想摆脱IDE用纯文本编辑器编程是一种很酷的事，但是特别困难，如果单纯的阅读一些简单的HTML、JavaScript或CSS可以用记事本打开，但是非常不建议用来开发。

如果读者系统的学习过计算机科学，那么对编译、链接、生成、测试等一定不陌生（虽然前端基本不会用到编译链接），一个好的IDE一定能够对项目有很好的组织。记事本做不到这一点。
Notepad++（For Windows only）

价格：免费

下载地址：https://notepad-plus-plus.org/downloads/

开启速度：极快

操作系统：Windows

非常优秀的超轻量级编辑器，除了能够阅读和编写HTML、JavaScript或CSS之后，支持打开文件夹，这在一定程度上对项目进行了一些组织。有大量插件可以使用。目前，就读者所了解到的，它仅支持Windows环境。
Sublime Text (For Windows and Mac)

价格：收费闭源

下载地址：www.sublimetext.com/ (官网) | http://www.sublimetext.cn/ （国内社区）

开启速度：快速

操作系统：Windows

非常优秀的轻量级编辑器。几乎涵盖Notepadd++的所有功能。同时支持Windows和Mac。海量插件。

新特性包括：GOTO ANYTHING、GOTO DEFINITION、多重选择、命令面板、自定义、分割编辑、即时项目开关等。当然不付费，也能够使用unregistered版本。
Eclipse/MyEclipse（For Windows and Mac）

价格：免费/收费

下载地址：https://www.eclipse.org/downloads/

开启速递：中速/慢速

操作系统：Windows/Mac

MyEclipse实际上是Eclipse的一个付费版本，最开始是以插件的形式存在。Eclipse主要是作为一个Java的IDE，能够非常好的集成Java相关的插件。如果读者开发Cesium的过程中，后端选型是Java并且喜欢使用免费的IDE，没有那么关注前后端分离，那么Eclipse是一个非常好的选择。
PHPStorm/IntelliJ IDEA/WebStorm（For Windows and Mac）

价格：收费

下载地址：http://www.jetbrains.com/phpstorm/ | http://www.jetbrains.com/idea/ | http://www.jetbrains.com/webstorm/

开启速度：慢速

操作系统：Windows/Mac

从域名可以看出来，这三个IDE出自一家公司之手。它们是非常优秀的IDE，但是它们都价格不菲，并且是按年购买license。如果您有一定的资金，可以购买它们。它们真的非常优秀。其中，如果读者开发Cesium的过程中，后端选型是PHP，那么可以使用PHPStrom；如果后端选型是Java，那么可以使用IntelliJ IDEA；如果只是需要开发Web前端的代码，有一个比较好配置电脑，可以接受付费，那么可以使用WebStorm。有句老话叫：“便宜没好货，好货不便宜”，卖这么贵，是因为它们真的很好用。
Visual Studio Code （VSCode）(For Windows and Mac)

价格：免费

下载地址：https://code.visualstudio.com/

GitHub地址：https://github.com/Microsoft/vscode

开启速度：快速

操作系统：Windows/Mac

便宜真的没好货么？并不是，向大家隆重介绍，宇宙最强IDE VSCode。在MSRA实习的时候，就一直在想Visual Studio可以做得那么优秀，那么有没有能在前端使用的类似于Visual Studio的优秀的IDE。有的，Microsoft的亲儿子，免费开源跨平台的Visual Studio Code来了。不得不说，Microsoft这几年在拥抱开源方面确实做了很多。
```
Free. Built on open source. Runs everywhere.
```
VScode 不仅可以用来开发前端，也可以用来开发Java、PHP、C++、Python…

插件官网：https://marketplace.visualstudio.com

VScode在各个方面并不比WebStorm逊色。VSCode拥有非常好的插件生态。具有一个优秀IDE应该有的各种功能特性：智能提示、前端支持、自动修复（插件）、Git/GitHub集成（GitLens）、历史记录（Local History）、代码检查（Code Spell Checker）、主题配色等。

Visual Studio Code 入门

1. 命令面板

可以通过F1或Ctrl（Cmd for MAC）+Shift+P打开

在框中输入：>Extensions: Show Installed Extensions 即可查看已安装的插件，也可以输入其它命令。

2. 如何安装插件

安装live server插件

点击左侧工具栏中的Extensions，在框中输入live server也可以是别的插件吗，然后可以看到第一个插件名为：

Live Server。点击Install，即安装该插件。

该插件的用处：内置一个Web服务器（Live Server）,可以在开发代码的过程中，随时预览自己的修改是否正确，而无需过于关注Web服务器。

右击“Open With Live Server”即可在浏览器中打开对应Cesium页面：

3. 常用插件列表

Settings Sync：同步VSCode配置

Debugger for Chrome：VS Code调试在Google Chrome中运行的JavaScript代码

beautify: 格式化代码

Auto Rename Tag: 自动完成头部和尾部闭合标签的同步修改

guides：代码对齐辅助线

filesize：显示当前文件大小、创建修改时间

Todo Tree：快速搜索TODO等注释标记

vetur/VueHelper： VUE插件

HTML Snippets：提示初级的h5代码片段，标签等

HTML CSS Support：让html标签写上class，智能提示当前项目所支持的样式。

vscode-icon：让vscode的文件夹目录添加上对应的图标。（如果不生效，在【文件-首选项-文件图标主题】重新选择设置）

path intellisense：文件路径自动补齐。

npm intellisense：require引用包的补齐

bracket pair colorizer：让括号有独立的颜色

tortoiseSvn：svn插件

auto close tag：自动添加html、xml关闭标签

change-case：修改文本的更多明明格式，驼峰命名，下划线分割命名等等

color info：在颜色上悬停光标，就可以预览色块中色彩模型的详细信息、

css peek：追踪至样式表中css类和id定义的地方。在html文件右键菜单，单击选择器时，选择“go to definition ”，会跳转到css样式代码段

eslint：检查js编程中的语法错误

html boilerplate：html模板插件，一键创建html文件

htmlHint：html代码格式检测

intelliSense for CSS class names in HTML：把项目中css文件里的名称，智能提示在html中

JavaScript (ES6) code snippets ：es6代码片段提示

上述插件直接搜索安装即可。

4. 中文语言包

chinese(Simplified)Language Pack for Visual Studio，看不习惯英文的读者，可以下载安装这个，中文简体语言包。

安装完成之后，重启VSCode：

网络上有非常多的博主详细的介绍了如何使用Visual Studio Code工具。大家可以打开搜索引擎进行搜索。也可以在Cesium中文网（http://cesium.coinidea.com/）上留言。

Cesium中文网交流QQ群：807482793 Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

Cesium中文网的朋友们

Mon, 15 Jul 2019 07:28:08 +0000

目前已开通知识星球-Cesium中文网的朋友们

注意：仔细思量好再进来，一旦付费，概不退费。下述内容均尽力而为。 1. 每月一次技术交流（Cesium为主），提供源码。
2. 每人5次/周免费提问（Cesium，数据可视化及其他技术问题）。
3. 简历修改，工作推荐。
4. 额外付费职业规划。

暂定的交流内容如下：[授人以鱼不如授人以渔。重点还是希望大家能够具备自己独立自主研发相关框架的能力]；希望能对您有所帮助。

考虑大家的实际情况，可能会稍微涉及：操作系统、计算机网络、HTML/CSS/JavaScript、面向对象、基本的三位数字地球原理的知识。
自己能够具备操作简单Git命令，从开源社区下载代码，并运行Cesium。
Cesium的图片、地形以及模型的加载及操作。
自己能否爬取自己的瓦片图数据；如何编写轻量级的爬取工具。
如何通过GeoServer构建自己的GIS数据服务器，已经二维的Openlayer数据展示。
跨终端Web，Cesium中的人机交互事件，如何实现局域网下跨浏览器或跨设备的同步。
可能涉及的其他内容：Cesium与Echarts和VUE、其他GIS系统、一些数据可视化的内容。

AZKBAN——开源任务调度系统

Sat, 15 Jun 2019 00:47:43 +0000

azkaban是一个开源的任务调度系统，用于负责任务的调度运行（如数据仓库调度），用以替代linux中的crontab。官网:https://azkaban.github.io/

azkaban主要有三部分构成：

MySQL：Azkaban使用MySQL来存储项目和执行。
Azkaban Web Server：Azkaban使用Jetty作为Web服务器，用作控制器以及提供Web界面
Azkaban Executor Server：Azkaban执行服务器执行提交工作流。

本文主要使用的是azkaban3.43，如果您从github源代码生成编译tar包时候可以留言，我可以给您分享我已经测试通过的安装包文件。
安装包文件主要有：

azkaban-db-3.43.0.tar.gz
azkaban-solo-server-3.43.0.tar.gz
azkaban-exec-server-3.43.0.tar.gz
azkaban-web-server-3.43.0.tar.gz
azkaban-hadoop-security-plugin-3.43.0.tar.gz
其中solo是单机版本，我搭建的是多执行节点，单web server节点的版本。

注意：本文默认azkaban的目录位于/azkaban

数据库
首先需要安装MySQL数据库，然后创建一个叫azkaban的数据库。mysql中执行

source /azkaban/azkaban-db/create-all-sql-0.1.0-SNAPSHOT.sql

配置文件
0. 配置keystore，keystore的位置位于/azkaban/azkaban-web/conf/（需要与配置文件中路径对应）

keytool -keystore keystore -alias jetty -genkey -keyalg RSA
输入密钥库口令: azkaban
再次输入新口令: azkaban
您的名字与姓氏是什么? [Unknown]: 略过
您的组织单位名称是什么? [Unknown]: 略过
您的组织名称是什么? [Unknown]: 略过
您所在的城市或区域名称是什么? [Unknown]: 略过
您所在的省/市/自治区名称是什么? [Unknown]: 略过
该单位的双字母国家/地区代码是什么? [Unknown]: CN
CN=Unknown, OU=Unknown, O=Unknown, L=Unknown, ST=Unknown, C=CN是否正确?
[否]: Y
输入 <jetty> 的密钥口令 (如果和密钥库口令相同, 按回车):

/azkaban/azkaban-web/conf/azkaban.properties

# Azkaban Personalization Settings
azkaban.name=Allin
azkaban.label=My Local Azkaban
azkaban.color=#FF3601
azkaban.default.servlet.path=/index
web.resource.dir=/azkaban/azkaban-web-server/web/
default.timezone.id=Asia/Shanghai
# Azkaban UserManager class
user.manager.class=azkaban.user.XmlUserManager
user.manager.xml.file=/azkaban/azkaban-web-server/conf/azkaban-users.xml
# Loader for projects
executor.global.properties=/azkaban/azkaban-web-server/conf/global.properties
azkaban.project.dir=/azkaban/azkaban-web-server/projects
# Velocity dev mode
velocity.dev.mode=false
# Azkaban Jetty server properties.
jetty.use.ssl=false
jetty.maxThreads=25
jetty.port=8443
jetty.keystore=//azkaban/azkaban-web-server/conf/keystore
jetty.password=yourpassword
jetty.keypassword=yourpassword
jetty.truststore=//azkaban/azkaban-web-server/conf/keystore
jetty.trustpassword=yourpassword
# Azkaban Executor settings
executor.port=12321
# mail settings
mail.sender=
mail.host=
# User facing web server configurations used to construct the user facing server URLs. They are useful when there is a reverse proxy between Azkaban web servers and users.
# enduser -> myazkabanhost:443 -> proxy -> localhost:8081
# when this parameters set then these parameters are used to generate email links.
# if these parameters are not set then jetty.hostname, and jetty.port(if ssl configured jetty.ssl.port) are used.
# azkaban.webserver.external_hostname=myazkabanhost.com
# azkaban.webserver.external_ssl_port=443
# azkaban.webserver.external_port=8081
job.failure.email=
job.success.email=
lockdown.create.projects=false
cache.directory=cache
# JMX stats
jetty.connector.stats=true
executor.connector.stats=true
# Azkaban plugin settings
azkaban.jobtype.plugin.dir=/azkaban/azkaban-web-server/plugins/jobtypes
database.type=mysql
mysql.port=3306
mysql.host=127.0.0.1
mysql.database=azkaban
mysql.user=root
mysql.password=yourmysqlpassword
mysql.numconnections=100

/azkaban/azkaban-exec/conf/azkaban.properties

# Azkaban Personalization Settings
default.timezone.id=Asia/Shanghai
# Loader for projects
executor.global.properties=/azkaban/azkaban-exec-server/conf/global.properties
azkaban.project.dir=/azkaban/azkaban-exec-server/projects
azkaban.jobtype.plugin.dir=/azkaban/azkaban-exec-server/plugins/jobtypes
database.type=mysql
mysql.port=3306
mysql.host=127.0.0.1
mysql.database=azkaban
mysql.user=root
mysql.password=yourpassword
mysql.numconnections=100
# Azkaban Executor settings
executor.maxThreads=50
executor.port=12321
executor.flow.threads=30

/azkaban/azkaban-web/conf/log4j.properties /azkaban/azkaban-exec/conf/log4j.properties

log4j.rootLogger=INFO,C
log4j.appender.C=org.apache.log4j.ConsoleAppender
log4j.appender.C.Target=System.err
log4j.appender.C.layout=org.apache.log4j.PatternLayout
log4j.appender.C.layout.ConversionPattern=%d{yyyy-MM-dd HH:mm:ss} %-5p %c{1}:%L - %m%n

如果是多执行节点，需要在/azkaban/azkaban-web/conf/azkaban.properties中追加以下配置，并且在数据库中插入对应执行节点的ip和端口号

azkaban.use.multiple.executors=true
azkaban.executorselector.filters=StaticRemainingFlowSize,MinimumFreeMemory,CpuStatus
azkaban.executorselector.comparator.NumberOfAssignedFlowComparator=1
azkaban.executorselector.comparator.Memory=1
azkaban.executorselector.comparator.LastDispatched=1
azkaban.executorselector.comparator.CpuUsage=1

插入执行节点ip和端口号：

insert into executors(host,port) values("your ip1",12321);
insert into executors(host,port) values("your ip2",12321);

配置用户名密码/azkaban/azkaban-web/conf/azkaban-users.xml
只要有一些计算机基础，打开这个配置文件，一目了然。
创建日志文件夹

mkdir /azkaban/azkaban-web/logs
mkdir /azkaban/azkaban-exec/logs

启动

azkaban/azkaban-exec/bin/start-exec.sh
azkaban/azkaban-web/bin/start-web.sh

遇到的坑

keystore的位置需要与配置文件中keystore设置的文件路径对应。
azkaban3以上才支持多执行节点。
7中启动方式是静默方式，开始测试的时候建议使用：

azkaban/azkaban-exec/bin/azkaban-web-start.sh
azkaban/azkaban-exec/bin/azkaban-exec-start.sh

这样能看到是否报错，什么原因报错。
4. 根据报错说明，有可能没有正确创建logs文件夹或者路径不对。
5. 因为web server会去检查exec server，所以建议先启动exec server。
6. 如果多节点任务不执行，有可能是执行节点的资源不够。注意查看配置，该配置指定服务器在什么内存、CPU等资源条件下才执行任务，以及如果不指定节点，如果分配执行节点。如果不限制资源，请修改或者注释相关配置。

azkaban.use.multiple.executors=true
azkaban.executorselector.filters=StaticRemainingFlowSize,MinimumFreeMemory,CpuStatus
azkaban.executorselector.comparator.NumberOfAssignedFlowComparator=1
azkaban.executorselector.comparator.Memory=1
azkaban.executorselector.comparator.LastDispatched=1
azkaban.executorselector.comparator.CpuUsage=1

如何指定节点执行job：
在 flow params中设置”useExecutor” = EXECUTOR_ID即可
详情请查看：
https://www.jianshu.com/p/ffb7bbc1988f

[CesiumJS]Cesium中级教程10 – CesiumJS and webpack

Sun, 02 Jun 2019 15:25:46 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

webpack是打包JavaScript模块流行且强大的工具。它允许开发人员以直观的方式构造代码和assets，并使用简单的require语句根据需要加载不同类型的文件。构建时，它将跟踪代码依赖关系，并将这些模块打包到浏览器加载的一个或多个包中。

在本教程的前半部分，我们从头开始建立了简单的Web应用程序使用webpack，然后覆盖后续步骤集成Cesium npm module。如果你喜欢使用cesiumjs开发Web应用,那么webpack是一个好的选择。如果您是刚接触Cesium并且想要寻找学习构建您的第一个样例应用，请查看Getting Started Turtorial。

在第二部分，我们将探索更高级的Webpack配置，以优化使用CesiumJS的应用程序。

在官方的cesium-webpack-example中可以找到优化CesiumJS webpack应用程序的完整代码和提示。

Prerequisites 先决条件

基本了解命令行、JavaScript和Web开发。
一个IDE或代码编辑器。Cesium团队的开发人员使用Visual Studio Code，但是一个最小的代码编辑器（如Sublime文本）也完全没有问题。
已安装Node.js。我们建议使用最新的LTS版本。

Create a basic webpack app 创建基础webpack应用

在本节中，我们将介绍如何使用webpack和开发服务器设置基本的Web应用程序。如果您已经设置了一个应用程序，并且只想添加cesiumjs，请跳过Add CesiumJS to a webpack app。

Initialize an app with npm 使用npm初始化应用

为您的应用创建一个新的cesium-webpack。打开控制台，导航到新目录，然后运行以下命令：

1

npm init

按照提示操作并填充有关应用程序的所有详细信息。按enter键使用默认值。这将创建package.json。

Create the app code 创建应用代码

为我们的应用程序代码创建一个src目录。当我们构建应用程序时，webpack将在dist目录中生成分发文件。

创建src/index.html然后为样板HTML页添加代码。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport"
 content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
 <title>Hello World!</title>
 </head>
 <body>
 <p>Hello World!</p>
 </body>
</html>

接下来，为应用程序创建一个入口点。这是webpack查找包的所有javascript源代码和依赖项的entry point起点。

创建src/index.js然后添加下列代码：

1

console.log('Hello World!');

Install and configure webpack 安装和配置webpack

开始安装webpack：

1

npm install --save-dev webpack

Configuration 配置

创建webpack.config.js以定义webpack配置对象。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


const path = require('path');

const webpack = require('webpack');

module.exports = {
 context: __dirname,
 entry: {
 app: './src/index.js'
 },
 output: {
 filename: '[name].js',
 path: path.resolve(__dirname, 'dist'),
 }
};

context指定文件的基本路径。entry用于指定包。在这种情况下，app包的入口点是src/index.js。webpack将把打包后的app.js输出到dist文件夹。

Loaders 加载

Webpack像模块一样加载所有内容。使用loaders加载CSS和其他资产文件。安装style-loader、css-loader和url-loader。

1

npm install --save-dev style-loader css-loader url-loader

在webpack.config.js中添加两个module.rules：一个用于css文件，另一个用于其他静态文件。对于每个，test定义要加载的文件类型，use指定加载程序的列表。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


const path = require('path');

const webpack = require('webpack');

module.exports = {
 context: __dirname,
 entry: {
 app: './src/index.js'
 },
 output: {
 filename: '[name].js',
 path: path.resolve(__dirname, 'dist'),
 },
 module: {
 rules: [{
 test: /\.css$/,
 use: [ 'style-loader', 'css-loader' ]
 }, {
 test: /\.(png|gif|jpg|jpeg|svg|xml|json)$/,
 use: [ 'url-loader' ]
 }]
 }
};

Plugins 插件

定义index.html并使用一个名为html-webpack-plugin的webpack plugin将包注入该页面。

1

npm install --save-dev html-webpack-plugin

在webpack.config.js中引用该插件，然后将它注入到plugins。将src/index.html传入作为我们的template。

 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


const path = require('path');

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
 context: __dirname,
 entry: {
 app: './src/index.js'
 },
 output: {
 filename: '[name].js',
 path: path.resolve(__dirname, 'dist'),
 },
 module: {
 rules: [{
 test: /\.css$/,
 use: [ 'style-loader', 'css-loader' ]
 }, {
 test: /\.(png|gif|jpg|jpeg|svg|xml|json)$/,
 use: [ 'url-loader' ]
 }]
 },
 plugins: [
 new HtmlWebpackPlugin({
 template: 'src/index.html'
 })
 ]
};

配置文件是一个javascript文件，因此我们可以引入其他节点模块并执行操作。

Bundle the app 捆绑应用

使用package.json定义可以使用npm调用的脚本。添加build命令。

1
2
3


 "scripts": {
 "build": "node_modules/.bin/webpack --config webpack.config.js"
 }

此脚本调用Webpack并传递进webpack.config.js配置文件。

我们在这些脚本中使用webpack和webpack-dev-server的本地安装。这允许每个项目使用自己的单独版本，这是webpack文档推荐的版本。如果您希望使用全局版本，请使用npm install–global webpack全局安装它，并使用命令webpack–config webpack.config.js运行它。

当运行build命令时： npm run build

您应该看到webpack的一些输出，从以下内容开始：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


npm run build

> test-app@1.0.0 build C:\workspace\test-app
> node_modules/.bin/webpack --config webpack.config.js

Hash: 2b42bff7a022b5d956a9
Version: webpack 3.6.0
Time: 2002ms
 Asset Size Chunks Chunk Names
 Assets/Textures/NaturalEarthII/2/0/3.jpg 10.3 kB [emitted]
 app.js 162 kB 0 [emitted] app

app.js包和index.html文件将被输出到dist文件夹中。

Run the development server 运行开发服务器

使用webpack-dev-server服务于开发构建然后可以在行动中看到我们的应用：

1

npm install --save-dev webpack-dev-server

在package.json中添加一个start脚本以运行开发服务器。通过*–config标志设置配置文件。执行命令时，使用–open*标志在浏览器中打开应用程序。

1
2
3
4


 "scripts": {
 "build": "node_modules/.bin/webpack --config webpack.config.js",
 "start": "node_modules/.bin/webpack-dev-server --config webpack.config.js --open"
 }

告诉开发服务器为dist文件夹提供文件。将其添加到webpack.config.js的底部。

1
2
3
4


 // development server options
 devServer: {
 contentBase: path.join(__dirname, "dist")
 }

最终，我们运行app

1

npm start

你应该看到你的内容在localhost:8080上呈现，看到“Hello World！“打开浏览器控制台时，显示消息。

Add CesiumJS to a webpack app 将CesiumJS加入到webpack应用

Install CesiumJS 安装CesiumJS

从npmg上安装cesium模块，并将其加入到package.json。

Configure CesiumJS in webpack 在webpack中配置CesiumJS

CesiumJS是一个庞大而复杂的库。除了javascript模块之外，它还包括静态资产，如css、image和json文件。它包括Web worker文件，以便在单独的线程中执行密集计算。与传统的npm模块不同，CesiumJS没有定义入口点，因为库的使用方式多种多样。我们需要配置一些附加选项，以便与webpack一起使用。

首先，定义CesiumJS的位置。本教程基于源代码，因此webpack可以包含单个模型并跟踪依赖项。或者，也可以使用CesiumJS的内置（简化或未简化）版本。然而，这些模块已经被组合和优化，这给了我们更少的灵活性。

将下列代码加入到webpack.config.js的顶部：

1
2
3


// The path to the CesiumJS source code
const cesiumSource = 'node_modules/cesium/Source';
const cesiumWorkers = '../Build/Cesium/Workers';

本教程使用npm模块以便于安装，但您也可以克隆Github仓库或下载解压使用release版本。

将以下选项添加到配置对象，以解决webpack如何编译CesiumJS的一些问题。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


 output: {
 filename: '[name].js',
 path: path.resolve(__dirname, 'dist'),

 // Needed to compile multiline strings in Cesium
 sourcePrefix: ''
 },
 amd: {
 // Enable webpack-friendly use of require in Cesium
 toUrlUndefined: true
 },
 node: {
 // Resolve node module use of fs
 fs: 'empty'
 },

output.sourcePrefix: 在每行之前添加\t制表符，以便覆盖webpack默认值。CesiumJS有一些多行字符串，因此我们需要用空前缀’’*覆盖此默认值。
amd.toUrlUndefined: true 告诉CesiumJS AMD webpack使用不符合标准toUrl函数的评估require语句的版本。
node.fs: ’empty’ 解决fs模块的某些第三方使用问题，该模块的目标是在节点环境中使用，而不是在浏览器中使用。

添加cesium alias，以便我们可以在应用程序代码中引用它。

1
2
3
4
5
6


 resolve: {
 alias: {
 // CesiumJS module name
 cesium: path.resolve(__dirname, cesiumSource)
 }
 },

Manage CesiumJS static files 管理CesiumJS中的静态文件

最后，确保静态CesiumJS资产、小部件和web worker文件得到正确的服务和加载。

作为构建过程的一部分，使用copy-webpack-plugin将静态文件复制到dist目录。

1

npm install --save-dev copy-webpack-plugin

在* webpack.config.js*文件中的上部引入：

1

const CopywebpackPlugin = require('copy-webpack-plugin');

并将其加入到plugins数组中：

1
2
3
4
5
6
7
8
9


 plugins: [
 new HtmlWebpackPlugin({
 template: 'src/index.html'
 }),
 // Copy Cesium Assets, Widgets, and Workers to a static directory
 new CopywebpackPlugin([ { from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' } ]),
 new CopywebpackPlugin([ { from: path.join(cesiumSource, 'Assets'), to: 'Assets' } ]),
 new CopywebpackPlugin([ { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' } ])
 ],

这将复制Assets和Widgets目录以及built的web worker脚本。

如果您使用的是CesiumJS仓库的fork，那么Build文件夹将不存在。运行npm run release生成输出文件夹。有关详细信息，请参阅《Cesium生成指南》。

定义一个环境变量，该变量告诉CesiumJS使用webpackDefinePlugin加载静态文件的基本URL。plugins数组现在将如下所示：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


 plugins: [
 new HtmlWebpackPlugin({
 template: 'src/index.html'
 }),
 // Copy Cesium Assets, Widgets, and Workers to a static directory
 new CopywebpackPlugin([ { from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' } ]),
 new CopywebpackPlugin([ { from: path.join(cesiumSource, 'Assets'), to: 'Assets' } ]),
 new CopywebpackPlugin([ { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' } ]),
 new webpack.DefinePlugin({
 // Define relative base path in cesium for loading assets
 CESIUM_BASE_URL: JSON.stringify('')
 })
 ],

Require CesiumJS modules in our app 在应用中引用CesiumJS模块

在我们的应用程序中，有几种方法可以引用CesiumJS模块。您可以使用CommonJS语法或ES6import语句。

您可以导入整个CesiumJS库，或者只需要引入您需要的特定模块。引入模块将导致webpack只编译包中的那些模块及其依赖项，而不是整个库。

CommonJS style require

引入所有的CesiumJS：

1
2


var Cesium = require('cesium/Cesium');
var viewer = new Cesium.Viewer('cesiumContainer');

引入独立模块

1
2


var Color = require('cesium/Core/Color');
var color = Color.fromRandom();

ES6风格导入

引入所有的CesiumJS：

1
2


import Cesium from 'cesium/Cesium';
var viewer = new Cesium.Viewer('cesiumContainer');

引入独立模块

1
2


import Color from 'cesium/core/Color';
var color = Color.fromRandom();

Requiring asset files 引用asset文件

webpack背后的原理是，每个文件都被视为一个模块。这使得导入资产与包括javascript相同。我们告诉Webpack如何使用加载器加载配置中的每种类型的文件，所以我们只需要调用require。

1

require('cesium/Widgets/widgets.css');

Hello World!

创建一个新的文件，src/css/main.css，为了样式化我们的应用：

1
2
3
4
5
6
7


html, body, #cesiumContainer {
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
 overflow: hidden;
}

创建一个div用于index.html body中的CesiumJS Viewer。替换*

Hello World!

*使用下面的div：

1

<div id="cesiumContainer"></div>

删除index.js中的内容并包含Cesium和我们的CSS文件：

1
2
3


var Cesium = require('cesium/Cesium');
require('./css/main.css');
require('cesium/Widgets/widgets.css');

为创建Viewer添加一行代码：

1

var viewer = new Cesium.Viewer('cesiumContainer');

使用npm start运行应用用于在浏览器中查看Viewer。

复制并粘贴你最喜欢的Sandcastle例子。例如，粒子系统实例可以得出一个很好的结论。

Advanced webpack configurations 高级webpack配置

webpack可以通过更多方式提高性能、减小包大小以及执行其他或复杂的构建步骤。在这里，我们将讨论一些与使用CesiumJS库相关的配置选项。

在webpack.release.config.js的仓库示例中可以找到优化生产Cesium webpack构建的配置。

Code splitting 代码分割

默认情况下，webpack将CesiumJS打包在与我们的应用程序相同的块中，从而生成一个大文件。我们可以将CesiumJS拆分成自己的包，并使用CommonChunksPlugin提高我们的应用程序性能。如果你最终为你的应用程序创建了多个块，它们都可以引用一个常见的cesium块。

将插件添加到webpack.config.js文件中，并指定分解CesiumJS模块的规则：

1
2
3
4
5
6


 plugins: [
 new webpack.optimize.CommonsChunkPlugin({
 name: 'cesium',
 minChunks: module => module.context && module.context.indexOf('cesium') !== -1
 })
 ]

Enable source maps 启用源映射

源映射允许Webpack将错误跟踪回原始内容。它们提供或多或少详细的调试信息，以换取编译速度。我们建议使用*’eval’*选项。

1

 devtool: 'eval'

在生产产品中，不推荐使用源映射。

Remove pragmas 移除编译指令

CesiumJS源代码中存在开发人员错误和警告，这些错误和警告已从我们的小型发布版本中删除。由于没有内置的Webpack方法来删除这些警告，因此我们将使用strip-pragma-loader。

安装包：

1

npm install strip-pragma-loader --save-dev

在module.rules中将debug设为false，引入加载器：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


 rules: [{
 // Strip cesium pragmas
 test: /\.js$/,
 enforce: 'pre',
 include: path.resolve(__dirname, cesiumSource),
 use: [{
 loader: 'strip-pragma-loader',
 options: {
 pragmas: {
 debug: false
 }
 }
 }]
 }]

Uglify and minify 混淆与压缩

增删和缩小代码允许在生产中使用较小的文件大小。对于一个发布版本，CesumJS会修改JavaScript文件并缩小CSS文件。

使用uglifyjs-webpack-plugin用于混淆CesiumJS源代码。

1

npm install uglifyjs-webpack-plugin --save-dev

在配置文件中引入他：

1

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

在插件列表中包含他：

1
2
3


 plugins: [
 new webpack.optimize.UglifyJsPlugin()
 ]

在css-loader上使用minimize选项用于优化CSS。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


 module: {
 rules: [{
 test: /\.css$/,
 use: [
 'style-loader',
 {
 loader: 'css-loader',
 options: {
 // minify loaded css
 minimize: true
 }
 }
 ]
 }]
 }

Resources 资源

官方的cesium-webpack-example仓库包含最小webpack配置、本教程中介绍的Hello World代码以及可选代码配置的说明。

有关要包含在新应用程序中的CesiumJS功能的教程，请参阅Cesium Workshop教程。

在[Sandcastle]中探索实例，并查看CesiumJS文档

要了解有关webpack的更多信息，请查看webpack概念，或深入阅读文档。

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

[CesiumJS]Cesium中级教程9 – Advanced Particle System Effects 高级粒子系统效应

Sun, 02 Jun 2019 12:58:56 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

要了解粒子系统的基础知识，请参见粒子系统入门教程。

Weather 天气

Setup 设置

若要生成雪效果，请首先为每个粒子添加雪花图像，然后在updateParticle函数中定义粒子的移动行为和其他动态元素。

The images 图像

本教程中使用了以下三个图像。左边是雨粒子；中间的图像是雪粒子；右边的图像用于火效果。

The update function 更新函数

更新函数用于定义粒子的移动、排列和可视化。修改粒子的color颜色、imageSize图像大小和particleLife粒子生命周期。我们甚至可以基于到相机距离定义粒子（如下所述）、导入模型或到地球本身的距离来修改它们。

下面是我们针对雪的更新函数：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


// snow
var snowGravityVector = new Cesium.Cartesian3();
var snowUpdate = function(particle, dt) {
 Cesium.Cartesian3.normalize(particle.position, snowGravityVector);
 Cesium.Cartesian3.multiplyByScalar(snowGravityVector,
 Cesium.Math.randomBetween(-30.0, -300.0),
 snowGravityVector);
 particle.velocity = Cesium.Cartesian3.add(particle.velocity, snowGravityVector, particle.velocity);

 var distance = Cesium.Cartesian3.distance(scene.camera.position, particle.position);
 if (distance > (snowRadius)) {
 particle.endColor.alpha = 0.0;
 } else {
 particle.endColor.alpha = snowSystem.endColor.alpha / (distance / snowRadius + 0.1);
 }
};

函数的第一部分使粒子像重力一样下落。更新函数还包含一个距离检查，以便粒子在远离相机时消失。

额外的天气效应

使用雾和大气效果来增强可视化效果，并匹配我们试图复制的天气类型。

hueshift沿着颜色光谱改变颜色，saturationShift改变了视觉实际需要的颜色与黑白的对比程度，brightnessShift改变了颜色的生动程度。

雾密度改变了地球上覆盖物与雾的颜色之间的不透明程度。雾的minimumBrightness用来使雾变暗。

1
2
3
4
5
6
7


// snow
scene.skyAtmosphere.hueShift = -0.8;
scene.skyAtmosphere.saturationShift = -0.7;
scene.skyAtmosphere.brightnessShift = -0.33;

scene.fog.density = 0.001;
scene.fog.minimumBrightness = 0.8;

The systems 系统

Snow 雪

雪花系统使用snowflake_particle图像，并使用minimumImageSize和maximumImageSize，在该范围内随机创建雪花。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


var snowParticleSize = scene.drawingBufferWidth / 100.0;
var snowRadius = 100000.0;

var snowSystem = new Cesium.ParticleSystem({
 modelMatrix : new Cesium.Matrix4.fromTranslation(scene.camera.position),
 minimumSpeed : -1.0,
 maximumSpeed : 0.0,
 lifetime : 15.0,
 emitter : new Cesium.SphereEmitter(snowRadius),
 startScale : 0.5,
 endScale : 1.0,
 image : "../../SampleData/snowflake_particle.png",
 emissionRate : 7000.0,
 startColor : Cesium.Color.WHITE.withAlpha(0.0),
 endColor : Cesium.Color.WHITE.withAlpha(1.0),
 minimumImageSize : new Cartesian2(snowParticleSize, snowParticleSize),
 maximumImageSize : new Cartesian2(snowParticleSize * 2.0, snowParticleSize * 2.0),
 updateCallback : snowUpdate
});
scene.primitives.add(snowSystem);

Rain 雨

雨滴系统使用circular_particle.png用于雨滴。imageSize用于垂直拉伸图像，使雨水呈现细长的外观。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


rainSystem = new Cesium.ParticleSystem({
 modelMatrix : new Cesium.Matrix4.fromTranslation(scene.camera.position),
 speed : -1.0,
 lifetime : 15.0,
 emitter : new Cesium.SphereEmitter(rainRadius),
 startScale : 1.0,
 endScale : 0.0,
 image : "../../SampleData/circular_particle.png",
 emissionRate : 9000.0,
 startColor :new Cesium.Color(0.27, 0.5, 0.70, 0.0),
 endColor : new Cesium.Color(0.27, 0.5, 0.70, 0.98),
 imageSize : new Cesium.Cartesian2(rainParticleSize, rainParticleSize * 2),
 updateCallback : rainUpdate
});
scene.primitives.add(rainSystem);

雨水更新函数略有不同，因为降雨比降雪快得多。

1
2
3
4
5
6
7


// rain
rainGravityScratch = Cesium.Cartesian3.normalize(particle.position, rainGravityScratch);
rainGravityScratch = Cesium.Cartesian3.multiplyByScalar(rainGravityScratch,
 -1050.0,
 rainGravityScratch);

particle.position = Cesium.Cartesian3.add(particle.position, rainGravityScratch, particle.position);

要使环境与场景的气氛匹配，请修改大气和雾以匹配雨水。下面的代码使一个深蓝色的天空被薄雾覆盖。

1
2
3
4
5
6
7


// rain
scene.skyAtmosphere.hueShift = -0.97;
scene.skyAtmosphere.saturationShift = 0.25;
scene.skyAtmosphere.brightnessShift = -0.4;

scene.fog.density = 0.00025;
scene.fog.minimumBrightness = 0.01;

获取额外的帮助，请访问Sandcastle example for both snow and rain

Comet and rocket tails 彗星和火箭尾部

Using multiple particle systems 使用多重粒子系统

要创建彗星和火箭尾部，我们需要多个粒子系统。该示例创建的粒子环上的每个位置都是完全独立的粒子系统。这使我们能够更均匀地控制系统的运动方向。可视化此效果的一个简单方法是将cometOptions.numberOfSystems限制为2，且cometOptions.colorOptions仅包括两种颜色，如下图所示。

为了简化不同的系统集合，创建数组来携带与彗星相关联的独立系统和与火箭例子相关联的独立系统。

1
2


var rocketSystems = [];
var cometSystems = [];

为对象创建两个不同的选项：一个用于彗星Comet版本，另一个用于火箭Rocket版本。这使得两个系统的初始系统数、偏移值等不同，看起来也不同。

 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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52


var cometOptions = {
 numberOfSystems : 100.0,
 iterationOffset : 0.003,
 cartographicStep : 0.0000001,
 baseRadius : 0.0005,

 colorOptions : [{
 red : 0.6,
 green : 0.6,
 blue : 0.6,
 alpha : 1.0
 }, {
 red : 0.6,
 green : 0.6,
 blue : 0.9,
 alpha : 0.9
 }, {
 red : 0.5,
 green : 0.5,
 blue : 0.7,
 alpha : 0.5
 }]
};

var rocketOptions = {
 numberOfSystems : 50.0,
 iterationOffset : 0.1,
 cartographicStep : 0.000001,
 baseRadius : 0.0005,

 colorOptions : [{
 minimumRed : 1.0,
 green : 0.5,
 minimumBlue : 0.05,
 alpha : 1.0
 }, {
 red : 0.9,
 minimumGreen : 0.6,
 minimumBlue : 0.01,
 alpha : 1.0
 }, {
 red : 0.8,
 green : 0.05,
 minimumBlue : 0.09,
 alpha : 1.0
 }, {
 minimumRed : 1,
 minimumGreen : 0.05,
 blue : 0.09,
 alpha : 1.0
 }]
};

colorOptions是用于随机视觉的颜色数组。每个系统从一个特定的颜色开始，而不是有一组颜色几何，这取决于当前正在创建的系统。在下面的示例中，i表示当前迭代轮数。

1

var color = Cesium.Color.fromRandom(options.colorOptions[i % options.colorOptions.length]);

Setup 设置

使用下面的函数作为每个系统的初始化

 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


function createParticleSystems(options, systemsArray) {
 var length = options.numberOfSystems;
 for (var i = 0; i < length; ++i) {
 scratchAngleForOffset = Math.PI * 2.0 * i / options.numberOfSystems;
 scratchOffset.x += options.baseRadius * Math.cos(scratchAngleForOffset);
 scratchOffset.y += options.baseRadius * Math.sin(scratchAngleForOffset);

 var emitterModelMatrix = Cesium.Matrix4.fromTranslation(scratchOffset, matrix4Scratch);
 var color = Cesium.Color.fromRandom(options.colorOptions[i % options.colorOptions.length]);
 var force = forceFunction(options, i);

 var item = viewer.scene.primitives.add(new Cesium.ParticleSystem({
 image : getImage(),
 startColor : color,
 endColor : color.withAlpha(0.0),
 particleLife : 3.5,
 speed : 0.00005,
 imageSize : new Cesium.Cartesian2(15.0, 15.0),
 emissionRate : 30.0,
 emitter : new Cesium.CircleEmitter(0.1),
 bursts : [ ],
 lifetime : 0.1,
 forces : force,
 modelMatrix : particlesModelMatrix,
 emitterModelMatrix : emitterModelMatrix
 }));
 systemsArray.push(item);
 }
}

由于两个尾部版本都相似，因此可以使用相同的createParticleSystems函数来创建其中一个。传入CometOptions或RocketOptions选项参数以创建不同的效果。

Create the particle image from scratch 从头开始创建粒子图像

不是从URL加载图像，getImage函数是使用HTML画布创建图像。这使得图像创建更加灵活。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


var particleCanvas;
function getImage() {
 if (!Cesium.defined(particleCanvas)) {
 particleCanvas = document.createElement('canvas');
 particleCanvas.width = 20;
 particleCanvas.height = 20;
 var context2D = particleCanvas.getContext('2d');
 context2D.beginPath();
 context2D.arc(8, 8, 8, 0, Cesium.Math.TWO_PI, true);
 context2D.closePath();
 context2D.fillStyle = 'rgb(255, 255, 255)';
 context2D.fill();
 }
 return particleCanvas;
}

The force function 强制函数

下面使我们的updateCallback函数：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


var scratchCartesian3 = new Cesium.Cartesian3();
var scratchCartographic = new Cesium.Cartographic();
var forceFunction = function(options, iteration) {
 var iterationOffset = iteration;
 var func = function(particle) {
 scratchCartesian3 = Cesium.Cartesian3.normalize(particle.position, new Cesium.Cartesian3());
 scratchCartesian3 = Cesium.Cartesian3.multiplyByScalar(scratchCartesian3, -1.0, scratchCartesian3);

 particle.position = Cesium.Cartesian3.add(particle.position, scratchCartesian3, particle.position);

 scratchCartographic = Cesium.Cartographic.fromCartesian(particle.position,
 Cesium.Ellipsoid.WGS84,
 scratchCartographic);

 var angle = Cesium.Math.PI * 2.0 * iterationOffset / options.numberOfSystems;
 iterationOffset += options.iterationOffset;
 scratchCartographic.longitude += Math.cos(angle) * options.cartographicStep;
 scratchCartographic.latitude += Math.sin(angle) * options.cartographicStep;

 particle.position = Cesium.Cartographic.toCartesian(scratchCartographic);
 };
 return func;
};

注意forceFunction正在返回函数。返回的func是实际的updateCallback函数。对于每次迭代，update函数根据angle和iterationOffset创建不同的旋转偏移量。较小的迭代偏移只会稍微调整角度，允许半径随着系统的继续稳步增大，如彗星示例所示。较大的迭代偏移将更快地改变角度；这将使更紧密、更不稳定的圆柱形输出，如火箭例子中所示。

本教程使用正弦和余弦函数进行循环效果。对于其他的效果，试着做一些形状，比如Lissajous curve，Gibbs phenomenon，或者square wave。

Relative position 相对位置

使用modelMatrix将粒子系统定位在平面后面的适当位置。因为这些系统是垂直的，所以我们需要使用particleOffset值进行轻微的偏移。如createParticleSystems函数所示，根据迭代，计算每个系统的emitterModelMatrix偏移量。

1
2
3
4
5
6
7
8


// positioning the plane
var planePosition = Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883, 800.0);
var particlesOffset = new Cesium.Cartesian3(-8.950115473940969, 34.852766731753945, -30.235411095432937);

// creating the particles model matrix
var transl = Cesium.Matrix4.fromTranslation(particlesOffset, new Cesium.Matrix4());
var translPosition = Cesium.Matrix4.fromTranslation(planePosition, new Cesium.Matrix4());
var particlesModelMatrix = Cesium.Matrix4.multiplyTransformation(translPosition, transl, new Cesium.Matrix4());

Resources 资源

额外的帮助请访问Sandcastle example for both tails examples 更多示例代码：

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

[CesiumJS]Cesium中级教程8 – Introduction to Particle Systems 粒子系统入门

Sun, 02 Jun 2019 09:41:38 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

What is a particle system? 什么是粒子系统？

粒子系统是一种图形技术，可以模拟复杂的物理效果。粒子系统是小图像的集合，当它们一起观看时，会形成一个更复杂的“模糊”物体，如火、烟、天气或烟花fireworkds。通过使用诸如初始位置、速度和寿命等属性指定单个粒子的行为，可以控制这些复杂的效果。

粒子系统效应在电影和电子游戏中很常见。例如，为了表示飞机的损坏，技术艺术家可以使用粒子系统来表示飞机引擎上的爆炸，然后渲染不同的粒子系统，表示飞机坠毁时的烟雾轨迹。

Particle system basics 粒子系统基础

请看下面基础粒子系统的代码：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


var particleSystem = viewer.scene.primitives.add(new Cesium.ParticleSystem({
 image : '../../SampleData/smoke.png',
 imageSize : new Cesium.Cartesian2(20, 20),
 startScale : 1.0,
 endScale : 4.0,
 particleLife : 1.0,
 speed : 5.0,
 emitter : new Cesium.CircleEmitter(0.5),
 emissionRate : 5.0,
 modelMatrix : entity.computeModelMatrix(viewer.clock.startTime, new Cesium.Matrix4()),
 lifetime : 16.0
}));

上面的代码创建了一个ParticleSystem，一个参数化的对象，用于控制单个粒子对象Particle随时间的外观和行为。粒子由粒子发射器产生，有一个位置和类型，存活一段时间，然后消亡。

其中一些属性是动态的。请注意，这里没有使用可用的单色属性scale，而是有一个startScale和endScale。这些允许您指定在粒子的寿命过程中，粒子大小在开始和结束比例之间的转换。startColor和endColor的工作原理相似。

影响视觉输出的其他方法包括最大和最小属性。对于具有最大和最小输入的每个变量，粒子上该变量的实际值将随机分配到最大和最小输入之间，并在粒子的整个生命周期内静态保持该值。例如，使用最小速度和最大速度作为每个粒子随机选择的速度的界限。允许像这样更改的属性包括imageSize、speed、life和particleLife。

Emitters 发射器

当粒子诞生时，其初始位置和速度矢量由ParticleEmitter控制。发射器将每秒生成一些粒子，由emissionRate参数指定，根据发射器类型用随机速度初始化。

Cesium有各种各样的粒子发射器，你可以开箱即用。

BoxEmitter 盒形发射器

BoxEmitter在一个盒子内随机取样的位置初始化粒子，并将它们从六个盒子表面中的一个引导出来。它接受Cartesian3参数，该参数指定框的宽度、高度和深度尺寸。

1
2
3
4
5
6
7
8
9


var particleSystem = scene.primitives.add(new Cesium.ParticleSystem({
 image : '../../SampleData/smoke.png',
 color: Cesium.Color.MAGENTA,
 emissionRate: 5.0,
 emitter: new Cesium.BoxEmitter(new Cesium.Cartesian3(5.0, 5.0, 5.0)),
 imageSize : new Cesium.Cartesian2(25.0, 25.0),
 modelMatrix : entity.computeModelMatrix(viewer.clock.startTime, new Cesium.Matrix4()),
 lifetime : 16.0
}));

CircleEmitter 圆形发射器

CircleEmitter在发射器上轴线方向上的圆形内的随机采样位置初始化粒子。它接受一个指定圆半径的浮点参数。

1
2
3
4
5
6
7
8
9


var particleSystem = scene.primitives.add(new Cesium.ParticleSystem({
 image : '../../SampleData/smoke.png',
 color: Cesium.Color.MAGENTA,
 emissionRate: 5.0,
 emitter: new Cesium.CircleEmitter(5.0),
 imageSize : new Cesium.Cartesian2(25.0, 25.0),
 modelMatrix : entity.computeModelMatrix(viewer.clock.startTime, new Cesium.Matrix4()),
 lifetime : 16.0
}));

如果发射器未指定，CircleEmitter将作为默认发射器。

ConeEmitter 锥形发射器

ConeEmitter在圆锥体的顶端初始化粒子，并以随机的角度引导它们离开圆锥体。它使用一个指定圆锥体角度的浮点参数。圆锥体沿发射器的上轴定向。

1
2
3
4
5
6
7
8
9


var particleSystem = scene.primitives.add(new Cesium.ParticleSystem({
 image : '../../SampleData/smoke.png',
 color: Cesium.Color.MAGENTA,
 emissionRate: 5.0,
 emitter: new Cesium.ConeEmitter(Cesium.Math.toRadians(30.0)),
 imageSize : new Cesium.Cartesian2(25.0, 25.0),
 modelMatrix : entity.computeModelMatrix(viewer.clock.startTime, new Cesium.Matrix4()),
 lifetime : 16.0
}));

SphereEmitter 球形发射器

SphereEmitter在球体内随机取样的位置初始化粒子，并将它们从球体中心向外引导。它使用一个指定球体半径的浮点参数。

1
2
3
4
5
6
7
8
9


var particleSystem = scene.primitives.add(new Cesium.ParticleSystem({
 image : '../../SampleData/smoke.png',
 color: Cesium.Color.MAGENTA,
 emissionRate: 5.0,
 emitter: new Cesium.SphereEmitter(5.0),
 imageSize : new Cesium.Cartesian2(25.0, 25.0),
 modelMatrix : entity.computeModelMatrix(viewer.clock.startTime, new Cesium.Matrix4()),
 lifetime : 16.0
}));

Configuring particle systems 配置粒子系统

Particle emission rate 粒子发射率

emissionRate控制每秒发射多少粒子，这会改变系统中粒子的密度。指定一组突burst以在指定时间发射粒子burst（如上面的动画所示）。这会增加粒子系统的多样性或爆炸性。

将该属性添加到您的particleSystem

1
2
3
4
5


bursts : [
 new Cesium.ParticleBurst({time : 5.0, minimum : 300, maximum : 500}),
 new Cesium.ParticleBurst({time : 10.0, minimum : 50, maximum : 100}),
 new Cesium.ParticleBurst({time : 15.0, minimum : 200, maximum : 300})
]

在给定的时间，这些爆发将在最小和最大粒子之间发射。

Life of the particle and life of the system 粒子寿命和系统寿命

默认情况下，粒子系统将永远运行。要使粒子系统以设定的持续时间运行，请使用lifetime以秒为单位指定持续时间，并将loop设置为false。

1
2


lifetime : 16.0,
loop: false

将particleLife设置为5.0将使系统中的每个粒子都具有该particleLife值。要随机化每个粒子的输出，请使用变量minimumParticleLife和maximumArticleLife。

1
2


minimumParticleLife: 5.0,
maximumParticleLife: 10.0

Styling particles 样式化粒子

Color 颜色

粒子的样式是使用image和color指定的纹理，这些纹理可以在粒子的生命周期中更改以创建动态效果。下面的代码使烟雾粒子从绿色过渡到白色。

1
2


startColor : Cesium.Color.LIGHTSEAGREEN.withAlpha(0.7),
endColor : Cesium.Color.WHITE.withAlpha(0.0),

Size 大小

粒子的大小由imageSize控制。要随机化大小，请使用minimumImageSize.x和maximumImageSize.x控制宽度（以像素为单位），并使用minimumImageSize.y和maximumImageSize.y控制高度（以像素为单位）。下列代码创建方形粒子在30到60像素之间：

1
2


minimumImageSize : new Cesium.Cartesian2(30.0, 30.0),
maximumImageSize : new Cesium.Cartesian2(60.0, 60.0)

粒子的大小可以通过startScale和endscale属性在其生命周期中进行调整，以使粒子随时间增长或收缩。

1
2


startScale: 1.0,
endScale: 4.0

Speed 速度

速度由speed或minimumSpeed和maximumSpeed控制。

1
2


minimumSpeed: 5.0,
maximumSpeed: 10.0

UpdateCallback 更新回调

通过应用更新函数，可以进一步自定义粒子系统。对于重力、风或颜色更改等效果，它充当每个粒子的手动更新程序。

项目系统有一个updateCallback，它在模拟过程中修改粒子的属性。此函数采用粒子和模拟时间步骤。大多数基于物理的效果将修改速度矢量以改变方向或速度。下面是一个让粒子对重力作出反应的例子：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


var gravityVector = new Cesium.Cartesian3();
var gravity = -(9.8 * 9.8);
function applyGravity(p, dt) {
 // Compute a local up vector for each particle in geocentric space.
 var position = p.position;

 Cesium.Cartesian3.normalize(position, gravityVector);
 Cesium.Cartesian3.multiplyByScalar(gravityVector, gravity * dt, gravityVector);

 p.velocity = Cesium.Cartesian3.add(p.velocity, gravityVector, p.velocity);
}

该函数计算重力矢量，并使用重力加速度来改变粒子的速度。将重力设置为粒子系统的updateFunction：

1

updateCallback : applyGravity

Positioning 定位

使用两个Matrix4变换矩阵定位粒子系统：

modelMatrix：将粒子系统从模型转换为世界坐标。
emitterModelMatrix：在粒子系统的局部坐标系中变换粒子系统发射器。

您可以只使用这些转换矩阵中的一个，而将另一个保留为标识矩阵，但为了方便起见，我们提供了这两个矩阵。为了练习创建矩阵，让我们将粒子发射器相对于另一个实体定位。

为我们的粒子系统创建一个着重的实体。打开Hello World Sandcastle示例并添加以下代码以向viewer添加牛奶卡车模型：

1
2
3
4
5
6
7


var entity = viewer.entities.add({
 model : {
 uri : '../../SampleData/models/CesiumMilkTruck/CesiumMilkTruck-kmc.glb'
 },
 position : Cesium.Cartesian3.fromDegrees(-75.15787310614596, 39.97862668312678)
});
viewer.trackedEntity = entity;

我们想增加一个来自卡车后部的烟雾效果。创建一个模型矩阵，该模型矩阵将定位粒子系统并使其方向与牛奶卡车实体相同。

1

modelMatrix: entity.computeModelMatrix(time, new Cesium.Matrix4())

这将粒子系统放置在卡车的中心。为了把它放在卡车的后面，我们可以用平移来创建一个矩阵。

1
2
3
4
5
6
7


function computeEmitterModelMatrix() {
 hpr = Cesium.HeadingPitchRoll.fromDegrees(0.0, 0.0, 0.0, hpr);
 trs.translation = Cesium.Cartesian3.fromElements(-4.0, 0.0, 1.4, translation);
 trs.rotation = Cesium.Quaternion.fromHeadingPitchRoll(hpr, rotation);

 return Cesium.Matrix4.fromTranslationRotationScale(trs, emitterModelMatrix);
}

现在，添加粒子系统：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


var particleSystem = viewer.scene.primitives.add(new Cesium.ParticleSystem({
 image : '../../SampleData/smoke.png',

 startColor : Cesium.Color.LIGHTSEAGREEN.withAlpha(0.7),
 endColor : Cesium.Color.WHITE.withAlpha(0.0),

 startScale : 1.0,
 endScale : 4.0,

 particleLife : 1.0,

 minimumSpeed : 1.0,
 maximumSpeed : 4.0

 imageSize : new Cesium.Cartesian2(25, 25),
 emissionRate : 5.0,
 lifetime : 16.0,

 modelMatrix : entity.computeModelMatrix(viewer.clock.startTime, new Cesium.Matrix4())
 emitterModelMatrix : computeEmitterModelMatrix()
}));

还要注意，我们可以随时间更新模型或发射器矩阵。例如，如果我们想要在卡车上设置发射器位置的动画，我们可以修改emitterModelMatrix，同时保持modelMatrix不变。

查看完整示例，请访问Particle System demo

Learn more 更多知识

有关使用更高级技术的粒子系统达到更酷效果，请参见粒子系统更多效果教程。

更多示例代码请参考：

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

[CesiumJS]Cesium中级教程7 – Geometry and Appearances 几何图形和外观

Sun, 02 Jun 2019 08:00:38 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

本教程将向您介绍提供使用Primitive API的几何图形和外观系统。这是一个高级主题，用于扩展具有自定义网格、形状、体积和外观的CesiumJS，而不是面向通用的Cesium用户。如果您有兴趣学习如何在地球上绘制各种形状和体积，请查看创建实体教程。 CesiumJS可以使用实体（如多边形和椭圆体）创建不同的几何类型。例如，将以下代码复制并粘贴到Hello World Sandcastle示例中，以在球体上创建具有点模式的矩形：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


var viewer = new Cesium.Viewer('cesiumContainer');

viewer.entities.add({
 rectangle : {
 coordinates : Cesium.Rectangle.fromDegrees(-100.0, 20.0, -90.0, 30.0),
 material : new Cesium.StripeMaterialProperty({
 evenColor: Cesium.Color.WHITE,
 oddColor: Cesium.Color.BLUE,
 repeat: 5
 })
 }
});

在本教程中，我们将深入到遮光罩下，查看构成它们的几何图形和外观类型。几何图形定义了Primitive结构，即构成基本体的三角形、线或点。外观定义了Primitive的着色，包括其完整的GLSL顶点和面片着色，以及渲染状态。

使用几何图形和外观的好处是：

Performance(性能)：在绘制大量Primitive（如美国每个邮政编码的多边形）时，使用几何图形直接允许我们将它们组合成单个几何图形，以减少CPU开销并更好地利用GPU。组合Primitive是在Web worker上完成的，以保持UI的响应性。
Flexibility(灵活)：Primitive结合了几何图形和外观。通过分离它们，我们可以独立地修改每一个。我们可以添加与许多不同外观兼容的新几何图形，反之亦然。
Low-level access（低层级访问）：外观提供接近金属的渲染访问，无需担心直接使用Renderer的所有细节。外观使下列情况变得容易：
- 写所有GLSL的顶点和面片着色器
- 使用自定义渲染状态

当然也会有一些缺点：

直接使用几何图形和外观需要更多的代码和对图形更深入的理解。实体处于适合映射应用程序的抽象级别；几何图形和外观的抽象级别更接近于传统的3D引擎。
组合几何图形对静态数据有效，对动态数据不一定有效。

让我们使用几何图形和外观重写初始代码示例：

 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


var viewer = new Cesium.Viewer('cesiumContainer');
var scene = viewer.scene;

// original code
//viewer.entities.add({
// rectangle : {
// coordinates : Cesium.Rectangle.fromDegrees(-100.0, 20.0, -90.0, 30.0),
// material : new Cesium.StripeMaterialProperty({
// evenColor: Cesium.Color.WHITE,
// oddColor: Cesium.Color.BLUE,
// repeat: 5
// })
// }
//});

var instance = new Cesium.GeometryInstance({
 geometry : new Cesium.RectangleGeometry({
 rectangle : Cesium.Rectangle.fromDegrees(-100.0, 20.0, -90.0, 30.0),
 vertexFormat : Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT
 })
});

scene.primitives.add(new Cesium.Primitive({
 geometryInstances : instance,
 appearance : new Cesium.EllipsoidSurfaceAppearance({
 material : Cesium.Material.fromType('Stripe')
 })
}));

我们使用Primitive（Primitive）代替矩形实体，它结合了几何图形和外观。现在，我们将不区分Geometry和GemometryInstance。实例不仅是几何图形的实例，更是其的容器。

为了创建矩形的几何图形，即覆盖矩形区域的三角形和适合球体曲率的三角形，我们创建了一个RectangleGeometry。

因为它在表面上，所以我们可以使用EllipsoidSurfaceAppearance。这通过假设几何图形在曲面上或在椭球体上方的恒定高度来节省内存。

Geometry types 几何图形类型

CesiumJS提供下列几何图形：

组合几何图形

当我们使用一个Primitive绘制多个静态几何图形时，我们看到了性能优势。例如，在一个Primitive中绘制两个矩形。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


 var viewer = new Cesium.Viewer('cesiumContainer');
var scene = viewer.scene;

var instance = new Cesium.GeometryInstance({
 geometry : new Cesium.RectangleGeometry({
 rectangle : Cesium.Rectangle.fromDegrees(-100.0, 20.0, -90.0, 30.0),
 vertexFormat : Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT
 })
});

var anotherInstance = new Cesium.GeometryInstance({
 geometry : new Cesium.RectangleGeometry({
 rectangle : Cesium.Rectangle.fromDegrees(-85.0, 20.0, -75.0, 30.0),
 vertexFormat : Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT
 })
});

scene.primitives.add(new Cesium.Primitive({
 geometryInstances : [instance, anotherInstance],
 appearance : new Cesium.EllipsoidSurfaceAppearance({
 material : Cesium.Material.fromType('Stripe')
 })
}));

我们用不同的矩形创建了另一个实例，然后将这两个实例提供给Primitive。这将以相同的外观绘制两个实例。

有些外观允许每个实例提供唯一的属性。例如，我们可以使用PerinstanceColorAppearance对每个实例使用不同的颜色进行着色。

 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


var viewer = new Cesium.Viewer('cesiumContainer');
var scene = viewer.scene;

var instance = new Cesium.GeometryInstance({
 geometry : new Cesium.RectangleGeometry({
 rectangle : Cesium.Rectangle.fromDegrees(-100.0, 20.0, -90.0, 30.0),
 vertexFormat : Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
 }),
 attributes : {
 color : new Cesium.ColorGeometryInstanceAttribute(0.0, 0.0, 1.0, 0.8)
 }
});

var anotherInstance = new Cesium.GeometryInstance({
 geometry : new Cesium.RectangleGeometry({
 rectangle : Cesium.Rectangle.fromDegrees(-85.0, 20.0, -75.0, 30.0),
 vertexFormat : Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
 }),
 attributes : {
 color : new Cesium.ColorGeometryInstanceAttribute(1.0, 0.0, 0.0, 0.8)
 }
});

scene.primitives.add(new Cesium.Primitive({
 geometryInstances : [instance, anotherInstance],
 appearance : new Cesium.PerInstanceColorAppearance()
}));

每个实例都有一个颜色属性。Primitive是用PerinstanceColorAppearance构造的，它使用每个实例的颜色属性来确定着色。

组合几何图形可以使CesiumJS有效地绘制许多几何图形。下面的示例绘制2592个颜色独特的矩形。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


var viewer = new Cesium.Viewer('cesiumContainer');
var scene = viewer.scene;

var instances = [];

for (var lon = -180.0; lon < 180.0; lon += 5.0) {
 for (var lat = -85.0; lat < 85.0; lat += 5.0) {
 instances.push(new Cesium.GeometryInstance({
 geometry : new Cesium.RectangleGeometry({
 rectangle : Cesium.Rectangle.fromDegrees(lon, lat, lon + 5.0, lat + 5.0),
 vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
 }),
 attributes : {
 color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.fromRandom({alpha : 0.5}))
 }
 }));
 }
}

scene.primitives.add(new Cesium.Primitive({
 geometryInstances : instances,
 appearance : new Cesium.PerInstanceColorAppearance()
}));

Picking 拾取

实例合并后可以独立访问。为实例分配一个ID，并使用它来确定是否使用Scene.Pick拾取该实例。

下面的示例创建一个带id的实例，并在单击该实例时将消息写入控制台。

 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


var viewer = new Cesium.Viewer('cesiumContainer');
var scene = viewer.scene;

var instance = new Cesium.GeometryInstance({
 geometry : new Cesium.RectangleGeometry({
 rectangle : Cesium.Rectangle.fromDegrees(-100.0, 30.0, -90.0, 40.0),
 vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
 }),
 id : 'my rectangle',
 attributes : {
 color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED)
 }
});

scene.primitives.add(new Cesium.Primitive({
 geometryInstances : instance,
 appearance : new Cesium.PerInstanceColorAppearance()
}));

var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handler.setInputAction(function (movement) {
 var pick = scene.pick(movement.position);
 if (Cesium.defined(pick) && (pick.id === 'my rectangle')) {
 console.log('Mouse clicked rectangle.');
 }
 }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

使用id避免了在内存中，在Primitive构造之后，对整个实例的引用，包括几何图形。

Geometry instances 几何实例

实例可用于在场景的不同部分定位、缩放和旋转相同的几何体。这是可能的，因为多个实例可以引用相同的Geometry，并且每个实例可以具有不同的modelMatrix。这允许我们只计算一次几何图形，并多次重复使用它。

以下示例创建一个EllipsoidGeometry和两个实例。每个实例引用相同的椭球几何体，但使用不同的modelMatrix放置它，导致一个椭球位于另一个椭球之上。

 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
33
34
35
36
37
38
39


var viewer = new Cesium.Viewer('cesiumContainer');
var scene = viewer.scene;

var ellipsoidGeometry = new Cesium.EllipsoidGeometry({
 vertexFormat : Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
 radii : new Cesium.Cartesian3(300000.0, 200000.0, 150000.0)
});

var cyanEllipsoidInstance = new Cesium.GeometryInstance({
 geometry : ellipsoidGeometry,
 modelMatrix : Cesium.Matrix4.multiplyByTranslation(
 Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(-100.0, 40.0)),
 new Cesium.Cartesian3(0.0, 0.0, 150000.0),
 new Cesium.Matrix4()
 ),
 attributes : {
 color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.CYAN)
 }
});

var orangeEllipsoidInstance = new Cesium.GeometryInstance({
 geometry : ellipsoidGeometry,
 modelMatrix : Cesium.Matrix4.multiplyByTranslation(
 Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(-100.0, 40.0)),
 new Cesium.Cartesian3(0.0, 0.0, 450000.0),
 new Cesium.Matrix4()
 ),
 attributes : {
 color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.ORANGE)
 }
});

scene.primitives.add(new Cesium.Primitive({
 geometryInstances : [cyanEllipsoidInstance, orangeEllipsoidInstance],
 appearance : new Cesium.PerInstanceColorAppearance({
 translucent : false,
 closed : true
 })
}));

Updating per-instance attributes 更新实例属性

将几何图形添加到Primitive后，更新几何图形的每个实例属性以更改可视化效果。每个实例的属性包括：

Color: ColorGeometryInstanceAttribute决定了颜色实例。Primitive必须具有PerInstanceColorAppearance。
Show：boolean类型决定实例是否可见。所有实例都具有该属性。

下列展示了如何改变几何实例的颜色：

 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


var viewer = new Cesium.Viewer('cesiumContainer');
var scene = viewer.scene;

var circleInstance = new Cesium.GeometryInstance({
 geometry : new Cesium.CircleGeometry({
 center : Cesium.Cartesian3.fromDegrees(-95.0, 43.0),
 radius : 250000.0,
 vertexFormat : Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
 }),
 attributes : {
 color : Cesium.ColorGeometryInstanceAttribute.fromColor(new Cesium.Color(1.0, 0.0, 0.0, 0.5))
 },
 id: 'circle'
});
var primitive = new Cesium.Primitive({
 geometryInstances : circleInstance,
 appearance : new Cesium.PerInstanceColorAppearance({
 translucent : false,
 closed : true
 })
});
scene.primitives.add(primitive);

setInterval(function() {
 var attributes = primitive.getGeometryInstanceAttributes('circle');
 attributes.color = Cesium.ColorGeometryInstanceAttribute.toValue(Cesium.Color.fromRandom({alpha : 1.0}));
},2000);

几何图形实例的属性可以被primitive使用primitive.getGeometryInstanceAttributes检索。attirbutes的属性可以直接被改变。

外观

几何定义结构。primitive的另一个关键属性，appearance，定义了primitive的纹理，即单个像素的颜色。primitive可以有多个几何实例，但只能有一个外观。根据外观的类型，外观将具有定义着色的主体的material。

CesiumJS具有下列外观：

外观定义了绘制Primitive时在GPU上执行的完整GLSL顶点和面片着色器。外观还定义了完整的渲染状态，它控制绘制primitvie时GPU的状态。我们可以直接定义渲染状态，也可以使用更高级的属性，如“闭合(closed)”和“半透明(translucent)”，外观将转换为渲染状态。例如：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


// Perhaps for an opaque box that the viewer will not enter.
// - Backface culled and depth tested. No blending.

var appearance = new Cesium.PerInstanceColorAppearance({
 translucent : false,
 closed : true
});

// This appearance is the same as above
var anotherAppearance = new Cesium.PerInstanceColorAppearance({
 renderState : {
 depthTest : {
 enabled : true
 },
 cull : {
 enabled : true,
 face : Cesium.CullFace.BACK
 }
 }
});

创建外观后，不能更改其renderState属性，但可以更改其material。我们还可以更改primitive的appearnace属性。

大多数外观还具有flat和faceForward属性，这些属性间接控制GLSL着色器。

flat：平面阴影。不要考虑照明。
faceForward：照明时，翻转法线，使其始终面向观众。回避背面的黑色区域，例如墙的内侧。

Geometry and appearance compatibility 几何图形和外观兼容

并非所有外观都适用于所有几何图形。例如，EllipsoidSurfaceAppearance外观不适用于WallGeometry几何图形，因为墙不在球体的表面上。

要使外观与几何图形兼容，它们必须具有匹配的顶点格式，这意味着几何图形必须具有外观所期待的输入数据。创建几何图形时可以提供vertexFormat。

几何图形的vertexFormat确定它是否可以与其他几何图形组合。两个几何图形不必是相同的类型，但它们需要匹配的顶点格式。

为方便起见，外观要么具有vertexFormat属性，要么具有可作为几何体选项传入的VERTEX_FORMAT静态常量。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


var geometry = new Ceisum.RectangleGeometry({
 vertexFormat : Ceisum.EllipsoidSurfaceAppearance.VERTEX_FORMAT
 // ...
});

var geometry2 = new Ceisum.RectangleGeometry({
 vertexFormat : Ceisum.PerInstanceColorAppearance.VERTEX_FORMAT
 // ...
});

var appearance = new Ceisum.MaterialAppearance(/* ... */);
var geometry3 = new Ceisum.RectangleGeometry({
 vertexFormat : appearance.vertexFormat
 // ...
});

Resources 资源

参考文档：

更多材料请访问：Fabric 更多未来计划，请访问：Geometry and Appearances Roadmap

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

[CesiumJS]Cesium中级教程6 – 3D Models 三维模型

Thu, 23 May 2019 13:08:49 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

本教程将教您如何通过Primitive API转换、加载和使用Cesium中的三维模型。如果你是Cesium的新用户，可能需要阅读三维模型部分的(空间数据可视化教程)[https://cesium.com/docs/tutorials/creating-entities#3d-models],本系列教程中叫：”空间数据可视化“。

Cesium支持3D模型，包括关键帧动画、skinning(贴皮？)和独立节点选取，使用glTF，这是由Khronos Group（WebGL和COLLADA背后的联合体）为网络上的3D模型开发的一种新兴行业标准格式。Cesium还提供了一个基于网络的工具，将COLLADA模型转换为glTF，以便与Cesium一起优化使用。

快速入门

Cesium包括一些现成的二进制gLTF模型：

一个带有动画螺旋桨的飞机
带有动画车轮的地面车辆
带有皮肤周期行走的角色
热气球
一辆牛奶车（还包括Draco-compressed格式的牛奶车）

这些模型在Apps/SampleData/models中都有自己的目录。大多数将包括原始COLLADA文件（.dae）、glTF文件（.gltf）和/或二进制glTF文件（.glb）。在Cesium应用程序中不需要使用原始的COLLADA文件。

让我们编写代码来加载这些模型。打开Sandcastle的Hello World示例。在第4行var viewer=…下，添加一个scene变量。

1

var scene = viewer.scene;

接下来，通过添加以下代码，使用glTF中的cesium.model加载地面车辆模型。

1
2
3
4
5
6
7


var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(
 Cesium.Cartesian3.fromDegrees(-75.62898254394531, 40.02804946899414, 0.0));
var model = scene.primitives.add(Cesium.Model.fromGltf({
 url : '../../../../Apps/SampleData/models/GroundVehicle/GroundVehicle.glb',
 modelMatrix : modelMatrix,
 scale : 200.0
}));

单击F8，然后使用右上角的geocoder工具缩放到Enxon，PA。

我们现在直视地面车辆。我们可以用鼠标右键拖动放大，用鼠标中键拖动倾斜视图。

cesium.Model.fromGltf异步加载glTF模型，包括任何外部文件，并在完全加载后渲染该模型一次，从而解析readyPromise。只需要.gltf文件的URL，在本例中为*../../../Apps/SampleData/models/GroundVehicle/Groundvehicle.glb*。

scale作为可选参数提供给fromGltf用于放大模型。许多真实大小的模型也可以变小。所以使用一个较大的scale数值来第一次测试模型是有益的，比如200000.0，示例如下：

modelMatrix也提供给从fromGltf定位和旋转模型。这将为模型创建局部坐标系。这里，Cesium.Transforms.eastnorthupfixedframe用于创建一个本地的东北向上坐标系，其原点为经度*-75.62898254394531度，纬度40.02804946899414*度。可以随时更改模型的modelMatrix属性以移动模型。

要可视化坐标系，请使用Cesium Inspector，在第4行*var viewer=…*下的任意位置添加以下代码:

1

viewer.extend(Cesium.viewerCesiumInspectorMixin);

单击F8，inspector界面将出现在左上方。展开Primitives，点击Pick a Primitive，点击地面上的车辆模型，然后确认show reference frame。

此处： x轴（东）是红色的，y轴（北）是绿色的，以及z（向上）是蓝色的。

我们可以使用相同的代码来加载飞机或角色模型，只需更改URL传递给fromGltf的为“../../../../Apps/Sampledata/models/cesiumAir/Cesium-Air.glb”或“../../../Apps/SampleData/models/Cesium Man/Cesium-Man.glb”。有关其所有选项，请参阅**Cesium.Model.fromGltf的参考文档。

动画

这些模型中的每一个模型都有内置的动画，这些动画是由一个艺术家（比如，一个艺术家通过定义几个关键姿势创建了一个动画），Cesium在运行时进行插值以创建平滑的动画。

要播放动画，请在调用Cesium.Model.fromGltf后添加以下代码。

1
2
3
4
5


Cesium.when(model.readyPromise).then(function(model) {
 model.activeAnimations.addAll({
 loop : Cesium.ModelAnimationLoop.REPEAT
 });
});

由于动画存储在glTF模型中，因此我们需要等待readyPromise解决后再访问它们。addAll用于播放模型中的所有动画。Cesium.ModelAnimationLoop.REPEAT循环动画，直到将其从activeAnimations集合中移除。要播放特定的动画，请改用add，并提供动画的id（glTF JSON属性名）。

除循环选项之外，addAll和add还提供了许多选项来控制动画的开始和停止时间、速度和方向。例如，下面的动画以半速（相对于Cesium clock）和反向运转。

1
2
3
4
5


model.activeAnimations.addAll({
 loop : Cesium.ModelAnimationLoop.REPEAT,
 speedup : 0.5,
 reverse : true
});

add返回ModelAnimation对象（addAll返回这些对象的数组），其中包含动画开始、停止和更新每个帧时的事件。例如，这允许，相对于另一个动画启动一个动画。请前往API文档查看开始start、停止stop和更新update事件。

动画与Cesium clock同步，因此要查看它们，请按播放小部件上的播放。可以使用时间线和播放小部件来增加、减少和反转动画的速度。

要将应用程序配置为自动播放动画，请初始化如下查看器：

1
2
3


var viewer = new Cesium.Viewer('cesiumContainer', {
 shouldAnimate : true
});

Picking 拾取

与所有Cesium primitives一样，如果选择了模型，Scene.Pick将返回一个模型作为其结果的一部分。此外，还返回了glTF节点和glTF网格的id（JSON属性名），从而可以精确地拾取不同的模型部件。以下示例在控制台窗口中的鼠标光标下显示节点和网格名称。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handler.setInputAction(
 function (movement) {
 var pick = scene.pick(movement.endPosition);
 if (Cesium.defined(pick) && Cesium.defined(pick.node) && Cesium.defined(pick.mesh)) {
 console.log('node: ' + pick.node.name + '. mesh: ' + pick.mesh.name);
 }
 },
 Cesium.ScreenSpaceEventType.MOUSE_MOVE
);

转换COLLADA为glTF

为了完全转换COLLDA模型到glTF格式供Cesium使用，可以使用web-based COLLADA-to-glTF转换器。该工具能够将*.dae文件和图像文件转换为嵌入图像的.gltf*文件。

Troubleshooting 故障排除

如果在Cesium中加载3D模型时出现问题，请首先确定问题所在。问题可能出现在：

模型工具的导出器，比如：Maya，Modo，ShetchUp等等
COLLADA-to-glTF转换工具
Cesium glTF渲染器

Mac下的故障排除

在Mac上，要确定是否正确导出了COLLADA文件，请双击*.dae*文件，该文件应显示在预览窗口中。如果模型有动画，鼠标悬停在窗口底部会弹出一个工具栏来播放它们。

如果collada文件无效，预览将显示错误。这通常表示COLLADA导出器中存在用于创建collada文件的错误。

要解决此问题，请安装xcode，然后右键单击*.dae文件并选择Open With“打开方式”*->xcode。

Xcode显示的模型类似于预览，但具有更多的功能，如选择单个节点的能力。Xcode还为无效的COLLADA文件实现了许多解决方法，因此它通常可以加载和预览无法加载的collada文件。如果模型在Xcode中加载，请选择“文件-保存”以将模型与解决方法一起保存，然后应在“预览确定”中加载。

如果在预览中仍然没有加载，那么COLLADA导出器有问题。确保您拥有最新版本的建模工具，并尝试本文中的提示。如果仍然不起作用，请向建模工具（而不是Cesium）提交一个bug。也值得尝试导出为*.fbx*或其他格式，然后导入到另一个具有更好的COLLADA导出器的建模工具中。

Windows下的故障排除

在Windows下，Visual Studio2013 包括免费的社区版的模型编辑器，可以加载COLLADA模型。为了确定COLLADA文件是否被正确导出，将*.dae*文件拖拽近Visual Studio然后它被加载。如果没有加载，这通常意味着COLLADA导出器存在bug。确保您拥有最新版本的建模工具，并尝试本文中的提示。如果仍然不起作用，请向建模工具（而不是Cesium）提交一个bug。它也值得尝试导出为.fbx或其他格式，然后导入到另一个具有更好的COLLADA导出器的建模工具中。

如果没有Visual Studio，则Autodesk有一个允许拖放的WebGL查看器，并且不需要登录。查看器不支持动画。如果模型中有图像，请上传包含.dae和图像文件的zip包。

Cesium中的故障排除

一旦我们有了一个有效的COLLADA文件，就通过COLLADA-to-glTF转换器运行它，然后尝试将其加载到Cesium中。如果没有加载到Cesium中或显示不正确，则转换器或Cesium中存在错误。要获取更多详细信息，请打开浏览器的开发人员工具（chrome中的ctrl-shift-i）并启用ause on all exceptions（chrome中的Sources选项卡），然后重新加载Cesium应用程序。

向Cesium论坛发一条信息，我们通常可以提供一个解决方案，直到有修复方案。在您的帖子中，请包括：

原始的COLLADA和转换的glTF文件。我们认识到并不是每个人都可以分享他们的模型，但是如果可以的话，它会极大地提高我们的帮助能力。
浏览器的控制台窗口以及加载模型时引发的任何异常，例如

资源

查看Sandcastle中的3D模型示例以及Model和ModelAnimationCollection的参考文档。

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

[CesiumJS]Cesium中级教程5 – Terrain 地形

Wed, 22 May 2019 09:33:44 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

CesiumJS支持对与水流相关的海洋、湖泊和河流以及全球高分辨率地形进行流式处理和可视化。查看山峰、山谷和其他地形特征，并拥抱三维数字地球。使用Cesium ion流式化您自己的切片地形数据或高分辨率管理地形，如Cesium World Terrain。

Quick Start 快速入门

打开Sandcastle的Hello World示例。默认情况下，地球球体是WGS84 ellipsoid。通过将_terrainProvider_选项传递给_Viewer_，指定不同的地形提供器。让我们使用Cesium世界地形：

1
2
3
4


Cesium.Ion.defaultAccessToken = 'your_access_token';
var viewer = new Cesium.Viewer('cesiumContainer', {
 terrainProvider : Cesium.createWorldTerrain()
});

NOTE: 创建Cesium账号 NOTE: 本教程使用Cesium ion提供的地形。创建一个帐户以获取访问令牌(access token)，以便在本教程中使用地形。在这里注册，上面的示例代码将自动更新为您的令牌。如果您已经有帐户，请登录。

修改示例后，按F8运行该示例。缩放到山区，按住鼠标中键并拖动以倾斜到地平线视图。下图珠穆朗玛峰的样子：

随着我们的缩放越来越近，CesiumJS基于地球上哪些部分可见以及它们离得有多远来获得更高分辨率的地形。

地形和图像分别处理，任何图像提供者都可以与任何地形提供者一起使用。请参见Imagery Layers Tutorial以管理图像。

启用地形照明和水体效果

Cesium世界地形还包括地形照明数据和水体效果所需的海岸线数据。默认情况下，此数据不会随地形图块一起发送。若要启用地形照明，请将_requestVertexNormals_设为_true_并开启全球光照。

1
2
3
4
5
6


var viewer = new Cesium.Viewer('cesiumContainer', {
 terrainProvider : Cesium.createWorldTerrain({
 requestVertexNormals: true
 })
});
viewer.scene.globe.enableLighting = true;

下图是基于太阳位置开启地形照明的珠穆朗玛峰的同一个视图。

使用_requestWaterMask_以类似的方式启用水体效果：

1
2
3
4
5


var viewer = new Cesium.Viewer('cesiumContainer', {
 terrainProvider : Cesium.createWorldTerrain({
 requestWaterMask: true
 })
});

缩放到有水的区域以查看效果。这里是旧金山湾：

随着时间的推移，水波波动和明亮的镜面反射太阳和月亮的光。通过使用** Globe.oceanNormalMapUrl**用于创建波浪来自定义水效果。更改图像提供者也会影响水的外观，因为水的颜色与底层图像混合。改变图层提供器也会改变水体效果的呈现，因为水体的颜色会和底下的图层混合渲染。

请参阅Sandcastle的地形示例，探索一些有趣的地形和水体效果区域。

准备流式化地形

Cesium World Terrain: 高分辨世界地形，同时扩展支持地形照明和水体效果。Cesium Worl Terrain支持通过Cesium ion在线访问，也支持付费下载，离线访问。将它加入到Cesium应用中，将快速提高地形可视化效果。 Cesium World Terrain也可以通过on-premise获得。

Terrain providers 地形提供器

Cesium基于地形提供器支持请求地形的若干种方法。大多数地形提供器使用HTTP上的REST接口来请求地形切片。地形提供器根据请求的格式和地形数据的组织方式而有所不同。CesiumJS支持以下地形提供器：

CesiumTerrainProvider: 支持量化网格地形切片，针对地形流进行了优化。兼容Cesium ion所服务的地形和来自[3D tiling pipeline])(/3d-tiling-pipeline/terrain/)的输出数据。
GoogleEarthEnterpriseTerrainProvider: 支持由您的Google Earth Enterprise服务器生成的高程地图地形。
VRTheWorldTerrainProvider: 支持从VT MAK VR-TheWorld Server服务器请求的高度地图地形图。
EllipsoidTerrainProvider:按照程序创建椭球的表面。缺乏地形的真实外观，但不从服务器请求数据。

地形提供器的构造与图层提供器类似，如果服务器不支持跨域资源共享CORS，则通常包括地形服务器的URL和可选的代理。

资源

查看Sandcastle中的地形示例和所有地形提供器的参考文档。

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

[CesiumJS]Cesium中级教程4 – 空间数据可视化（二）

Wed, 22 May 2019 02:15:02 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

Viewer中的Entity功能

让我们看看_Viewer_为操作entities提供出来的功能函数。

选中和描述

点击Viewer中的entity将在entity的位置上呈现SelectionIndicator控件，提供一个InfoBox用于呈现更多的信息。我们可以设置_name_，来定义_InfoBox_的标题。我们也以HTML样式来提供_Entity.description_的属性。

 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


wyoming.name = 'wyoming';
wyoming.description = '\
<img\
 width="50%"\
 style="float:left; margin: 0 1em 1em 0;"\
 src="//cesium.com/docs/tutorials/creating-entities/Flag_of_Wyoming.svg"/>\
<p>\
 Wyoming is a state in the mountain region of the Western \
 United States.\
</p>\
<p>\
 Wyoming is the 10th most extensive, but the least populous \
 and the second least densely populated of the 50 United \
 States. The western two thirds of the state is covered mostly \
 with the mountain ranges and rangelands in the foothills of \
 the eastern Rocky Mountains, while the eastern third of the \
 state is high elevation prairie known as the High Plains. \
 Cheyenne is the capital and the most populous city in Wyoming, \
 with a population estimate of 63,624 in 2017.\
</p>\
<p>\
 Source: \
 <a style="color: WHITE"\
 target="_blank"\
 href="http://en.wikipedia.org/wiki/Wyoming">Wikipedia</a>\
</p>';

_InfoBox_中展示的所有HTML是沙盒式的。这组织了外部数据源带有恶意的注入到Cesium的应用程序中。为了在描述中运行JavaScript或浏览器插件，访问沙盒中的iframe通过_viewer.infoBox.frame_属性。参考该文可以获得更多的信息用于控制iframe中的沙盒。

Camera控制

使用_iewer.zoomto_命令查看特定Entity。还有一个viewer.flyto方法，用于对Entity执行动画Camera飞行。这两种方法都可以传递给_Entity_、EntityCollection、DataSource或实体数组。

任何一种方法都会计算所有提供的实体的视图。默认情况下，Camera朝向北方，并从45度角向下看。通过传入_HeadingPitchrange_自定义此项。

1
2
3


var heading = Cesium.Math.toRadians(90);
var pitch = Cesium.Math.toRadians(-30);
viewer.zoomTo(wyoming, new Cesium.HeadingPitchRange(heading, pitch));

zoomTo_和_flyTo_都是异步函数；也就是说，它们不能保证在返回之前完成。例如，飞行到Entity会在许多动画帧后发生。这两个功能都返回Promises，可用于计划飞行或缩放完成后要执行的功能。用下面的代码片段替换示例中的_zoomTo。这架飞机飞往怀俄明州，并在飞行结束后选中它。

1
2
3
4
5


viewer.flyTo(wyoming).then(function(result){
 if (result) {
 viewer.selectedEntity = wyoming;
 }
});

如果航班飞行成功完成，则传递给回调函数的结果参数将为_true_；如果航班被取消，则结果参数将为_false_，即，在此航班完成之前，用户启动了另一个航班或缩放；或者，由于目标没有相应的可视化效果，即没有可缩放的对象。

有时，特别是在处理时间动态数据时，我们希望Camera聚焦跟随一个entity而不是地球的中心。可以通过设置viewer.trackedEntity完成。跟踪实体需要设置position。

1
2


wyoming.position = Cesium.Cartesian3.fromDegrees(-107.724, 42.68);
viewer.trackedEntity = wyoming;

停止跟踪需要设置viewer.trackedEntity为undefined或远离entity双击屏幕即可。调用zoomTo或flyTo也可以取消跟踪。

管理Entities

EntityCollection是用于管理和监视一组实体的关联数组。viewer.entities_是_EntityCollection。_EntityCollection_包括用于管理实体的方法，如add、remove和removeAll。

有时我们需要更新我们以前创建的实体。所有实体实例都有一个唯一的id，可用于从集合中检索实体。我们可以为实体指定一个ID，否则将自动生成一个ID。

1
2
3


viewer.entities.add({
 id : 'uniqueId'
});

使用getByiId检索实体。如果不存在具有提供的ID的实体，则返回_undefined_。

1

var entity = viewer.entities.getById('uniqueId');

要获取实体或创建新实体（如果不存在），请使用getOrCreateEntity。

1

var entity = viewer.entities.getOrCreateEntity('uniqueId');

手动创建新实体，然后使用_add_将其添加到集合中。如果集合中已存在具有相_id_的实体，则此方法将抛出异常。

1
2
3
4


var entity = new Entity({
 id: 'uniqueId'
});
viewer.entities.add(entity);

_EntityCollection_的功能使用CollectionChanged事件发光。当在集合中添加、删除或更新实体时，会通知监听器。

使用Sandcastle中的[Geometry Showcase] (https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/index.html?src=Geometry and Appearances.html&label=Showcases) 示例。在创建viewer的行后粘贴以下代码。

1
2
3
4
5
6
7
8


function onChanged(collection, added, removed, changed){
 var msg = 'Added ids';
 for(var i = 0; i < added.length; i++) {
 msg += '\n' + added[i].id;
 }
 console.log(msg);
}
viewer.entities.collectionChanged.addEventListener(onChanged);

运行该示例时，您应该在控制台中看到大约65条消息，每次调用_viewer.entities.add_时都会看到一条消息。

当一次更新大量的实体时，将队列更新结束后并在最后发送一个整体事件，这样更具性能。这样Cesium可以在一次通过中处理所需的变化。在示例末尾，在_viewer.entities.add_之前调用viewer.entities.suspendEvents，并调用viewer.entities.resumeEvents。当再次运行演示时，我们现在得到包含所有65个实体的单一事件。这些调用是引用计数的，因此可以嵌套多个挂起和恢复调用。

Picking 拾取

选择（单击选择一个对象）是我们需要与基本API进行短暂交互的领域之一。使用scene.pick和scene.drillpick检索实体。

 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
33
34
35
36
37
38
39
40
41
42
43
44


/**
 * Returns the top-most entity at the provided window coordinates
 * or undefined if no entity is at that location.
 *
 * @param {Cartesian2} windowPosition The window coordinates.
 * @returns {Entity} The picked entity or undefined.
 */
function pickEntity(viewer, windowPosition) {
 var picked = viewer.scene.pick(windowPosition);
 if (defined(picked)) {
 var id = Cesium.defaultValue(picked.id, picked.primitive.id);
 if (id instanceof Cesium.Entity) {
 return id;
 }
 }
 return undefined;
};

/**
 * Returns the list of entities at the provided window coordinates.
 * The entities are sorted front to back by their visual order.
 *
 * @param {Cartesian2} windowPosition The window coordinates.
 * @returns {Entity[]} The picked entities or undefined.
 */
function drillPickEntities(viewer, windowPosition) {
 var i;
 var entity;
 var picked;
 var pickedPrimitives = viewer.scene.drillPick(windowPosition);
 var length = pickedPrimitives.length;
 var result = [];
 var hash = {};

 for (i = 0; i < length; i++) {
 picked = pickedPrimitives[i];
 entity = Cesium.defaultValue(picked.id, picked.primitive.id);
 if (entity instanceof Cesium.Entity && !Cesium.defined(hash[entity.id])) {
 result.push(entity);
 hash[entity.id] = true;
 }
 }
 return result;
};

Points, billboards, and labels（点、广告牌和标签）

通过设置_position_、point和label来创建图形点或标签。例如，在我们最喜欢的运动队的主体育场放置一个点。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


var viewer = new Cesium.Viewer('cesiumContainer');

var citizensBankPark = viewer.entities.add({
 name : 'Citizens Bank Park',
 position : Cesium.Cartesian3.fromDegrees(-75.166493, 39.9060534),
 point : {
 pixelSize : 5,
 color : Cesium.Color.RED,
 outlineColor : Cesium.Color.WHITE,
 outlineWidth : 2
 },
 label : {
 text : 'Citizens Bank Park',
 font : '14pt monospace',
 style: Cesium.LabelStyle.FILL_AND_OUTLINE,
 outlineWidth : 2,
 verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
 pixelOffset : new Cesium.Cartesian2(0, -9)
 }
});

viewer.zoomTo(viewer.entities);

默认情况下，标签水平和垂直居中。由于标签和点共享相同的位置，它们在屏幕上重叠。为避免这种情况，请指定标签源_Verticalorigin.BOTTOM_并将像素偏移量设置为（0，-9）。将该点替换为一个billboard，它是一个始终面向用户的标记。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


var citizensBankPark = viewer.entities.add({
 position : Cesium.Cartesian3.fromDegrees(-75.166493, 39.9060534),
 billboard : {
 image : '//cesiumjs.org/tutorials/Visualizing-Spatial-Data/images/Philadelphia_Phillies.png',
 width : 64,
 height : 64
 },
 label : {
 text : 'Citizens Bank Park',
 font : '14pt monospace',
 style: Cesium.LabelStyle.FILL_AND_OUTLINE,
 outlineWidth : 2,
 verticalOrigin : Cesium.VerticalOrigin.TOP,
 pixelOffset : new Cesium.Cartesian2(0, 32)
 }
});

有关更多自定义选项，请参见Sandcastle标签和广告牌示例。

3D models （三维模型）

CesiumJS支持通过glTF（运行时asset format）创建3D模型。您可以在3D modelsSandcastle中找到示例模型。

将位置和URI设置为glTF 模型以创建模型实体。

1
2
3
4
5
6
7
8


var viewer = new Cesium.Viewer('cesiumContainer');
var entity = viewer.entities.add({
 position : Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706),
 model : {
 uri : '../../../../Apps/SampleData/models/GroundVehicle/GroundVehicle.glb'
 }
});
viewer.trackedEntity = entity;

默认情况下，模型是垂直的，面向东。通过为Entity.Orientation属性指定Quaternion来控制模型的方向。这将控制模型的heading、pitch和roll。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


var viewer = new Cesium.Viewer('cesiumContainer');
var position = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706);
var heading = Cesium.Math.toRadians(45.0);
var pitch = Cesium.Math.toRadians(15.0);
var roll = Cesium.Math.toRadians(0.0);
var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, new Cesium.HeadingPitchRoll(heading, pitch, roll));

var entity = viewer.entities.add({
 position : position,
 orientation : orientation,
 model : {
 uri : '../../../../Apps/SampleData/models/GroundVehicle/GroundVehicle.glb'
 }
});
viewer.trackedEntity = entity;

有关更高级的模型功能，请参见3D模型教程。如果你创建自己的模型，一定要看到我们关于glTF Tips for Artists提示的帖子。

The property system（属性系统）

我们为实体定义的所有值都存储为_property_对象。例如，请参见怀俄明州大纲的值：

1

console.log(typeof wyoming.polygon.outline);

outline_是ConstantProperty的一个实例。本教程使用一种称为隐式属性转换（implicit property conversion）的速记形式，它自动获取原始值并在引擎盖下创建相应的_Property。如果没有这个速记，我们将不得不编写一个更长版本的初始示例：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


var wyoming = new Cesium.Entity();
wyoming.name = 'Wyoming';

var polygon = new Cesium.PolygonGraphics();
polygon.material = new Cesium.ColorMaterialProperty(Cesium.Color.RED.withAlpha(0.5));
polygon.outline = new Cesium.ConstantProperty(true);
polygon.outlineColor = new Cesium.ConstantProperty(Cesium.Color.BLACK);
wyoming.polygon = polygon;

viewer.entities.add(wyoming);

之所以使用属性，是因为实体API不仅能够表示常量值，而且能够表示随时间变化的值。请参阅Callback Property和InterpolationSandcastle示例，了解一些时间动态属性。

资源

有关如何使用_GeoJSON_和_CZML_设置样式和创建实体的示例，请参阅Cesium Workshop Tutorial。

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

[CesiumJS]Cesium中级教程3 – Camera – 相机（摄像机）

Mon, 20 May 2019 15:43:53 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

Camera

CesiumJS中的Camera控制场景的视图。有很多方法可以操作Camera，如旋转(rotate)、缩放(zoom)、平移(pan)和飞到目的地(flyTo)。CesiumJS有鼠标和触摸事件用来处理与Camrea的交互，还有API来以编程方式操作摄像机。了解如何使用Camera API和自定义相机控制(Camera controls)。

默认Camera行为

打开Sandcastle中的Hello World样例用来体验默认的相机控制。默认操作方式如下：

英文版

鼠标操作	3D	2D	Columbus视角
Left click + drag	Rotate around the globe	Translate over the map	Translate over the map
Right click + drag	Zoom in and out	Zoom in and out	Zoom in and out
Middle wheel scrolling	Zoom in and out	Zoom in and out	Zoom in and out
Middle click + drag	Tilt the globe	No action	Tilt the map

中文版

鼠标操作	3D	2D	Columbus视角
左键 + 拖拽	旋转地球	在地图上移动	在地图上移动
右键 + 拖拽	缩放	缩放	缩放
中键滚轮	缩放	缩放	缩放
中键 + 拖拽	倾斜地球	无操作	倾斜地球

使用_setView_函数设置Camera的位置和方向。destination可以是_Cartesian3_或_Rectangle_，orientation可以是_heading/pitch/roll_或_direction/up_。航向角、俯仰角和横滚角以弧度定义。航向角是从正角度向东增加的局部北向旋转。俯仰角是指从局部的东北平面开始的旋转。正俯仰角在平面上方。负俯仰角在平面以下。很滚叫是围绕局部东轴应用的第一个旋转。

1
2
3
4
5
6
7
8


camera.setView({
 destination: new Cesium.Cartesian3(x, y, z),
 orientation: {
 heading: headingAngle,
 pitch: pitchAngle,
 roll: rollAngle
 }
});

1
2
3
4
5
6
7
8


viewer.camera.setView({
 destination: Cesium.Rectangle.fromDegrees(west, south, east, north),
 orientation: {
 heading: headingAngle,
 pitch: pitchAngle,
 roll: rollAngle
 }
});

上述的所有参数都是可选的。如果未指定，参数值将被设为默认值用户当前Camera的位置和方向。

自定义Camera鼠标或者键盘事件

创建我们自己的事件控制，根据鼠标的朝向用于控制Camera的朝向，键盘的按键控制Camera向前、向左、向右、向上，以及向下。首先从禁用默认事件操作开始。在（`javascript var viewe=…`）之后添加下列代码：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


var scene = viewer.scene;
var canvas = viewer.canvas;
canvas.setAttribute('tabindex', '0'); // needed to put focus on the canvas
canvas.onclick = function() {
 canvas.focus();
};
var ellipsoid = viewer.scene.globe.ellipsoid;

// disable the default event handlers
scene.screenSpaceCameraController.enableRotate = false;
scene.screenSpaceCameraController.enableTranslate = false;
scene.screenSpaceCameraController.enableZoom = false;
scene.screenSpaceCameraController.enableTilt = false;
scene.screenSpaceCameraController.enableLook = false;

创建变量记录当前鼠标位置，然后标记并跟随Camera移动轨迹：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


var startMousePosition;
var mousePosition;
var flags = {
 looking: false,
 moveForward: false,
 moveBackward: false,
 moveUp: false,
 moveDown: false,
 moveLeft: false,
 moveRight: false
};

添加一个事件控制用户设置标记，当鼠标左键被点击的时候，用于记录当前鼠标的位置：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


var handler = new Cesium.ScreenSpaceEventHandler(canvas);

handler.setInputAction(function(movement) {
 flags.looking = true;
 mousePosition = startMousePosition = Cesium.Cartesian3.clone(movement.position);
}, Cesium.ScreenSpaceEventType.LEFT_DOWN);

handler.setInputAction(function(movement) {
 mousePosition = movement.endPosition;
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

handler.setInputAction(function(position) {
 flags.looking = false;
}, Cesium.ScreenSpaceEventType.LEFT_UP);

创建键盘事件控制用户切换Camera移动标记。我们为下列按键和行为设置了标记：

w Camera向前。
s Camera向后。
a Camera向左。
d Camera向右。
q Camera向上。
e Camera向下。

 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


function getFlagForKeyCode(keyCode) {
 switch (keyCode) {
 case 'W'.charCodeAt(0):
 return 'moveForward';
 case 'S'.charCodeAt(0):
 return 'moveBackward';
 case 'Q'.charCodeAt(0):
 return 'moveUp';
 case 'E'.charCodeAt(0):
 return 'moveDown';
 case 'D'.charCodeAt(0):
 return 'moveRight';
 case 'A'.charCodeAt(0):
 return 'moveLeft';
 default:
 return undefined;
 }
}

document.addEventListener('keydown', function(e) {
 var flagName = getFlagForKeyCode(e.keyCode);
 if (typeof flagName !== 'undefined') {
 flags[flagName] = true;
 }
}, false);

document.addEventListener('keyup', function(e) {
 var flagName = getFlagForKeyCode(e.keyCode);
 if (typeof flagName !== 'undefined') {
 flags[flagName] = false;
 }
}, false);

现在当标记表明事件发生为true是，我们更新（update）camera。我们新增**_onTick_的监听事件在clock中：

1
2
3


viewer.clock.onTick.addEventListener(function(clock) {
 var camera = viewer.camera;
});

接下来，我们让Camera指向鼠标指向的方向。在变量声明之后添加下列代码到事件监听函数：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


if (flags.looking) {
 var width = canvas.clientWidth;
 var height = canvas.clientHeight;

 // Coordinate (0.0, 0.0) will be where the mouse was clicked.
 var x = (mousePosition.x - startMousePosition.x) / width;
 var y = -(mousePosition.y - startMousePosition.y) / height;

 var lookFactor = 0.05;
 camera.lookRight(x * lookFactor);
 camera.lookUp(y * lookFactor);
}

lookRight和lookUp只需要一个角度参数用于表示旋转的角度。我们将鼠标坐标转换为范围（-1.0，1.0），坐标（0.0，0.0）位于画布的中心。鼠标距中心的距离决定了旋转的速度。靠近中心的位置移动Camera的速度较慢，而远离中心的位置移动Camera的速度较快。

最后，添加代码用于移动Camera的位置。然后添加下列代码到事件响应函数：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


// Change movement speed based on the distance of the camera to the surface of the ellipsoid.
var cameraHeight = ellipsoid.cartesianToCartographic(camera.position).height;
var moveRate = cameraHeight / 100.0;

if (flags.moveForward) {
 camera.moveForward(moveRate);
}
if (flags.moveBackward) {
 camera.moveBackward(moveRate);
}
if (flags.moveUp) {
 camera.moveUp(moveRate);
}
if (flags.moveDown) {
 camera.moveDown(moveRate);
}
if (flags.moveLeft) {
 camera.moveLeft(moveRate);
}
if (flags.moveRight) {
 camera.moveRight(moveRate);
}

moveForward、moveBackward、moveUp、moveDown、_moveLeft_和_moveRight_方法只需要一个距离参数（米）用于移动Camera的距离。当每一个按键被按下时，Camera就会在球体表面移动固定的距离。Camera离地面越近，移动的速度就越慢。

完整的代码如下：

 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
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116


var viewer = new Cesium.Viewer('cesiumContainer');

var scene = viewer.scene;
var canvas = viewer.canvas;
canvas.setAttribute('tabindex', '0'); // needed to put focus on the canvas
canvas.onclick = function() {
 canvas.focus();
};
var ellipsoid = viewer.scene.globe.ellipsoid;

// disable the default event handlers
scene.screenSpaceCameraController.enableRotate = false;
scene.screenSpaceCameraController.enableTranslate = false;
scene.screenSpaceCameraController.enableZoom = false;
scene.screenSpaceCameraController.enableTilt = false;
scene.screenSpaceCameraController.enableLook = false;

var startMousePosition;
var mousePosition;
var flags = {
 looking : false,
 moveForward : false,
 moveBackward : false,
 moveUp : false,
 moveDown : false,
 moveLeft : false,
 moveRight : false
};

var handler = new Cesium.ScreenSpaceEventHandler(canvas);

handler.setInputAction(function(movement) {
 flags.looking = true;
 mousePosition = startMousePosition = Cesium.Cartesian3.clone(movement.position);
}, Cesium.ScreenSpaceEventType.LEFT_DOWN);

handler.setInputAction(function(movement) {
 mousePosition = movement.endPosition;
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

handler.setInputAction(function(position) {
 flags.looking = false;
}, Cesium.ScreenSpaceEventType.LEFT_UP);

function getFlagForKeyCode(keyCode) {
 switch (keyCode) {
 case 'W'.charCodeAt(0):
 return 'moveForward';
 case 'S'.charCodeAt(0):
 return 'moveBackward';
 case 'Q'.charCodeAt(0):
 return 'moveUp';
 case 'E'.charCodeAt(0):
 return 'moveDown';
 case 'D'.charCodeAt(0):
 return 'moveRight';
 case 'A'.charCodeAt(0):
 return 'moveLeft';
 default:
 return undefined;
 }
}

document.addEventListener('keydown', function(e) {
 var flagName = getFlagForKeyCode(e.keyCode);
 if (typeof flagName !== 'undefined') {
 flags[flagName] = true;
 }
}, false);

document.addEventListener('keyup', function(e) {
 var flagName = getFlagForKeyCode(e.keyCode);
 if (typeof flagName !== 'undefined') {
 flags[flagName] = false;
 }
}, false);

viewer.clock.onTick.addEventListener(function(clock) {
 var camera = viewer.camera;

 if (flags.looking) {
 var width = canvas.clientWidth;
 var height = canvas.clientHeight;

 // Coordinate (0.0, 0.0) will be where the mouse was clicked.
 var x = (mousePosition.x - startMousePosition.x) / width;
 var y = -(mousePosition.y - startMousePosition.y) / height;

 var lookFactor = 0.05;
 camera.lookRight(x * lookFactor);
 camera.lookUp(y * lookFactor);
 }

 // Change movement speed based on the distance of the camera to the surface of the ellipsoid.
 var cameraHeight = ellipsoid.cartesianToCartographic(camera.position).height;
 var moveRate = cameraHeight / 100.0;

 if (flags.moveForward) {
 camera.moveForward(moveRate);
 }
 if (flags.moveBackward) {
 camera.moveBackward(moveRate);
 }
 if (flags.moveUp) {
 camera.moveUp(moveRate);
 }
 if (flags.moveDown) {
 camera.moveDown(moveRate);
 }
 if (flags.moveLeft) {
 camera.moveLeft(moveRate);
 }
 if (flags.moveRight) {
 camera.moveRight(moveRate);
 }
});

完整代码请访问)

Camera

_Camera_表示Camera当前位置、方向、参考帧和视图截锥的状态。上面的Camera向量在每帧中都是正交的。 *move*_和_zoom**函数平移Camera的位置按照它的方向或指定的方向矢量。方向保持固定不变。

*look*_和_twist**函数旋转Camera的方向比如向上、或向右矢量。位置保持固定不变。

*rotate**函数玄幻位置和方向基于给定矢量。

函数设置Camera给定范围或位置和目标的Camera位置和方向。例如：

1
2
3
4
5
6


var west = Cesium.Math.toRadians(-77.0);
var south = Cesium.Math.toRadians(38.0);
var east = Cesium.Math.toRadians(-72.0);
var north = Cesium.Math.toRadians(42.0);
var extent = new Cesium.Extent(west, south, east, north);
camera.viewExtent(extent, Cesium.Ellipsoid.WGS84);

创建变量ray，通过像素拾取Camera的位置。该方法可用于拾取，例如：

1
2
3


// find intersection of the pixel picked and an ellipsoid
var ray = camera.getPickRay(mousePosition);
var intersection = Cesium.IntersectionTests.rayEllipsoid(ray, Cesium.Ellipsoid.WGS84);

Screen space camera controller

_ScreenSpaceCameraController_将用户输入（如鼠标和触摸）从窗口坐标转换为Camera运动。它包含用于启用和禁用不同类型输入、修改惯性量以及最小和最大缩放距离的属性。

资源

可在Sandcastle中查看camera样例代码：

API文档：

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

[vsftpd]vsftpd被动模式配置

Wed, 10 Apr 2019 02:56:05 +0000

vsftpd.conf

 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
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140


# Example config file /etc/vsftpd/vsftpd.conf
#
# The default compiled in settings are fairly paranoid. This sample file
# loosens things up a bit, to make the ftp daemon more usable.
# Please see vsftpd.conf.5 for all compiled in defaults.
#
# READ THIS: This example file is NOT an exhaustive list of vsftpd options.
# Please read the vsftpd.conf.5 manual page to get a full idea of vsftpd's
# capabilities.
#
# Allow anonymous FTP? (Beware - allowed by default if you comment this out).
anonymous_enable=NO
#
# Uncomment this to allow local users to log in.
# When SELinux is enforcing check for SE bool ftp_home_dir
local_enable=YES
#
# Uncomment this to enable any form of FTP write command.
write_enable=YES
#
# Default umask for local users is 077. You may wish to change this to 022,
# if your users expect that (022 is used by most other ftpd's)
local_umask=022
#
# Uncomment this to allow the anonymous FTP user to upload files. This only
# has an effect if the above global write enable is activated. Also, you will
# obviously need to create a directory writable by the FTP user.
# When SELinux is enforcing check for SE bool allow_ftpd_anon_write, allow_ftpd_full_access
#anon_upload_enable=YES
#
# Uncomment this if you want the anonymous FTP user to be able to create
# new directories.
#anon_mkdir_write_enable=YES
#
# Activate directory messages - messages given to remote users when they
# go into a certain directory.
dirmessage_enable=YES
#
# Activate logging of uploads/downloads.
xferlog_enable=YES
#
# Make sure PORT transfer connections originate from port 20 (ftp-data).
connect_from_port_20=YES
#
# If you want, you can arrange for uploaded anonymous files to be owned by
# a different user. Note! Using "root" for uploaded files is not
# recommended!
#chown_uploads=YES
#chown_username=whoever
#
# You may override where the log file goes if you like. The default is shown
# below.
#xferlog_file=/var/log/xferlog
#
# If you want, you can have your log file in standard ftpd xferlog format.
# Note that the default log file location is /var/log/xferlog in this case.
xferlog_std_format=YES
#
# You may change the default value for timing out an idle session.
#idle_session_timeout=600
#
# You may change the default value for timing out a data connection.
#data_connection_timeout=120
#
# It is recommended that you define on your system a unique user which the
# ftp server can use as a totally isolated and unprivileged user.
#nopriv_user=ftpsecure
#
# Enable this and the server will recognise asynchronous ABOR requests. Not
# recommended for security (the code is non-trivial). Not enabling it,
# however, may confuse older FTP clients.
#async_abor_enable=YES
#
# By default the server will pretend to allow ASCII mode but in fact ignore
# the request. Turn on the below options to have the server actually do ASCII
# mangling on files when in ASCII mode.
# Beware that on some FTP servers, ASCII support allows a denial of service
# attack (DoS) via the command "SIZE /big/file" in ASCII mode. vsftpd
# predicted this attack and has always been safe, reporting the size of the
# raw file.
# ASCII mangling is a horrible feature of the protocol.
#ascii_upload_enable=YES
#ascii_download_enable=YES
#
# You may fully customise the login banner string:
ftpd_banner=Welcome to blah FTP service.
#
# You may specify a file of disallowed anonymous e-mail addresses. Apparently
# useful for combatting certain DoS attacks.
#deny_email_enable=YES
# (default follows)
#banned_email_file=/etc/vsftpd/banned_emails
#
# You may specify an explicit list of local users to chroot() to their home
# directory. If chroot_local_user is YES, then this list becomes a list of
# users to NOT chroot().
# (Warning! chroot'ing can be very dangerous. If using chroot, make sure that
# the user does not have write access to the top level directory within the
# chroot)
chroot_local_user=YES
chroot_list_enable=NO
# (default follows)
chroot_list_file=/etc/vsftpd/chroot_list
#
# You may activate the "-R" option to the builtin ls. This is disabled by
# default to avoid remote users being able to cause excessive I/O on large
# sites. However, some broken FTP clients such as "ncftp" and "mirror" assume
# the presence of the "-R" option, so there is a strong case for enabling it.
#ls_recurse_enable=YES
#
# When "listen" directive is enabled, vsftpd runs in standalone mode and
# listens on IPv4 sockets. This directive cannot be used in conjunction
# with the listen_ipv6 directive.
listen=YES
#
# This directive enables listening on IPv6 sockets. By default, listening
# on the IPv6 "any" address (::) will accept connections from both IPv6
# and IPv4 clients. It is not necessary to listen on *both* IPv4 and IPv6
# sockets. If you want that (perhaps because you want to listen on specific
# addresses) then you must run two copies of vsftpd with two configuration
# files.
# Make sure, that one of the listen options is commented !!
listen_ipv6=NO

pam_service_name=vsftpd
userlist_enable=YES
tcp_wrappers=YES
local_root=/ftp
anon_root=/ftp
use_localtime=YES
user_config_dir=/etc/vsftpd/userconfig
pasv_enable=yes
pasv_min_port=41000
pasv_max_port=42000
allow_writeable_chroot=YES
listen_port=21
xferlog_file=/var/log/vsftpd.log
pasv_address=your_ip
pasv_addr_resolve=yes
pasv_promiscuous=YES

user_list

1

# 该文件全部注释

chroot_list

1
2


ftpuser
ftpsubuser

/etc/vsftpd/userconfig/ftpsubuser

1

local_root=/ftp/ftpsubuser/

需要执行的命令：

1
2
3
4
5


sudo useradd ftpuser -d /ftp -s /sbin/nologin -m
passwd ftpuser

sudo useradd ftpsubuser -d /ftp/ftpsubuser -s /sbin/nologin -m
passwd ftpsubuser

[Docker]Docker常用命令备忘

Wed, 10 Apr 2019 02:45:13 +0000

最近做的一个项目，涉及到MongoDB集群、Spark集群，Hadoop集群，Python2.7，Python3.5，各种推荐算法，Java Resin环境，LNMP环境、vsftpd等，因为需要部署内网环境、测试环境、生产环境，每次部署就是一次折磨，这个时候Docker的好处就体现出来了，把Python环境、LNMP环境、vsftpd等，全部打入docker中，特别爽歪歪。经过2个月的部署，联调也整理了一些docker的实用命令。
系统环境以CentOS 7为例

下载安装docker并启动服务
https://download.docker.com/linux/centos/7/x86_64/stable/Packages/
下载 docker-ce-18.03.1.ce-1.el7.centos.x86_64.rpm
1 2

yum install docker-ce-18.03.1.ce-1.el7.centos.x86_64.rpm service docker start

docker的常用命令
解决报错WARNING: IPv4 forwarding is disabled. Networking will not work.

第一步：在宿主机上执行 echo "net.ipv4.ip_forward=1" >>/usr/lib/sysctl.d/00-system.conf

第二步：重启network和docker服务

1

[root@localhost /]# systemctl restart network && systemctl restart docker

Failed to get D-Bus connection: Operation not permitted

1

docker run -d --name centos7 --privileged=true --net=host -v /home/code:/home/code centos:mysql_python3_jdk1.8 /usr/sbin/init

长时间运行docker容器，并装载宿主机路径

1

docker run -dit -v /home/code:/home/code python35:latest /bin/bash

进入已经启动的docker容器

1

docker exec -it 容器id /bin/bash

启动某个容器镜像

1

docker run -it python35:latest /bin/bash

Docker导出：

1

docker export -o /home/python35.tar 容器id

docker save *.tar

Docker导入：

1

docker import /home/python35.tar

docker load < *.tar

Docker 打标签

1

docker tag 镜像id REPOSITORY:TAG

Docker 指定网络为宿主机网络

1

docker run -dit --net=host python35:latest /bin/bash

Docker 指定容器和宿主机时间同步

1

docker run -dit -v /etc/localtime:/etc/localtime python35:latest /bin/bash

安装JDK1.8

1

yum install java-1.8.0-openjdk* -y

安装MySQL5.6

1
2
3
4
5
6
7
8


rpm -Uvh http://dev.mysql.com/get/mysql-community-release-el7-5.noarch.rpm
yum -y install mysql-community-server
systemctl enable mysqld
systemctl start mysqld
初始化：
mysql_secure_installation
GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' IDENTIFIED BY '远程登录密码' WITH GRANT OPTION;
FLUSH PRIVILEGES;

Python3编码

1

echo 'export LANG=zh_CN.UTF-8' >> ~/.bashrc

[LNMP]Nignx access_log按天生成

Wed, 10 Apr 2019 02:30:15 +0000

之前一个服务，使用nginx做了转发，因为访问量比较大，想在nginx这一层做一个简单的access统计，发现nginx默认的access_log是统计在一个文件中的，这样非常不方便，所以查了一下，很多人说用shell脚本来解决这个问题，终于，找到了比较好的解决方式，Nginx支持配置：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


server {
 listen 8082;
 server_name your ip;

 if ($time_iso8601 ~ "^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2})"){
 set $year \$1;
 set $month \$2;
 set $day \$3;
 set $hour \$4;
 set $minutes \$5;
 set $seconds \$6;
 }

 access_log logs/8082_$year-$month-$day.log;
 error_log logs/8082.error;

 # 将所有请求转发
 location / {
 proxy_set_header Host $host;
 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
 proxy_pass http://localhost:8082;
 }
}

[CesiumJS]天地图应用开发许可申请说明！！！尽快修改天地图数据接口

Thu, 17 Jan 2019 02:54:47 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

国家地理信息公共服务平台“天地图”2018版对天地图应用开发流程进行了升级改造，天地图API与服务接口全面升级为tianditu.gov.cn政府域名，支持HTTP/HTTPS协议；原有服务域名tianditu.com继续保留。

为了保证天地图地理信息公共服务的稳定可靠，更好地为广大用户提供地理信息应用开发支持，即日起天地图API及服务接口调用都需要申请开发许可（Key）。您可以在天地图API网站控制台免费注册申请，请您尽快调整。天地图将于 2019年1月1日停止对无开发许可（Key）使用应用程序开发接口或者调用在线服务的支持，在此之前未获授权的API及服务仍可正常调用。

请合理注册个人/单位用户，对服务调用量有较高需求的企事业单位用户，请注册为单位用户并认证成为企业开发者。

原文链接：
http://lbs.tianditu.gov.cn/authorization/authorization.html

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

[CesiumJS]Cesium中级教程2 – 图层

Sun, 23 Dec 2018 12:19:39 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

Cesium支持从几个标准服务绘制和添加高分辨率图像（地图）图层。图层可以按顺序排列，并混合在一起。每一层的亮度、对比度、伽玛、色调和饱和度可以动态地改变。本节教程介绍了图层的概念以及相关的Cesuim APIs。

快速入门

我们暂时忽略细节，直接编写代码来添加一些图像层。在Sandcastle中打开Hello World示例。此示例创建一个Viewer组件，默认情况下，该组件呈现Bing Maps图层。我们可以通过向Viewer构造函数提供附加参数来指定不同的基础图层。让我们使用来自Esri ArcGIS MapServer的图层：

1
2
3
4
5
6


var viewer = new Cesium.Viewer('cesiumContainer', {
 imageryProvider : new Cesium.ArcGisMapServerImageryProvider({
 url : '//services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer'
 }),
 baseLayerPicker : false
});

修改样例后，按F8来运行：

我们可以通过滑动鼠标滚轮放缩，来看到实际的图层流的变化。

接下来, 添加另一个图层: NASA Black Marble imagery 基于 Tile Map Service (TMS):

1
2
3
4
5
6


var layers = viewer.scene.imageryLayers;
var blackMarble = layers.addImageryProvider(new Cesium.createTileMapServiceImageryProvider({
 url : '//cesiumjs.org/tilesets/imagery/blackmarble',
 maximumLevel : 8,
 credit : 'Black Marble imagery courtesy NASA Earth Observatory'
}));

因为黑色大理石层是最后加上的一层，覆盖了整个地球，所以黑色大理石图层覆盖了 Esri图层。我们可以把黑色大理石图层移到底部layers.lower(blackMarble);，但是为了让我们能更好地理解这两层之间的关系，让我们把它和Esri图层混合：

1

blackMarble.alpha = 0.5; // 0.0 is transparent. 1.0 is opaque.

下一步，调高灯光的亮度：

1

blackMarble.brightness = 2.0; // > 1.0 increases brightness. < 1.0 decreases.

最后，添加一个单独的图像作为第三层作为特定的扩展。

1
2
3
4


layers.addImageryProvider(new Cesium.SingleTileImageryProvider({
 url : '../images/Cesium_Logo_overlay.png',
 rectangle : Cesium.Rectangle.fromDegrees(-75.0, 28.0, -67.0, 29.75)
}));

完整代码如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


var viewer = new Cesium.Viewer('cesiumContainer', {
 imageryProvider : new Cesium.ArcGisMapServerImageryProvider({
 url : '//services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer'
 }),
 baseLayerPicker : false
});

var layers = viewer.scene.imageryLayers;
var blackMarble = layers.addImageryProvider(new Cesium.createTileMapServiceImageryProvider({
 url : '//cesiumjs.org/tilesets/imagery/blackmarble',
 maximumLevel : 8,
 credit : 'Black Marble imagery courtesy NASA Earth Observatory'
}));

blackMarble.alpha = 0.5; // 0.0 is transparent. 1.0 is opaque.

blackMarble.brightness = 2.0; // > 1.0 increases brightness. < 1.0 decreases.

layers.addImageryProvider(new Cesium.SingleTileImageryProvider({
 url : '../images/Cesium_Logo_overlay.png',
 rectangle : Cesium.Rectangle.fromDegrees(-75.0, 28.0, -67.0, 29.75)
}));

在Sandcastle中查看完整样例

现有的图层

ion Assets tab in Sandcastle包含由Cesiumion托管的图层应用，可以在Cesium的应用中添加几行代码来使用图层服务。

ImageryProvider

上面使用的前两层这样的高分辨率图像太大，无法放入内存，甚至无法放入单个磁盘，因此图像被划分为较小的图像，称为tiles（瓦片），可以根据视图将图像流传输到客户端。Cesium支持使用ImageryProvider请求瓦片图的几种标准。大多数ImageryProvider使用HTTP上的REST接口来请求瓦片图。ImageryProvider根据请求的格式和组织方式的不同而不同。Cesium内置以下ImageryProvider：

Web Map Service (WMS) - OGC标准，用于从分布式地理空间数据库中请求地理区域的地图块。在Cesium中，请参见WebMapServiceImageryProvider。
Tile Map Service (TMS) - 访问瓦片图的Rest接口。瓦片图被转换为MapTiler或GDAL2Tiles.参见TileMapServiceImageryProvider。
OpenGIS Web Map Tile Service (WMTS) - 一个OGC标准，用于在互联网上提供预先绘制的地理参考瓦片图。在Cesium中，请参见WebMapServiceImageryProvider。
OpenStreetMap - 访问OpenStreetMap瓦片图或任何Slippy瓦片图。有几种方式可以host these tiles 在Cesium中，请参加createOpenStreetMapImageryProvider。
Bing Maps - 使用Bing Maps REST Services访问瓦片图。在https://www.bingmapsportal.com/创建Bing地图的keys。在Cesium中, 请参见BingMapsImageryProvider。
Esri ArcGIS MapServer - 使用ArcGIS Server REST API来访问ArcGIS MapServer上的瓦片图. 在Cesium中,请参见ArcGisMapServerImageryProvider。
Google Earth Enterprise - 提供对存储Google Earth Enterprise服务器中的图层的访问。在Cesium中，请参见GoogleEarthImageryProvider。
Mapbox - 使用Mapbox API访问瓦片图. 创建一个账户并提供access token. 在Cesium中, 请参见MapboxImageryProvider。
Standard image files - 从图片中创建图层。在Cesium中, 请参见SingleTileImageryProvider。
Custom tiling schemes - 使用UrlTemplateImageryProvider,通过使用URL模板，我们可以连接到大量图像源。例如, TMS的url模板是 //cesiumjs.org/tilesets/imagery/naturalearthii/{z}/{x}/{reverseY}.jpg.
Tile coordinates - 通过绘制每个瓦片图周围的边界并用其水平、X和Y坐标标记它，显示如何在特定的瓦片方案中将地球划分为多个瓦片图。

我们可以通过实现ImageryProvider接口来访问其他图层服务。如果你这样做，并认为它是普遍有用的，请贡献给Cesium为每个人的利益。

查看参考文档以了解如何构建特定的imagery provider。我们可以查看SingleTileImageryProvider因为很多imagery providers共享它的构造属性：

url -图像的url。像许多imagery provider，这是惟一需要的属性。在其他imagery providers中，这个url指向服务器或服务的根url。
extent - 可选参数，图像应该覆盖的经纬度矩形。默认情况是覆盖整个地球。
credit - 可选参数，数据源的字符证书, 将显示到canvas上。一些imagery providers, 比如 BingMapsImageryProvider 和 ArcGIS Server REST API, 可以直接从他们的服务获取字符证书或logo。
proxy - 可选参数，用于请求服务的代理，可以带给我们跨域共享资源。

跨域资源共享

基于安全考量，今天的Web浏览器会努力防止Javascript代码读取来自不同站点的图像像素。特别是，如果像Cesium这样的WebGL应用程序，访问来自不同的主机名或端口，并且服务器不显式地允许以这种方式使用图像，则禁止将图像用作纹理。服务器指示图像不包含机密信息，因此通过在HTTP响应中包括跨源资源共享(CORS)头部，其他站点读取它们的像素是安全的。

不幸的是，并非所有的图像服务都支持CORS。对于那些不是，必须使用与托管Cesium的网站同源的代理服务器。当使用这种代理时，对于Web浏览器和Cesium客户机来说，tile就好像它们来自与基于Cesium的网站相同的起源一样。若要与图像提供程序一起使用代理，请在构造图像提供程序时使用代理属性。Cesium包含一个用Node.js编写的用于开发的简单代理。

1
2
3
4


layers.addImageryProvider(new Cesium.ArcGisMapServerImageryProvider({
 url : '//server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer',
 proxy : new Cesium.DefaultProxy('/proxy/')
}));

如果您正在托管公共图层，我们鼓励启用本文所述的CORS，而不是使用代理。

ImageryProvider与图层

到目前为止，我们还没有明确区分ImageryProvider和图层。ImageryProvider使用特定服务请求图层，而图层表示来自ImageryProvider的显示图层。代码如下：

1

var layer = layers.addImageryProvider(imageryProvider);

是下列代码的简写

1
2


var layer = new ImageryLayer(imageryProvider);
layers.add(layer);

我们通常构造一个imagery provider仅用于创建一个图层，然后我们利用他的属性，例如show, alpha, brightness和contrast。参见ImageryLayer。将imagery provider和图层解耦使得添加新的imagery provider变得容易。

像上面例子中的layers一样，图层集合确定绘制层的顺序。根据添加的顺序从下到上绘制图层。像Cesium中任何其他集合一样，使用add、remove和get等函数对图层集合进行操作。此外，可以使用raise、raiseToTop、lower和lowerToBottom对层进行重新排序。参见ImageryLayerCollection。

资源

可以从Sandcastle中获得imagery layers:

Imagery Layers - 教程中的代码样例
Imagery Layers Manipulation - 从多数据源中获得的图层，支持独立的透明度调整。
Imagery Adjustment - 调整图层的brightness, contrast, gamma, hue和saturation。

另外可以获得参考文档：

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

[LNMP]内存优化

Wed, 19 Dec 2018 03:01:19 +0000

问题描述

最近我的服务器出现了一个问题，内存不够的时候，常常 kill 掉我的 Tomcat。因为访问量整体不算大，目前 LNMP、Tomcat 都在一台机器上，但是这就导致了 Tomcat 相关的 Java 应用无法使用。

1

free -m

查看内存情况发现，操作系统的内存只剩下 60MB 左右，几乎用尽。这种状况持续了 1 个月，当时一直如鲠在喉。中间想过增加内存，又嫌贵。当资源不够的时候一般有两种思路，第一种是增加资源，第二种是优化现有资源。对于我这种穷人来说，第二种常常是我首选的方法。

开始我以为是 Tomcat 自身或者别的进程太吃内存，用

1

top

命令查看后发现，php-fpm 进程常常是占用内存最多的进程。

查看消耗内存最多的前 40 个进程：

1

ps auxw | head -1; ps auxw | sort -rn -k4 | head -40

发现前 40 的进程中，php-fpm 占了绝大部分，而且占用率从 2% 到 7% 不等，问题已经很明显了。罪魁祸首就是 php-fpm。

解决问题

可以通过配置 pm.max_children 属性，控制 php-fpm 子进程数量，首先，打开 php-fpm 配置文件，执行指令：

1

vim /etc/php-fpm.d/www.conf

pm.max_children 默认值为 50，每一个进程占用 1%-2.5% 的内存，加起来就耗费大半内存了，尝试将其值调小，博主这里将其设置为 25（也是参考了其他博客），同时，检查以下两个属性：

pm.max_spare_servers : 该值表示保证空闲进程数最大值，如果空闲进程大于此值，此进行清理
pm.min_spare_servers : 保证空闲进程数最小值，如果空闲进程小于此值，则创建新的子进程;

这两个值均不能大于 pm.max_children 值，通常设置 pm.max_spare_servers 值为 pm.max_children 值的 60%-80%。

最后，重启 php-fpm

1

service php-fpm restart

再次查看内存

1

free -m

发现有 600MB 内存的剩余，就算启动 Tomcat 之后，也能剩余 300MB。

参考链接： https://www.jb51.net/article/129528.htm

1
2

希望这对你有帮助！如果还有其他需要，请随时告诉我。

中了勒索病毒该怎么办

Thu, 22 Nov 2018 07:23:33 +0000

最近身边有朋友中了勒索病毒，经过一番查询发现一个比较好的网站：反勒索病毒联盟。

https://www.nomoreransom.org/zh/decryption-tools.html

我个人一向认为技术是中立的，所以如果您中了勒索病毒，不妨去上面的网站上看看，有可能有一些解决办法。

分享一个下载RPM包的好地方

Thu, 22 Nov 2018 07:17:03 +0000

在离线环境中（特指那些不能 wget、yum 的环境中），我们常常需要涉及到自己编译、安装 Linux 系列的操作系统。

这个时候版本的依赖是一件非常让人头痛的事，当然我们可以用 Docker 进行解决。

如果您的离线环境对您的上传下载也进行了限制，而且环境内部的版本不可控，那该是意见多么头痛的事啊。所以我找到了一个下载 Linux 系列 RPM 包的好地方：

https://pkgs.org/

解决了操作系统、系统版本、软件依赖等问题。

Vultr介绍

Vultr是美国知名云服务提供商Choopa.com的VPS服务，Choopa一直为游戏公司提供全球支撑服务，因此该公司在全球14个国家及地区部署数据中心，包括日本东京、新加坡、美国洛杉矶、西雅图、英国伦敦、德国等地区。性价比极高，当前最低仅需$2.5/月。新用户注册即送$25。点击以下链接，进行注册，新用户赠送25美金(需要支付10美金，相当于充10美金，得35美金)：优惠活动活动链接

Vultr优势

机房众多：拥有日本、美国、欧洲等14个机房。
架构优秀：全部采用KVM架构、SSD固态硬盘、1000GB/月流量起步。
镜像强大：常见的Linux之外还可以自定义安装ISO系统，还可以安装Windows系统。
后台强大：拥有系统快照、一键装机部署脚本、备份、防火墙等强大功能。
促销活动：不定期有新用户注册奖励，有时赠送金额高达$100。
计费灵活：采用小时计费模式，可以任意的添加和删除机器。
客服速度：客服速度响应快，一般15分钟就可以得到解答（可能涉及到时差问题）。

配置价格

Markdown anywhere

Tue, 06 Nov 2018 06:29:16 +0000

最近经常写文章，发现Markdown是一个非常方便的网页排版规范，详见：http://cesiumcn.org/markdown.html | http://cesium.coinidea.com/markdown.html

目前发现简书、oschina都非常好的支持了markdown。但是WordPress不支持，比较意外的是知乎竟然不支持？

wordpress markdown wordpress有插件可以支持的。网上有人说_WP Editor.MD_插件非常好，我在自己的wordpress版本上使用之后，发现并不兼容，在启用的时候直接挂掉了。

这个时候灵光一闪，直接去官网https://wordpress.org/plugins/看看。发现wp-markdown的还比较好用。

启用之后，发现没有变化，原来是因为需要配置一下，具体位置是在：设置->撰写 中。
知乎markdown 知乎肯定不能像wordpress那样装插件了。网上的大神真是太多了。chrome有一款插件叫markdown here。安装之后，当在文本输入框中右击鼠标时，它会在出现_markdown here_的菜单，然后将富文本内容自动转换为markdown排版，拷贝即可。

[CesiumJS]Cesium中级教程1 – 空间数据可视化（一）

Thu, 01 Nov 2018 09:09:11 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

本教程将教读者如何使用Cesium的实体（Entity）API绘制空间数据，如点、标记、标签、线、模型、形状和物体。不需要Cesium的先验知识，但是如果读者完全没有这方面的经验，那么读者可能希望从“新手入门中文教程（原创）”开始学习。 ##什么是实体（Entity）API？ Cesium具有丰富的用于空间数据的API，可以分为两类：面向图形开发人员的低级API（通常称为原始(Primitive)API）和用于数据驱动的可视化的高级API（称为实体(Entity)API）。

原始API的主要目标是暴露手头执行任务所需的最小抽象量。它希望我们像图形程序员一样思考，并使用图形术语。它的结构是为给定的可视化类型提供最有性能和灵活性的实现，而不是为了API的一致性。加载一个模型不同于创建一个广告牌，两者都与创建多边形完全不同。每种类型的可视化都有其独特的特征。此外，它们各自具有不同的性能特征，并且需要遵循不同的最佳实践。虽然它功能强大且灵活，但大多数应用程序都比Primitive API提供的抽象级别更高。原始API的主要目标是开放手头当前研发工作的所需的最小抽象量。它希望我们像图形程序员一样思考，并使用图形术语。它的结构是为给定的可视化类型提供最有性能和灵活性的实现，而不是为了API的一致性。加载一个模型不同于创建一个广告牌（Billboard ），两者都与创建多边形完全不同。每种类型的可视化都有其独特的特征。此外，它们各自具有不同的性能特征，并且需要遵循不同的最佳实践。虽然它功能强大且灵活，但大多数应用程序都提供比Primitive API的抽象级别更高的服务接口。

实体API的目的是公开一组设计一致的高级对象，这些对象将相关的可视化和信息聚合到一个统一的数据结构中，我们称之为实体。它让我们专注于展示我们的数据，而不是担心可视化的潜在机制。它还提供了易于构建复杂的、时间动态可视化的构造，这种可视化方式与静态数据自然相适应。虽然实体API实际上在背后使用了原始API(Primitive API)，但这是我们（几乎）永远不必关注的实现细节。通过将各种启发式应用到我们提供的数据，实体API能够提供灵活的、高性能的可视化，同时公开一致的、易于学习和易于使用的接口。

我们的第一个实体

学习实体API的基本方法之一是通过查看一些代码。为了让事情简单化，我们将在CesiumSandcastle的Hello World例子中构建。如果读者在本地开发Cesium，可以自由地使用自己的应用程序。

假设我们想从经度和纬度的列表中添加一个美国州怀俄明的多边形。（怀俄明之所以被选中是因为它是一个简单的多边形）我们可以把下面的代码复制粘贴到Sandcastle去做：

 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


var viewer = new Cesium.Viewer('cesiumContainer');

var wyoming = viewer.entities.add({
 name : 'Wyoming',
 polygon : {
 hierarchy : Cesium.Cartesian3.fromDegreesArray([
 -109.080842,45.002073,
 -105.91517,45.002073,
 -104.058488,44.996596,
 -104.053011,43.002989,
 -104.053011,41.003906,
 -105.728954,40.998429,
 -107.919731,41.003906,
 -109.04798,40.998429,
 -111.047063,40.998429,
 -111.047063,42.000709,
 -111.047063,44.476286,
 -111.05254,45.002073]),
 height : 0,
 material : Cesium.Color.RED.withAlpha(0.5),
 outline : true,
 outlineColor : Cesium.Color.BLACK
 }
});

viewer.zoomTo(wyoming);

点击运行按钮（或者F8）能看到下面的图像：

因为我们的一个目标是让Cesium的代码易于理解，希望这是不言自明的。我们创建了Viewer widget，它充当几乎所有Cesium应用程序的基础，然后通过viewer.entities.add. 添加一个新的Entity。我们传递的需add的对象只是一个提供初始值的选项参数。返回值是实际的实体实例。最后，我们调用 viewer.zoomTo 以确保实体处于视图中。有很多实体选项可用，但是现在我们指定polygon内部的半透明红色和边界的黑色轮廓。我们也给实体一个“Wyoming 怀俄明”的显示名称。

##形状和物体有了创建多边形的基本知识，并且由于实体API的同质性，我们现在可以通过简单地使用Sandcastle中的示例作为参考来创建各种图形。下面是支持的形状和物体的完整列表。

###材质和轮廓不管它们的几何定义如何，所有形状和物体都有一组共同的属性来控制它们的外观。fill属性是一个布尔值，它指定是否填充了表面的内部，而outline属性控制形状的边缘是否被轮廓化。当fill设为true，material属性决定填充物是什么。在接下来的例子中，让我们创建一个半透明的蓝色椭圆。默认情况下，fill是true，outline是false，所以我们只需要指定material。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


var entity = viewer.entities.add({
 position: Cesium.Cartesian3.fromDegrees(-103.0, 40.0),
 ellipse : {
 semiMinorAxis : 250000.0,
 semiMajorAxis : 400000.0,
 material : Cesium.Color.BLUE.withAlpha(0.5)
 }
});
viewer.zoomTo(viewer.entities);

var ellipse = entity.ellipse; // For upcoming examples

Image

我们也可以将材质指定为一个图片链接：

1

ellipse.material = '//cesiumjs.org/tutorials/images/cats.jpg';

在上述两种情况下，在赋值时自动为我们创建一个ColorMaterialProperty属性或ImageMaterialProperty属性。对于更复杂的材料，我们需要自己创建一个材料属性实例。目前，实体形状和物体支持颜色、图像、棋盘、条纹和网格材料。 ###棋盘

1
2
3
4
5


ellipse.material = new Cesium.CheckerboardMaterialProperty({
 evenColor : Cesium.Color.WHITE,
 oddColor : Cesium.Color.BLACK,
 repeat : new Cesium.Cartesian2(4, 4)
});

条纹

1
2
3
4
5


ellipse.material = new Cesium.StripeMaterialProperty({
 evenColor : Cesium.Color.WHITE,
 oddColor : Cesium.Color.BLACK,
 repeat : 32
});

网格

1
2
3
4
5
6


ellipse.material = new Cesium.GridMaterialProperty({
 color : Cesium.Color.YELLOW,
 cellAlpha : 0.2,
 lineCount : new Cesium.Cartesian2(8, 8),
 lineThickness : new Cesium.Cartesian2(2.0, 2.0)
});

轮廓

与fill属性不同，outline没有相应的材料，而是依赖于两个独立的outlineColor和outlineWidth属性。outlineWidth只适用于非Windows系统，如Android、iOS、Linux和OS X。这是由于WebGL是如何在Windows上的所有三个主要浏览器引擎中实现所限制的。

1
2
3
4


ellipse.fill = false;
ellipse.outline = true;
ellipse.outlineColor = Cesium.Color.YELLOW;
ellipse.outlineWidth = 2.0;

###折线折线是一种特殊情况，因为它们没有填充或轮廓属性。相反，他们依靠专门的材料来代替颜色。由于这些特殊材料，不同宽度和轮廓宽度的折线将对所有系统起作用。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


var entity = viewer.entities.add({
 polyline : {
 positions : Cesium.Cartesian3.fromDegreesArray([-77, 35,
 -77.1, 35]),
 width : 5,
 material : Cesium.Color.RED
}});
viewer.zoomTo(viewer.entities);

var polyline = entity.polyline // For upcoming examples

折线轮廓

1
2
3
4
5


polyline.material = new Cesium.PolylineOutlineMaterialProperty({
 color : Cesium.Color.ORANGE,
 outlineWidth : 3,
 outlineColor : Cesium.Color.BLACK
});

折现光晕

1
2
3
4


polyline.material = new Cesium.PolylineGlowMaterialProperty({
 glowPower : 0.2,
 color : Cesium.Color.BLUE
});

##高度与挤压覆盖在地球上的所有形状，当前是圆、椭圆、多边形和矩形，也可以放置在海拔高度或挤压成一个物体。在这两种情况下，形状或物体仍然符合其下方的地球曲率。

对于高度，我们所要做的就是在相应的图形对象上设置高度属性，对于上面列出的所有形状都是一样的。这可能是提到Cesium总是使用米、弧度和秒作为单位的好时机，除非函数明确地表示了其他情况，比如Cartesian3.fromDegrees。下面的代码行将多边形提升到地球上方250000米处。

1

wyoming.polygon.height = 250000;

将形状挤压成物体同样容易，我们只需要设置extrudedHeight 属性。物体将在height和extrudedHeight 之间产生。如果height是undefined，则物体从0开始。为了创造一个物体从200000米开始，延伸到250000米，我们可以使用下面的代码。这当然意味着物体本身是50000米高。

1
2


wyoming.polygon.height = 200000;
wyoming.polygon.extrudedHeight = 250000;

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

[CesiumJS]Cesium中文网日UV突破100

Wed, 10 Oct 2018 04:48:38 +0000

2018.06.22~2018.10.10经过了不到4个月的运营工作，社区-Cesium中文网终于突破日UV100，非常激动，Mark一下。

[CesiumJS]Cesium入门13 – Extras – 附加内容

Thu, 16 Aug 2018 07:56:51 +0000

剩下的代码只是添加了一些额外的可视化选项。类似于我们以前与HTML元素的交互，我们可以将侦听器函数附加到切换阴影和neighborhood 多边形可见性。

让我们开始创建一个简单的方法来切换neighborhood多边形。一般来说，我们可以通过Entity.show用实体设置可见性来隐藏实体。但是，这只为单个实体设置可见性，并且我们希望一次性隐藏或显示所有的neighborhood实体。

我们可以通过将所有的neighborhood 实体添加到父实体中来实现这一点，如本示例中所示，或者简单地使用EntityCollection的show属性。然后，我们可以通过改变neighborhoods.show来为所有的子实体一次设置可见性。

1
2
3
4
5


var neighborhoodsElement = document.getElementById('neighborhoods');

neighborhoodsElement.addEventListener('change', function (e) {
 neighborhoods.show = e.target.checked;
});

我们可以做一些类似的事情来切换阴影的可视性：

1
2
3
4
5


var shadowsElement = document.getElementById('shadows');

shadowsElement.addEventListener('change', function (e) {
 viewer.shadows = e.target.checked;
});

最后，由于3D Tiles可能不立即加载，所以我们也可以添加一个加载指示符，只有在tileset加载完成时才被移除（因此promise已经解决）。

Cesium中文网交流QQ群：807482793

原文链接：http://cesiumcn.org/topic/166.html | 国内快速访问：http://cesium.coinidea.com/topic/166.html

[CesiumJS]Cesium入门12 – Camera Modes – 相机模式

Thu, 16 Aug 2018 07:55:47 +0000

为了展现我们的无人机飞行，让我们用相机模式进行实验。我们将保持简单的两个基本的相机模式，用户可以切换之间。

Free Mode : 默认相机控制。
Drone Mode : 让相机跟随无人机通过飞行在一个固定的距离。

自由模式不需要代码，因为它使用默认控件。至于无人机跟随模式，我们可以使用摄像机的内置实体跟踪功能来定位摄像机，并用偏移量定位无人机。这就使得相机即使在移动时也能从指定的实体中得到固定的偏移量。为了跟踪一个实体，我们简单地设置viewer.trackedEntity。

要切换到自由相机模式，我们可以将viewer.trackedEntity实体设置为未定义，然后使用**camera.flyTo()**返回到我们的Home视角。

以下是相机模式的函数：

1
2
3
4
5
6
7
8
9


// Create a follow camera by tracking the drone entity
function setViewMode() {
 if (droneModeElement.checked) {
 viewer.trackedEntity = drone;
 } else {
 viewer.trackedEntity = undefined;
 viewer.scene.camera.flyTo(homeCameraView);
 }
}

为了把这个附加到HTML输入，我们可以附加这个函数来change事件到适当的元素上：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


var freeModeElement = document.getElementById('freeMode');
var droneModeElement = document.getElementById('droneMode');

// Create a follow camera by tracking the drone entity
function setViewMode() {
 if (droneModeElement.checked) {
 viewer.trackedEntity = drone;
 } else {
 viewer.trackedEntity = undefined;
 viewer.scene.camera.flyTo(homeCameraView);
 }
}

freeModeElement.addEventListener('change', setCameraMode);
droneModeElement.addEventListener('change', setCameraMode);

最后，当用户双击实体时，实体会被自动跟踪。如果用户通过单击开始跟踪无人机，我们可以添加一些处理来自动更新UI。

1
2
3
4
5
6


viewer.trackedEntityChanged.addEventListener(function() {
 if (viewer.trackedEntity === drone) {
 freeModeElement.checked = false;
 droneModeElement.checked = true;
 }
});

这是我们的两个相机模式-我们现在可以自由切换到无人机相机视角，看起来像这样：

Cesium中文网交流QQ群：807482793

原文链接：http://cesiumcn.org/topic/165.html | 国内快速访问：http://cesium.coinidea.com/topic/165.html

[CesiumJS]Cesium入门11 – Interactivity – 交互性

Thu, 16 Aug 2018 07:52:08 +0000

最后，让我们添加一些鼠标交互。为了提高我们的geocache标记的可见性，当用户在标记上hovers时，我们可以改变它们的样式来突出显示。

为了实现这一点，我们将使用拾取pick，一种Cesium的特征，从3D场景中返回数据，在观看者画布上给出像素位置。

这里有以下几种不同的picking：

Scene.pick : 返回包含给定窗口位置的基元的对象。
Scene.drillPick : 返回包含给定窗口位置的所有原语的对象列表。
Globe.pick : 返回给定光线与地形的交点。

一下是一些picking操作的例子：

因为我们希望在hover触发我们的高亮效果，首先我们需要创建一个鼠标动作处理器。为此，我们将使用ScreenSpaceEventHandler在用户输入操作中触发指定函数的一组处理程序。ScreenSpaceEventHandler.setInputAction()监听用户行为类型ScreenSpaceEventType,并运行一个特定的函数，将用户操作传递为参数。这里，我们将传递一个以movement为输入的函数：

1
2


var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function(movement) {}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

接下来让我们来写我们的高亮功能。处理程序将在鼠标movement中传递，从中我们可以提取一个窗口位置与pick()一起使用。如果拾取返回billboard对象，我们知道我们在一个标记上hovering。然后，使用我们了解的Entity样式，我们可以应用突出显示样式。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


// If the mouse is over a point of interest, change the entity billboard scale and color
handler.setInputAction(function(movement) {
 var pickedPrimitive = viewer.scene.pick(movement.endPosition);
 var pickedEntity = (Cesium.defined(pickedPrimitive)) ? pickedPrimitive.id : undefined;
 // Highlight the currently picked entity
 if (Cesium.defined(pickedEntity) && Cesium.defined(pickedEntity.billboard)) {
 pickedEntity.billboard.scale = 2.0;
 pickedEntity.billboard.color = Cesium.Color.ORANGERED;
 }
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

这成功地触发了标记的高亮样式更改。但是，您会注意到，当我们移动光标时，标记保持突出。我们可以通过跟踪最后一个标记来修复，并恢复原来的样式。

这里是完整的功能，标记高亮显示和取消高亮工作：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


// If the mouse is over a point of interest, change the entity billboard scale and color
var previousPickedEntity = undefined;
handler.setInputAction(function(movement) {
 var pickedPrimitive = viewer.scene.pick(movement.endPosition);
 var pickedEntity = (Cesium.defined(pickedPrimitive)) ? pickedPrimitive.id : undefined;
 // Unhighlight the previously picked entity
 if (Cesium.defined(previousPickedEntity)) {
 previousPickedEntity.billboard.scale = 1.0;
 previousPickedEntity.billboard.color = Cesium.Color.WHITE;
 }
 // Highlight the currently picked entity
 if (Cesium.defined(pickedEntity) && Cesium.defined(pickedEntity.billboard)) {
 pickedEntity.billboard.scale = 2.0;
 pickedEntity.billboard.color = Cesium.Color.ORANGERED;
 previousPickedEntity = pickedEntity;
 }
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

就是这样！现在我们成功地添加了鼠标movement handler和标记实体的hover行为。

Cesium中文网交流QQ群：807482793

原文链接：http://cesiumcn.org/topic/164.html | 国内快速访问：http://cesium.coinidea.com/topic/164.html

[CesiumJS]Cesium入门10 – 3D Tiles

Thu, 16 Aug 2018 07:49:55 +0000

我们团队有时把Cesium描述成一个真实世界数据的3D游戏引擎。然而，使用真实世界的数据比使用典型的视频游戏数据资料要困难得多，因为真实数据可能是难以置信的高分辨率，并且需要精确的可视化。幸运的是，Cesium 与开源社区合作开发了3D Tiles，这是一个开放的规范，用于传输海量的异构三维地理空间数据集。

使用概念上类似于Cesium的terrain和imagery的流技术，3D Tiles 使得可以查看原本不能交互式查看的巨大的模型，包括建筑物数据集、CAD（或BIM）模型、点云和摄影测量模型。

The 3D Tiles Inspector 是一种在遮罩hood下提供查看能力的调试工具。

下面是一些展示不同格式的3D Tiles演示：

在我们的应用中，我们将使用Cesium3DTileset通过展示纽约所有建筑物的全3D模型来为我们的可视化添加现实主义！这种纽约 tilese托管在Cesium Ion中，我们可以使用IonResource.fromAssetId添加它：

1
2


// Load the NYC buildings tileset
var city = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ url: Cesium.IonResource.fromAssetId(3839) }));

你可能注意到建筑物没有正确地定位在地平面上。幸运的是，它很容易修复。我们可以通过修改模型矩阵modelMatrix来调整tileset的位置。

我们可以通过将tileset的边界球转换成地图Cartographic，然后添加期望的偏移量并重置模型矩阵，从地面找到模型modelMatrix的当前偏移量。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


// Adjust the tileset height so its not floating above terrain
var heightOffset = -32;
city.readyPromise.then(function(tileset) {
 // Position tileset
 var boundingSphere = tileset.boundingSphere;
 var cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center);
 var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0);
 var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, heightOffset);
 var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
 tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
});

现在在我们的场景中有110万个建筑模型流。

3D Tiles 还允许我们使用3D Tiles styling语言来调整我们的样式。3D Tiles 样式定义了用于评估颜色（RGB和透明度）的表达式，并显示了Cesium3DTileFeature特征的属性，这是tileset的一部分，例如城市中的单个建筑物。样式通常基于存储在瓦片的批处理表中的特征属性。特征属性可以是高度、名称、坐标、构造日期等任何东西，但被构建到tileset asset 中。样式是用JSON定义的，而表达式是在JavaScript的小子集中编写的，用于样式化。此外，样式语言提供了一组内置函数来支持常见的数学运算。

一个Cesium3DTilesetStyle的例子如下：

1
2
3
4


var defaultStyle = new Cesium.Cesium3DTileStyle({
 color : "color('white')",
 show : true
});

上述代码使我们NYC的tileset是白色并且总是可见的。为了实际设置tileset的样式，我们设置city.style:

1

city.style = defaultStyle;

我们还可以定义许多我们喜欢的样式。比如，让建筑变透明：

1
2
3
4


var transparentStyle = new Cesium.Cesium3DTileStyle({
 color : "color('white', 0.3)",
 show : true
});

在我们的tileset中使用相同的样式来达到每一个特征只是皮毛工作。我们还可以使用特定于每个特征的属性来确定造型。下面是一个基于建筑物高度的建筑物颜色的例子：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


var heightStyle = new Cesium.Cesium3DTileStyle({
 color : {
 conditions : [
 ["${height} >= 300", "rgba(45, 0, 75, 0.5)"],
 ["${height} >= 200", "rgb(102, 71, 151)"],
 ["${height} >= 100", "rgb(170, 162, 204)"],
 ["${height} >= 50", "rgb(224, 226, 238)"],
 ["${height} >= 25", "rgb(252, 230, 200)"],
 ["${height} >= 10", "rgb(248, 176, 87)"],
 ["${height} >= 5", "rgb(198, 106, 11)"],
 ["true", "rgb(127, 59, 8)"]
 ]
 }
});

为了在样式间交换，我们可以添加更多的代码来侦听HTML输入：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


var tileStyle = document.getElementById('tileStyle');
function set3DTileStyle() {
 var selectedStyle = tileStyle.options[tileStyle.selectedIndex].value;
 if (selectedStyle === 'none') {
 city.style = defaultStyle;
 } else if (selectedStyle === 'height') {
 city.style = heightStyle;
 } else if (selectedStyle === 'transparent') {
 city.style = transparentStyle;
 }
}

tileStyle.addEventListener('change', set3DTileStyle);

更多关于3D Tiles的例子、如何使用及调整样式，请查看the 3D Tiles sandcastle demos。

3D Tiles例子：

如果你有数据，需要帮助将其转换为3D瓦片，请继续关注关于Cesium Ion平台的更新！在这里订阅更新。

Cesium中文网交流QQ群：807482793

原文链接：http://cesiumcn.org/topic/163.html | 国内快速访问：http://cesium.coinidea.com/topic/163.html

[CesiumJS]Cesium入门9 – Loading and Styling Entities – 加载和样式化实体

Wed, 15 Aug 2018 07:42:41 +0000

现在我们已经为我们的应用程序设置了Viewer配置、imagery和terrain的阶段，我们可以添加我们的应用程序的主要焦点——geocache数据。

为了便于可视化，Cesium支持流行的矢量格式GeoJson和KML，以及一种我们团队自己开源的格式，我们专门开发用于描述Cesium场景的[]CZML](https://github.com/AnalyticalGraphicsInc/czml-writer/wiki/CZML-Guide)。

无论初始格式如何，Cesium中的所有空间数据都使用Entity API来表示。Entity API以一种有效提供灵活的可视化的方式，以便对Cesium进行渲染。Cesium Entity是可以与样式化图形表示配对并定位在空间和时间上的数据对象。测试沙盒中提供了许多简单Entity的例子。为了在Entity API的基础上加快速度，从这个应用程序中休息一下，然后阅读可视化的空间数据教程 Visualizing Spatial Data tutorial。

以下有一些关于不同entity类型的例子：

一旦你掌握了一个Entity的样子，用Cesium装载数据集将是变得容易理解。要读取数据文件，需要创建适合于数据格式的数据源DataSource，该数据源将解析在指定URL中承载的数据文件，并为数据集中的每个地理空间对象创建包含Entity的EntityCollection。DataSource只是定义了一个接口——您需要的数据源的确切类型将取决于数据格式。例如，KML使用KmlDataSource源代码。比如：

1
2
3
4
5
6
7
8


var kmlOptions = {
 camera : viewer.scene.camera,
 canvas : viewer.scene.canvas,
 clampToGround : true
};
// Load geocache points of interest from a KML file
// Data from : http://catalog.opendata.city/dataset/pediacities-nyc-neighborhoods/resource/91778048-3c58-449c-a3f9-365ed203e914
var geocachePromise = Cesium.KmlDataSource.load('./Source/SampleData/sampleGeocacheLocations.kml', kmlOptions);

上述代码读取我们样例的geocahce点，从一个KML文件中，调用KmlDataSource.load(optinos)带一些配置。针对一个KmlDataSource，相机和Canvas配置项是必须的。clamptoGround选项激活了ground clamping**，一种流行的描述配置用于是地面的几何entities比如多边形和椭圆符合地形而且遵从WGS84椭圆面。

由于这些数据是异步加载的，因此针对KmlDataSource返回一个的Promise，它将包含我们所有新创建的entities。

如果您不熟悉使用异步函数的PromiseAPI，这里的“异步”基本上意味着您应该在所提供的回调函数中完成所需的数据**.then.为了实际地将这些实体集合添加到场景中，我们必须等待直到promise完成，然后将KmlDataSource添加viewer.datasrouces**。取消以下几行注释：

1
2
3
4
5


// Add geocache billboard entities to scene and style them
geocachePromise.then(function(dataSource) {
 // Add the new data as entities to the viewer
 viewer.dataSources.add(dataSource);
});

默认情况下，这些新创建的实体具有有用的功能。单击将显示与实体相关的元数据的信息框Infobox，并双击缩放并查看实体。若要停止查看该实体，请单击“home”按钮，或单击“信息框”上的“划出”相机图标。接下来，我们将添加自定义样式来改善我们的应用程序的外观style。

对于KML和CZML文件，可以在文件中建立声明式样式。然而，对于这个应用，让我们练习手动设计我们的实体。要做到这一点，我们将采取类似的方法来处理这个样式示例，等待我们的数据源加载，然后迭代数据源集合中的所有实体，修改和添加属性。默认情况下，我们的geocache点标记被创建为Billboards和Labels，所以为了修改这些实体的外观，我们这样做：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


// Add geocache billboard entities to scene and style them
geocachePromise.then(function(dataSource) {
 // Add the new data as entities to the viewer
 viewer.dataSources.add(dataSource);

 // Get the array of entities
 var geocacheEntities = dataSource.entities.values;

 for (var i = 0; i < geocacheEntities.length; i++) {
 var entity = geocacheEntities[i];
 if (Cesium.defined(entity.billboard)) {
 // Entity styling code here
 }
 }
});

我们可以通过调整它们的锚点、去除标签来减少clutter和设置isplayDistanceCondition来改善标记的外观，使得只有在距相机的一定距离内的点是可见的。

1
2
3
4
5
6
7
8
9


// Add geocache billboard entities to scene and style them
if (Cesium.defined(entity.billboard)) {
 // Adjust the vertical origin so pins sit on terrain
 entity.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM;
 // Disable the labels to reduce clutter
 entity.label = undefined;
 // Add distance display condition
 entity.billboard.distanceDisplayCondition = new Cesium.DistanceDisplayCondition(10.0, 20000.0);
}

有关distanceDisplayCondition的更多帮助，请参见sandcastle example。

接下来，让我们为每个geocache实体改进信息框Infobox。信息框的标题是实体名称，内容是实体描述，显示为HTML。

你会发现默认的描述并不是很有帮助。由于我们正在显示geocache 位置，让我们更新它们来显示点的经度和纬度。

首先，我们将实体的位置转换成地图，然后从Cartographic中读取经度和纬度，并将其添加到HTML表中的描述中。

在单击时，我们的geocache 实体现在将显示一个格式良好的信息框Infobox，只需要我们所需要的数据。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


// Add geocache billboard entities to scene and style them
if (Cesium.defined(entity.billboard)) {
 // Adjust the vertical origin so pins sit on terrain
 entity.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM;
 // Disable the labels to reduce clutter
 entity.label = undefined;
 // Add distance display condition
 entity.billboard.distanceDisplayCondition = new Cesium.DistanceDisplayCondition(10.0, 20000.0);
 // Compute longitude and latitude in degrees
 var cartographicPosition = Cesium.Cartographic.fromCartesian(entity.position.getValue(Cesium.JulianDate.now()));
 var longitude = Cesium.Math.toDegrees(cartographicPosition.longitude);
 var latitude = Cesium.Math.toDegrees(cartographicPosition.latitude);
 // Modify description
 // Modify description
 var description = '<table class="cesium-infoBox-defaultTable cesium-infoBox-defaultTable-lighter"><tbody>' +
 '<tr><th>' + "Longitude" + '</th><td>' + longitude.toFixed(5) + '</td></tr>' +
 '<tr><th>' + "Latitude" + '</th><td>' + latitude.toFixed(5) + '</td></tr>' +
 '</tbody></table>';
 entity.description = description;
}

我们的geocache标记现在应该看起来像这样：

对于我们的地理应用程序来说，可视化特定点的邻域也会有帮助。让我们试着为每个纽约街区记载一个包含多边形的GeoJson文件。加载GeoJson文件最终非常类似于我们刚刚用于KML的加载过程。但是在这种情况下，我们使用GeoJsonDataSource。与前一个数据源一样，我们需要将它添加到viewer.datasources中，以便实际添加数据到场景中。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


var geojsonOptions = {
 clampToGround : true
};
// Load neighborhood boundaries from KML file
var neighborhoodsPromise = Cesium.GeoJsonDataSource.load('./Source/SampleData/neighborhoods.geojson', geojsonOptions);

// Save an new entity collection of neighborhood data
var neighborhoods;
neighborhoodsPromise.then(function(dataSource) {
 // Add the new data as entities to the viewer
 viewer.dataSources.add(dataSource);
});

让我们来调整我们加载的neighborhood多边形。就像我们刚才做的billboard样式一样，我们首先在数据源加载后迭代遍历neighborhood 数据源实体，这次检查每个实体的多边形被定义：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


// Save an new entity collection of neighborhood data
var neighborhoods;
neighborhoodsPromise.then(function(dataSource) {
 // Add the new data as entities to the viewer
 viewer.dataSources.add(dataSource);
 neighborhoods = dataSource.entities;

 // Get the array of entities
 var neighborhoodEntities = dataSource.entities.values;
 for (var i = 0; i < neighborhoodEntities.length; i++) {
 var entity = neighborhoodEntities[i];

 if (Cesium.defined(entity.polygon)) {
 // entity styling code here
 }
 }
});

既然我们正在显示neighborhood，让我们重命名每个实体使用neighborhood作为它的名字。我们所读的neighborhood中原始GeoJson文件作为属性。Cesium将GeoJson属性存储在enty.properties中，这样我们就可以设置这样的neighborhood名称：

1
2
3
4


// entity styling code here

// Use geojson neighborhood value as entity name
entity.name = entity.properties.neighborhood;

我们可以把每一个多边形分配给一个新的颜色材料属性，通过ColorMaterialProperty设置随机颜色Color，而不是把所有的区域都设置成一样的颜色。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


// entity styling code here

// Set the polygon material to a random, translucent color.
entity.polygon.material = Cesium.Color.fromRandom({
 red : 0.1,
 maximumGreen : 0.5,
 minimumBlue : 0.5,
 alpha : 0.6
});

// Tells the polygon to color the terrain. ClassificationType.CESIUM_3D_TILE will color the 3D tileset, and ClassificationType.BOTH will color both the 3d tiles and terrain (BOTH is the default)
entity.polygon.classificationType = Cesium.ClassificationType.TERRAIN;

最后，让我们为每个实体生成一个带有一些基本样式选项的标签Label。为了保持整洁，我们可以使用disableDepthTestDistance让Cesium总是把标签放在任何3D物体可能遮挡的地方。

然而，请注意，标签总是位于entity.position。多边形Polygon是由一个未定义的位置创建的，因为它有一个定义多边形边界的位置列表。我们可以通过取多边形位置的中心来生成一个位置：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


// entity styling code here

// Generate Polygon position
var polyPositions = entity.polygon.hierarchy.getValue(Cesium.JulianDate.now()).positions;
var polyCenter = Cesium.BoundingSphere.fromPoints(polyPositions).center;
polyCenter = Cesium.Ellipsoid.WGS84.scaleToGeodeticSurface(polyCenter);
entity.position = polyCenter;
// Generate labels
entity.label = {
 text : entity.name,
 showBackground : true,
 scale : 0.6,
 horizontalOrigin : Cesium.HorizontalOrigin.CENTER,
 verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
 distanceDisplayCondition : new Cesium.DistanceDisplayCondition(10.0, 8000.0),
 disableDepthTestDistance : 100.0
};

这给我们标出了看起来像这样的多边形：

最后，让我们通过在城市上空添加无人机飞行来增加我们的NYC geocaches 的高科技视角。

由于飞行路径只是一系列随时间变化的位置，所以我们可以从CZML文件中添加这些数据。CZML是一种用于描述时间动态图形场景的格式，主要用于在运行Cesium的Web浏览器中显示。它描述了线、点、billboards、模型和其他图形原语，并指定它们如何随时间变化。CZML之于Cesium，相当于KML之于谷歌地球的标准格式，它允许大多数Cesium功能特性通过声明式样式语言（在这种情况下是JSON模式）使用。

我们的CZML文件定义了一个实体（默认为可视化的一个点），其位置被定义为在不同时间点的一系列位置。实体API中有几种属性类型可用于处理时间动态数据。参见下面的演示示例：

Property Types Demo

1
2
3
4
5
6


// Load a drone flight path from a CZML file
var dronePromise = Cesium.CzmlDataSource.load('./Source/SampleData/SampleFlight.czml');

dronePromise.then(function(dataSource) {
 viewer.dataSources.add(dataSource);
});

CZML文件使用Cesium来显示无人机飞行，该路径是实体随时间显示其位置的属性。一条路径用插值法将离散点连接到一条连续的直线上进行可视化。最后，让我们改善无人机飞行的外观。首先，而不是简单地解决问题，我们可以加载一个3D模型来表示我们的无人机并将其附加到实体上。

Cesium支持基于glTF（GL传输格式）加载3D模型，这是Cesium团队与Khronos group一起开发的开放规范，用于通过最小化文件大小和运行时间处理来有效地加载应用程序的3D模型。没有gLTF模型吗？我们提供了一个在线转换器，将COLLADA和OBJ文件转换为glTF格式。

让我们加载一个无人机模型Model，具有良好的基于物理的阴影和一些动画：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


var drone;
dronePromise.then(function(dataSource) {
 viewer.dataSources.add(dataSource);
 // Get the entity using the id defined in the CZML data
 drone = dataSource.entities.getById('Aircraft/Aircraft1');
 // Attach a 3D model
 drone.model = {
 uri : './Source/SampleData/Models/CesiumDrone.gltf',
 minimumPixelSize : 128,
 maximumScale : 1000,
 silhouetteColor : Cesium.Color.WHITE,
 silhouetteSize : 2
 };
});

现在我们的模型看起来不错，但与原来的点不同，无人机模型具有方向性，当无人驾驶飞机向前移动时，它看起来很奇怪。幸运的是，Cesium提供了一种VelocityOrientationProperty，它将根据一个实体向前和向后采样的位置自动计算方向：

1
2


// Add computed orientation based on sampled positions
drone.orientation = new Cesium.VelocityOrientationProperty(drone.position);

现在我们的无人驾驶飞机模型将如期进行。

还有一件事我们可以做的是改善我们的无人机飞行的外观。从远处看，它可能并不明显，但无人机的路径是由看起来不自然的线段组成的，这是因为Cesium使用线性插值来构建从默认采样点的路径。然而，可以配置插值选项。

Interpolation Demo

为了获得更平滑的飞行路径，我们可以改变这样的插值选项：

1
2
3
4
5


// Smooth path interpolation
drone.position.setInterpolationOptions({
 interpolationDegree : 3,
 interpolationAlgorithm : Cesium.HermitePolynomialApproximation
});

Cesium中文网交流QQ群：807482793

原文链接：http://cesiumcn.org/topic/161.html | 国内快速访问：http://cesium.coinidea.com/topic/161.html

[CesiumJS]Cesium入门8 – Configuring the Scene – 配置视窗

Wed, 15 Aug 2018 07:30:05 +0000

接下来将添加一些更多的正确的时间和空间设置到Viewer中。涉及到与viewer.scene进行交互，该类控制了viewer中的所有图形元素。

首先，我们配置一下我们的scene，用以下代码激活基于太阳位置的光照：

1
2


// Enable lighting based on sun/moon positions
viewer.scene.globe.enableLighting = true;

按照以上配置，我们scene(场景)中的光照将会随着每天时间的变化而变化。如果你zoom out，你就会看到一部分数字地球位于黑暗之中，因为模拟真实的地球，太阳只能照射到地球的一部分。

在我们开始初始化启动view之前，我们先简略的过一下一些基础的Cesium类型：

Cartesian3 : 一个三维笛卡尔坐标——当它被用作相对于地球中心的位置时，使用地球固定框架（ECEF）。
Cartographic : 由经度、纬度（弧度）和WGS84椭球面高度确定的位置。
HeadingPitchRoll : 在东北向上的框架中关于局部轴的旋转（弧度）。航向是围绕负Z轴的旋转。俯仰是围绕负Y轴的旋转。滚动是关于正X轴的旋转。
Quaternion :以4D坐标表示的3D旋转。

这些是在场景中定位和定位Cesium objects所必需的基本类型，并且有许多有用的转换方法。请参阅每种类型的文档以了解更多信息。

现在让我们把相机定位在我们数据所在的NYC（纽约）的场景中。

Camera Control

相机是viewer.scene中的属性，用来控制当前可见的域。我们可以通过直接设置它的位置和方向来控制相机，或者通过使用Cesium提供的API来控制相机，它被设计成指定相机的位置和方向随时间的变化。

一些最常用的方法如下：

Camera.setView(options): 在特定位置和方向立即设置相机。
Camera.zoomIn(amount): 沿着视角矢量移动摄像机。
Camera.zoomOut(amount): 沿视角矢量向后移动摄像机。
Camera.flyTo(options): 创建从当前相机位置到新位置的动画相机飞行。
Camera.lookAt(target, offset) : 定位并定位摄像机以给定偏移量瞄准目标点。
Camera.move(direction, amount) : 朝任何方向移动摄像机。
Camera.rotate(axis, angle) : 绕任意轴旋转相机。

进一步获得API功能，看看这些相机演示：

Camera API Demo
Custom Camera Controls Demo

让我们尝试一种方法将相机跳转到纽约。使用camera.setView()初始化view，使用Cartesian3和HeadingpitchRoll指定相机的位置和方向:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


// Create an initial camera view
var initialPosition = new Cesium.Cartesian3.fromDegrees(-73.998114468289017509, 40.674512895646692812, 2631.082799425431);
var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(7.1077496389876024807, -31.987223091598949054, 0.025883251314954971306);
var homeCameraView = {
 destination : initialPosition,
 orientation : {
 heading : initialOrientation.heading,
 pitch : initialOrientation.pitch,
 roll : initialOrientation.roll
 }
};
// Set the initial view
viewer.scene.camera.setView(homeCameraView);

相机现在被定位和定向以俯瞰曼哈顿，并且我们的视图参数被保存在一个对象中，我们可以将其传递给其他相机方法。

实际上，我们可以使用这个相同的视角来更新按下home按钮的效果。我们不必让它从远处返回地球的默认视角，我们可以重写按钮，使我们看到曼哈顿的初始视角。我们可以通过添加几个选项来调整动画，然后添加一个取消默认航班的事件侦听器，并调用**FlyTo()**我们的Home视角：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


// Add some camera flight animation options
homeCameraView.duration = 2.0;
homeCameraView.maximumHeight = 2000;
homeCameraView.pitchAdjustHeight = 2000;
homeCameraView.endTransform = Cesium.Matrix4.IDENTITY;
// Override the default home button
viewer.homeButton.viewModel.command.beforeExecute.addEventListener(function (e) {
 e.cancel = true;
 viewer.scene.camera.flyTo(homeCameraView);
});

更多关于基本相机控制，请访问我们的Camera Tutorial。

Clock Control

接下来，我们配置viewer的Clock和Timline来控制scene的时间进度。

这里是clock的相关API

当使用特定时间时，Cesium使用JulandDATE类型，它存储了1月1日中午以来的天数-4712（公元前4713年）。为了提高精度，该类将日期和秒的全部部分存储在单独的组件中。为了计算安全和代表跳跃秒，日期总是存储在国际原子时间标准中。

下面是我们如何设置场景时间选项的例子：

1
2
3
4
5
6
7
8
9


// Set up clock and timeline.
viewer.clock.shouldAnimate = true; // make the animation play when the viewer starts
viewer.clock.startTime = Cesium.JulianDate.fromIso8601("2017-07-11T16:00:00Z");
viewer.clock.stopTime = Cesium.JulianDate.fromIso8601("2017-07-11T16:20:00Z");
viewer.clock.currentTime = Cesium.JulianDate.fromIso8601("2017-07-11T16:00:00Z");
viewer.clock.multiplier = 2; // sets a speedup
viewer.clock.clockStep = Cesium.ClockStep.SYSTEM_CLOCK_MULTIPLIER; // tick computation mode
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; // loop at the end
viewer.timeline.zoomTo(viewer.clock.startTime, viewer.clock.stopTime); // set visible range

这设置场景动画的速率、开始和停止时间，并告诉时钟在到达停止时间时循环回到开始。它还将时间线控件设置为适当的时间范围。看看这个时钟示例代码来测试时钟设置。

这是我们的初始场景配置！现在，当你运行你的应用程序时，你应该看到以下内容：

Cesium中文网交流QQ群：807482793

原文链接：http://cesiumcn.org/topic/160.html | 国内快速访问：http://cesium.coinidea.com/topic/160.html

[CesiumJS]Cesium入门7 – Adding Terrain – 添加地形

Tue, 14 Aug 2018 08:34:50 +0000

Cesium支持流式的、可视化的全球高程投影地形地势、水形数据，包括海洋、湖泊、河流、山峰、峡谷和其他能够被三维展示出来的且效果比二维好的地形数据。像图层数据一样，Cesium引擎会从一个服务器上请求流式地形数据，仅请求那些基于当前相机能看到的需要绘制的图层上的数据。

Cesium官方提供了一些地形数据集的例子，以及如何配置这些参数。

ArcticDEM : 高投影的arctic terrain
PAMAP Terrain : 高投影的Pennsylvania terrain
Terrain display options : 一些地形数据配置和格式
Terrain exaggeration : 是地形间的高度差异更加的优雅艺术

支持的地形数据格式

Quantized-mesh, Cesium团队自己开源的一种格式
Heightmap
Google Earth Enterprise

为了添加地形数据，我们需要创建一个CesiumTerrainProvider，提供一个url和一些配置想，然后将这个provider赋值给viewer.terrainProvider。

此处，我们使用Cesium WorldTerrian图层，该图层由Cesium ion提供，在“My Assets”中是默认提供的。我们可以用createWorldTerrainhelper函数创建一个由Cesium ion提供服务的Cesium WorldTerrian。

1
2
3
4
5


// Load Cesium World Terrain
viewer.terrainProvider = Cesium.createWorldTerrain({
 requestWaterMask : true, // required for water effects
 requestVertexNormals : true // required for terrain lighting
});

requestWaterMask和requestVertexNormals是可选的配置项，告诉Cesium是否需要请求额外的水、光数据。这两个选项默认是设为false的。

最终，既然我们有了地形数据，我们需要更多的线条来使得地形数据背后的objects能够正确地显示，只有最前面、最上面的objects才能是可见的。

1
2


// Enable depth testing so things behind the terrain disappear.
viewer.scene.globe.depthTestAgainstTerrain = true;

我们现在有地形数据和运动的水。纽约非常平坦，所以可以在上面的地形数据上自由的探索。举一个显而易见的例子，你可以跳转到更加崎岖的区域比如 Grand Canyon 或者 San Francisco。

关于地形数据的更多信息，请访问Terrain Tutorial

Cesium中文网交流QQ群：807482793

原文链接：http://cesiumcn.org/topic/157.html | 国内快速访问：http://cesium.coinidea.com/topic/157.html

[CesiumJS]Cesium入门6 – Adding Imagery – 添加图层

Tue, 14 Aug 2018 08:29:46 +0000

Cesium应用程序另一个关键元素是Imagery(图层)。瓦片图集合根据不同的投影方式映射到虚拟的三维数字地球表面。依赖于相机指向地表的方向和距离，Cesium会去请求和渲染不同层级的图层详细信息。

多种图层能够被添加、移除、排序和适应到Cesium中。

Cesium提供了一系列方法用于处理图层，比如颜色自适应，图层叠加融合。一些样例代码如下：

Cesium提供了各种**接口**支持各样的图层数据源。

支持的图层格式

wms
TMS
WMTS (with time dynamic imagery)
ArcGIS
Bing Maps
Google Earth
Mapbox
OpenStreetMap

注意：不同的数据源需要不同的认证 - 需要确保自己能够有权限访问到这些数据源，自然地需要注册特定的认证才可以

默认地，Cesium使用Bing Maps作为默认的图层。这个图层被打包进Viewer中用于演示。Cesium需要您自己创建**ion account**然后生成一个access key用于访问图层数据。

在接下来的例子中，将使用Cesium ion中的Sentinel-2图层。

去Cesium ion页面，将Sentinel-2图层加入到自己的assets中。点击在导航栏中点击“Asset Depot”
点击“Add to my assets”。Sentinel-2将在你个人用户中的asset列表（My Assets）中出现，此时将在个人的app中图层数据源变得可用。
代码级别：我们创建一个IonImageryProvider，将assetId传给对应的Sentinel-2图层。然后我们将ImageryProvider添加到viewer.imageryLayers。

1
2
3
4
5


// Remove default base layer
viewer.imageryLayers.remove(viewer.imageryLayers.get(0));

// Add Sentinel-2 imagery
viewer.imageryLayers.addImageryProvider(new Cesium.IonImageryProvider({ assetId : 3954 }));

基于上述的代码，我们的Cesium应用程序在缩进zoom in的时候会看到如下图层：

关于图层的更多信息：请访问Imagery Layers Tutorial

Cesium中文网交流QQ群：807482793

原文链接：http://cesiumcn.org/topic/156.html | 国内快速访问：http://cesium.coinidea.com/topic/156.html

[CesiumJS]Cesium入门5 – Cesium ion

Mon, 13 Aug 2018 07:43:34 +0000

Cesium ion是一个提供瓦片图和3D地理空间数据的平台，Cesium ion支持把数据添加到用户自己的CesiumJS应用中。下面我们将使用Sentinal-2二维贴图和Cesium世界地形，二者都需要ion的支持。

备注在我们使用Cesium的过程中，如果没有申请ion，同时没有自己的数据源用的cesium提供的数据源，viewer的底部常常会提示一行小的英文字母。大意就是需要申请access token.

首先需要去注册一个免费的Cesium ion账户。
打开 https://cesium.com/ion/ 然后注册一个新的账户。
点击"Access Token"，跳转到Access Tokens page页面。
选择Default默认的access token拷贝到contents中。

在创建Cesium Viewer的时候，将access token填为自己的access token即可。

1

Cesium.Ion.defaultAccessToken = '<YOUR ACCESS TOKEN HERE>';

以上就能畅快的访问Cesium ion提供的各种数据源了。

更多问题可以访问 Getting Started with Cesium ion

Cesium中文网交流QQ群：807482793

原文链接：http://cesiumcn.org/topic/153.html | 国内快速访问：http://cesium.coinidea.com/topic/153.html

[CesiumJS]Cesium入门4 – 创建Cesium Viewer

Mon, 13 Aug 2018 06:55:35 +0000

任何Cesium应用程序的基础都是Viewer。Viewer是一个带有多种功能的可交互的三位数字地球的容器（盒子）。创建一个Viewer和HTML中的一个id为"cesiumContainer"的div绑定即可。

1

var viewer = new Cesium.Viewer('cesiumContainer');

使用以上代码之后，能看到下图所示的基本的数字地球：

默认地，场景支持鼠标（电脑）和手指（移动设备）交互。控制相机漫游数字地球可以通过以下方式：

Left click and drag - Pans the camera over the surface of the globe.
Right click and drag - Zooms the camera in and out.
Middle wheel scrolling - Also zooms the camera in and out.
Middle click and drag - Rotates the camera around the point on the surface of the globe. 翻译
按住鼠标左键拖拽 - 让相机在数字地球平面平移。
按住鼠标右键拖拽 - 放缩相机。
鼠标滚轮滑动 - 放缩相机。
按住鼠标中键拖拽 - 在当前地球的屏幕中间点，旋转相机。

默认的Viewer自带了一些有用的组件：

Geocoder : A location search tool that flies the camera to queried location. Uses Bing Maps data by default.
HomeButton : Flies the viewer back to a default view.
SceneModePicker : Switches between 3D, 2D and Columbus View (CV) modes.
BaseLayerPicker : Chooses the imagery and terrain to display on the globe.
NavigationHelpButton : Displays the default camera controls.
Animation : Controls the play speed for view animation.
CreditsDisplay : Displays data attributions. Almost always required!
Timeline : Indicates current time and allows users to jump to a specific time using the scrubber.
FullscreenButton : Makes the Viewer fullscreen. 翻译
Geocoder : 一种地理位置搜索工具，用于显示相机访问的地理位置。默认使用微软的Bing地图。
HomeButton : 首页位置，点击之后将视图跳转到默认视角。
SceneModePicker : 切换2D、3D 和 Columbus View (CV) 模式。
BaseLayerPicker : 选择三维数字地球的底图（imagery and terrain）。
NavigationHelpButton : 帮助提示，如何操作数字地球。
Animation :控制视窗动画的播放速度。
CreditsDisplay : 展示商标版权和数据源。
Timeline : 展示当前时间和允许用户在进度条上拖动到任何一个指定的时间。
FullscreenButton : 视察全屏按钮。

我们可以通过代码来配置视窗组件，在我们初始化视窗的时候，通过配置参数添加/移除相关组件。以下代码是通过参数配置得到的viewer,该Viewer不带selection indicators, base layer picker or scene mode picker等组件。

1
2
3
4
5


var viewer = new Cesium.Viewer('cesiumContainer', {
 scene3DOnly: true,
 selectionIndicator: false,
 baseLayerPicker: false
});

如果需要查看Viewer的完整配置，请查看：https://cesiumjs.org/Cesium/Build/Documentation/Viewer.html。

Cesium中文网交流QQ群：807482793

原文链接：http://cesiumcn.org/topic/152.html | 国内快速访问：http://cesium.coinidea.com/topic/152.html

[CesiumJS]Cesium入门3 – Cesium目录框架结构

Fri, 10 Aug 2018 09:13:46 +0000

app目录

下载官网上的文件，我们能看到以下CesiumJS库结构：

Source/: Cesium应用程序代码及数据
ThirdParty/：外部依赖库，不同于Cesium的第三方库
LICENSE.md：Cesium的License介绍
index.html：Web首页，需要按照Cesium要求定义页面，同时添加Cesium依赖库
server.js：基于node.js的web服务应用

备注

cesiumJS与第三方JavaScript库和框架做了适配:

React: Integrating Cesium with React

ThreeJS: Integrating Cesium with ThreeJS

页面结构

引入CesiumJS

1

<script src="ThirdParty/Cesium/Cesium.js"></script>

开发者也可以根据自己的需求，通过ThirdParty/Cesium/source/来挑选自己的依赖库，裁剪js的大小，

HTML结构

需要一个div作为Cesium Viewer widget的容器

1

<div id="cesiumContainer"></div>

需要引入app.js来激活Cesium Viewer，app.js最好在HTML末尾引入。

1

<script src="Source/App.js"></script>

添加CSS样式

需要引入Cesium viewer中的各种widget的样式新建一个index.css，并引入到index.html中

1

<link rel="stylesheet" href="index.css" media="screen">

在index.css中加入以下默认的Cesium CSS。

1

@import url(ThirdParty/Cesium/Widgets/widgets.css);

操作步骤

打开Source/App.js，删除contents
拷贝Source/AppSkeleton.js到Source/App.js
确认server.js在Cesium文件夹根目录，并运行server.js (npm server.js)
在新版本（支持WebGL）的浏览器中输入localhost:8080

如果有任何问题：

完整代码：https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/index.html?src=Hello%20World.html&label=Showcases&gist=8d9d3daadd197cffd501d7210bcca3b6

推荐代码：https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/index.html?src=Hello%20World.html&label=Showcases&gist=113c3467755fc38d9f9bce16a94475fc

Cesium中文网交流QQ群：807482793

原文链接：http://cesiumcn.org/topic/144.html | 快速访问链接：http://cesium.coinidea.com/topic/144.html

[CesiumJS]Cesium入门2 – Cesium环境搭建及第一个示例程序

Fri, 10 Aug 2018 03:11:34 +0000

验证浏览器

Cesium需要浏览器支持WebGL，可以通过CesiumJS官网提供的一个HelloWorld例子来测试自己的浏览器是否支持Cesium。（推荐使用Chrome）测试地址： https://cesiumjs.org/Cesium/Apps/HelloWorld.html

选择IDE

官网中写到：

1

If you’re already a seasoned developer, you most likely have a favorite editor or development environment; for example, most of the Cesium team uses Eclipse. If you’re just starting out, a great free and open-source editor is Notepad++, which you can download from their website. Ultimately any text editor will do, so go with the one that you are most comfortable with.

如果你已经是一个经验丰富的开发人员，你很可能有一个最喜欢的编辑器或开发环境; 例如，大多数Cesium团队使用Eclipse。如果你刚刚开始，一个伟大的免费和开源的编辑器是Notepad ++，你可以从他们的网站下载。最终任何文本编辑器都会做，所以去与你最舒适的。

我个人之前开发PHP较多，所以我使用的是PHPStorm，其实我不推荐Eclipse，我比较推荐和Idea一母同胞的WebStorm。考虑到工程和文件夹的管理，我也不推荐Notepad++，轻量级的IDE我比较推荐Sublime Text.

下载Cesium源代码

最新的release版本代码下载地址： https://cesiumjs.org/tutorials/cesium-up-and-running/

下载后，将zip文件解压到您选择的新目录中，我将在整个教程中将此文件称为Cesium root目录。内容应该看起来像下面。

直接点击index.html是无效的，需要放入Web Server容器中，才能运行起来。

Server端

Cesium是纯前端的代码，官方给出的源代码中，配套了nodejs的server端，以及可以通过nodejs进行安装部署。实际上可以将Cesium部署进入tomcat（geoserver）、apache、nginx等服务器中。

官网推荐的是nodejs

从官网中下载Node.js(https://nodejs.org/en/), 实际上nodejs有一些参数可是配置，使用默认的参数即可。.
在Cesium所在的文件夹目录，打开cmd或者bash敲入命令

1

npm install

下载依赖的npm模块，比如express等。如果成功，会在Cesium文件夹中床架 ‘node_modules’文件夹。 3. 最后在cmd或者bash中执行 shell node server.js 或者 shell npm start

成功之后能看到如下的截图

控制台会显示：

1

Cesium development server running locally. Connect to http://localhost:8080

备注：不能关闭控制台，保持一直运行状态。打开浏览器，输入 http://localhost:8080 即可访问Cesium.

如果你不想用nodejs

Cesium是一个开源项目，GitHub上的下载地址为：https://github.com/AnalyticalGraphicsInc/cesium 最简单的安装方式，就是普通的JS文件加载，只需要从Github中下载其js代码，放到自己的项目中，在html页面中引用即可。如下：

新建一个helloworld.html:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Hello 3D Earth</title>
 <script src="CesiumUnminified/Cesium.js"></script>
 <style>
 @import url(CesiumUnminified/Widgets/widgets.css);
 html, body, #cesiumContainer {
 width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
 }
 </style>
</head>
<body>
 <div id="cesiumContainer"></div>
 <script src="app.js"></script>
</body>
</html>

新建一个app.js

1

viewer = new Cesium.Viewer('cesiumContainer');

其中cesiumContainer为html中的地图显示div的id。就是这么简单，浏览器打开上述html页面，便可看到一个三维地球。底图为微软影像只是加载到了三维地球上，包含放大、缩小、平移等基本在线地图功能，同时还包含了时间轴等与时间有关的控件，这是Cesium的一个特色，其地图、对象以及场景等能与时间相关联。

本地的Hello World程序

现在本地的node服务已经运行起来，打开浏览器，输入：http://localhost:8080/Apps/HelloWorld.html. 能看到和官方一模一样的hello wolrd 三维数字地球。

hello World代码分析

官网hello world代码如下：

 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


<!DOCTYPE html>
<html lang="en">
<head>
 <!-- Use correct character set. -->
 <meta charset="utf-8">
 <!-- Tell IE to use the latest, best version. -->
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
 <title>Hello World!</title>
 <script src="../Build/Cesium/Cesium.js"></script>
 <style>
 @import url(../Build/Cesium/Widgets/widgets.css);
 html, body, #cesiumContainer {
 width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
 }
 </style>
</head>
<body>
 <div id="cesiumContainer"></div>
 <script>
 var viewer = new Cesium.Viewer('cesiumContainer');
 </script>
</body>
</html>

以下四个步骤将Cesium加入到html中：

引入Cesium.js，该javascript定义了Cesium object

1

<script src="../Build/Cesium/Cesium.js"></script>

导入Cesium Viewer widget的样式

1

@import url(../Build/Cesium/Widgets/widgets.css);

cesium view存在于该div中

1

<div id="cesiumContainer"></div>

最终创建cesium viewer

1

var viewer = new Cesium.Viewer('cesiumContainer');

Cesium中文网交流QQ群：807482793

原文链接：http://cesiumcn.org/topic/138.html | 快速访问链接：http://cesium.coinidea.com/topic/137.html

[CesiumJS]Cesium入门1 – Cesium介绍

Thu, 09 Aug 2018 03:28:08 +0000

Cesium简介

Cesium官网：https://cesiumjs.org

官网中标题写到：

1

An open-source JavaScript library for world-class 3D globes and maps

Cesium是一款开源的基于JavaScript的3D地图框架。其实他就是一个地图可视化框架

官网中描述写到：

1

CesiumJS is a geospatial 3D mapping platform for creating virtual globes. Our mission is to create the leading web-based globe and map for visualizing dynamic data. We strive for the best possible performance, precision, visual quality, ease of use, platform support, and content.

CesiumJS 是一款用于创建虚拟场景的3D地理信息平台。目标是用于创建以基于Web的地图动态数据可视化。目前尽力提升平台的性能、准确率、虚拟化能力、易用性以及平台的各种支持。

#数据格式与功能特性 Cesium支持3D Tiles、Terrain and Imagery Layers、3D Models（glTF）、Vectors and Geometry（Load KML, GeoJSON, TopoJSON, and CZML）、Time-Dynamic Visualization、3D, 2D, and 2.5D Columbus View

支持2D,2.5D,3D 形式的地理（地图）数据展示，
可以绘制各种几何图形、高亮区域，支持导入图片，甚至三维模型等多种数据可视化展示
可用于动态数据可视化并提供良好的触摸支持，支持绝大多数的浏览器和移动端浏览器。
支持基于时间轴的动态流式数据展示

感想

得益于前端技术的发展，HTML5、CSS3的标准制定，各大浏览器厂商对WebGL越来越好的支持，个人计算机内存的增加以及图形显卡的发展，使我看到了我以前一直想做的基于BS的三维数字地球成为现实，十分激动。

综上

Cesium 是一个跨平台、跨浏览器的展示三维地球和地图的 javascript 库。
Cesium 使用WebGL 来进行硬件加速图形，使用时不需要任何插件支持，但是浏览器必须支持WebGL。
Cesium是基于Apache2.0 许可的开源程序。它可以免费的用于商业和非商业用途。

Cesium中文网交流QQ群：807482793

原文链接：http://cesiumcn.org/topic/137.html | 快速访问链接：http://cesium.coinidea.com/topic/137.html

[cesiumjs]Cesium地球自转的样例代码

Thu, 26 Jul 2018 07:48:41 +0000

分享一下让Cesium地球自转的代码

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


var i = Date.now();

function rotate() {
 var a = .1;
 var t = Date.now();
 var n = (t - i) / 1e3;
 i = t;
 viewer.scene.camera.rotate(Cesium.Cartesian3.UNIT_Z, -a * n);
}

viewer.clock.onTick.addEventListener(rotate);
setTimeout(function() {
 viewer.clock.onTick.removeEventListener(rotate);
}, 5000);

[cesiumjs]osgb转Cesium 3D tiles工具

Thu, 26 Jul 2018 07:44:58 +0000

Cesium不支持直接加载倾斜摄影的OSGB数据：

https://www.oschina.net/question/104733_2198017

但是可以通过转换将OSGB数据转换成Cesium可以加载的数据格式。

目前Cesium自己定义支持最好的格式应该是：3D Tiles。这种格式处于发展阶段还不够成熟。但是基于官方的一些Demo可以发现效果还是非常不错的。

3D Tiles在逻辑层，也就是JSON部分增加了FeatureTable和BatchTable，以及LOD(tileset)概念，并对应提供了header(二进制存储)。从数据规范角度来看，继承了glTF优秀的部分，同时考虑了倾斜，点云，后续也会支持OSM，从数据类型的支持上也比较到位。

3D Tiles = glTF + LOD

https://www.cnblogs.com/fuckgiser/p/6565957.html

在开发过程中，通过网上搜索发现了开发者分享出来的一些转换工具：

https://www.v2ex.com/t/402321

https://blog.csdn.net/qq_37796475/article/details/79221939

经过测试发现：

https://download.csdn.net/download/qq_37796475/10274378 这个工具的效果不错。

下载转换工具之后，目录中自带一张操作示例图，如果大家有不明白的地方可以进行留言。

原文链接：http://cesiumcn.org/topic/3.html

[ElasticSearch]PHP操作ElasticSearch

Thu, 04 Jan 2018 09:04:18 +0000

官方API:
可以下载官方的PHP ElasticSearch API 阅读文档进行相关操作。
示例代码：

 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
33
34
35
36


static public function initSearchClient() {
 if (null == BaseFrontController::$client) {
 $hosts['hosts'] = array(
 "host" => '127.0.0.1',
 "port" => '9200',
 'scheme' => 'http'
 );
 BaseFrontController::$client = \Elasticsearch\ClientBuilder::create()
 ->setSSLVerification(false)
 ->setHosts($hosts)
 ->build();
 }
}

// Elastic search
static public function actionSearch($area, $keyword, $start, $end, $size=100, $agg = null) {
 BaseFrontController::initSearchClient();
 $params['index'] = BaseFrontController::getSearchIndex();
 $params['type'] = 'raw';
 $params['body']["size"] = $size;
 // your aggs
 if (null != $agg) {
 $params['body']["aggs"] = $agg;
 }
 $params['body']["query"]["filtered"]['filter']["and"] = [
 ["term"=>['Your area' => $area]], // your area
 ["range"=>["Your time" => array("gte"=>$start, "lte"=>$end)]] // your time
 ];

 if ($keyword != '') {
 $params['body']["query"]["filtered"]['query']['bool']['should']['match_phrase'] = array();// your query word
 }

 $response = BaseFrontController::$client->search($params);
 return $response;
}

[Web开发]Html5定位不准确问题

Thu, 04 Jan 2018 07:54:52 +0000

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


if (navigator.geolocation) {
 navigator.geolocation.getCurrentPosition(getPosition, getPositionError, {
 // 指示浏览器获取高精度的位置，默认为false
 enableHighAccuracy: true,
 // 指定获取地理位置的超时时间，默认不限时，单位为毫秒
 timeout: 5000,
 // 最长有效期，在重复获取地理位置时，此参数指定多久再次获取位置。
 maximumAge: 3000
 });
}

上面这段代码，在H5相关的定位中，随处可见，这是用手机端或者电脑端自己的GPS定位，但是之前我通过这个测试发现，非常不准确。电脑端直接报错。

手机端如果是套用百度的那一套API会飘得很厉害，据观察是用的基站定位。
后来我一想百度这么挫？我就用上面原生的代码来获取，发现常常报错：
使用Geolocation方法存在错误信息error.POSITION_UNAVAILABLE
查了很久，电脑端一直就不可以，最后终于知道了，划重点：

现在GPS的服务，最好是https，http基本上越来越不被支持了。chrome甚至直接弹出说只有https才能获取定位。

再次测试，超级准，准到没朋友。误差10米以内。

[年终总结]我的2017

Thu, 04 Jan 2018 07:25:24 +0000

晃晃悠悠，终于度过了2017年。其实，对于总结这种东西，我内心是有阴影的。

一、技术：

1. 前端技术栈：

1.1 撸了一次VUE，基本入门了;
1.2 接触了一下Fis3;

2. PHP相关：

2.1 了解了Yii2.0，实现了一些简单的项目;
2.2 将ThinkPHP3.升级到了ThinkPHP5;

3. 算法相关：

3.1 年中的时候，撸了几十道leetcode，后来也没坚持下来。当年2015应该是撸完了的，现在出了不少新题。STL、Vector这些之也重新捡起来了。
3.2 今年最自豪的事，撸了一下OpenCV，实现了一个图像分类的算法BOW，也用了一下基于OpenCV的决策树、SVM等。

4. 系统相关：

4.1 2015年的时候CDH就走过一次了。今年最有成就感的事儿是把ElasticSearch撸起来了。数据量大概是1.5亿条。包括分词、mapping、索引、聚合。这样走一次还是很有成就感的。

二、旅行：

说来惭愧。算上出差，也就去了上海、南京、青岛。这三个城市吧。不过终于去了上海的迪斯尼还不错，就是人太多了。

三、Coinidea:

搞起来了吗，我觉得没有。搞得不算好。大大小小的网站、WebAPP、API也写了小几十个了。但是非常迷茫，不知道接下来的路怎么走，最近也在做一些尝试，希望能有一些新的门向我打开。

谈一谈对明年的期望吧。

Android, 之前学了，但是一直没有进行下去。
开发并发布一款微信小程序。
研究学习PostgreSQL
进一步学习研究一些相关数据挖掘、深度学习算法。

以上，没有祝愿了，目标定低一点，对谁都有好处:)

[MySQL]MySQL自动备份

Tue, 28 Nov 2017 02:59:06 +0000

创建 backup.sh 脚本

新建 backup.sh，输入以下内容：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


db_user="Your database user"
db_passwd="Your password"
db_name="Your database name"

# 备份文件存储目录，你需要更改此目录
backup_dir="/home/mysqlbackup"

# 备份文件的日期格式 (dd-mm-yyyy)
time="$(date +"%Y%m%d%H%M%S")"

# 执行备份命令
mysqldump -h localhost -u $db_user -p$db_passwd --all-databases --sock=/var/lib/mysql/mysql.sock > "$backup_dir/db_$time.sql"

然后，赋予脚本执行权限并执行脚本：

1
2


chmod +x ./backup.sh
bash -x ./backup.sh

如果报套接字错误，需要指定 sock，详见：http://blog.csdn.net/seteor/article/details/18356079。

创建定时任务

编辑定时任务：

1

crontab -e

在编辑界面中，添加以下内容：

1

00 23 * * * /home/mysqlbackup/backup.sh

上述命令将在每天23:00执行 backup.sh 文件，备份数据库到路径 /home/mysqlbackup。

查看定时任务：

1

crontab -l

[CentOS]Centos升级OpenSSH及vsftpd

Thu, 23 Nov 2017 08:05:04 +0000

升级 OpenSSH 到 7.4 版本以上

背景

目前来讲，Linux 下 OpenSSH 7.4 版本以下的，都有一些高危漏洞，需要将 OpenSSH 升级到 7.4 版本以上。在一台不能上外网的机器上（yum），是比较麻烦的事儿。网上大家都先建议备份好 ssh 和安装 telnet 防止，升级失败可以 telnet 进去。

常见问题及解决方案

4. 手动编译生成安装 OpenSSH 需要的依赖

zlib
pam
pam-devel

如果报错 configure: error: PAM headers not found，可以下载 pam-devel：

http://rpm.pbone.net/index.php3?stat=26&dist=74&size=208492&name=pam-devel-1.1.1-17.el6.x86_64.rpm

5. OpenSSL 下载

ftp://ftp.openssl.org/source/

6. 安装 OpenSSL

参考链接：

注意事项

如果 OpenSSH 升级后 SecureCRT 不能登录，可能是因为 SecureCRT 版本太低不支持一些加密协议：

参考链接：http://blog.csdn.net/yangg1991/article/details/51755562

升级 OpenSSH 的步骤

参考链接：http://blog.csdn.net/u011080082/article/details/64503534

升级 vsftpd 从 2.2.2 到 2.3.4

下载 vsftpd-2.3.4.tar.gz 包，64 位注意：

1
2


sed -i 's/lib\/lib64\/g' vsf_findlibs.sh
sed -i 's/lib\//lib64\//g' vsf_findlibs.sh

配置 vsftpd

使用主动模式：

1

vsftpd /etc/vsftpd/vsftpd.conf &

standard_alone 启动下，需要将下列两行代码，加入配置文件头部：

参考链接：http://wingjang.blog.163.com/blog/static/47913442200811113104509/

1
2


listen=YES
listen_port=21

安装之后默认只允许匿名用户登录，所以需要修改一下：

参考链接：http://blog.sina.com.cn/s/blog_7e16680c01018ox1.html

处理 TCP_Wrapper 问题

如果有问题，注意删除空格，也可以去掉：

参考链接：

vsftpd 下载

http://pkgs.fedoraproject.org/repo/pkgs/vsftpd/

[ElasticSearch]ES修改mapping

Sun, 19 Nov 2017 12:23:18 +0000

用太多的MySQL这样的数据库了，直到有一天，用了ES遇到一个大坑。
就是post mapping的时候有一个“字段”analyzed 和 not_analyzed没区分好，一时失误导致该列所有数据全部分词了。数据量大概1.5亿条。
天真的以为能够像MySQL那样修改一下字段的属性即可。ES是基于Lucene的，没有别的办法，通俗一点讲，要么删除索引，重新导入，要么reindex。所谓的reindex就是建立一个新的index，把旧index的数据拷贝过去。这样的教程网上很多。比如：
http://blog.csdn.net/loveyaqin1990/article/details/77684599
https://www.cnblogs.com/wmx3ng/p/4112993.html

目前网上来讲，具体实现代码很少，我找了好久只找到了Python的实现。本文基于ES官方代码的PHP SDK和bulk有一个迁移实现。

 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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58


<?php
require 'vendor/autoload.php';
$hosts['hosts'] = array(
 "host" => '127.0.0.1',
 "port" => '9200',
 'scheme' => 'http'
);
$client = Elasticsearch\ClientBuilder::create()
 ->setSSLVerification(false)
 ->setHosts($hosts)
 ->build();
for ($i = 1; $i <= 10; $i++) {
 if ($i != 10) {
 $params['index'] = 'index-0'.$i;
 }
 else {
 $params['index'] = 'index-'.$i;
 }
 echo $params["index"]."\r\n";
 $params['type'] = 'raw';
 $params['scroll'] = '120s';
 $params["size"] = 50000;
 $params["body"] = array(
 "query" => array(
 "match_all" => array()
 )
 );
 $response = $client->search($params);
 $step = 1;
 while (isset($response['hits']['hits']) && count($response['hits']['hits']) > 0) {
 echo $step++."\t";
 $scroll_id = $response['_scroll_id'];
 unset($response);
 $response = $client->scroll(
 array(
 "scroll_id" => $scroll_id,
 "scroll" => "120s"
 )
 );
 if (count($response['hits']['hits']) > 0) {
 $bulk = array('index'=>$params['index']."-reindex",'type'=>$params['type']);
 foreach ($response["hits"]["hits"] as $key=>$val) {
 $bulk['body'][]=array(
 'index' => array(
 '_id'=>$val['_id']
 ),
 );
 $bulk['body'][] = $val['_source'];
 }
 // insert reindex
 $res = $client->bulk($bulk);
 unset($bulk);
 } else {
 break;
 }
 }
}
?>

[消息推送]基于umeng服务的消息推送

Sun, 19 Nov 2017 11:48:10 +0000

在服务端与移动端交互的时候，常常需要将服务端的消息推送到用户的移动端。umeng提供这样的消息推送服务——upush。

下载sdk代码。基于demo，本文进行了一个简单ThinkPHP调用实现。

1
2
3
4
5
6


$appkey = "your app key";
$secret = "your app secret";
import('@.ORG.Notification');
$notification = new Notification($appkey, $secret);
$custom_data = array($key=>$value);
$notification->sendIOSBroadcast($your_title, $custom_data);

Notification.class.php是sdk提供的demo.php封装到了ThinkPHP的ORG文件夹中。
如果你有任何问题，亦可以在本文下留言，一般一天一个回复。

[ThinkPHP]ThinkPHP并发下锁表

Fri, 17 Nov 2017 03:10:04 +0000

最近需要写一个并发量不是很大的报名系统，但是还是有可能出现多人同时报名的情况。因为报名涉及到先后顺序，如果不进行锁行或者锁表，会出现下列这种情况。
例：
当前系统中只有用户A报名，顺序为1，记为(A, 1)；
某时刻t，用户B，用户C，用户D，同时报名，后端几乎同时接收到B、C、D的报名请求，于是查询报名表发现，目前只有(A, 1)，于是将(B, 2)，(C, 2)，(D, 2)插入报名表得到结果：

1
2
3
4


(A, 1)
(B, 2)
(C, 2)
(D, 2)

个人最开始想到的办法是：我不记录顺序，我记录插入时间戳，这样的话就是

1
2
3
4


(A, ta)
(B, tb)
(C, tc)
(D, td)

ta, tb, tc, td几乎不可能出现相等的情况。
但是这样做有三个问题无法解决，

有可能出现时间戳相等的情况，概率很低
不直观，需要用时间戳排序
报名的时候用人数限制，比如限制报名40人，而且立即反馈当前报名是否报上。

目前的解决办法是，通过数据库加锁来解决。
网上查了很多资料，ThinkPHP可以加悲观锁和乐观锁。目标系统访问量不大，使用悲观锁就行了。

MyISAM只能锁表，InnoDB可以行锁定。目标系统锁表即可。
官方文档给出的锁表方案是：

1

$User->lock(true)->save($data);// 使用悲观锁功能

但是目标系统要进行一些列操作，所以使用的锁表代码是：

1
2
3
4


M()->query("lock tables yourtable write");
// TODO
// your code
M()->query("unlock tables");

实际效果运行效果还不错[真实日期已被滤去]：

 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
33
34
35
36
37
38
39
40


??-??-?? 10:00:00 1
??-??-?? 10:00:00 2
??-??-?? 10:00:00 3
??-??-?? 10:00:00 4
??-??-?? 10:00:01 5
??-??-?? 10:00:01 6
??-??-?? 10:00:01 7
??-??-?? 10:00:01 8
??-??-?? 10:00:02 9
??-??-?? 10:00:02 10
??-??-?? 10:00:02 11
??-??-?? 10:00:02 12
??-??-?? 10:00:02 13
??-??-?? 10:00:02 14
??-??-?? 10:00:03 15
??-??-?? 10:00:03 16
??-??-?? 10:00:03 17
??-??-?? 10:00:05 18
??-??-?? 10:00:06 19
??-??-?? 10:00:07 20
??-??-?? 10:00:08 21
??-??-?? 10:00:10 22
??-??-?? 10:00:15 23
??-??-?? 10:00:17 24
??-??-?? 10:00:19 25
??-??-?? 10:00:19 26
??-??-?? 10:00:24 27
??-??-?? 10:00:25 28
??-??-?? 10:00:34 29
??-??-?? 10:00:35 30
??-??-?? 10:00:38 31
??-??-?? 10:01:06 32
??-??-?? 10:01:11 33
??-??-?? 10:01:11 34
??-??-?? 10:01:17 35
??-??-?? 10:01:18 36
??-??-?? 10:02:27 37
??-??-?? 10:02:38 38
??-??-?? 10:02:39 39
??-??-?? 10:02:57 40

[leetcode]First Bad Version

Tue, 18 Jul 2017 14:17:57 +0000

此题就是二分的变种，但是千万要注意大整数求和越界，正确的计算方式应该是 left + (right - left) / 2; 我使用的是 long long.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


// Forward declaration of isBadVersion API.
bool isBadVersion(int version);

class Solution {
public:
 int bSearch(long long left, long long right) {
 if (left >= right) {
 return right;
 }
 long long middle = (left + right) / 2;
 if (!isBadVersion(middle)) {
 if (middle + 1 > right) return middle;
 if (isBadVersion(middle + 1)) return middle + 1;
 else return bSearch(middle, right);
 }
 else {
 return bSearch(left, middle);
 }
 }

 int firstBadVersion(int n) {
 return bSearch(1, n);
 }
};

[leetcode]Palindrome Linked List

Tue, 18 Jul 2017 06:10:24 +0000

此提示单链表判断回文，我本来的思路是逆转单链表前半截，再跑一次，应该能满足时间复杂度 (O(n)) 和空间复杂度 (O(1))，但是不知道为啥老判我超时。
看了 discuss 和 hint，其实简单递归一下就可以了。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


class Solution {
public:
 ListNode * temp;
 bool isPalindrome(ListNode* head) {
 temp = head;
 return check(head);
 }

 bool check(ListNode * node) {
 if (node == NULL) return true;
 bool flag = check(node->next) && (node->val == temp->val);
 temp = temp->next;
 return flag;
 }
};

[C#]串口发送接收数据

Mon, 17 Jul 2017 14:12:53 +0000

Client Class

 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
33
34
35
36


using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.IO.Ports;

namespace COMClient
{
 public class COMClient
 {
 private SerialPort sp = null;

 public COMClient(string COM)
 {
 this.sp = new SerialPort(COM);
 // 打开新的串行端口连接
 this.sp.Open();
 // 丢弃来自串行驱动程序的接受缓冲区的数据
 this.sp.DiscardInBuffer();
 // 丢弃来自串行驱动程序的传输缓冲区的数据
 this.sp.DiscardOutBuffer();
 }

 ~COMClient()
 {
 // 关闭端口连接
 this.sp.Close();
 }

 public void sendMsg(string msg)
 {
 // 使用缓冲区的数据将指定数量的字节写入串行端口
 this.sp.WriteLine(msg);
 }
 }
}

Client call:

1
2


COMClient.COMClient com_client = new COMClient.COMClient("COM4");
com_client.sendMsg("Hello World!");

Server:

 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
33
34
35
36
37
38
39
40
41


using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.IO.Ports;

namespace COM_Server
{
 class Program
 {
 static void Main(string[] args)
 {
 // 遍历串行端口名称数组
 foreach (string port in System.IO.Ports.SerialPort.GetPortNames())
 {
 Console.WriteLine(port);
 }

 byte[] b = new byte[32];
 SerialPort sp = new SerialPort("COM3");

 while (true)
 {
 // 打开新的串行端口连接
 sp.Open();
 // 丢弃来自串行驱动程序的接受缓冲区的数据
 sp.DiscardInBuffer();
 // 丢弃来自串行驱动程序的传输缓冲区的数据
 sp.DiscardOutBuffer();
 // 从串口输入缓冲区读取一些字节并将那些字节写入字节数组中指定的偏移量处
 string msg = sp.ReadLine();
 StringBuilder sb = new StringBuilder();
 Console.Write(msg);
 // 关闭端口连接
 sp.Close();
 // 当前线程挂起500毫秒
 System.Threading.Thread.Sleep(500);
 }
 }
 }
}

此处需要用到虚拟串口，安装vspd即可。此处配置虚拟串口COM3和COM4：

Server端启动效果图：

Client端发送图：

Server端接收图：

[leetcode]Maximum Product Subarray

Mon, 17 Jul 2017 06:34:07 +0000

此题给的是一个数组，求这个数组中的子数组乘积最大值，考虑正负数和0的情况。hint给的解法应该是每个值求一个max和min，然后用max和min来生成算上当前点的最大值和最小值。我自己用了一个模拟。所有数求乘积，如果为正则为最大，如果为负则比较抛弃最左边或最右边的负数。考虑到0的情况，先用0分界。

 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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57


class Solution {
public:
 int maxProductNoZero(vector<int>& nums) {
 int max = 1;
 int left = nums.size();
 int right = -1;
 for (int i = 0; i < nums.size(); i++) {
 max *= nums[i];
 if (nums[i] < 0 && i < left) {
 left = i;
 }
 if (nums[i] < 0 && i > right) {
 right = i;
 }
 }
 if (max < 0 && nums.size() > 1) {
 int max_left = 1;
 for (int i = left + 1; i < nums.size(); i++) {
 max_left *= nums[i];
 }
 int max_right = 1;
 for (int i = 0; i < right; i++) {
 max_right *= nums[i];
 }
 max = max_left > max_right ? max_left : max_right;
 }
 return max;
 }

 int maxProduct(vector<int>& nums) {
 int max = nums[0];
 vector<int> zero;
 zero.clear();
 zero.push_back(-1);
 for (int i = 0; i < nums.size(); i++) {
 if (max < nums[i]) {
 max = nums[i];
 }
 if (0 == nums[i]) {
 zero.push_back(i);
 }
 }
 zero.push_back(nums.size());
 for (int i = 0; i < zero.size() - 1; i++) {
 if (zero[i + 1] - 1 >= zero[i] + 1) {
 vector<int> sub;
 sub.clear();
 for (int j = zero[i] + 1; j <= zero[i + 1] - 1; j++) {
 sub.push_back(nums[j]);
 }
 int tmp = maxProductNoZero(sub);
 if (tmp > max) max = tmp;
 }
 }
 return max;
 }
};

[leetcode]Isomorphic Strings

Fri, 14 Jul 2017 03:38:23 +0000

这个题用一个hash存一下两个字符串的对应关系就好了。我开始以为只有小写字母，其实是所有ASCII字符。开始用一个hash存的，后来因为一一对应需要用两个hash存。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


class Solution {
public:
 bool isIsomorphic(string s, string t) {
 if (s.length() != t.length()) return false;
 char hash_s[256];
 char hash_t[256];
 memset(hash_s, NULL, 256);
 memset(hash_t, NULL, 256);
 for (int i = 0; i < s.length(); i++) {
 if (NULL == hash_s[s[i]] && NULL == hash_t[t[i]]) {
 hash_s[s[i]] = t[i];
 hash_t[t[i]] = s[i];
 }
 else {
 if (hash_s[s[i]] != t[i] || hash_t[t[i]] != s[i]) return false;
 }
 }
 return true;
 }
};

[leetcode]Two Sum II – Input array is sorted

Fri, 14 Jul 2017 03:34:59 +0000

此题我用的是二分查找，毕竟有序嘛。其实更好的解法，应该是一个数组，left right下标往里移动查找，这个题我曾经应该在《编程之美》或者《剑指Offer》上看到过。

 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


class Solution {
public:
 vector<int> result;

 void bSearch(vector<int>& numbers, int start, int end, int find) {
 if (start > end) return;
 int middle = (start + end) / 2;
 if (find == numbers[middle]) {
 result.push_back(middle + 1);
 return;
 } else if (find > numbers[middle]) {
 bSearch(numbers, middle + 1, end, find);
 } else {
 bSearch(numbers, start, middle - 1, find);
 }
 }

 vector<int> twoSum(vector<int>& numbers, int target) {
 for (int i = 0; i < numbers.size(); i++) {
 int find = target - numbers[i];
 result.push_back(i + 1);
 bSearch(numbers, i + 1, numbers.size(), find);
 if (result.size() == 2) {
 return result;
 }
 result.clear();
 }
 return result;
 }
};

[leetcode]Combine Two Tables

Fri, 14 Jul 2017 03:31:53 +0000

此题就是一个联表查询，不过我当时认为join就是left join，没有用on，用的where结果做成内联了，错了几次。

1
2
3
4


select p.FirstName, p.LastName, a.City, a.State
from Person as p
left join Address as a
on p.PersonId = a.PersonId

[leetcode]Min Stack

Fri, 14 Jul 2017 03:26:49 +0000

快两年没做题了，压力好大，最近练习一下，保持一种感觉。

这个题据说是《剑指Offer》上的一个题，其实我的解法明显有问题，但是还是AC了。我发现PHP、JS、C#写久了，我连Vector都快不会写了。

此题正确的解法应该是用一个栈来维护最小值，是当前最小值即进入一个栈。另一个栈放数据，即可保证复杂度在O(n)，查询复杂度O(1)。

我的解法比较中二：

 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
33
34
35
36
37
38
39
40
41
42
43


class MinStack {
private:
 vector<int> stack;
 int min;
public:
 MinStack() {
 stack.clear();
 }

 void push(int x) {
 if (stack.empty() || min > x) {
 min = x;
 }
 stack.push_back(x);
 }

 void pop() {
 if (!stack.empty()) {
 stack.pop_back();
 genMin();
 }
 }

 void genMin() {
 min = *(stack.begin());
 for (vector<int>::iterator i = stack.begin() + 1; i < stack.end(); i++) {
 if (min > *i) {
 min = *i;
 }
 }
 }

 int top() {
 if (!stack.empty()) {
 return *(stack.end() - 1);
 }
 return false;
 }

 int getMin() {
 return min;
 }
};

[MySQL]is marked as crashed and should be repaired

Fri, 28 Apr 2017 08:45:59 +0000

某站点文章都不显示，保守估计数据库挂了。已连接，数据库能够连接，但是文章表不能打开，报错：

Table is marked as crashed and should be repaired.

当时心惊了一下，虽然有定时备份，难道数据库挂了，还是有安全漏洞?

根据字面意思，应该是repair一下这个表。
查了一下，正好Navicat具有这个功能，遂修复。
报错：
mysql table is marked as crashed and last (automatic?) repair failed

自动修复失败了。

准备连上服务器看日志
3.1 MySQL 运行中，重启，正常，但是就是文章表不能读。
3.2 因为表是ISAM引擎的，使用网上的方法

myisamchk -r /your/table/data/path.MYI

还是失败。
3.3 正准备看日志的时候，发现MySQL Data所在盘空间已经满了，剩余0字节

3.4 很明显，清理移动多余文件之后，使用navicat修复，一次成功
🙂

好久没写博客了，还是得加油。

[HTML5]Html5本地图片读取及裁剪

Tue, 03 Jan 2017 08:18:50 +0000

需要使用到Html5的FileReader，其中image-file是一个input type=file的文件浏览框。如果需要限制读取图片或者照相机：
1

<input type="file" accept="image/*" capture="camera" id="image-file" name="image-file" />

当用户选择了图片之后，给input file绑定change事件，自动读取本地文件。

1
2
3
4
5
6
7


var image_file = document.getElementById("image-file");
if (typeof FileReader === 'undefined') {
 image.innerHTML = "抱歉，你的浏览器不支持 FileReader";
 image_file.setAttribute('disabled', 'disabled');
} else {
 image_file.addEventListener('change', readFile, false);
}

image就是一个id为image的img标签。readFile函数将图片读入，并自动居中裁剪为宽度自适应屏幕，高度固定为180px的图片。裁剪的过程中需要使用Canvas。

 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
33


function readFile() {
 var file = this.files[0];
 if (!/image\/\w+/.test(file.type)) {
 alert("文件必须为图片！");
 return false;
 }
 var reader = new FileReader();
 reader.readAsDataURL(file);
 reader.onload = function(e) {
 var image = document.getElementById("image");
 var img = new Image();
 img.src = this.result;
 img.onload = function() {
 var x = 0, y = 0, width = img.width, height = img.height;
 if (img.width / window.innerWidth > img.height / 180) {
 width = window.innerWidth * img.height / 180;
 x = (img.width - width) / 2;
 } else {
 height = 180 * img.width / window.innerWidth;
 y = (img.height - height) / 2;
 }

 var canvas = document.createElement('canvas');
 canvas.width = window.innerWidth;
 canvas.height = 180;
 var ctx = canvas.getContext('2d');
 ctx.drawImage(img, x, y, width, height, 0, 0, canvas.width, canvas.height);
 var data = canvas.toDataURL();

 image.innerHTML = '<img class="img-responsive" style="width:100%; height: 180px;" src="' + data + '" alt="" />';
 }
 }
}

通过以上步骤，用户可以选择图片并自动读取本地文件，然后将图片居中裁剪为宽度自适应屏幕，高度固定为180px的图片。

[MySQL]删除字段中的回车符合换行符

Sat, 31 Dec 2016 06:32:25 +0000

1

update table set item=replace(replace(item, char(10), ''), char(13), '') where condition;

table: 表名
item: 字段名
condition: 查询条件

[JavaScript]JavaScript深拷贝

Thu, 08 Dec 2016 09:42:07 +0000

1

var obj1 = JSON.parse(JSON.stringify(obj2));

以上是通过 JSON 来回转换的方法用于数组或者对象的深拷贝，不过有一些问题，但是能解决大部分情况。详见
https://segmentfault.com/a/1190000000501320

[PHP]PHP正则表达式过滤所有标点符号

Thu, 08 Dec 2016 09:40:15 +0000

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


// Filter 英文标点符号
$word = preg_replace("/[[:punct:]]/i", " ", $word);

// Filter 中文标点符号
mb_regex_encoding('utf-8');
$char = "。、！？：；﹑•＂…‘’“”〝〞∕¦‖—　〈〉﹞﹝「」‹›〖〗】【»«』『〕〔》《﹐¸﹕︰﹔！¡？¿﹖﹌﹏﹋＇´ˊˋ―﹫︳︴¯＿￣﹢﹦﹤‐­˜﹟﹩﹠﹪﹡﹨﹍﹉﹎﹊ˇ︵︶︷︸︹︿﹀︺︽︾ˉ﹁﹂﹃﹄︻︼（）";
$word = mb_ereg_replace("[".$char."]", " ", $word, "UTF-8");

// Filter 连续空格
$word = preg_replace("/\s+/", " ", $word);

mb_ereg_replace用于中文字符替换，正则的时候不需要加/ /。

[PHP]ThinkPHP PHP MySQL大数据量导入导出

Thu, 08 Dec 2016 09:37:45 +0000

大数据量的导入导出

备注：大数据量指单文本（含Office相关文档docx，xlsx）10W+的导入导出。

MySQL有两种非常常用的表类型MyISAM和InnoDB。网上针对这两种表类型的介绍和比较非常多，其中主要的区别就是InnoDB支持事务和行级锁，但MyISAM不支持。MyISAM相对来讲效率比较高，二者各有优劣。

MyISAM 和 InnoDB的适用场景

MyISAM适合：

做很多count的计算；
插入不频繁，查询频繁；
没有事务。

InnoDB适合：

可靠性要求比较高，或者要求事务；
表更新和查询都相当的频繁，并且表锁定的机会比较大的情况。

MyISAM 和 InnoDB的区别

MyISAM类型不支持事务处理等高级处理，而InnoDB类型支持。
MyISAM表不支持外键。
在执行数据库写入的操作（insert, update, delete）的时候，MyISAM表会锁表，而InnoDB表会锁行。
当你的数据库有大量的写入、更新操作而查询比较少或者数据完整性要求比较高的时候就选择InnoDB表。当你的数据库主要以查询为主，相比较而言更新和写入比较少，并且业务方面数据完整性要求不那么严格，就选择MyISAM表。因为MyISAM表的查询操作效率和速度都比InnoDB要快。

综上，InnoDB在当前的场景下是不错的选择。

插入大量数据时的优化方法

当PHP需要插入大量数据的时候，当一条一条的插入时，会发现IO耗时严重拖性能。

Demo代码：

1
2
3
4
5
6
7


$params = array('value' => '50');
set_time_limit(0);
echo date("H:i:s");
for($i = 0; $i < 2000000; $i++) {
 $connect_mysql->insert($params);
}
echo date("H:i:s");

有两种方法可以解决这种问题：

1. 使用事务（InnoDB支持）

比如可以每隔10000或者100000条提交一次事务，这样大大降低了IO。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


echo date("H:i:s");
$connect_mysql->query('BEGIN');
$params = array('value' => '50');
for($i = 0; $i < 2000000; $i++) {
 $connect_mysql->insert($params);
 if($i % 100000 == 0) {
 $connect_mysql->query('COMMIT');
 $connect_mysql->query('BEGIN');
 }
}
$connect_mysql->query('COMMIT');
echo date("H:i:s");

2. SQL语句拼接

这是MySQL的一种特性，使用优化SQL语句：将SQL语句进行拼接，使用 insert into table () values (),(),(),() 然后再一次性插入，如果字符串太长，则需要配置下MySQL，在MySQL命令行中运行：

1

SET GLOBAL max_allowed_packet = 2 * 1024 * 1024 * 10;

1
2
3
4
5
6


$sql = "INSERT INTO twenty_million (value) VALUES";
for($i = 0; $i < 2000000; $i++) {
 $sql .= "('50'),";
}
$sql = substr($sql, 0, strlen($sql) - 1);
$connect_mysql->query($sql);

第一种方法较为常用，第二种方法多用于测试数据。

一般默认情况下，PHP的内存为128MB，当使用ThinkPHP超内存的时候，可以调高PHP的默认最大内存，也可以将只需要在入口文件中删除常量APP_DEBUG的定义或者定义为false。这个时候会很省很多内存。当然也可以使用事务模式每隔n条提交一次。当然一次性提交也可以用ThinkPHP的addAll函数，不过该函数Bug较多。

ThinkPHP开启和提交事务

1
2


$table->startTrans();
$table->commit();

当如果需要操作Office相关文件的时候推荐使用PHPWord和PHPExcel。

[WEB开发]织梦CMS移植到Discuz Portal

Fri, 18 Nov 2016 05:14:05 +0000

最近遇到一个问题，想从织梦CMS(dedecms)迁移到Discuz Portal数据库，其中最重要的问题是如何将栏目和大量的文章进行迁移。

涉及到的数据表有：

dede_addonarticle 文章表
dede_arctype 栏目表
dede_relation 新旧栏目对应关系表
pre_portal_article_content 文章表
pre_portal_article_title 文章题目表
pre_portal_article_count 文章浏览数表

1. 预处理旧表，合并 `typename`

1
2
3


UPDATE dede_addonarticle, dede_arctype
SET dede_addonarticle.typename = dede_arctype.typename
WHERE dede_arctype.id = dede_addonarticle.typeid;

2. 合并 `click`, `title`, `writer`, `pubdate`, `keywords`, `description`

1
2
3
4
5
6
7
8
9


UPDATE dede_addonarticle, dede_archives
SET
 dede_addonarticle.click = dede_archives.click,
 dede_addonarticle.title = dede_archives.title,
 dede_addonarticle.writer = dede_archives.writer,
 dede_addonarticle.pubdate = dede_archives.pubdate,
 dede_addonarticle.keywords = dede_archives.keywords,
 dede_addonarticle.description = dede_archives.description
WHERE dede_archives.id = dede_addonarticle.aid;

3. 生成 `relation` 新ID

1
2
3


UPDATE dede_relation, pre_portal_category
SET dede_relation.catid = pre_portal_category.catid
WHERE dede_relation.new = pre_portal_category.catname;

4. 根据 `typename` 和 `relation` 填充 `catid`

1
2
3


UPDATE dede_addonarticle, dede_relation
SET dede_addonarticle.catid = dede_relation.catid
WHERE dede_addonarticle.typename LIKE CONCAT("%", dede_relation.olds, "%");

5. 导入 Discuz Portal 表

插入 `pre_portal_article_content`（文章表）

1
2
3


INSERT INTO pre_portal_article_content(aid, title, content, dateline)
SELECT aid, title, body, pubdate AS dateline
FROM dede_addonarticle;

插入 `pre_portal_article_title`（文章题目表）

1
2
3


INSERT INTO pre_portal_article_title(aid, username, title, author, summary, dateline)
SELECT aid, 'admin', title, writer AS author, description AS summary, pubdate AS dateline
FROM dede_addonarticle;

插入 `pre_portal_article_count`（文章浏览数表）

1
2
3


INSERT INTO pre_portal_article_count(aid, cid, viewnum)
SELECT aid, catid, click
FROM dede_addonarticle;

[WEB开发]Postman插件

Fri, 18 Nov 2016 04:59:52 +0000

[PHP]call to undefined function mb_convert_encoding

Tue, 02 Aug 2016 03:37:01 +0000

Windows下解决

在 php.ini 中开启 mbstring 函数库：去掉 extension=php_mbstring.dll 前面的分号。

Linux下解决

首先安装 php-mbstring 库文件：
1

yum install php-mbstring
之后，修改 /etc/php.ini 文件，在里面加一句：
1

extension=mbstring.so
保存后重启 httpd 服务：
1

service httpd restart

[IIS]文件格式（字体）IIS服务器无法加载

Thu, 28 Jul 2016 09:07:08 +0000

在最近部署一个IIS的服务的时候发现部分 .ttf，.otf，.woff 等字体文件，并没有被加载，但是 js、css、images 等文件却成功加载。原因是对于 IIS 没有默认 MIME 映射的文件，IIS 无法加载。

解决方法很简单，添加对应的 MIME 类型映射即可。直接在 IIS 面板中的 MIME 类型中添加对应的信息，具体类型信息可参考 W3CSchool MIME 参考手册：http://www.w3school.com.cn/media/media_mimeref.asp

相关字体文件 MIME 映射的信息：

1
2
3
4
5
6


<mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
<mimeMap fileExtension=".woff2" mimeType="application/x-font-woff2" />
<mimeMap fileExtension=".ttf" mimeType="application/x-font-truetype" />
<mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
<mimeMap fileExtension=".otf" mimeType="application/x-font-opentype" />
<mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />

Web端/移动端字体集精简

Fri, 22 Jul 2016 02:35:14 +0000

在网页端、移动端的前端开发中，开发人员经常想使用一下非系统自带的字体（Fonts），这些字体常常是TTF、OTF等格式的。

英文的字体（Fonts）往往比较小，但是中文的字体（Fonts）小则1、2MB，大一点的甚至十几兆。这在网页或者移动端是非常难已接受的。这个时候涉及到了字体集的精简（subset），即是某个前端的界面使用了哪些汉字或者字符，从特点的字符集导出成新的ttf即可，其他多余的字没必要留在字符集中。

这里极力推荐国产的一个字体裁剪工具：TTF字体库裁剪转换工具

下载地址：http://pan.baidu.com/s/1skI7FiP 密码：qb27

值得注意的是，需要裁剪的目标字体需要先安装在Windows系统中。

[年终总结]我的2016——写在毕业一周年

Fri, 01 Jul 2016 16:32:42 +0000

写在毕业零周年

一年前，我正式毕业踏入社会。——写在毕业零周年

感谢去年的自己送给我的一句话：“心态永远不死，那生活依然奔跑在路上。”

如果今年要送给明年的自己一句话，那就是：“坚持，坚强，坚韧。”

这一年，我拿到了一些自己想要的东西，但是也付出了很多代价。当我在追寻这些东西的时候，猛然发现，家人的健康才是最重要的。

对啊，当阳光洒下来的时候，还有什么事是比活着更幸福的呢？

——DevHu记录于2016.07.02，还是租的房子

20180104：由于一些不方便解释的原因，暂拿此文作为我的2016年终总结吧。

[Bootstrap]Bootstrap 鼠标hover触发dropdown-toggle

Fri, 27 May 2016 03:18:37 +0000

使用 `bootstrap-hover-dropdown` 插件

1. 下载 `bootstrap-hover-dropdown`

下载地址：http://www.bootcdn.cn/bootstrap-hover-dropdown/

当然，你也可以直接使用CDN版本。

2. 引入 `bootstrap-hover-dropdown.js`

在你的HTML文件中，确保引入了bootstrap-hover-dropdown.js。通常，你可以将其放在页面底部的<script>标签中：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Bootstrap Hover Dropdown Example</title>
 <!-- 引入Bootstrap CSS -->
 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
 <!-- 你的内容 -->

 <!-- 引入jQuery -->
 <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
 <!-- 引入Bootstrap JS -->
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
 <!-- 引入bootstrap-hover-dropdown.js -->
 <script src="path/to/bootstrap-hover-dropdown.js"></script>
</body>
</html>

3. 修改HTML中的Dropdown

找到你的HTML文件中包含dropdown-toggle类的元素，并进行如下修改：

1

<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>

修改为：

1

<a href="#" class="dropdown-toggle" data-hover="dropdown" data-close-others="true">Dropdown</a>

你还可以添加一个参数data-delay="1000"，它表示下拉列表的消失延迟时间（默认是500毫秒）。例如：

1

<a href="#" class="dropdown-toggle" data-hover="dropdown" data-close-others="true" data-delay="1000">Dropdown</a>

4. 取消延迟

如果你希望完全取消延迟，可以直接修改bootstrap-hover-dropdown.js文件中的配置，将delay: 500改为delay: 0。

找到并修改如下代码：

1

delay: 500

改为：

1

delay: 0

这样就可以取消掉下拉菜单的延迟时间。

[nodejs]UEditor+nodejs+seaweedfs图片服务器搭建

Wed, 18 May 2016 03:16:01 +0000

1. UEditor + Node.js 图片上传

UEditor是百度开源的富文本编辑器，功能比较强大。
下载地址是：http://ueditor.baidu.com/website/download.html
目前提供：PHP、ASP、.Net、JSP版本。UEditor主要是以前端HTML、CSS、JS为主的，之所以按各种动态语言再细分版本，我的理解是主要是在图片上传这一涉及到与服务器交互的功能上。
在众多版本中，没有提供Node.js的版本，下面将介绍如何用PHP版本的UEditor改造成Node.js版本的UEditor。
咨询查看PHP版本的所有请求，发现action参数值包括config（配置文件）、uploadimage（图片上传）、listimage（在线管理）、catchimage（抓取图片），所以只需要重写这4个请求就基本上实现了我们的需求。

1.1 修改UEditor的`ueditor.config.js`的`serverUrl`属性：

1

serverUrl: '/ue/uploads'

1.2 将`ueditor/php/config.json`文件名修改为`config.js`并移动到`ueditor`目录下。

1.3 接下来主要在Node.js端编写对应的四个action就好，图片上传使用了`connect-busboy`中间件。代码如下：

 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
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104


// 图片上传
var path = require('path');
var uploadsPath = path.resolve('public/uploads') + '/'; // 存储图片的路径
var busboy = require('connect-busboy');
app.use(busboy({
 limits: {
 fileSize: 10 * 1024 * 1024 // 10MB
 }
}));
var action = {
 // 上传图片
 uploadimage: function (req, res) {
 var fstream;
 req.pipe(req.busboy);
 req.busboy.on('file', function (fieldname, file, filename, encoding, mimetype) {
 var filesize = 0;
 var ext = path.extname(filename);
 var newFilename = (new Date() - 0) + ext;
 fstream = fs.createWriteStream(uploadsPath + newFilename);
 file.on('data', function (data) {
 filesize = data.length;
 });
 fstream.on('close', function () {
 console.log(JSON.stringify({
 "originalName": filename,
 "name": newFilename,
 "url": '/uploads/' + newFilename,
 "type": ext,
 "size": filesize,
 "state": "SUCCESS"
 }));
 res.send(JSON.stringify({
 "originalName": filename,
 "name": newFilename,
 "url": '/uploads/' + newFilename,
 "type": ext,
 "size": filesize,
 "state": "SUCCESS"
 }));
 });
 file.pipe(fstream);
 });
 },
 // 获取配置文件
 config: function (req, res) {
 return res.redirect('/js/UEditor/config.js');
 },
 // 在线管理
 listimage: function (req, res) {
 fs.readdir(uploadsPath, function (err, files) {
 var total = 0, list = [];
 files.sort().splice(req.query.start, req.query.size).forEach(function (a, b) {
 /^.+\..+$/.test(a) &&
 list.push({
 url: '/uploads/' + a,
 mtime: new Date(fs.statSync(uploadsPath + a).mtime).getTime()
 });
 });
 total = list.length;
 res.json({state: total === 0 ? 'no match file' : 'SUCCESS', list: list, total: total, start: req.query.start});
 });
 },
 // 抓取图片（粘贴时将图片保存到服务端）
 catchimage: function (req, res) {
 var list = [];
 req.body.source.forEach(function (src, index) {
 http.get(src, function (_res) {
 var imagedata = '';
 _res.setEncoding('binary');
 _res.on('data', function (chunk) {
 imagedata += chunk
 });
 _res.on('end', function () {
 var pathname = url.parse(src).pathname;
 var original = pathname.match(/[^/]+\.\w+$/g)[0];
 var suffix = original.match(/[^\.]+$/)[0];
 var filename = Date.now() + '.' + suffix;
 var filepath = uploadsPath + 'catchimages/' + filename;
 fs.writeFile(filepath, imagedata, 'binary', function (err) {
 list.push({
 original: original,
 source: src,
 state: err ? "ERROR" : "SUCCESS",
 title: filename,
 url: '/uploads/catchimages/' + filename
 });
 })
 });
 })
 });
 var f = setInterval(function () {
 if (req.body.source.length === list.length) {
 clearInterval(f);
 res.json({state: "SUCCESS", list: list});
 }
 }, 50);
 }
};
app.get('/ue/uploads', function (req, res) {
 action[req.query.action](req, res);
});
app.post('/ue/uploads', function (req, res) {
 action[req.query.action](req, res);
});

以上主要参考了博客：http://www.xiaoboy.com/detail/1341545081.html

2. GoLang的安装与配置

1中UEditor的图片上传到Node.js服务器中的/public/uploads/文件夹中，如果需要高存储、可移植、可扩展等特性的图片服务器，则需要配置专门的服务器。本文选用的是开源的图片（文件）分布式服务器seaweedfs。
Github地址：https://github.com/chrislusf/seaweedfs
该服务器使用GoLang编写，所以需要安装配置GoLang。中国的下载地址：http://www.golangtc.com/download，根据自己的操作系统选择特定的包下载即可。本文演示的Windows 7 x64下载安装。傻瓜式安装好之后，需要配置一下环境变量：

1
2
3


GOROOT=D:\Go16
GOPATH=D:\ImageServer\seaweedfs
PATH=D:\Go16\bin

GOPATH环境变量，这个变量很重要，我自己写的代码要放到这个变量中配置的目录中，go编译器才会找到并编译。

3. seaweedfs的编译运行

Github上把seaweedfs的代码clone下来，然后安装makefile中的执行也可以直接makefile。在seaweedfs中执行控制台：

1
2
3
4
5
6


go clean -i -v ./go/weed/

rm –f weed #for linux

go get -v –d ./go/weed
go build -v -o weed ./go/weed

其中在get依赖的时候有可能有些依赖包不能下载，需要自己手动下载，放入：\seaweedfs\src目录中。
推荐一个go下载包地址：https://gopm.io/download?pkgname=golang.org/x/net
Build之后会在seaweedfs中生成一个weed，也可以将其改名为weed.exe。这个时候就可以启动weed。以本机为演示：

1

weed master

1

weed volume --dir="./tmp/data1" --max=5 --mserver="localhost:9333" --port=8080 &

按照github的描述上传、下载图片都没有问题。至此基本的图片服务器搭建完成。

修改Node.js的图片上传代码如下：

 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
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113


// 图片上传
var path = require('path');
var multipart = require('connect-multiparty');
var multipartMiddleware = multipart();
function curlPostAssign(res, filepath, filename, filesize) {
 request.post(config.url_image + 'dir/assign',{},
 function (error, response, body) {
 if (!error && response.statusCode == 200) {
 assign = eval('(' + body + ')');
 var result = {};
 result.res = res;
 result.json = JSON.stringify({
 "originalName": filename,
 "name": assign.fid,
 "url": '/res?fid=' + assign.fid,
 "type": ext,
 "size": filesize,
 "state": "SUCCESS"
 });
 curlPostWrite(assign.fid, filepath, assign.publicUrl, result);
 var ext = path.extname(filename);
 } else {
 console.log("Image server assign error...")
 }
 });
}
function curlPostWrite(fid, tmp_file, publicUrl, result) {
 var files = [
 {urlKey: "file1", urlValue: tmp_file}
 ]
 var options = {
 host: publicUrl.split(":")[0],
 port: publicUrl.split(":")[1],
 method: "POST",
 path: "/" + fid
 }
 var req = http.request(options, function(res){
 res.on("data", function(chunk){
 })
 })

 req.on('error', function(e){
 console.log('problem with request:' + e.message);
 console.log(e);
 })
 postfile.postFile(files, req, result);
}
var action = {
 // 上传图片
 uploadimage: function(req, res) {
 curlPostAssign(res, req.files.upfile.path, req.files.upfile.originalFilename, req.files.upfile.size);
 },
 // 获取配置文件
 config: function (req, res) {
 return res.redirect('/js/UEditor/config.js');
 },
 // 在线管理
 listimage: function (req, res) {
 fs.readdir(uploadsPath, function (err, files) {
 var total = 0, list = [];
 files.sort().splice(req.query.start, req.query.size).forEach(function (a, b) {
 /^.+\..+$/.test(a) &&
 list.push({
 url: '/uploads/' + a,
 mtime: new Date(fs.statSync(uploadsPath + a).mtime).getTime()
 });
 });
 total = list.length;
 res.json({state: total === 0 ? 'no match file' : 'SUCCESS', list: list, total: total, start: req.query.start});
 });
 },
 // 抓取图片（粘贴时将图片保存到服务端）
 catchimage: function (req, res) {
 var list = [];
 req.body.source.forEach(function (src, index) {
 http.get(src, function (_res) {
 var imagedata = '';
 _res.setEncoding('binary');
 _res.on('data', function (chunk) {
 imagedata += chunk
 });
 _res.on('end', function () {
 var pathname = url.parse(src).pathname;
 var original = pathname.match(/[^/]+\.\w+$/g)[0];
 var suffix = original.match(/[^\.]+$/)[0];
 var filename = Date.now() + '.' + suffix;
 var filepath = uploadsPath + 'catchimages/' + filename;
 fs.writeFile(filepath, imagedata, 'binary', function (err) {
 list.push({
 original: original,
 source: src,
 state: err ? "ERROR" : "SUCCESS",
 title: filename,
 url: '/uploads/catchimages/' + filename
 });
 })
 });
 })
 });
 var f = setInterval(function () {
 if (req.body.source.length === list.length) {
 clearInterval(f);
 res.json({state: "SUCCESS", list: list});
 }
 }, 50);
 }
};
app.get('/ue/uploads', multipartMiddleware, function (req, res) {
 action[req.query.action](req, res);
});
app.post('/ue/uploads', multipartMiddleware, function (req, res) {
 action[req.query.action](req, res);
});

运行效果：

[MySQL]MySQL-Front(Windows)定期备份

Thu, 05 May 2016 03:08:32 +0000

数据库的服务中，定期备份是一项极其重要的工作。
对于大多数用GUI（大部分用户使用MySQL-Front、Navicat或者MySQL-WorkBench）简单管理数据库的用户来说，基于交互的备份方式简单易学。

下面简单介绍如何使用MySQL-Front(版本5.3)定期备份数据库：

连接上数据库之后，“其他”->“Jobs”->“新建”->“输出”

选择test数据库，点击下一步。
指定输出地址“D:\test.sql”，注意字符集一般选择UTF-8

下一步，指定输出的内容，一定要勾选数据。
指定备份的时间，以及时间间隔。

完成之后在定时任务的栏目中会有一个名为test的job
如果想立即执行，右击点击运行即可。

[Spring]Idea创建Spring框架及新增自己的Controller

Thu, 28 Apr 2016 07:24:58 +0000

如上一篇博文介绍的创建Maven工程的方法，创建Spring的Maven工程。

Pom文件的配置：

 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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62


<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://www.w3.org/2001/XMLSchema-instance">
 <modelVersion>4.0.0</modelVersion>
 <groupId>com.coinidea</groupId>
 <artifactId>web</artifactId>
 <packaging>war</packaging>
 <version>1.0-SNAPSHOT</version>
 <name>hive.web Maven Webapp</name>
 <url>http://maven.apache.org</url>
 <properties>
 <spring.version>4.2.5.RELEASE</spring.version>
 </properties>
 <dependencies>
 <dependency>
 <groupId>junit</groupId>
 <artifactId>junit</artifactId>
 <version>3.8.1</version>
 <scope>test</scope>
 </dependency>
 <!--spring-->
 <dependency>
 <groupId>org.springframework</groupId>
 <artifactId>spring-context</artifactId>
 <version>${spring.version}</version>
 </dependency>
 <dependency>
 <groupId>org.springframework</groupId>
 <artifactId>spring-core</artifactId>
 <version>${spring.version}</version>
 </dependency>
 <dependency>
 <groupId>org.springframework</groupId>
 <artifactId>spring-web</artifactId>
 <version>${spring.version}</version>
 </dependency>
 <dependency>
 <groupId>org.springframework</groupId>
 <artifactId>spring-webmvc</artifactId>
 <version>${spring.version}</version>
 </dependency>
 <dependency>
 <groupId>org.springframework</groupId>
 <artifactId>spring-test</artifactId>
 <version>${spring.version}</version>
 </dependency>
 </dependencies>
 <build>
 <finalName>web</finalName>
 </build>
 <repositories>
 <repository>
 <id>people.apache.snapshots</id>
 <url>http://repository.apache.org/content/groups/snapshots-group/</url>
 <releases>
 <enabled>false</enabled>
 </releases>
 <snapshots>
 <enabled>true</enabled>
 </snapshots>
 </repository>
 </repositories>
</project>

本地安装Tomcat，如果不知道Tomcat的安装方式，请自己搜索一下。

Tomcat的配置

Run -> Edit Configurations，点击”+”，选择Tomcat Local。
在“Server” Tab，配置Tomcat的本地路径；在“Deployment”选择”+”->Artifact。
运行起来之后，会弹出默认的Hello World。
新建自己的Controller
web.xml的配置

 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
33
34
35
36
37
38


<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
 version="3.1">
 <context-param>
 <param-name>contextConfigLocation</param-name>
 <param-value>/WEB-INF/applicationContext.xml</param-value>
 </context-param>
 <listener>
 <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
 </listener>
 <servlet>
 <servlet-name>dispatcher</servlet-name>
 <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
 <load-on-startup>1</load-on-startup>
 </servlet>
 <servlet-mapping>
 <servlet-name>dispatcher</servlet-name>
 <url-pattern>/</url-pattern>
 </servlet-mapping>
 <servlet-mapping>
 <servlet-name>default</servlet-name>
 <url-pattern>*.css</url-pattern>
 </servlet-mapping>
 <servlet-mapping>
 <servlet-name>default</servlet-name>
 <url-pattern>*.gif</url-pattern>
 </servlet-mapping>
 <servlet-mapping>
 <servlet-name>default</servlet-name>
 <url-pattern>*.jpg</url-pattern>
 </servlet-mapping>
 <servlet-mapping>
 <servlet-name>default</servlet-name>
 <url-pattern>*.js</url-pattern>
 </servlet-mapping>
</web-app>

值得注意的是，上述的servlet-mapping的default配置解决了Spring静态文件404的问题。
其他所有的URL都会通过dispatcher的配置进行URL mapping。
7. dispatcher-servlet.xml的配置

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


<beans xmlns="http://www.springframework.org/schema/beans"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xmlns:context="http://www.springframework.org/schema/context"
 xmlns:task="http://www.springframework.org/schema/task"
 xsi:schemaLocation="http://www.springframework.org/schema/beans
 http://www.springframework.org/schema/beans/spring-beans.xsd
 http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd
 http://www.springframework.org/schema/task http://www.springframework.org/schema/task/spring-task-3.0.xsd"
 default-lazy-init="false">
 <bean class="org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerMapping"/>
 <bean class="org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter"/>
 <!-- 启用spring mvc 注解 -->
 <context:annotation-config />
 <!-- 设置使用注解的类所在的jar包 -->
 <context:component-scan base-package="com.coinidea.controller"/>
 <!-- 对转向页面的路径解析。prefix：前缀， suffix：后缀 -->
 <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
 <property name="prefix" value="/WEB-INF/views/"/>
 <property name="suffix" value=".jsp"/>
 </bean>
</beans>

指定了jsp的view文件夹在/WEB-INF/views/以及运行使用Spring的注解功能。所有的Controller都会去package com.coinidea.controller中寻找。
8. FirstHello Controller

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


package com.cmri.web.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

@Controller
@RequestMapping("/first")
public class TestController {
 @RequestMapping("hello")
 public ModelAndView view() {
 ModelAndView mv = new ModelAndView();
 mv.addObject("message", "HelloWorld!");
 mv.setViewName("hello");
 return mv;
 }
}

hello.jsp在views文件夹中：

1
2
3
4
5
6
7
8
9


<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
 <title>hello world</title>
</head>
<body>
${message}
</body>
</html>

当浏览器中访问http://localhost:8080/first/hello会显示：

9. Java Web API Controller
当需要响应Ajax的请求时，函数需要加上注解：

1
2
3
4
5


@RequestMapping("ajax")
@ResponseBody
public String ajax() {
 return "Hello world";
}

[Java]Java通过JDBC连接运行Hive

Thu, 28 Apr 2016 07:11:02 +0000

Hadoop的版本繁多，一旦版本不对Hive的连接和操作可能会报各种各样的错误，这个时候需要用到上一篇博文提到的Maven来管理这些lib。

Hadoop 以及 Hive 的版本查看：

1
2


hadoop version
hive --version

pom 的配置如下：

 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
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116


<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
 <modelVersion>4.0.0</modelVersion>
 <groupId>com.coinidea</groupId>
 <artifactId>hive</artifactId>
 <packaging>war</packaging>
 <version>1.0-SNAPSHOT</version>
 <name>hive.web Maven Webapp</name>
 <url>http://maven.apache.org</url>
 <properties>
 <hadoop.version>2.5.0-cdh5.3.2</hadoop.version>
 <hive.version>0.13.1-cdh5.3.2</hive.version>
 </properties>
 <dependencies>
 <!--hadoop和hive-->
 <dependency>
 <groupId>org.apache.hive</groupId>
 <artifactId>hive-jdbc</artifactId>
 <version>${hive.version}</version>
 </dependency>
 <dependency>
 <groupId>org.apache.hive</groupId>
 <artifactId>hive-common</artifactId>
 <version>${hive.version}</version>
 </dependency>
 <dependency>
 <groupId>org.apache.hive</groupId>
 <artifactId>hive-exec</artifactId>
 <version>${hive.version}</version>
 </dependency>
 <dependency>
 <groupId>org.apache.hive</groupId>
 <artifactId>hive-metastore</artifactId>
 <version>${hive.version}</version>
 </dependency>
 <dependency>
 <groupId>org.apache.hive</groupId>
 <artifactId>hive-service</artifactId>
 <version>${hive.version}</version>
 </dependency>
 <dependency>
 <groupId>org.apache.hadoop</groupId>
 <artifactId>hadoop-common</artifactId>
 <version>${hadoop.version}</version>
 <exclusions>
 <exclusion>
 <groupId>org.mortbay.jetty</groupId>
 <artifactId>jetty</artifactId>
 </exclusion>
 <exclusion>
 <groupId>org.mortbay.jetty</groupId>
 <artifactId>jetty-util</artifactId>
 </exclusion>
 <exclusion>
 <groupId>org.mortbay.jetty</groupId>
 <artifactId>jsp-2.1</artifactId>
 </exclusion>
 <exclusion>
 <groupId>org.mortbay.jetty</groupId>
 <artifactId>jsp-api-2.1</artifactId>
 </exclusion>
 <exclusion>
 <groupId>org.mortbay.jetty</groupId>
 <artifactId>servlet-api-2.1</artifactId>
 </exclusion>
 <exclusion>
 <groupId>javax.servlet</groupId>
 <artifactId>servlet-api</artifactId>
 </exclusion>
 <exclusion>
 <groupId>javax.servlet.jsp</groupId>
 <artifactId>jsp-api</artifactId>
 </exclusion>
 <!--tomcat7中自带jasper.jar-->
 <exclusion>
 <groupId>tomcat</groupId>
 <artifactId>jasper-compiler</artifactId>
 </exclusion>
 <exclusion>
 <groupId>tomcat</groupId>
 <artifactId>jasper-runtime</artifactId>
 </exclusion>
 </exclusions>
 </dependency>
 <dependency>
 <groupId>cglib</groupId>
 <artifactId>cglib-nodep</artifactId>
 <version>2.2.2</version>
 </dependency>
 </dependencies>
 <build>
 <finalName>hive</finalName>
 </build>
 <repositories>
 <repository>
 <id>cloudera</id>
 <url>https://repository.cloudera.com/artifactory/cloudera-repos</url>
 <releases>
 <enabled>true</enabled>
 </releases>
 <snapshots>
 <enabled>false</enabled>
 </snapshots>
 </repository>
 <repository>
 <id>people.apache.snapshots</id>
 <url>http://repository.apache.org/content/groups/snapshots-group/</url>
 <releases>
 <enabled>false</enabled>
 </releases>
 <snapshots>
 <enabled>true</enabled>
 </snapshots>
 </repository>
 </repositories>
</project>

新建 HiveTest.java

 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


package com.coinidea;

import java.sql.*;

public class HiveTest {
 /* Start server: hive --service hiveserver2 --hiveconf hive.server2.thrift.port=10000 */
 private static String driverName = "org.apache.hive.jdbc.HiveDriver";

 /**
 * @param args
 * @throws SQLException
 */
 public static void main(String[] args) throws SQLException {
 try {
 Class.forName(driverName);
 } catch (ClassNotFoundException e) {
 e.printStackTrace();
 System.exit(1);
 }
 //replace "hive" here with the name of the user the queries should run as
 Connection con = DriverManager.getConnection("jdbc:hive2://192.168.*.*:10000/default", "hive", "hive");
 Statement stmt = con.createStatement();
 String table_user = "test.user";
 String user_sql = "select uri from " + table_user + " limit 10";
 System.out.println("Running: " + user_sql);
 ResultSet users = stmt.executeQuery(user_sql);
 while (users.next()) {
 System.out.println("USER:" + users.getString(1));
 }
 stmt.close();
 }
}

运行 HiveTest 之前，需要启动 HiveServer2

1

hive --service hiveserver2 --hiveconf hive.server2.thrift.port=10000

[Java]IntelliJ IDEA创建Maven工程

Thu, 28 Apr 2016 07:04:11 +0000

IntelliJ IDEA版本：15.0

之前一直在用Eclipse/MyEclipse写Java和Android，听说IntelliJ IDEA也是非常不错的IDE。是PHPStorm公司的产品。

Maven是什么？

我也是最近才接触。之前写Java一直不多，本科的时候写过一段时间的JSP，前段时间写了写Android。但是Java有一个比较严重的问题就是lib的依赖一直管理，而lib的版本有特别多。记得之前经常做的事事去网上到处下lib，然后build path再add external library。这有一些问题，就是lib的管理杂乱无章而且版本不好控制，代码也不好共享。Maven是一款能很好处理项目各种库版本及依赖的项目管理工具。

建立Maven工程

File->New->Project，选择Maven即可。

如果需要指定项目工程的类型：app或者webapp等，可以勾选“Create from archetype”，然后选择对应的类型即可。
输入GroupId和ArtifactId。

我的理解是GroupId是工程隶属于那个整体的大工程或者项目的名称，ArtifactId是本工程的名称和作用。
输入工程的文件夹名称以及路径
建立好Maven工程之后，在主界面建立点击“Enable Auto-Import”，不然Maven管理的lib并不会自动导入到工程中，需要手动导入，不是很方便。
View->Tool Window->Maven Projects，会弹出工具窗口，其中主要用到clean，compile。
可以用内置的Maven，也可以用自己下载的Maven。如果需要用自己下载的，File->Settings。

配置项目pom文件

 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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64


<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
 <modelVersion>4.0.0</modelVersion>
 <groupId>com.coinidea</groupId>
 <artifactId>maven.text</artifactId>
 <version>1.0-SNAPSHOT</version>

 <!-- properties version -->
 <properties>
 <spring.version>4.2.5.RELEASE</spring.version>
 <hadoop.version>2.5.0-cdh5.3.2</hadoop.version>
 <hive.version>0.13.1-cdh5.3.2</hive.version>
 </properties>
 <dependencies>
 <!-- junit -->
 <dependency>
 <groupId>junit</groupId>
 <artifactId>junit</artifactId>
 <version>3.8.1</version>
 <scope>test</scope>
 </dependency>
 <!--spring-->
 <dependency>
 <groupId>org.springframework</groupId>
 <artifactId>spring-context</artifactId>
 <version>${spring.version}</version>
 </dependency>
 <dependency>
 <groupId>org.springframework</groupId>
 <artifactId>spring-core</artifactId>
 <version>${spring.version}</version>
 </dependency>
 <dependency>
 <groupId>org.springframework</groupId>
 <artifactId>spring-web</artifactId>
 <version>${spring.version}</version>
 </dependency>
 <dependency>
 <groupId>org.springframework</groupId>
 <artifactId>spring-webmvc</artifactId>
 <version>${spring.version}</version>
 </dependency>
 <dependency>
 <groupId>org.springframework</groupId>
 <artifactId>spring-test</artifactId>
 <version>${spring.version}</version>
 </dependency>
 </dependencies>
 <!-- 指定maven repository -->
 <repositories>
 <repository>
 <id>people.apache.snapshots</id>
 <url>http://repository.apache.org/content/groups/snapshots-group/</url>
 <releases>
 <enabled>false</enabled>
 </releases>
 <snapshots>
 <enabled>true</enabled>
 </snapshots>
 </repository>
 </repositories>
</project>

点击clean和compile，这样lib就会下载到本地的maven库中并自动导入到当前工程。

[Git]Git配置和取消代理

Sat, 09 Apr 2016 08:02:47 +0000

在配置 Git 使用代理时，可以通过以下命令来设置和取消代理：

配置 Git 使用代理

要为 Git 配置 HTTP 和 HTTPS 代理，可以使用以下命令：

1
2
3
4
5


# 配置 HTTP 代理
git config --global http.proxy http://127.0.0.1:1080

# 配置 HTTPS 代理
git config --global https.proxy https://127.0.0.1:1080

取消 Git 代理配置

如果需要取消代理设置，可以使用以下命令：

1
2
3
4
5


# 取消 HTTP 代理
git config --global --unset http.proxy

# 取消 HTTPS 代理
git config --global --unset https.proxy

解释

git config --global http.proxy <proxy-url>：配置全局 HTTP 代理。
git config --global https.proxy <proxy-url>：配置全局 HTTPS 代理。
git config --global --unset http.proxy：取消全局 HTTP 代理配置。
git config --global --unset https.proxy：取消全局 HTTPS 代理配置。

通过这些命令，可以方便地在需要时开启或关闭 Git 的代理设置。

[SAE]SAE MySQL跨应用授权

Sat, 09 Apr 2016 07:50:12 +0000

在 SAE（新浪云计算）收费越来越贵的今天，节约成本变得越来越重要。2016 年三月开始，共享型 MySQL 也开始收费，这时多个应用共享一个 MySQL 是节约的一种重要方式。

实现多个应用共享一个 MySQL 的步骤

假设有多个应用（APP1, APP2, APP3）：其中共享型 MySQL 仅 APP1 保留，APP2 和 APP3 使用 APP1 的 MySQL。
导出 APP2 和 APP3 的 MySQL 作为备份，然后删除 APP2 和 APP3 的 MySQL，这样 APP2 和 3 的 MySQL 相当于没有初始化即不会再被扣费。
向 APP1 中的 MySQL 导入 APP2 和 3 的数据库文件（*.sql），导入之前注意表名别冲突。
选择 APP1 的 MySQL，点击跨应用授权可选择本帐号应用或其他帐号应用，此处授权到 APP2、APP3 应用。
编写脚本，显示本应用 APP1 的 MySQL 信息，供授权应用 APP2 和 APP3 使用（此处会泄露数据库的相关信息，请谨慎操作并及时删除）。

注意事项

安全性：由于脚本会暴露数据库的用户名、密码等敏感信息，请确保在使用完后及时删除该脚本，避免信息泄露。
表名冲突：在导入 APP2 和 APP3 的数据库文件到 APP1 的 MySQL 时，确保表名不冲突。如果有冲突，可以考虑在导入前修改表名。
授权管理：在 SAE 管理平台上进行跨应用授权时，确保只授权必要的应用，避免不必要的权限暴露。

通过这些步骤，可以有效地节约 SAE MySQL 的使用成本，同时确保多个应用能够正常访问共享的数据库。

[nodejs]nodejs express异常捕获

Thu, 10 Mar 2016 09:30:18 +0000

由于 Node.js 是非阻塞单进程单线程的，一旦 Node.js 抛出异常，整个服务就会停掉，服务将会非常不稳定。解决方法：

使程序鲁棒：在有可能出现异常的地方，全部使用 try { } catch(){ } 进行嵌套。
Express 的错误捕获机制：作为 Node.js 比较常用的框架，其实 Node.js 自己也有一定的异常错误捕获机制。

1
2
3
4
5
6


// Express' errorHandler
function errorHandler(err, req, res, next) {
 console.error(err.stack);
 res.status(500).send('Something broke!');
}
app.use(errorHandler);

使用 domain 模块：先下载 domain 模块，npm install domain

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


// Domain 捕获异常
const domain = require('domain');

app.use(function(req, res, next) {
 var reqDomain = domain.create();
 reqDomain.on('error', function(err) {
 console.log(err.stack);
 res.statusCode = 500;
 res.end(err.message + '\n');
 reqDomain.dispose();
 });
 reqDomain.add(req);
 reqDomain.add(res);
 reqDomain.run(next);
});

使用 forever 启动 app.js：forever 可以看做是一个 Node.js 的守护进程，能够启动、停止、重启我们的 app 应用。

1

forever start app.js

通过这些方法，可以提高 Node.js 服务的稳定性，防止因未捕获的异常导致整个服务崩溃。

[Memcache]PHP连接测试Memcache

Tue, 08 Mar 2016 12:42:07 +0000

1
2
3
4
5


<?php
$memcache_obj = memcache_connect('127.0.0.1', 11211);
$memcache_obj->add("name", "test");
echo $memcache_obj->get("name");
?>

如果你在使用这段代码时遇到问题，请确保以下几点：

Memcache 服务是否已启动：确保你的 Memcache 服务在 127.0.0.1 的 11211 端口上运行。
PHP Memcache 扩展是否已安装和启用：确保你已经安装并启用了 PHP 的 Memcache 扩展。

你可以通过以下命令安装 Memcache 扩展：

1

sudo apt-get install php-memcache

并在 php.ini 文件中启用扩展：

1

extension=memcache.so

重启你的 Web 服务器以应用更改：

1

sudo service apache2 restart

或者，如果你使用的是 Nginx：

1

sudo service nginx restart

如果你使用的是 memcached 而不是 memcache，请确保使用正确的扩展和函数：

1
2
3
4
5
6


<?php
$memcached = new Memcached();
$memcached->addServer('127.0.0.1', 11211);
$memcached->set("name", "test");
echo $memcached->get("name");
?>

这种情况下，你需要安装 php-memcached 扩展：

1

sudo apt-get install php-memcached

[Javascript]网页调用打印机

Tue, 01 Mar 2016 09:17:03 +0000

有人反应点击没反应，目前我在Chrome和IE都测试过是可以的：

我想了一下可能的原因应该是没有引入jQuery导致的，目前加入CDN上的jQuery，我把代码更新为：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


<html>
<head>
 <meta charset="utf-8">
 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
 <title></title>
</head>
<body>
 <div id='div1'>把要打印的内容放这里</div>
 <div id="div2">div2的内容</div>
 <a href="javascript:printHTML('#div1')" target="_self">打印</a>
 <script language="javascript">
 function printHTML(page) {
 var bodyHTML = window.document.body.innerHTML;
 window.document.body.innerHTML = $(page).html();
 window.print();
 window.document.body.innerHTML = bodyHTML;
 }
 </script>
</body>
</html>

原文 Javascript代码，依赖jQuery：

1
2
3
4
5
6


function printHTML(page) {
 var bodyHTML = window.document.body.innerHTML;
 window.document.body.innerHTML = $(page).html();
 window.print();
 window.document.body.innerHTML = bodyHTML;
}

[Javascript]UEditor的动态加载和隐藏

Fri, 26 Feb 2016 09:31:29 +0000

基于UEditor，实现了UEditor的动态加载和隐藏。

Github: https://github.com/hujiulin/UEditorComponent

1. 初始页面

2. 点击左侧DIV

3. 点击右侧DIV

4. 点击页面空白位置

[Hive]Need to specify partition columns because the destination table is partition

Tue, 23 Feb 2016 13:36:11 +0000

当向已经分区的表插入数据时，有可能会报错：

1

Need to specify partition columns because the destination table is partition

原因是需要在插入的数据中指定分区字段的数值是多少。

比如：

建表语句：

1
2
3
4
5
6
7
8
9


CREATE TABLE test (
 starttime STRING,
 endtime STRING,
 title STRING
)
PARTITIONED BY (username STRING)
ROW FORMAT DELIMITED
FIELDS TERMINATED BY '|'
STORED AS TEXTFILE;

1
2
3
4
5
6
7
8
9


CREATE TABLE test2 (
 starttime STRING,
 endtime STRING,
 title STRING
)
PARTITIONED BY (username STRING)
ROW FORMAT DELIMITED
FIELDS TERMINATED BY '|'
STORED AS TEXTFILE;

插入语句：

1
2


INSERT INTO TABLE test PARTITION(username='admin')
SELECT starttime, endtime, title FROM test2 WHERE username = 'admin';

[Apache]Apache配置支持流媒体服务

Tue, 05 Jan 2016 10:00:00 +0000

Apache配置

下载mod_flvx.so、mod_h264_streaming.so模块。
注意：Apache以及模块的x86、x64的版本对应 [下述模块针对Apache x86 2.2及以下版本]。
下载地址：链接：http://pan.baidu.com/s/1dEzYX4d 密码：jb0i

编辑apache\conf\httpd.conf，查找LoadModule，在LoadModule的最后面（或者附近）配置：

1
2
3
4


LoadModule flvx_module modules/mod_flvx.so
AddHandler flv-stream .flv
LoadModule h264_streaming_module modules/mod_h264_streaming.so
AddHandler h264-streaming.extensions .mp4

重启Apache即可，如果Apache不能启动，请确认模块的版本是否与Apache版本一致。

视频播放示例

ckplayer下载
网页视频播放器不限制，本示例使用的是ckplayer，下载地址是：
http://www.ckplayer.com/
配置方式：
http://www.ckplayer.com/tool/flashvars.htm
将ckplayer文件夹放置网站根目录，将示例视频example.flv放置网站根目录。

新建video.html，代码如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


<html>
<meta charset="utf8">
<head>
<title>视频流播放</title>
</head>
<body>
<div id="a1"></div>
<script type="text/javascript" src="/ckplayer/ckplayer.js" charset="utf-8"></script>
<script type="text/javascript">
 var flashvars={
 f:'http://localhost/example.flv',
 c:0
 };
 var params={bgcolor:'#FFF',allowFullScreen:true,allowScriptAccess:'always',wmode:'transparent'};
 CKobject.embedSWF('/ckplayer/ckplayer.swf','a1','ckplayer_a1','600','400',flashvars,params);
</script>
</body>
</html>

打开浏览器访问http://localhost/video.html，可以拖动视频滚动条。
Chrome效果：

IE效果：

————Update 20160106————
之前的测试有问题，因为flv太小了，所以应该是local下载下来再播放的。
Apache视频流验证的方法是：
准备一个较大MP4/FLV，替换上述的视频网址；
打开Chrome [建议使用Chrome浏览器]，输入http://localhost/example.mp4?start=10；
如果视频能从第10秒开始播放，并支持拖动播放，Apache端配置成功。

上述的ckplayer经验证，依然需要等待下载完成才可顺序播放，建议使用video.js。不过需要浏览器支持HTML5。
html代码如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


<html>
<head>
 <link href="/video-js/video-js.css" rel="stylesheet">
 <!-- If you'd like to support IE8 -->
 <script src="/video-js/ie8/videojs-ie8.min.js"></script>
</head>
<body>
 <video id="my-video" class="video-js" controls preload="auto" width="auto" height="auto" poster="http://vjs.zencdn.net/v/oceans.png" data-setup="{}">
 <source src="/video/example.mp4" type='video/mp4'>
 <p class="vjs-no-js">
 To view this video please enable JavaScript, and consider upgrading to a web browser that
 <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
 </p>
 </video>
 <script src="/video-js/video.js"></script>
</body>
</html>

经测试，视频在未加载完全的情况下，能拖动到任意位置开始播放，至此，Apache实现了伪视频流播放。

[年终总结]我的2015

Fri, 01 Jan 2016 13:56:14 +0000

转眼2015年过去了，今天是2016年的第一天。今天做得最有成就感的一件事就是把大学积攒这么多年的衣服，捐了一大包去学校。我是一个很奇怪的人，一些旧东西时常不会扔掉，这样导致搬家的时候非常的麻烦。之前听说过一种观点叫归纳——断、舍、离。于是尝试扔掉自己的旧的垃圾和废物，使自己的生活重新得到整理。

去年到现在，差不多工作半年了，也进入社会半年了。我以为我准备得足够充分了，其实还是吃瘪了。就跟预估工程量一样，有一个定律讲的是无论你怎么估算工程量，你都会少估算1/3的工作时间，即使考虑掉了这条定律。

2014年的年终总结中我提到：

我希望我的2015年能做下列清单中的Items：

旅行

1.1 去哈尔滨 [Get √]
1.2 去西藏
1.3 去云南 [Get √]
坚持在自己的个人博客上完成技术的学习和分享，写出高质量的博客 [Get√，应该能坚持下来，不过质量慢慢提高吧]。

比较庆幸的事，博客的UV访问量已经从每天的1、2个人到现在的破十了，其中有一两篇的访问量蛮高的，有一篇目前能在百度搜索关键词“Yii Redis”的第一页找到，心里十分高兴。虽然目前是第一页最后一条。
坚持写出更高质量的代码，并在GitHub上有所贡献，希望自己的某个项目能够获得100个Star。

这个失败了，目前GitHub的累计Star最多也就20多，希望自己多多努力。
开源一款基于ThinkPHP的门户系统 [Get√，不过未开源]。
思考自己的未来，专注的研究某项技术。

路漫漫其修远兮，吾将上下而求索。
看一些像样的书籍：

6.1 吴军的《文明之光》
```
 购买了，但是没有读多少。
```
6.2 [加] 马尔科姆•格拉德威尔的《逆转》
```
 未完成
```
6.3 看完《格鲁夫给经理人的第一课》
```
 未完成
```
6.4 看完《Effective C++》
```
 未完成
```
6.5 《怪诞行为学》 [Get√]
好好学学英语，争取出国自助游。

未完成
从头做一次leetcode中的所有题目。

部分完成，使用PHP做了部分题目

除此之外，最令我欣喜的事儿是：

读了一些书：《从0到1》，《Don’t make me think》，《Android第一行代码》
CoinIdea进行了一个比较漂亮的改版 [自己独立设计，使用AI制图]，感觉越来越好了。
自己的耐心、脾气、秉性虽然有不足，但是还是有一定进步。
Android在入门的道路上了。
PHP和MySQL有一定新的认识。
我竟然打了那么多字：

OK，接下来展望一下2016年，这务必是关键的一年。我的生命中仿佛每隔4-5年会出现一些大事，Just Face It.

希望练习好英语，考过托业。
iOS的入门，Android的深度学习以及应用；PHP、MySQL的进阶，使用Yii开发一套OA。
我自己身边的人的英语考试顺风顺水。
父母身体健康。
阅读《文明之光》。
阅读完《PHP MySQL和WEB开发》以及《深入理解PHP高级技巧：面向对象与核心技术》。
希望能捡回自己的C#，WorldWind。
在数据可视化上有一定的突破。
希望自己空余时间打理的CoinIdea越来越好。
去年未完成的愿望，希望今年能实现。

不贪心，就这些，第四条是祝愿。

[PHP]ZendGuard对PHP加密

Tue, 29 Dec 2015 07:28:22 +0000

ZendGuard下载

官方下载地址：http://www.zend.com/en/products/guard/downloads#Windows

下载之前需要注册，我下的版本是Zend Guard 6.0。双击运行即可傻瓜式安装。

最新的版本是7.0，如果想下载早期的版本，请点击：>Download here，当前页面下方会弹出早期版本的列表。

PHP下载

官方下载地址：http://php.net/downloads.php | http://php.net/releases/

我现在的版本是：http://windows.php.net/download/#php-5.4

php一个版本一般会发布两种类型的程序，一种是线程安全的（Thread Safe），另一种是非线程安全的（Non Thread Safe）。

值得注意的是： ZendGuard 只支持非线程安全的。所以请选择非线程安全的 PHP 下载。

配置PHP——ZendLoader.dll

下载ZendLoader.dll

官方下载地址：http://www.zend.com/en/products/loader/downloads#Windows

下载之前请注册，与ZendGuard下载类型，注意选择对应PHP版本的ZendLoader。

将ZendLoader.dll拷贝到PHP [PHP的根目录]\ext\ 中。

修改 php.ini-development 或者 php.ini-production 为 php.ini，
在 php.ini 文件中添加以下内容：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


zend_extension="./ext/ZendLoader.dll"

; Enables loading encoded scripts. The default value is On
zend_loader.enable=1

; Disable license checks (for performance reasons)
zend_loader.disable_licensing=0

; The Obfuscation level supported by Zend Guard Loader. The levels are detailed in the official Zend Guard Documentation. 0 - no obfuscation is enabled
zend_loader.obfuscation_level_support=3

; Path to where licensed Zend products should look for the product license. For more information on how to create a license file, see the Zend Guard User Guide
zend_loader.license_path=

新建PHP代码

新建 input 文件夹，在 input 文件夹中新建 test.php。

代码如下：

1
2
3
4
5


<?php
date_default_timezone_set("Asia/shanghai");
echo "Thanks ZendGuard!\n";
echo "Now datetime is ".date("Y-m-d h:i:s")."\n";
?>

上述代码输出：

Thanks ZendGuard

Now datetime is 当前时间.

ZendGuard安装及新建项目

ZendGuard是傻瓜式安装，安装之后，运行起来，效果如下。

新建 Zend Guard Project 工程。
指定输出文件为 output 文件夹。
添加输入文件夹为 input 文件夹。
选择PHP版本
点击
output 文件夹中新生成了 test.php，打开看是乱码。

运行源代码及加密代码

运行源代码效果：

运行加密代码效果：

至此，就可以用 ZendGuard 对PHP代码进行加密。

[PHP]ThinkPHP配置PHPUnit

Thu, 10 Dec 2015 14:19:57 +0000

版本描述

PHP: 5.3

PHPUnit

ThinkPHP 3.1.3

IDE: PHPStorm 10 （推荐）

PHPStorm配置PHPUnit

详见博文：

http://blog.coinidea.com/web开发/php-1088.html

ThinkPHP部署

官方代码下载：

http://www.thinkphp.cn/down.html

初始化站点：

http://www.thinkphp.cn/info/60.html

测试用例

本例中，根目录的index.php的配置如下：

1
2
3
4
5
6
7


<?php
define('APP_NAME', 'example');
define('APP_PATH', '../example/');
define('APP_PHPUNIT', false);
define('APP_DEBUG', true);
require('../ThinkPHP/ThinkPHP.php');
?>

首次访问之后，生成以下目录结构：

在example站点中新建文件夹，命名为“Testcase”。

测试Model

创建HelloModel.class.php：

1
2
3
4
5
6
7
8
9


<?php
class HelloModel extends Model
{
 public function sayHello()
 {
 print 'Hello';
 return 'Hello';
 }
}

在Test文件夹中新建Test.php文件作为PHPUnit，其中注意require ThinkPHP作为初始化框架环境，另外在Think.class.php中，修改

**start()**函数中，App::run()为!APP_PHPUNIT && App::run();

该区分站点运行与测试用例。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


<?php
define('APP_NAME', 'example');
define('APP_PATH', './../../example/');
define('APP_PHPUNIT', true);
require('./../../ThinkPHP/ThinkPHP.php');
class TestSayHello extends PHPUnit_Framework_TestCase {

public function setUp() { }

public function tearDown(){ }

}

在TestSayHello中加入测试用例：

1
2
3
4
5


public function testHelloModel()
{
 $hello = D('Hello');
 $this->assertTrue($hello->sayHello('Hello') == 'Hello');
}

测试Action

修改IndexAction.class.php如下：

1
2
3
4
5
6
7
8
9


<?php
class IndexAction extends Action
{
 public function index()
 {
 $hello = D("Hello");
 return $hello->sayHello();
 }
}

浏览器访问Index效果：

在TestSayHello中加入测试用例：

1
2
3
4
5


public function testHelloAction()
{
 $hello = new IndexAction();
 $this->assertTrue($hello->index() == 'Hello');
}

运行效果

运行Test.php效果如下：

Test通过，至此给ThinkPHP加上了单元测试。

poisonbian 2016/05/10 14:57

照着试了下，发现model无法使用，Common目录下自定义的一些函数也没有加载。研究了一下，觉得在Think.class.php中加APP_PHPUNIT的判断不太合理，不如在App.class.php中，在这儿添加： !APP_PHPUNIT && App::exec();

[PHP]PHPUnit安装配置及样例

Fri, 04 Dec 2015 14:45:19 +0000

PHPUnit的安装及样例测试

网上很多人推荐使用pear的安装方式，尝试了很多博客中的方法，均已失败。
我成功的方法是比较原生：

下载地址：

https://phpunit.de/index.html

下载下来的是.phar的PHP扩展。根据自己的PHP版本下载对应的PHPUnit版本

根据https://phpunit.de/manual/current/en/installation.html#installation.phar.windows按部就班即可。

下载PHPUnit.phar到某个文件夹比如：C:\bin\
将这个文件夹C:\bin\到环境变量Path中
在命令行中，当前路径移动到C:\bin，并在命令行下输入
echo @php "%~dpophpunit.phar"%*>phpunit.cmd

在任意位置的命令行中输入：

1

phpunit --version

能够看见

至此，PHPUnit安装成功。

测试样例：

SayHello.php

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


<?php

class SayHello
{
 public function printHello()
 {
 echo 'Hello';
 return 'Hello';
 }
}
?>

TestSayHello.php

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


<?php

require_once 'SayHello.php';

class TestSayHello extends PHPUnit_Framework_TestCase
{
 public function setUp() { }

 public function tearDown() { }

 public function testConnectionIsValid()
 {
 $hi = new SayHello();
 $this->assertTrue($hi->printHello() == 'Hello');
 }
}
?>

SayHello类会在屏幕上输出Hello并将Hello返回。

TestSayHello验证SayHello类是否会正确返回Hello字符串。

在命令行中输入，测试成功。

PHPStorm配置PHPUnit

低版本的PHPStorm不能很好的支持PHPUnit，会报：

Warning: require_once(PHPUnit/Runner/Version.php)

详见：

http://stackoverflow.com/questions/30278588/phpstorm-via-phpunit-phar-warning-require-oncephpunit-runner-version-php

本文使用的是PHPStorm10，下载地址：

https://www.jetbrains.com/phpstorm/?fromMenu

打开刚才的两个文件

设置settings， File=>Settings

配置PHP版本：

配置PHPUnit

样例测试

选中TestSayHello，直接运行即可。运行结果：

[leetcode][PHP实现]Contains Duplicate

Tue, 01 Dec 2015 10:06:29 +0000

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


<?php
class Solution
{
 public function containsDuplicate($nums)
 {
 $hashTable = array();
 foreach ($nums as $num)
 {
 if (!array_key_exists($num,$hashTable))
 {
 $hashTable[$num] = 1;
 }
 else
 {
 return false;
 }
 }
 return true;
 }
}
$solution = new Solution();
echo $solution->containsDuplicate(array(2,1,3,4,5,6,7,9));
?>

[leetcode][PHP实现]Excel Sheet Column Number

Mon, 30 Nov 2015 12:25:48 +0000

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


<?php
class Solution
{
 public function titleToNumber($s)
 {
 $num = 0;
 $len = strlen($s) - 1;
 for ($i = $len; $i >= 0; $i--)
 {
 $num += (ord($s[$i]) - ord('A') + 1) * (int)pow(26, $len - $i);
 }
 return $num;
 }
}
$solution = new Solution();
echo $solution->titleToNumber("AA");
?>

[leetcode][PHP实现]Valid Anagram

Mon, 30 Nov 2015 12:24:46 +0000

 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
33
34
35


<?php
class Solution
{
 public function isAnagram($s, $t)
 {
 $s = strtolower($s);
 $t = strtolower($t);
 for ($i = 0; $i < 26; $i++)
 {
 $sChars[$i] = 0;
 $tChars[$i] = 0;
 }
 for ($i = 0; $i < strlen($s); $i++)
 {
 $sChars[ord($s[$i]) - ord('a')]++;
 }
 for ($i = 0; $i < strlen($t); $i++)
 {
 $tChars[ord($t[$i]) - ord('a')]++;
 }
 //var_dump($sChars);
 //var_dump($tChars);
 for ($i = 0; $i < 26; $i++)
 {
 if ($sChars[$i] != $tChars[$i])
 {
 return false;
 }
 }
 return true;
 }
}
$solution = new Solution();
echo $solution->isAnagram("HelloWorld", "whelloorld");
?>

[leetcode][PHP实现]Add Digits

Mon, 30 Nov 2015 12:23:52 +0000

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


<?php
class Solution
{
 public function addDigits($num)
 {
 while ($num > 10)
 {
 $tmp = 0;
 while ($num > 0)
 {
 $tmp += $num % 10;
 $num = intval($num / 10);
 }
 $num = $tmp;
 }
 return $num;
 }
}
$solution = new Solution();
echo $solution->addDigits(381);
?>

[leetcode][PHP实现]Two Sum

Mon, 30 Nov 2015 12:22:21 +0000

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


<?php
class solution
{
 public function twoSum($nums, $target)
 {
 $result = array();
 for ($i = 0; $i < count($nums); $i++)
 {
 for ($j = 0; $j < count($nums); $j++)
 {
 if ($target == $nums[$i] + $nums[$j])
 {
 $result[0] = $i + 1;
 $result[1] = $j + 1;
 return $result;
 }
 }
 }
 return $result;
 }
}
$solution = new Solution();
var_dump($solution->twoSum(array(2,7,11,15), 9));
?>

[leetcode][PHP实现]Single Number

Mon, 30 Nov 2015 12:20:03 +0000

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


<?php
class Solution
{
 public function singleNumber($nums)
 {
 $single = 0;
 foreach ($nums as $num)
 {
 $single ^= $num;
 echo $num;
 }
 return $single;
 }
}
$solution = new Solution();
echo $solution->singleNumber(array(1,1,2,3,2,4,4,5,3));
?>

[Hive]Hive SQL 分区间统计问题

Wed, 18 Nov 2015 07:45:26 +0000

需求：

表table中存在一个text字段，需要统计出文本长度为[0,20]、[20,40]、[40,60]…按区间划分的数量。其中，需要自动化到包含最大值max的区间。

实现：

第一种方法：

1
2
3
4
5
6
7


select count(case when length(text) between 0 and 20 then 1 end) as text1,
count(case when length(text) between 21 and 40 then 1 end) as text2,
count(case when length(text) between 41 and 60 then 1 end) as text3,
count(case when length(text) between 61 and 80 then 1 end) as text4,
count(case when length(text) between 81 and 100 then 1 end) as text5,
count(case when length(text) > 100 then 1 end) as text6
from table;

这样写有一个问题，就是必须先知道max的值，然后随着max的增大，sql语句会越来越长，而且涉及到人工的干预。

第二种方法：

1

select floor(length(text)/20) * 20, count(*) from table group by floor(length(text)/20);

这种方法，先将每个text的文本长度除以20，向下取整，再乘以20得到一个分组依据，以这个依据进行group by就可以得到最终结果，在规避循环的情况下，用简单的语句，巧妙的解决了自动分区间统计的问题。

Grunt无法下载或者下载缓慢

Sun, 15 Nov 2015 03:37:01 +0000

Grunt是一个前端自动化的工具，互联网上关于如何安装和使用它的博客特别多：

http://www.cnblogs.com/wangfupeng1988/p/4561993.html

http://www.cnblogs.com/lhb25/archive/2013/01/24/grunt-for-javascript-project-a.html

因为Grunt的安装依赖于nodejs，本文主要介绍如果遇到“npm install grunt”等命名下载缓慢或者无法下载时候的解决方案。解决的方式很简单，指定一下下载的路径就好了，在命令后面加上“-registry “http://registry.npmjs.org””，这是将默认的https改成了http。或者国内互联网公司，如淘宝也有一些registry，百度一下加上即可下载。

例如：

1

install grunt --save-dev -registry "http://registry.npmjs.org"

[读书笔记]Don’t make me think

Mon, 09 Nov 2015 04:48:46 +0000

有人说这本书已经很陈旧了，最近还是坚持读完了一次。

梳理一次，如下图：

因为我自己也长期从事网站建设的工作，其实读下来有非常多的tips是值得注意的。大道理或许都懂，但是真正实施的时候，却容易忽略。

读完本书，感觉把自己的网站优化了一次，或许，我就记住了一个词“可用性”，相信几年之后，能有更深的体会吧。

[Android]学习周报6：数据存储全方案，详解持久化技术

Thu, 05 Nov 2015 05:14:08 +0000

[Linux]linux相关命令总结

Sat, 17 Oct 2015 08:24:07 +0000

用户管理

近期一直在搭建10台左右的CDH集群，集群使用的10台CentOS6.7的服务器，所以需要常常用到Linux的一些用户管理的命令。

修改密码
1

passwd
输入新的密码和确认密码即可，不过密码中最好包含：大小写字母，数字和字符确保安全性，Linux也会提醒密码规则。
切换用户
1

su hdfs
即可切换到hdfs用户。
或者不切换用户，以某个用户的权限来执行或者访问某个文件：
1

su hdfs hadoop fs -mkdir /user/hdfs/test
以hdfs用户的权限使用hadoop在集群上的 /user/hdfs/ 建立test目录。

文件管理

创建文件夹

1

mkdir [folder]

创建文件

1

touch/vi [filename]

时区选择

根据提示选择时区，然后输入提示命令。
1

tzselect

修改clock文件中的时区。

1
2


vi /etc/sysconfig/clock
ZONE="Asia/Shanghai"

删除原有的localtime，新建localtime

1
2


rm /etc/localtime
ln -sf /usr/share/zoneinfo/Asia/Shanghai /etc/localtime

开机执行命令

编辑rc.local文件即可

1

vi /etc/rc.local

启动时钟服务，同步局域网下具有时钟服务的服务器的时钟

1
2


service ntpd start
/usr/sbin/ntpdate 192.168.34.115

[To be continued…]

[Web开发]用户输入URL之后发生了什么？

Thu, 15 Oct 2015 15:24:04 +0000

当用户打开浏览器输入URL之后

Client会去查找是否有该URL对应的ip地址，如果没有，会去最近的DNS Server请求域名，依次往根域名访问，一旦查询成功，返回给Client。
浏览器将请求发送给对应URL的IP地址的Web服务器。

该服务器可能一个单点的服务器，也可能是一个轻量级的分发服务器，或者是一个集群。

如果是分发服务器或集群，服务器内部会根据时间戳同步通信当前的数据是最新数据，如果不是将进行同步。
请求中如果涉及相关应用的调用，还有需要讲请求传递给应用服务器会将结果返回给Web服务器。
Web服务器执行相关动态语言编写的程序，与数据库服务器和相关文件进行通信，最后将最终的网页数据传回给浏览器。
基于HTTP、HTTPS等传输协议，将Web服务器的数据传回到浏览器，浏览器对网页数据进行解析。

最终，用户查看到该网页数据。

[Linux]Linux配置DNS地址

Wed, 14 Oct 2015 13:28:18 +0000

DNS关系到服务器能否通过域名的方式联系到互联网。Linux下有两种方式配置DNS服务器的IP地址。

验证方式：

1

ping www.baidu.com

临时性的方式
a) 编辑resolv.conf
1

vi ./etc/resolv.conf
b) 输入
1

nameserver 8.8.8.8
保存即可。

永久的配置方式
a) 编辑ifcfg-eth0

1

vi /etc/sysconfig/network-scripts/ifcfg-eth0

b) 输入

1

DNS1=8.8.8.8

保存即可。

可以通过

1

ifconfig

查看本地的网卡，其中就能看到eth0的配置信息。

[Linux]CentOS挂载NTFS移动硬盘

Thu, 01 Oct 2015 06:26:08 +0000

服务器是CentOS的操作系统，需要挂载两个2T的移动硬盘。

命令如下：

1
2


mount -t ntfs /dev/sdn1 /test1
mount： unknown filesystem type ‘ntfs’

出错了，错误的意思是说，不认识“NTFS”，解决方式如下：

1
2
3
4
5
6
7
8


wget http://tuxera.com/opensource/ntfs-3g_ntfsprogs-2013.1.13.tgz
tar zxvf ntfs-3g_ntfsprogs-2013.1.13.tgz
cd ntfs-3g_ntfsprogs-2013.1.13
./configure
make
make install
mkdir /mnt/window
mount -t ntfs-3g /dev/sdn1 /mnt/window

取消挂载：

1

umount /dev/sdn1

[Storm]Storm的安装

Thu, 01 Oct 2015 05:12:26 +0000

用于处理高速、大型数据流的分布式实时计算系统。为Hadoop添加了可靠的实时数据处理功能。

Home link: http://storm.apache.org/

Download link: http://storm.apache.org/downloads.html

Setup

Java

CentOS 自带 JDK 1.7，此处可以忽略该步骤。

Zookeeper

Home link: http://zookeeper.apache.org/releases.html

下载安装包并上传解压

http://mirror.bit.edu.cn/apache/zookeeper/stable/
1

tar -xf zookeeper-3.4.6.tar.gz

配置Zookeeper

1
2
3
4
5
6
7
8


tickTime=2000
dataDir=/var/zookeeper/
clientPort=2181
initLimit=5
syncLimit=2
server.1=zookeeper1:2888:3888
server.2=zookeeper2:2888:3888
server.3=zookeeper3:2888:3888

启动Zookeeper
1

bin/zkServer.sh start
测试
1

bin/zkCli.sh -server 127.0.0.1:2181
依赖库安装
Java

自带。
Python

自带。
Storm
下载安装包，上传并解压

解压命令：
1

tar -xf apache-storm-0.9.5.tar.gz
配置Zookeeper地址，在storm.yaml中配置该目录
1 2

storm.zookeeper.servers: - "127.0.0.1"
创建并配置workdir
1

storm.local.dir: "/home/admin/storm/workdir"
备注：storm.local.dir是Nimbus和Supervisor进程用于存储少量状态（如jars、confs等）的本地磁盘目录，需要提前创建该目录并给予足够的访问权限。
1

nimbus.host: "127.0.0.1"
1 2 3 4 5

supervisor.slots.ports: - 6700 - 6701 - 6702 - 6703

启动Storm的所有服务

Nimbus

1

bin/storm nimbus >/dev/null 2>&1 &

Supervisor

1

bin/storm supervisor >/dev/null 2>&1 &

1

bin/storm ui >/dev/null 2>&1 &

Logview

1

bin/storm logviewer > /dev/null 2>&1

访问Storm UI

http://ip:8080

[outlook]outlook配置及常规设置——outlook2013

Thu, 01 Oct 2015 03:13:11 +0000

当步入职场之后，outlook几乎成为上班族的必备利器，本文将对outlook（outlook2013）的一些配置和常规设置进行说明。

添加一个用户

打开outlook2013，点击左上方“文件”，弹出列表，点击“+添加用户”

选择“电子邮件账户”，点击“下一步”

点击“手动设置或其他服务器类型”，然后点击“下一步”

勾选“POP或IMAP”，然后点击“下一步”，一般是选择该项。

输入用户名密码，并配置接收和发送的服务器地址。注意，这两个地址，一般是pop3或smtp@对应的域名，需要向邮件服务商确认，邮件服务商一般会有描述。

点击上图“其他设置”，配置发送服务器的用户名和密码，并点击“完成”。

点击下一步，开始测试，之后测试完成，整个过程即成功。

配置邮件过滤规则

在邮件的使用过程中，每天可能会产生大量的邮件，这个时候高效地分拣这些邮件是一件非常有意义的工作。

打开outlook2013，点击左上方“文件”，弹出列表，点击“管理规则和通知”

点击“新建规则”

规则中有许多选项，根据规则向导来配置即可。比如，可以选择“标题中含有特定词语的”，“来自特定发件人的”规则，然后可以移动到指定的文件夹，或者指定特定的操作。

[Hadoop]CDH的环境搭建

Mon, 28 Sep 2015 14:50:42 +0000

1. Connect server

使用CRT或者Xshell远程连接即可。

2. Network config

首先需要给服务器配置DNS，判断服务器是否能连接外网。

输入下列命令行即可：

1

ping [www.baidu.com][1]

如果能收到来自[www.baidu.com][1]应答报表示外网能连接上的，如果是unknown host表示DNS配置不正确需要配置DNS。

配置DNS有两种方式：

临时方案，编辑resolv.conf文件，加入“nameserver 8.8.8.8”文件。
1 2

vi /etc/resolv.conf nameserver 8.8.8.8
长期有效，编辑ifcfg_eth0文件，加入“DNS1=8.8.8.8”文件。
1 2

vi /etc/sysconfig/network-scripts/ifcfg-eth0 DNS1=8.8.8.8

配置好之后，执行命令“service network restart”

建议使用第二种方案，第一种方案当服务器重启的时候就会失效。

关闭防火墙

输入命令：

1

service iptables stop

3. File transfer

在安装的过程中，可能涉及到将本地的文件上传到服务器上。此处提供一种方案。

输入命令：

1

sudo yum install lrzsz

安装lrzsz包之后，输入：

1

rz

选择需要上传的文件即可。

其中Yum (Yellow dog Updater Modified) 是基于RPM包管理，能够从指定的服务器自动下载RPM包并且安装，可以自动处理依赖性关系，并且一次安装所有依赖的软件包，无须繁琐地一次次下载、安装。

4. Install CDH

HDFS：分布式文件存储系统 GFS的Java开源实现。

MapReduce：大规模数据集的并行计算编程模型。

HBase：NoSQL列数据库

Hive：数据仓库

Zookeeper：分布式锁

Pig：大数据分析平台接口

Home link: http://www.cloudera.com/content/cloudera/en/products-and-services/cdh.html

Setup:

1. Java

CentOS 6.7自带了1.7版本的JDK，所以此处省略。安装过程中，涉及到JDK的地方都可以忽略。

2. Cloudera Manager Server

Cloudera Manager makes it easy to manage Hadoop deployments of any scale in production. Quickly deploy, configure, and monitor your cluster through an intuitive UI – complete with rolling upgrades, backup and disaster recovery, and customizable alerting.

Download:

http://www.cloudera.com/content/cloudera/en/downloads/cloudera_manager/cm-5-4-7.html

下载最新的5.4.7版本即可。

下载之后，是一个503kb左右的，名为cloudera-manager-installer.bin的文件，将改文件上传（“rz”）到服务器指定的文件夹上。

Close selinux:

1
2


/etc/selinux/config
selinux=disabled

Hostname

需要修改本机的hostname，查看hostname的方式，直接输入hostname即可。

输入：
1

vi /etc/hosts
即可编辑，加入行“192.168._._ master.com master”

备注，添加datanode节点的时候，请不要命名为master，可以命名为datanode1。

执行“reboot”命令，重启服务器。

3. CDH

Using cloudera manager

到该文件cloudera-manager-installer.bin所在目录下执行：

1
2


chmod u+x cloudera-manager-installer.bin
./ cloudera-manager-installer.bin

一直next向下，其中选中项会加粗的。

速度可能较慢，请耐心等待…

Choose express free version.
显示随后安装的软件包
指定CDH集群主机
安装CDH
输入用户名密码
安装指定Parcel
选择服务

4. Storm

用于处理高速、大型数据流的分布式实时计算系统。为Hadoop添加了可靠的实时数据处理功能。

5. Spark

Spark采用了内存计算。从多迭代批处理出发，允许将数据载入内存作反复查询，此外还融合数据仓库，流处理和图形计算等多种计算范式。Spark构建在HDFS上，能与Hadoop很好的结合。

6. Problems

正在刷新元数据包

1
2


Another app is currently holding the yum lock; waiting for it to exit...
rm -f /var/run/yum.pid

卸载Cloudera Manager

1

$ sudo /usr/share/cmf/uninstall-cloudera-manager.sh

安装失败。无法接收 Agent 发出的检测信号

1
2
3
4
5


cat /etc/hosts
ip 域名 主机名
192.168.*.1 master.com master
cat /etc/sysconfig/network
HOSTNAME=master.com

卸载Cloudera Manager

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


sudo rm -Rf /usr/share/cmf /var/lib/cloudera* /var/cache/yum/cloudera*
sudo /usr/share/cmf/uninstall-cloudera-manager.sh
sudo service cloudera-scm-server stop
sudo service cloudera-scm-server-db stop
cloudera-manager-server-db
sudo yum remove cloudera-manager-server
sudo yum remove cloudera-manager-server-db-2
sudo service cloudera-scm-agent hard_stop
sudo yum remove 'cloudera-manager-*'
sudo yum clean all
sudo rm -Rf /usr/share/cmf /var/lib/cloudera* /var/cache/yum/cloudera* /var/log/cloudera* /var/run/cloudera*
sudo rm -Rf /var/cache/apt/archives/cloudera*
sudo rm /tmp/.scm_prepare_node.lock
sudo rm -Rf /var/lib/flume-ng /var/lib/hadoop* /var/lib/hue /var/lib/navigator /var/lib/oozie /var/lib/solr /var/lib/sqoop* /var/lib/zookeeper
sudo rm -Rf /dfs /mapred /yarn

[应用软件]GIF图本地制作

Sun, 20 Sep 2015 08:37:13 +0000

因为开源了一个WIN32的贪吃蛇程序，想要制作成GIF图以便于演示，但是具体如何制作却犯了难。

经过查询有以下几种方法：

第一种，利用QQ影音等视频软件

前提是需要转录的是一段小视频，用QQ影音的功能即可转录。

具体方法：

http://kf.qq.com/faq/120322fu63YV130422iiEbMB.html

第二种，使用Photoshop等专业的软件

准备多帧图像，具体方法查看百度经验：

http://jingyan.baidu.com/article/7f41ececdb326e593d095c2e.html

第三种，使用屏幕录像专家

上图是我使用屏幕录像专家先录制视频（EXE或者LXE格式），然后选中“转换工具菜单”，然后再转换即可。

分享一个屏幕录像专家的绿色版本的下载地址：

屏幕录像专家。

[读书笔记]从0到1：Zero To One

Sun, 20 Sep 2015 08:22:12 +0000

最近匆匆忙忙把《从0到1》这本书读完了。读完一本书，总想写一点什么，但是真的敲着键盘的时候，仿佛又不知如何落笔。以前写总结或者读书笔记，我会把原书拿出来，觉得有滋味的话，敲上去，但是这种方式我感觉咀嚼起来是没有味道的。

这本书在豆瓣上的评分是8.0，蛮薄薄的一本书的。因为我的人生阅历有限，我也不敢妄自给这本书评分，不过我感觉这本书读一次肯定是不够的。

乍一回味这本书有点像鸡汤，有一点像反鸡汤；这本书讲的都是大道理，但是大道理未必大家在实践的时候未必能想起来。

这本书给我留下的最重要的感觉，有几个词。

第一个：质变

通俗来讲，量变引起质变，但本书从创新的角度出发，认为迈出那一步，才是更加伟大的，就像第一个吃螃蟹的人；之后的都是复制，意义不那么大的堆砌。

第二个：垄断

无论做人做事，开公司，最重要的是要有一门独特的手艺，记得我导师曾经说过，一招鲜，吃遍天。大意如此。做技术的，当然技术才是王道。近几年（2015）大众创业，给投资人背书，讲故事，我有一个非常好的点子云云。但是真正能活下来的，无论是企业，还是在企业中的员工，都是有一技之长的人。不能说完全不能被替代，我始终相信没有什么不能被替代。但是一方面创造了很好的价值，一方面替换“你”的成本很高，就没人愿意去替代你，这个时候就容易形成垄断，当然专利的意义也在于此吧。比如微信，现在的聊天软件如来往、陌陌等，甚至一大堆创业公司以此为噱头的，基于校园的、婚恋的、创业的、家庭的等等等等，他们的技术实力不够强么？资源不够多么？想法不够新么？但是为什么微信始终不可替代，至少目前不可替代，这就是一种“垄断”。

第三个：秘密

哈哈，当一个人、一家公司能够参透某种能够引起质变的、造成垄断的秘密的时候，这家公司也就成功了。此处很玄乎，但是是很有道理的，具体该如何实施？我阅历尚浅，希望下次读的时候，能有深刻的体会。

以上，是我阅读这本书的感受。

[Android]学习周报5：全局大喇叭，详解广播机制

Fri, 18 Sep 2015 16:11:12 +0000

[leetcode_213]House Robber II

Fri, 18 Sep 2015 14:45:21 +0000

因为形成了环，遍历每个点为起始点，并排除相邻点，假设起始点必选。借用House Robber的解法即可。

 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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53


class Solution {
public:
 int robOne(vector& nums) {
 if (nums.size() == 0) {
 return 0;
 }
 vector v(nums.size() + 1);
 v[0] = 0;
 v[1] = nums[0];
 for (int i = 1; i < nums.size(); i++) {
 int j = i + 1;
 if (nums[i] + v[j - 2] > v[j - 1]) {
 v[j] = nums[i] + v[j - 2];
 } else {
 v[j] = v[j - 1];
 }
 }
 return v[nums.size()];
 }

 int rob(vector& nums) {
 vector numsc;
 int size = nums.size();
 int sum = 0;
 for (int i = 0; i < size; i++) {
 numsc.clear();
 int tmp = nums[i];
 for (int j = i; j < size; j++) {
 if (j == ((i-1) < 0 ? i - 1 + size : i - 1) ||
 j == ((i+1) >= size ? i + 1 - size : i + 1) ||
 j == i) {
 numsc.push_back(0);
 continue;
 }
 numsc.push_back(nums[j]);
 }
 for (int j = 0; j < i; j++) {
 if (j == ((i-1) < 0 ? i - 1 + size : i - 1) ||
 j == ((i+1) >= size ? i + 1 - size : i + 1) ||
 j == i) {
 numsc.push_back(0);
 continue;
 }
 numsc.push_back(nums[j]);
 }
 tmp += robOne(numsc);
 if (tmp >= sum) {
 sum = tmp;
 }
 }
 return sum;
 }
};

[Android]学习周报4：手机平板要兼顾，探究碎片

Wed, 16 Sep 2015 14:29:56 +0000

[Android]学习周报3：软件也要拼脸蛋，UI开发的点点滴滴

Mon, 14 Sep 2015 12:30:45 +0000

[leetcode_215] Kth Largest Element in an Array

Mon, 14 Sep 2015 12:29:31 +0000

第k大数，取巧了，直接快排了。应该是模拟快排。

1
2
3
4
5
6
7


class Solution {
public:
 int findKthLargest(vector<int>& nums, int k) {
 sort(nums.begin(), nums.end(), greater<int>());
 return nums[k - 1];
 }
};

[leetcode_275]H-Index II

Mon, 14 Sep 2015 12:28:35 +0000

此题虽然能过，但是并未使用o(logn)的解法， mark一下，下次来解。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


class Solution {
public:
 int hIndex(vector<int>& citations) {
 //sort(citations.begin(), citations.end(), greater<int>());
 int size = citations.size();
 int max = 0;
 for (int i = size - 1; i >= 0; i--) {
 int j = size - 1 - i;
 if (citations[i] >= j + 1) {
 max = j + 1;
 }
 }
 return max;
 }
};

[leetcode_274]H-Index

Mon, 14 Sep 2015 12:27:38 +0000

降序排列，然后即可线性查找符合条件的h索引。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


class Solution {
public:
 int hIndex(vector<int>& citations) {
 sort(citations.begin(), citations.end(), greater<int>());
 int size = citations.size();
 int max = 0;
 for (int i = 0; i < size; i++)
 {
 if (citations[i] >= i + 1)
 {
 max = i + 1;
 }
 }
 return max;
 }
};

[Android]学习周报2：先从看得到的入手，探究活动

Sun, 13 Sep 2015 08:33:48 +0000

继续承接【Android】学习周报1：开始启程，你的Android第一行代码

其实活动是四大组件里面最直观最先接触到的。今天跑了5km mini马拉松，歇一歇，回头好好扩充一下Android。

[leetcode_154]Find Minimum in Rotated Sorted Array II

Sun, 13 Sep 2015 08:22:43 +0000

与Find Minimum in Rotated Sorted Array解法类似

 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


class Solution {
public:
 int min;
 void search(int left, int right, vector<int>& nums)
 {
 if (right < left)
 {
 return;
 }
 int mid = (left + right) / 2;
 if (nums[mid] < min) {
 min = nums[mid];
 search(left, mid - 1, nums);
 search(mid + 1, right, nums);
 } else if (nums[mid] >= min) {
 search(left, mid - 1, nums);
 search(mid + 1, right, nums);
 }
 }

 int findMin(vector<int>& nums) {
 min = nums[0];
 search(0, nums.size() - 1, nums);
 return min;
 }
};

[leetcode_216]Combination Sum III

Sun, 13 Sep 2015 08:20:50 +0000

深度优先搜索。

 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


class Solution {
public:
 vector<vector<int>> result;
 vector<int> list;

 void search(int now, int k, int n, int sum) {
 if (list.size() == k && sum == n) {
 result.push_back(list);
 }
 if (list.size() >= k || now > 9) {
 return;
 }
 list.push_back(now);
 search(now + 1, k , n , sum + now);
 list.pop_back();
 search(now + 1, k , n , sum);
 }

 vector<vector<int>> combinationSum3(int k, int n) {
 result.clear();
 list.clear();

 search(1, k, n, 0);

 return result;
 }
};

[leetcode_240]Search a 2D Matrix II

Sun, 13 Sep 2015 08:20:04 +0000

因为矩阵的特殊性，所有从左上角顶点开始搜索即可。

 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


class Solution {
public:
 bool searchMatrix(vector<vector<int>>& matrix, int target) {
 int row = matrix.size() - 1;
 int cols = matrix[0].size() - 1;
 int x = 0;
 int y = cols;
 while (x <= row && y >= 0)
 {
 if (target == matrix[x][y])
 {
 return true;
 }
 else if (target > matrix[x][y])
 {
 x++;
 }
 else
 {
 y--;
 }
 }
 return false;
 }
};

[Android]学习周报1：开始启程，你的Android第一行代码

Thu, 10 Sep 2015 15:11:55 +0000

学习Android差不多一个月了，目前想系统的总结自己每阶段的学习成果，目前使用的是《Android第一行代码》这本书入门，本周对第一章的内容进行了一个简单的回顾，下图是我做的一个简单的思维导图，如果有兴趣，可以双击查看大图，并另存为。

[SEO]各大搜索引擎提交入口

Thu, 10 Sep 2015 15:01:40 +0000

网站的SEO是非常重要的一件事，搜索引擎优化是其中的重点。首先需要让搜索引擎索引到网站。下面提供了各大搜索引擎的提交入口：

百度搜索网站登录口：http://zhanzhang.baidu.com/linksubmit/url

Google网站登录口：https://www.google.com/webmasters/tools/submit-url

360搜索引擎登录入口：http://info.so.360.cn/site_submit.html

搜搜网站收录提交入口：http://www.soso.com/help/usb/urlsubmit.shtml

搜狗网站收录提交入口：http://www.sogou.com/feedback/urlfeedback.php

必应网站提交登录入口：http://www.bing.com/toolbox/submit-site-url

[leetcode_230]Kth Smallest Element in a BST

Thu, 10 Sep 2015 14:34:22 +0000

求二叉搜索树的第k个数，中序遍历生成二叉搜索树，存入数组中，然后输出第k个即可。

 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


class Solution {
public:
 vector<int> list;
 void queryTree(TreeNode * node)
 {
 if (NULL == node)
 {
 return;
 }
 if (NULL != node->left)
 {
 queryTree(node->left);
 }
 list.push_back(node->val);
 if (NULL != node->right)
 {
 queryTree(node->right);
 }
 }

 int kthSmallest(TreeNode* root, int k) {
 list.clear();
 queryTree(root);
 return list[k-1];
 }
};

[leetcode_219]Contains Duplicate II

Wed, 09 Sep 2015 12:36:36 +0000

求数组中，是否存在两个相同元素的小标差小于k。hash题目。

 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


class Solution {
public:
 bool containsNearbyDuplicate(vector<int>& nums, int k) {
 map<int, int> mNums;
 mNums.clear();
 for (int i = 0;i < nums.size();i++)
 {
 map<int,int>::iterator it = mNums.find(nums[i]);
 if (mNums.end() == it)
 {
 mNums.insert(pair<int,int>(nums[i], i));
 }
 else
 {
 if (i - it->second <= k)
 {
 return true;
 }
 mNums.erase(it);
 mNums.insert(pair<int,int>(nums[i], i));
 }
 }
 return false;
 }
};

[leetcode_223]Rectangle Area

Wed, 09 Sep 2015 12:35:06 +0000

计算两个矩形的面积和，有可能有重叠区域。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


class Solution {
public:
 int computeArea(int A, int B, int C, int D, int E, int F, int G, int H) {
 int bx,by,tx,ty;
 bx = A > E ? A : E;
 by = B > F ? B : F;
 tx = C < G ? C : G;
 ty = D < H ? D : H;

 int same = 0;
 if (tx <= bx || ty <= by) {
 same = 0;
 } else {
 same = (tx - bx) * (ty - by);
 }

 return (C - A) * (D - B) + (G - E) * (H - F) - same;
 }
};

[leetcode_198]House Robber

Mon, 07 Sep 2015 15:19:40 +0000

取出数组[正整数]中的数，使和最大，但是规则是不能去相邻的数。
可以枚举2^n中情况，复杂度太高。可以用一维动态规划的解法 f(n) = max(f(n-1), nums[n] + f(n-2));

 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


class Solution {
public:
 int rob(vector<int>& nums) {
 if (nums.size() <= 0)
 {
 return 0;
 }
 vector<int> v(nums.size() + 1);
 v[0] = 0;
 v[1] = nums[0];
 for (int i = 1; i < nums.size(); i++)
 {
 int j = i + 1;
 if (nums[i] + v[j - 2] > v[j - 1])
 {
 v[j] = nums[i] + v[j-2];
 }
 else
 {
 v[j] = v[j-1];
 }
 }
 return v[nums.size()];
 }
};

[leetcode_199]Binary Tree Right Side View

Mon, 07 Sep 2015 04:58:23 +0000

求二叉树中，每层最右边的节点的值，序列化每层二叉树，然后输出每层最后一个节点即可。

class Solution {
public:
vector<int> rightSideView(TreeNode* root) {
vector<int> ans(0);
if (NULL == root)
{
return ans;
}
queue<TreeNode *> qList;
qList.push(root);
while (qList.size() > 0)
{
int size = qList.size();
for (int i = 0;i < size;i++)
{
TreeNode * head = qList.front();
if (NULL != head->left)
{
qList.push(head->left);
}
if (NULL != head->right)
{
qList.push(head->right);
}
qList.pop();
if (i == size-1)
{
ans.push_back(head->val);
}
}
}
return ans;
}
};

[leetcode_260]Single Number III

Mon, 07 Sep 2015 04:57:15 +0000

给定数组中，所有数都是成对出现，但是只有两个数，不成对，求出这两个数。
相信一个数的情况大家都知道，使用异或即可解决问题，两个数的话，异或了之后得到的是a^b，但是如何找出a与b呢，从a^b可以得，该值一定不为0，只需要取任何一个位数上不为0的数，将数组分为两类，在异或即可。

 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
33


class Solution {
public:
 vector<int> singleNumber(vector<int>& nums) {
 int ab = 0;
 for (int i = 0; i < nums.size(); i++) {
 ab ^= nums[i];
 }

 int pos = 0;
 while(0 == ab % 2) {
 pos++;
 ab /= 2;
 }

 int a = 0;
 int b = 0;
 int tmp = (int)pow(2.0, pos);

 for (int i = 0; i < nums.size(); i++) {
 if ((nums[i]^tmp) == (nums[i] - tmp)) {
 a ^= nums[i];
 }
 else {
 b ^= nums[i];
 }
 }

 vector<int> ans(0);
 ans.push_back(a);
 ans.push_back(b);
 return ans;
 }
};

WordGame打字游戏的MFC实现

Thu, 03 Sep 2015 15:18:16 +0000

GitHub下载地址：https://github.com/hujiulin/TypingGame

双击运行程序，弹出主界面：
点击菜单项“用户”，即可进行登录和注册操作。若您未注册过用户，可进行注册之后登录。现已注册UserName用户为例，进行演示。

点击登录即弹出登录窗口如下：

点击注册即弹出注册窗口如下：（或者直接点击注册按钮）

输入用户姓名：UserName；用户昵称：UserName；用户密码：UserName；如下：

点击确定即可完成注册。

以UserName用户登录，即可在主界面右上角看见如下信息：
对游戏进行设置：，在游戏选项中可以对“游戏难度”，“图片类别”，“背景音乐”进行设置。
- 游戏难度：
  
  点击游戏难度按钮，弹出一下对话框：
  
  可在下拉列表框中对相应的“单词量”，“拼写难度”，“出词频率”，“移动速率”进行设置。单词量分为50,100,150三项。拼写难度目前是四级的随机单词。出词频率分为单倍和双倍。移动速度分为快，中，慢速。点击设置即可。
- 图片类别：
  
  点击图片类别按钮，弹出一下对话框：
  
  供选择的图片目前有气球和小鱼两种，点击单选按钮选择即可。
- 背景音乐：
  
  点击背景音乐按钮，弹出以下对话框：
  
  在组框里选择相应的音乐，点击“选择音乐”按钮即可。
  
  设置好的游戏选项将显示在：。
点击，弹出以下窗口：

显示当前系统中，得分最高的前五名用户。
，帮助菜单项分为两部分，一个是游戏规则，一个是关于游戏。
- 游戏规则：
- 关于游戏：
此处显示了当前的游戏状态，是开始还是停止。
点击这两个按钮，开始游戏或者退出游戏。
以下是游戏过程中的某幅截图:

WIN32和jQuery贪吃蛇的开源实现

Thu, 03 Sep 2015 15:13:45 +0000

本程序是一款简易的贪吃蛇程序具有WIN32和JavaScript两个版本，其中WIN32程序写于2010年，麻雀虽小五脏俱全，回头突然发现还是非常佩服五年多之前的自己的。jQuery程序写于2015年。

GitHub下载地址：https://github.com/hujiulin/snake

jQuery演示地址：http://www.coinidea.com/game/snake/

程序整体界面如下：

WIN32版本：

jQuery版本：

WIN32框架代码：

 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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76


#include <windows.h>
#include <math.h>
#include <stdlib.h>
#include <time.h>
#include <string.h>

LRESULT CALLBACK WndProc(HWND,UINT,WPARAM,LPARAM);

int WINAPI WinMain(HINSTANCE hInstance,HINSTANCE hPrevInstance,LPSTR lpCmdLine,int nCmdShow) {
 WNDCLASS wndclass;
 char strClassName[] = "hungry snake";
 char strWindowName[] = "贪吃蛇";
 HWND hwnd;
 MSG msg;

 wndclass.cbClsExtra = 0;
 wndclass.cbWndExtra = 0;
 wndclass.hbrBackground = (HBRUSH)GetStockObject(WHITE_BRUSH);
 wndclass.hCursor = LoadCursor(hInstance,IDC_ARROW);
 wndclass.hIcon = LoadIcon(hInstance,IDI_APPLICATION);
 wndclass.hInstance = hInstance;
 wndclass.lpfnWndProc = WndProc;
 wndclass.lpszClassName = strClassName;
 wndclass.lpszMenuName = NULL;
 wndclass.style = 0;

 if(!RegisterClass(&wndclass)) {
 MessageBeep(0);
 return FALSE;
 }

 hwnd = CreateWindow(
 strClassName,
 strWindowName,
 WS_OVERLAPPEDWINDOW,
 CW_USEDEFAULT,
 CW_USEDEFAULT,
 CW_USEDEFAULT,
 CW_USEDEFAULT,
 NULL,
 NULL,
 hInstance,
 NULL
 );

 ShowWindow(hwnd,nCmdShow);
 UpdateWindow(hwnd);

 while(GetMessage(&msg,NULL,0,0)) {
 TranslateMessage(&msg);
 DispatchMessage(&msg);
 }

 return msg.wParam;
}

LRESULT CALLBACK WndProc(HWND hwnd,UINT msg,WPARAM wParam,LPARAM lParam) {
 HDC hdc;
 PAINTSTRUCT ps;
 HBRUSH hBrush;
 HPEN hPen;
 switch(msg) {
 case WM_LBUTTONDOWN:
 case WM_RBUTTONDOWN:
 case WM_CHAR:
 case WM_PAINT:
 InvalidateRect(hwnd,NULL,1);
 break;
 case WM_DESTROY:
 PostQuitMessage(0);
 break;
 default:
 return DefWindowProc(hwnd,msg,wParam,lParam);
 }
 return 0;
}

贪吃蛇定义

整个蛇为一个List，然后头部squarehead、定义direction具有四个方向、speed速度、当前蛇的长度List.size()。

碰撞检测

当贪吃蛇的头部在direction方向上碰到随机生成的一个square时，即表示吃到食物；
当贪吃蛇回头碰到自己身体，或者碰到边界时，游戏结束。

基于World Wind的数据可视化插件

Thu, 03 Sep 2015 15:11:46 +0000

基于开源数据可视化类库（MSChart、VTK、D3）实现的组件样例，并基于World Wind实现调用上述组件的功能插件。

GitHub下载地址：https://github.com/hujiulin/WorldWind_DataVisualization

1. 加载组件 – Load plugin

2. DataVisualization2D组件

3. DataVisulization3D组件

4. DataVisualizationWEB组件

原文链接：http://cesiumcn.org/topic/207.html | 国内快速访问：http://cesium.coinidea.com/topic/207.html

[leetcode_206]Reverse Linked List

Tue, 01 Sep 2015 14:53:34 +0000

反转单链表。

 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


class Solution {
public:
 ListNode* reverseList(ListNode* head) {
 if (NULL == head)
 {
 return head;
 }
 ListNode * before = NULL;
 ListNode * now = head;
 ListNode * next = now->next;

 while (NULL != next)
 {
 ListNode * beforeTmp = now;
 ListNode * nowTmp = next;
 ListNode * nextTmp = next->next;

 now->next = before;
 next->next = now;

 before = beforeTmp;
 now = nowTmp;
 next = nextTmp;
 }

 head = now;
 return head;
}
};

Android通用控件及响应

Mon, 31 Aug 2015 14:09:07 +0000

在Android的开发中，可能需要有一些自定义的Layout，比如APP中常常需要一个通用的title。但是Android自带的可能并不能满足要求，需要自己实现，但是因为一个APP中常常含有多个Activity，这个时候为了提高复用性，常常自己定义一个CommonTitle。本文自己实现了一个CommonTitle。

新建一个布局

1
2
3


<!--?xml version="1.0" encoding="utf-8"?-->
<button>
</button>

新建一个CommonTitle类，继承LinearLayout

 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
33
34
35


package com.example.uicustomviews;

import android.app.Activity;
import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.Toast;

public class CommonTitle extends LinearLayout {
 public CommonTitle(Context context, AttributeSet attrs) {
 super(context, attrs);
 LayoutInflater.from(context).inflate(R.layout.commontitle, this);

 Button backButton = (Button)findViewById(R.id.backButton);
 backButton.setOnClickListener(new OnClickListener() {
 @Override
 public void onClick(View view) {
 // TODO Auto-generated method stub
 ((Activity)getContext()).finish();
 }
 });

 Button editButton = (Button)findViewById(R.id.editButton);
 editButton.setOnClickListener(new OnClickListener() {
 @Override
 public void onClick(View view) {
 // TODO Auto-generated method stub
 Toast.makeText(getContext(), "Please edit the context", Toast.LENGTH_SHORT).show();
 }
 });
 }
}

在需要的Activity中引入自己定义的CommonTitle即可
1

运行效果如下：

[leetcode_238] Product of Array Except Self

Mon, 31 Aug 2015 11:47:19 +0000

输入数组a1,a2,a3…

生成数组a2*a3, a1*a3, a1*a2，但是希望能够在O(n)的时间内解决，且不能使用除法。

用两个额外的数组记录ai前和ai后的乘积即可。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


class Solution {
public:
 vector<int> productExceptSelf(vector<int>& nums) {
 int size = nums.size();
 vector<int> front(size), back(size), result(size);
 front[0] = 1;
 back[size-1] = 1;
 for (int i = 1;i < size;i++)
 {
 front[i] = front[i-1] * nums[i-1];
 }
 for (int i = size - 2;i >= 0;i--)
 {
 back[i] = back[i + 1] * nums[i + 1];
 }
 result[0] = back[0];
 result[size-1] = front[size - 1];
 for (int i = 1;i < size - 1;i++)
 {
 result[i] = front[i] * back[i];
 }
 return result;
 }
};

[leetcode_172]Factorial Trailing Zeroes

Mon, 31 Aug 2015 11:43:47 +0000

计算n!的尾部有多少个连续的0，实际上问题可以准换为，分解质因数后，有多少个5(因为2比5多)。但是计算机5的时候有技巧，如果直接每个数模的话会超时，实际上只需要计算5^k次与n的关系即可。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


class Solution {
public:
 int trailingZeroes(int n) {
 vector<int> five(14);
 for (int i = 1; i <= 13; i++) {
 five[i] = ((int)pow(5.0, i));
 }
 int before = 0;
 int count = 0;
 for (int i = 13; i >= 1; i--) {
 if (five[i] <= n) {
 count += (n / five[i] - before) * i;
 before = (n / five[i]);
 }
 }
 return count;
 }
};

[leetcode_257]Binary Tree Paths

Fri, 28 Aug 2015 14:24:23 +0000

遍历二叉树的所有路径，搜索即可。

 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
33
34
35
36
37
38
39
40
41
42
43
44
45
46


class Solution {
public:
 string convertIntToStr(int num)
 {
 char str[255];
 sprintf(str, "%d", num);
 return str;
 }

void binaryTreePath(TreeNode* node, string& path, vector<string>& paths)
{
 if (NULL == node)
 {
 return;
 }
 path += convertIntToStr(node->val);
 if (NULL != node->left)
 {
 string tmp = path;
 path += "->";
 binaryTreePath(node->left, path, paths);
 path = tmp;
 }
 if (NULL != node->right)
 {
 string tmp = path;
 path += "->";
 binaryTreePath(node->right, path, paths);
 path = tmp;
 }
 if (NULL == node->left && NULL == node->right)
 {
 paths.push_back(path);
 }
}

vector<string> binaryTreePaths(TreeNode* root) {
 vector<string> paths;
 paths.clear();

 string path = "";
 binaryTreePath(root, path, paths);

 return paths;
}
};

[leetcode_165] Compare Version Numbers

Thu, 27 Aug 2015 13:37:59 +0000

题意的换一种说法：
将输入的两个数字，分别用 . 分割，然后逐一比较大小。如果数字数量不一样，多的大。前提是多出来的有不为 0 的。

 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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57


class Solution {
public:
 void getNums(string version1, vector<int> &v1)
 {
 int s = 0;
 int pos = version1.find(".");
 while (-1 != pos)
 {
 v1.push_back(atoi(version1.substr(s, pos - s).c_str()));
 s = pos + 1;
 pos = version1.find(".", pos + 1);
 }
 v1.push_back(atoi(version1.substr(s).c_str()));
 }
 int compareVersion(string version1, string version2) {
 vector<int> v1, v2;
 v1.clear();
 v2.clear();
 getNums(version1, v1);
 getNums(version2, v2);
 int min = v1.size() > v2.size() ? v2.size() : v1.size();
 for (int i = 0; i < min;i++)
 {
 if (v1[i] > v2[i])
 {
 return 1;
 }
 if (v1[i] < v2[i])
 {
 return -1;
 }
 }
 if (v1.size() > v2.size())
 {
 for (int i = min; i < v1.size(); i++)
 {
 if (v1[i] > 0)
 {
 return 1;
 }
 }
 return 0;
 }
 if (v1.size() < v2.size())
 {
 for (int i = min; i < v2.size(); i++)
 {
 if (v2[i] > 0)
 {
 return -1;
 }
 }
 return 0;
 }
 return 0;
 }
};

[leetcode_203]Remove Linked List Elements

Thu, 27 Aug 2015 13:32:41 +0000

删除单链表中指定的val的所有节点。

 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
33
34
35
36


class Solution {
public:
 ListNode* removeElements(ListNode* head, int val) {
 if (NULL == head)
 {
 return NULL;
 }
 ListNode * before = NULL;
 ListNode * now = head;
 while (now != NULL)
 {
 if (now -> val == val)
 {
 if (before == NULL)
 {
 head = head->next;
 now = head;
 }
 else
 {
 if (now != NULL)
 {
 before->next = now->next;
 }
 now = before->next;
 }
 }
 else
 {
 before = now;
 now = now->next;
 }
 }
 return head;
 }
};

[leetcode_268] Missing Number

Thu, 27 Aug 2015 13:30:51 +0000

给定数列中，从 0 到 n，但是缺少一个数字 i。求 i 为多少。

 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


class Solution {
public:
 int missingNumber(vector<int>& nums) {
 int sum = 0;
 int max = 0;
 bool isZero = false;
 for (int i = 0; i < nums.size(); i++) {
 sum += nums[i];
 if (nums[i] >= max) {
 max = nums[i];
 }
 if (nums[i] == 0) {
 isZero = true;
 }
 }
 int oSum = (0 + max) * (max - 0 + 1) / 2;
 if (oSum == sum) {
 if (!isZero) {
 return 0;
 } else {
 return max + 1;
 }
 } else {
 return oSum - sum;
 }
 }
};

[leetcode_160]Intersection of Two Linked Lists

Thu, 27 Aug 2015 13:28:46 +0000

判断两个单链表的重合节点。思路很简单，长度那个链表，先走差距步即可。

 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
33
34
35
36
37
38
39
40
41
42


class Solution {
public:
 ListNode *getIntersectionNode(ListNode *headA, ListNode *headB) {
 int countA = 0;
 int countB = 0;
 ListNode * tmpA = headA;
 ListNode * tmpB = headB;
 while(NULL != tmpA)
 {
 countA++;
 tmpA = tmpA->next;
 }
 while(NULL != tmpB)
 {
 countB++;
 tmpB = tmpB->next;
 }
 int move = 0;
 if (countA > countB)
 {
 while (move < countA - countB)
 {
 headA = headA->next;
 move++;
 }
 }
 else
 {
 while (move < countB - countA)
 {
 headB = headB->next;
 move++;
 }
 }
 while (headA != headB)
 {
 headA = headA->next;
 headB = headB->next;
 }
 return headA;
 }
};

[leetcode_173]Binary Search Tree Iterator

Thu, 27 Aug 2015 13:27:01 +0000

二叉搜索树的遍历，其实也就是树的中序遍历。可以用迭代的方法。

 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
33
34
35
36
37
38
39
40
41
42


class BSTIterator {
public:
 int pos;
 vector<TreeNode *> treeNodeStack;

 void buildStack(TreeNode *node)
 {
 if (node == NULL)
 {
 return;
 }
 else
 {
 if (NULL != node->left)
 {
 buildStack(node->left);
 }
 treeNodeStack.push_back(node);
 if (NULL != node->right)
 {
 buildStack(node->right);
 }
 }
 }

 BSTIterator(TreeNode *root) {
 pos = 0;
 treeNodeStack.clear();
 buildStack(root);
 }

 /** @return whether we have a next smallest number */
 bool hasNext() {
 return treeNodeStack.size() > pos;
 }

 /** @return the next smallest number */
 int next() {
 return treeNodeStack[pos++]->val;
 }

};

[leetcode_204]Count Primes

Thu, 27 Aug 2015 13:25:23 +0000

统计小于输入数字n的所有素数的个数，用筛法即可。

 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


class Solution {
public:
 int * flag;
 int countPrimes(int n) {
 flag = new int[n + 10];
 for (int i = 1;i < n;i++)
 {
 flag[i] = 0;
 }
 for (int i = 2;i < n;i++)
 {
 if (0 == flag[i])
 {
 flag[i] = 1;
 for (int j = 2;j * i < n; j++)
 {
 flag[j * i] = -1;
 }
 }
 }
 int count = 0;
 for (int i = 1;i < n; i++)
 {
 if (1 == flag[i])
 {
 count++;
 }
 }
 return count;
 }
};

[leetcode_189]Rotate Array

Thu, 27 Aug 2015 13:24:07 +0000

根据输入k，对数组进行旋转，需要注意的是k的值可能是负数或者大于数组长度，模一下就好了。然后输出偏移量为size-k的两倍数组即可。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


class Solution {
public:
 void rotate(vector<int>& nums, int k) {
 if (nums.size() <= 0)
 {
 return ;
 }
 k %= nums.size();
 vector<int> dNums(nums.size() * 2);
 for (int i = 0;i < nums.size() * 2; i++)
 {
 dNums[i] = nums[i % nums.size()];
 }
 for (int i = 0;i < nums.size(); i++)
 {
 nums[i] = dNums[i + nums.size() - k];
 }
 }
};

[leetcode_168]Excel Sheet Column Title

Thu, 27 Aug 2015 13:22:04 +0000

将数字转换成Excel列好，开始以为简单的26进制，但是需要考虑到的是，进制中没有0，所以额外借用@来代表0，所以之后需要转换一次。

 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
33
34
35
36
37
38
39
40
41
42


class Solution {
public:
 string convertToTitle(int n) {
 string title = "";
 while (n > 0)
 {
 title += 'A' + n % 26 - 1;
 n /= 26;
 }
 int pos0 = 0;
 while (pos0 < title.length())
 {
 int pos = pos0;
 while (title[pos] == '@' && pos < title.length())
 {
 title[pos] = 'Z';
 if (pos + 1 < title.length() && title[pos + 1] != '@')
 {
 title[pos+1]--;
 pos++;
 }
 else
 {
 title = title.substr(0, pos);
 break;
 }
 }
 pos0++;
 }
 int s = 0;
 int e = title.length() - 1;
 while (s < e)
 {
 char tmp = title[s];
 title[s] = title[e];
 title[e] = tmp;
 s++;
 e--;
 }
 return title;
 }
};

[leetcode_228] Summary Ranges

Thu, 27 Aug 2015 13:17:31 +0000

简单的模拟题，合并区间

 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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55


class Solution {
public:
 string convertIntToStr(int num)
 {
 char str[255];
 sprintf(str, "%d", num);
 return str;
 }

 vector<string> summaryRanges(vector<int>& nums) {
 vector<string> ranges;
 ranges.clear();
 if (nums.size() <= 0)
 {
 return ranges;
 }
 int start = nums[0];
 int end = nums[0];
 for (int i = 1;i < nums.size(); i++)
 {
 if (nums[i] - nums[i-1] == 1)
 {
 end = nums[i];
 }
 else
 {
 string item = convertIntToStr(start);
 if (end == start)
 {
 ranges.push_back(item);
 }
 else
 {
 item += "-";
 item += convertIntToStr(end);
 ranges.push_back(item);
 }
 start = nums[i];
 end = start;
 }
 }
 string item = convertIntToStr(start);
 if (end == start)
 {
 ranges.push_back(item);
 }
 else
 {
 item += "-";
 item += convertIntToStr(end);
 ranges.push_back(item);
 }
 return ranges;
 }
};

CoinLife——生活管家

Sun, 23 Aug 2015 16:02:33 +0000

CoinLife于由我独立编写完成的移动端的WebApp，是一个生活小助手。WebAPP-详细介绍 | Android-详细介绍

具有以下功能：

项目管理
账单管理
菜单管理

[WorldWind]1.初识WorldWind——WorldWind编译生成，解决乱码等问题

Sun, 23 Aug 2015 03:01:39 +0000

本文中World Wind的GitHub源码下载地址：https://github.com/hujiulin/WorldWind

美国国家航空航天局（National Aeronautics and Space Administration， NASA）主导的World Wind是全球开发人员共同参与研发的一个开源地理信息系统项目。由NASA Research开发，NASA Learning Technologies来发展，将地球的卫星、电子、地形地图以及其他地理数据通过一个三维的数字化的地球进行展示，旨在面向各行业的数据集成，支持WMS、WFS、WTMS等服务，是一款非常优秀的三维客户端框架绘制引擎。它使用了XML对数据进行描述和设置，具有良好的通用性和扩展性。World Wind目前有基于.NET和Java开发的两种版本。World Wind除了三维地球的基础功能之外，还具有很强的可扩展性，具有多种功能性插件，支持谷歌、微软等发布的地图（卫星、电子、地形）数据。

本文主要解决了World Wind编译、运行、中文乱码等问题。

源码的下载，环境的配置，源码的编译 [使用国际网络，以防网络不能访问]

源码的下载

WorldWind分为.Net和java两种版本，Nasa的官方网站是：http://worldwind.arc.nasa.gov/java/

提供java版本的源码下载。

.Net版本的源码下载：

http://worldwind31.arc.nasa.gov/svn/trunk/WorldWind/

这里提供的是svn，建议用svn进行download

备注：上述SVN是通过http://www.worldwindcentral.com/wiki/Source_code 维基百科找到的。

环境的配置

需要提前装好DirectX9

源码的编译

乱码：会发现很多字符串相关的语法错误。文件编码引起
- 在VS的解决方案管理器里右键文件
- 选“打开方式”，
- 选“带编码功能的CSharp编辑器”
- 选“西欧(windows)-代码页 1252”
- 打开文件，无乱码
- 文件菜单文件的保存编码改成UTF8，再保存源码文件
  
  备注：受影响的文件有6个左右
LoaderLock问题：
- 菜单（调试->异常）——>异常窗口——>ManagerDebuggingAssistants——>去掉LoaderLock选项
注册表权限问题：
- 打开HtmlEditor项目的属性，取消“生成（Build ）”选项卡的为COM互操作注册（‘Register for COM interop’）前的勾选
开始运行程序，发现一切正常，但是从初始化界面到程序本身需要等待较长的时间，这是因为中国连不上worldwind的服务器造成的原因，worldwind自己也提供离线模式，亦可以修改xml中wms服务器的url。此处暂时采用的办法是注释掉以下两行代码：
- Worldwind->PluginSDK->ConfigurationLoader.cs中：262行
- 321行
运行程序，加载Initializing的画面错位：
- 通过调试发现在worldwind.cs中的public MainApplication()中[563行]
- 使用splash窗体。
Splash窗体：
- Splash构造函数
- 可以看到picturebox的代码注释，而且窗体上并无picturebox的控件。
  
  使用的是
  
  将图片调整成如图所示的样子，启动程序正常。
决定将源码备份到百度网盘和自己的svn服务器上。[百度的服务器上没上传成功]
刚才迁移了worldwind的源码，出现一个问题：
- 重新生成，清理项目都没有用。
- 解决方法：
  - 删除该文件：
  - 删除之后，需重新配置：
问题解决。
- 备注：第一次运行程序时，稍微需要等下。
- 如果缺少引用：AVIFile.dll FlickrNel.dll等引用，请将Release模式切换为Debug，即可完全编译运行通过。[当然具体原因是需要将对应dll拷贝到Release目录下。]
- 在解决乱码问题的时候，部分人遇到一个情况：主界面显示度数的地方会形成“掳”这样的乱码，这是因为乱码问题并没得到完全解决，请在“高级选项保存”时选择：带签名的UTF-8保存即可解决该问题。

乱码的文件有：

Project	File
WorldWind	Compass3D.cs
WorldWind	GPSTrackerPlugin.WorldWind.cs
WorldWindow	WorldWindow.cs
PluginSDK	ConfigurationLoader.cs
PluginSDK	Angle.cs

乱码问题全部解决：

今天将svn上的代码，迁移到x64的机器上编译，程序不能运行，调试模式下看到错误：

“未处理的“System.BadImageFormatException”类型的异常”

解决方式：

Any CPU或者x64模式->改成x86，然后将output path改成与“..binDebug”

重新生成解决方案，编译运行即可成功：

原文链接：http://cesiumcn.org/topic/206.html | 国内快速访问：http://cesium.coinidea.com/topic/206.html

[leetcode_190]Reverse Bits

Fri, 21 Aug 2015 14:19:09 +0000

将一个正整数，转换成二进制，然后颠倒顺序，再输出成十进制。模拟题。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


class Solution {
public:
 uint32_t reverseBits(uint32_t n) {
 //To binary
 vector<int> nums(32, 0);
 int index = 0;
 while(n > 0)
 {
 nums[index++] = n % 2;
 n /= 2;
 }

 uint32_t ans = 0;
 for (int i = 0; i < nums.size(); i++)
 {
 ans += nums[i] * (uint32_t)pow(2.0, (int)(nums.size() - i - 1));
 }
 return ans;
 }
};

[leetcode_202]Happy Number

Fri, 21 Aug 2015 14:17:58 +0000

判断一个数 n 是否是 happy number。happy number 的定义是，各位数依次平方求和，看是否能等于 1，如果不等于 1，再重复上述过程。实际上，这个过程将会是一个循环。[猜的，并没有证明]。

 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


class Solution {
public:
 map<int, bool> flag;
 bool isHappy(int n)
 {
 if (n == 1)
 {
 return true;
 }
 map<int, bool>::iterator it = flag.find(n);
 if (it != flag.end())
 {
 return false;
 }
 else
 {
 flag.insert(map<int, bool>::value_type(n, true));
 }
 int tmpNum = 0;
 while (n > 0)
 {
 tmpNum += (n % 10) * (n % 10);
 n /= 10;
 }
 return isHappy(tmpNum);
 }
};

[leetcode_231]Power of Two

Fri, 21 Aug 2015 14:16:13 +0000

判断一个数是否是2的幂。有的是位运算，移位即可。

class Solution {
public:
bool isPowerOfTwo(int n) {
if (n <= 0)
{
return false;
}
while(true)
{
if (n == 1) {
return true;
}
if (n % 2 != 0) {
return false;
}
n >>= 1;
}
}
};

[leetcode_263]Ugly Number

Fri, 21 Aug 2015 14:14:39 +0000

判断一个数是否是丑数，模拟解出来的。

 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
33
34
35


class Solution {
public:
 bool isUgly(int num) {
 if (num <= 0)
 {
 return false;
 }
 while(true)
 {
 if(num%2 == 0)
 {
 num /= 2;
 }
 else if(num%3 == 0)
 {
 num /= 3;
 }
 else if(num%5 == 0)
 {
 num /= 5;
 }
 else
 {
 if (num == 1)
 {
 return true;
 }
 else
 {
 return false;
 }
 }
 }
 }
};

[leetcode_225]Implement Stack using Queues

Fri, 21 Aug 2015 14:13:33 +0000

模拟一个栈，用vector偷懒解决问题。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


class Stack {
public:
 vector<int> stack;
 // Push element x onto stack.
 void push(int x) {
 stack.push_back(x);
 }

 // Removes the element on top of the stack.
 void pop() {
 stack.pop_back();
 }

 // Get the top element.
 int top() {
 return stack[stack.size() - 1];
 }

 // Return whether the stack is empty.
 bool empty() {
 return stack.empty();
 }
};

[leetcode_153]Find Minimum in Rotated Sorted Array

Fri, 21 Aug 2015 14:12:27 +0000

这个题挺有意思的，给定一个排序的数组：1,2,3,4,5,6,7，但是这个数组经过了一个旋转，比如，4,5,6,7,1,2,3。这个时候求这个数组中最小的元素。O(n)一定能解出来。记得去年面试滴滴打车的时候问过类似的问题。当时笃定是二分查找，但是感觉说得不清楚。这次做题显然思路就清晰了。

 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


class Solution {
public:
 void binarySearch(vector<int>& nums, int left, int right, int &min)
 {
 if (left > right)
 {
 return ;
 }
 int mid = (left + right) / 2;
 if (nums[mid] >= min)
 {
 binarySearch(nums, left, mid - 1, min);
 binarySearch(nums, mid+1, right, min);
 }
 else
 {
 min = nums[mid];
 binarySearch(nums, left, mid - 1, min);
 }
 }

 int findMin(vector<int>& nums) {
 int min = nums[0];
 binarySearch(nums, 0, nums.size() - 1, min);
 return min;
 }
};

[leetcode_242]Valid Anagram

Fri, 21 Aug 2015 14:08:11 +0000

判断两个字符串是否含有相同的字母且字母个数相同。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


class Solution {
public:
 bool isAnagram(string s, string t) {
 vector&lt;int&gt; sCount(26, 0);
 for (int i = 0;i &lt; s.length();i++)
 {
 sCount[s[i] - 'a']++;
 }
 for (int i = 0;i &lt; t.length();i++)
 {
 sCount[t[i] - 'a']--;
 }
 for (int i = 0;i &lt; sCount.size(); i++)
 {
 if (0 != sCount[i])
 {
 return false;
 }
 }
 return true;
 }
};

[leetcode_169]Majority Element

Wed, 19 Aug 2015 13:03:04 +0000

求出给定数组中，超过半数的元素（保证有数字超过半数）。注意数组长度的奇偶。hash记录一下即可。

 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


class Solution {
public:
 int majorityElement(vector<int>& nums) {
 map<int, int> m_nums;
 m_nums.clear();
 for (int i = 0; i < nums.size(); i++)
 {
 auto it = m_nums.find(nums[i]);
 if (it == m_nums.end())
 {
 m_nums.insert({nums[i], 1});
 }
 else
 {
 m_nums.erase(nums[i]);
 m_nums.insert({nums[i], ++(it->second)});
 }
 }

 for (auto it = m_nums.begin(); it != m_nums.end(); it++)
 {
 if (it->second >= nums.size() / 2 + 1)
 {
 return it->first;
 }
 }
 }
};

[leetcode_217]Contains Duplicate

Wed, 19 Aug 2015 13:01:16 +0000

判断给定数组中是否含有重复元素。hash表即可解。实际上我用的是map，即C++中的二叉搜索树。O(logn)的解法，时间不是特别好。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


class Solution {
public:
 bool containsDuplicate(vector<int>& nums) {
 map<int, bool> m_nums;
 m_nums.clear();
 for (int i = 0; i < nums.size(); i++)
 {
 map<int, bool>::iterator it = m_nums.find(nums[i]);
 if (it == m_nums.end())
 {
 m_nums.insert(map<int, bool>::value_type(nums[i], true));
 }
 else
 {
 return true;
 }
 }
 return false;
 }
};

[leetcode_171]Excel Sheet Column Number

Wed, 19 Aug 2015 12:59:48 +0000

求Excel中AB表示的列的实际列数，其实就是二十六进制。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


class Solution {
public:
 int titleToNumber(string s) {
 int sum = 0;
 int size = s.length();
 for (int i = 0; i < size; i++) {
 sum += (s[i] - 'A' + 1) * (int)pow(26.0, (size - i - 1));
 }
 return sum;
 }
};

[leetcode_226]Invert Binary Tree

Wed, 19 Aug 2015 12:58:35 +0000

镜像二叉树，其实就是对二叉树的后序遍历+交换左右子节点。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


class Solution {
public:
 void swap(TreeNode & left, TreeNode *& right)
 {
 TreeNode * tmp = left;
 left = right;
 right = tmp;
 }
 TreeNode * invertTree(TreeNode* root) {
 if (root == NULL)
 return NULL;
 if (root->left != NULL)
 invertTree(root->left);
 if (root->right != NULL)
 invertTree(root->right);
 swap(root->left, root->right);
 return root;
 }
};

[leetcode_235]Lowest Common Ancestor of a Binary Search Tree

Wed, 19 Aug 2015 12:57:17 +0000

求二叉树中两个节点的最邻近公共祖先。以前做过类似的题目，但是确实好久没A题了，自己想了下。深度优先搜索，然后分别求出两条路径再求交，开始担心会超时，结果AC挺快的。

 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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54


class Solution {
public:
 bool isFind;
 vector<TreeNode *> pV, qV;
 void FindK(TreeNode *node, TreeNode* k, vector<TreeNode *> &kV)
 {
 kV.push_back(node);
 if (isFind || node == k)
 {
 isFind = true;
 return;
 }
 if (NULL != node->left)
 {
 FindK(node->left, k, kV);
 if (isFind)
 {
 return;
 }
 kV.pop_back();
 }
 if (NULL != node->right)
 {
 FindK(node->right, k, kV);
 if (isFind)
 {
 return;
 }
 kV.pop_back();
 }
 }
 TreeNode* lowestCommonAncestor(TreeNode* root, TreeNode* p, TreeNode* q) {
 if (NULL == root)
 {
 return root;
 }
 pV.clear();
 qV.clear();
 isFind = false;
 FindK(root, p, pV);
 isFind = false;
 FindK(root, q, qV);
 int i = 0;
 int minSize = pV.size() > qV.size() ? qV.size() : qV.size();
 for (i = 0;i < minSize; i++)
 {
 if (pV[i] != qV[i])
 {
 break;
 }
 }
 return pV[i - 1];
 }
};

[leetcode_191]Number of 1 Bits

Wed, 19 Aug 2015 12:55:17 +0000

请输入整数的二进制中1的个数，简单的模拟。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


class Solution {
public:
 int hammingWeight(uint32_t n) {
 int count = 0;
 while(n > 0)
 {
 count += n%2;
 n /= 2;
 }
 return count;
 }
};

[leetcode_237]Delete Node in a Linked List

Wed, 19 Aug 2015 12:53:27 +0000

删除单链表中，指定的节点。
最开始读题的时候，觉得至少应该给头节点和目标节点，但是猜测之后发现，题目可能是要求，将目标节点后的节点的val覆盖前面的节点的val，而不是单链表中真正意义的删除。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


class Solution {
public:
 void deleteNode(ListNode* node) {
 ListNode * next = node->next;
 ListNode * before = NULL;
 while(next != NULL)
 {
 node->val = next->val;
 before = node;
 node = next;
 next = next->next;
 }
 before->next = NULL;
 }
};

[leetcode_258]Add Digits

Wed, 19 Aug 2015 12:38:32 +0000

O(1)的方法没有想出来，模拟的方法如下：
每次计算所有位数之和，直到该和小于10。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


class Solution {
public:
 int addDigits(int num) {
 int sum = 0;
 while(num > 0)
 {
 sum += num % 10;
 num /= 10;
 }
 if (sum >= 10)
 {
 return addDigits(sum);
 }
 else
 {
 return sum;
 }
 }
};

搭建Andriod开发环境

Mon, 17 Aug 2015 04:45:38 +0000

Andriod开发环境比较主流的有两种：

1. Google出的Andriod Studio

第一种听名字就感觉很专业，而且又是Google出的，现在也比较稳定了。但是因为咱们国家的一些实际情况，*.google.com是很难访问的，而且近期是越来越难了。但是Andriod Studio是严重依赖于网络的。我下载使用之后比较不方便，对于上网比较方便的用户，推荐可以考虑使用。国内可访问下载地址：http://www.android-studio.org/

2. Eclipse

Eclipse是目前非常流行的一种开发Andriod的IDE。

推荐一个国内非常专业的网站：http://www.androiddevtools.cn/

这个网站里面涵盖了所有需要的Andriod相关的资源。

需要准备的环境如下：

Java

官方地址：http://www.java.com/zh_CN/

Andrioddevtools地址：http://www.androiddevtools.cn/ 选择Andriod SDK Tools -> JDK

Eclipse

官方地址：http://www.eclipse.org/downloads/

推荐使用 IDE For Java EE，Eclipse区分版本，我下载的是目前最新的Mars。

ADT(Andriod Develop Tool): Eclipse插件

Eclipse是开源的强大的可扩展的IDE，它有非常多的插件。ADT就是其中的一个。

Andrioddevtools地址：http://www.androiddevtools.cn/ 选择Andriod SDK Tools -> ADT Plugin

ADT的安装方法是：

下载最新的一个rar压缩包到本地。
打开Eclipse，Help->Install New Software

点击Archive，选择本地的压缩包，Name设置为ADT即可。

安装ADT之后，如果在Eclipse的工具栏上，没有出现这两个图标，请在Eclipse->Window-Perspective-Customize Perspective中勾选即可。这两个图标一个管理SDK另一个管理AVD。AVD是模拟的Andriod设备。

Select All, 点击Finish。

Android SDK-Tools

Andrioddevtools地址：http://www.androiddevtools.cn/ 选择Andriod SDK Tools ->SDK Tools

下载安装到自己指定的目录中，因为最终的目录的大小会比较大，请预留好足够的空间。

在Eclipse->Preferences中指定SDK Location

Android SDK

可以看到我的Location下面有Andriod 4.3.1而你的可能是没有的。因为需要安装具体的SDK包。

Andrioddevtools地址：http://www.androiddevtools.cn/ 选择Andriod SDK Tools ->SDK

下载即可，推荐下载4.0.0之后的版本。

将解压的文件夹拷贝进入：Android SDK-Tools文件夹中的Platforms中，如果没有请新建该文件夹。

Andriod Build-Tools

这是Android开发所需的Build-Tools，下载并解压后，将解压出的整个文件夹复制或者移动到 your sdk 路径/build-tools 文件夹即可。

Andrioddevtools地址：http://www.androiddevtools.cn/ 选择Andriod SDK Tools ->Build-Tools

Andriod Platform-Tools

这是 adb, fastboot 等工具包。把解压出来的 platform-tools 文件夹放在 android sdk 根目录下，并把 adb所在的目录添加到系统 PATH 路径里，即可在命令行里直接访问了 adb, fastboot 等工具。

Andrioddevtools地址：http://www.androiddevtools.cn/ 选择Andriod SDK Tools ->Platform-Tools

Andriod SDK System-Images

这是在创建模拟器时需要的system image，也就是在创建模拟器时 CPU/ABI项需要选择的，下载并解压后，将解压出的整个文件夹复制或者移动到your sdk 路径/system-images文件夹下即可，如果没有 system-images目录就先创建此文件夹，然后打开SDK Manager，打开 Tools(工具)菜单选择Options(选项)菜单项打开Android SDK Manager Setting对话框，点击 Clear Cache(清除缓存)按钮，然后重启Eclipse(或Android Studio)和SDK Manager。

Andrioddevtools地址：http://www.androiddevtools.cn/ 选择Andriod SDK Tools -> System-Images

AVD

创建一个AVD用于调试。

点击AVD图标，点击Create。根据自己的需要创建即可。

新建一个HelloWorld项目

Eclipse：File->New->Other->Andriod Application Project即可，后面一直Next和Finish。

运行效果如下：

[C++] 绘制菱形

Mon, 27 Jul 2015 02:04:30 +0000

 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
33


#include <iostream>
using namespace std;

int main()
{
 int n; // 菱形最长行的个数为n，且n一定为奇数因为 n = 2*k + 1
 cin >> n;

 int cn = 1;
 bool isUp = true;
 for (int i = 1; i <= n; i++) {
 for (int j = 1; j <= (n - cn) / 2; j++) {
 cout << " ";
 }
 for (int j = 1; j <= cn; j++) {
 cout << "*";
 }
 for (int j = 1; j <= (n - cn) / 2; j++) {
 cout << " ";
 }
 cout << endl;

 if (cn >= n) {
 isUp = false;
 }
 if (isUp) {
 cn += 2;
 } else {
 cn -= 2;
 }
 }
 return 0;
}

[C++]c++创建txt文件，文件名为输入的字符串，求字节数

Sun, 26 Jul 2015 02:04:30 +0000

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


#include <iostream>
using namespace std;

int main() {
 char filename[255];
 cin >> filename;

 FILE * pFile = fopen(filename, "r");
 fseek(pFile, 0L, SEEK_END);
 long count = ftell(pFile);
 cout << "字节数=" << count << endl;
 fclose(pFile);
 return 0;
}

[JavaScript]求n以内只能被自身和1整除的数（素数或质数）

Sun, 26 Jul 2015 02:01:42 +0000

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


<script type="text/javascript">
var arr = new Array();
var flag = new Array(1001);
for (var i = 1; i <= 1000; i++) {
 flag[i] = 0;
}
for (var i = 2; i <= 1000; i++) {
 if (flag[i] == 0) {
 flag[i] = 1;
 arr.push(i);
 for (var j = 1; j * i <= 1000; j++) {
 flag[j*i] = 1;
 }
 }
}
var ans = "2";
for (var i = 1; i < arr.length; i++) {
 ans = ans + "," + arr[i].toString();
}
alert(ans);
</script>

用的筛法，性能挺高的，Chrome下测试通过，希望能帮助您。

这是我在百度知道上的回答。

[读书笔记]哥德尔、埃舍尔、巴赫：集异璧之大成

Sat, 25 Jul 2015 07:04:11 +0000

2012年11月28日星期三 购书前奏曲和序言

今年11月11日，我的室友星星欠我30元钱，我让他送我光棍节礼物，不用还我钱了。他问我要啥，那段时间看乔布斯传看得很high，于是觉得北大学子一定知道很多好书，让他送我本书，推荐下，他说GEB不错。我当时愣了下，这应该是数理逻辑要看的一本书。我想了想让他给我买了浪潮之巅。但是还是去搜索了GEB这本书。当当网上的评价是，“这是一本空前的奇书，也是一本杰出的科学普及名著，它以精心设计的巧妙笔法深入浅出地介绍了数理逻辑、可计算理论、人工智能等学科领域中的许多艰深理论，轻松、幽默、流畅的文字隐藏着大量的潜台词，它们前后照应、互相联系，交织成一个复杂、无形的网络，读者看不见它，但可以嗅出它的气味，并觉察到这是作者有意喷洒的。”

11月22日，从“当当网”够得这本书。

11月28日，开始读这本书。[美]侯世达著。作者是华裔？怀着这种怀疑开始阅读。从乔布斯传开始，读每本书开始从序言开始。GEB序言38页。

从序言中了解到，此书的中文版成书得益于北大的吴允曾和马希文教授。我发现侯世达，并非华裔，而是道格拉斯·理查·郝夫斯台特 Douglas R. Hofstadter。此人很厉害，不仅在数学和计算机的造诣上，我个人认为在他促成多国语言的GEB的过程中，他绝对是一个语言学家。侯世达是他给自己取的中文名字，他还给本书的中文版作了序。

对于本书的中文版，绝对不是简单的英译中，我个人认为基于作者的语言造诣，加上北大和商务印书馆的支持，本书绝对算一部中文的巨作，做到了严复所谓的三个基本标准：信，达，雅。关于科学的文章我也很赞赏他们的关于科学性论文移译的观点。

比如：“a man, a plan, a canal : Panama”难道要翻译为“一位工程师设计了巴拿马运河”？但是作为计算机的学生，我惊奇的发现，这句英文是回文！所以为何不可对应中文的“叶落天落叶”。

关于GEB：Gödel, Escher, Bach: an Eternal Golden Braid

中文对应：

哥德尔、埃舍尔、巴赫：集异璧之大成

可以看到作者的英文前缀和英文对应。中文名和中文拼音对应。

对了，还有一个很艺术的地方：

这两个小方块的三维投影正好是GEB和EGB（本书的后半部分）。

北大的翻译工作组更加用心：中文的集异璧和英文的GEB全部在里面了。

2012年12月06日星期四 导言一首音乐——逻辑的奉献

最近太忙了，之前把《乔布斯传》和《浪潮之巅》看完了，想集中精力看GEB，结果一方面太忙，另一方面我发现除了计算机有点基础之外，我别的领域特别是音乐确实是个笨蛋。比起前两本书，GEB的不同之处在于你还需要动脑子去理解，这里面充满了逻辑的论证，稍不留神就出现的悖论，信手拈来的计算机中的回文、离散数学中的同构、物理学中的静止与运动。

今天终于把需要看完了。序言或者导言围绕着巴赫的音乐的奉献展开的，取得名字也很有意思叫逻辑的奉献，然后再分别谈了谈巴赫、艾舍尔和哥德尔这三位集大成者。

卡农和赋格：

作为一个音乐白痴，之前只听说过卡农，赋格连听都没听说过。不过大概尝试去理解他们的意思，你会发现巴赫确实是一个天才，从对仗美的角度，虽然我没有听过他的曲子。看他的曲子的结构也能想到，哇，那一定很美。

卡农的基本点是一个单一的主题与它自己相伴而奏。由加入的各个不同声部分别长处主题的“副本”。最简单的方式是轮唱。更复杂的卡农是由简入繁，不仅在时间上而且在因搞上相互交错，第一声部可能在C调上唱出主题，同第一声部相交错第二声部可能在比C调高五度的G调上唱出同一主题。第三部可能在比G调高五度的D调上唱出，这又有点等差数列的味道。看这个结构我就觉得很好听。卡能还有一种更复杂的阶段叫主题转位，意思是产生这样一个旋律，每当原来的主题跳上时，它就跳下，两者所越过的半音阶数相同。接下来是最玄妙的地方了——逆行。主题按照一定的时间从后往前奏出，即螃蟹卡农。无论哪一种副本都保留了原主题的信息，从任何一个副本可以恢复主题，这种保存信息的转换即同构。

正好周四的时候，老师问我什么是图同构，我说可以“印”过去！那什么是子图同构呢？

赋格有点类似于卡农，但没那么严格。

为了过渡到伟大的画家艾舍尔，我还必须提一下无穷升高的卡农。该卡农以C调开头，但是当即将结束时调子已经是D小调了，高了五度，而这个小变化让听者难以察觉。在所谓的“结尾”处，巴赫又把它巧妙地转回了开头，以此循环，无穷无尽。

“觅之，自有所获”。

如果说巴赫演奏出了这个无穷升高的怪圈，那么艾舍尔就画出了他！下图是瀑布，六个分立阶段即展示出了怪圈。

而上升与下降这幅画用了四个阶段就展示了怪圈，虽然比较松散。

2012年12月07日星期四 导言一首音乐——逻辑的奉献

下面来讲讲最伟大的数学家哥德尔。巴赫和艾舍尔的怪圈中存在着有穷和无穷的冲突，有一种强烈的悖论感，这里面是不是数学出了问题？

有一个悖论叫艾皮曼尼蒂斯悖论：艾皮曼尼蒂斯是一个克里特岛人，他说“所有克里特岛人都说谎”。

这句话可以理解为：“本句话是假的”。

你假设它为真，它却自己得出了自己是假。假设它为假，它却得出了自己是真。

哥德尔在1931年发表了哥德尔定理，简而言之，就是无论涉及什么样的公理系统可证性总比公理性要弱。

一切或许都可以认为是来自“自指”的怪圈。或者是一个环，比如下面这个例子，有这么两句话：

下面这个句子是假的。

上面这个句子是真的。

罗素和怀海特致力于消除这样的怪圈，《数学原理》就是一套比较奇怪的自下而上的看似能消除怪圈的公理系统。

希尔伯特方案：

希尔伯特希望有人能证明《数学原理》既是一致性的又是完全的。即自身无矛盾但是又能证明出里面所有的定理。这里面多少有点循环论证的味道，有点像强迫一个人，拉着自己的鞋带把自己举起来。

但是很遗憾，哥德尔证明了“没有一个公理系统可以产生所有的数论真理，除非它是一个不一致的系统”。

下面来谈谈什么是智能。

对于情境有很灵活的反应。
充分利用机遇。
弄懂含糊不清或彼此矛盾的信息。
认识到一个情境中什么是重要的因素，什么是次要的。
在存在差异的清净之间能发现它们的相似处。
从那些由相似之处联系在一起的事物中找出差别。
用旧的概念综合处新的概念，把它们用新的方法组合起来。
提出全新的观念。

2012年12月08日星期五 三部创意曲 WU谜题

下面来谈谈历史上最著名的芝诺悖论，运动无有。

跑得飞快的阿基里斯要追一只乌龟。前提是他让乌龟10米远。每次阿基里斯跑了距离的二分之一时，乌龟会向前移动一段距离。所以阿基里斯一直在缩小距离，但是永远也追不上乌龟。

这个悖论更一般的理解是：一个人从A走到B点，他每次走剩下距离的十分之一，所以他永远也走不到B点。

这个悖论的关键问题是时间。假设距离长为10米，而速度为10米每秒。实际上之所以走不到是因为每次用的时间是0.1，0.01，0.001……秒。合起来只有0.11111111111……秒，根本不到1秒，当然走不到。

后来再去查了查芝诺悖论，除了阿基里斯追乌龟之外，还有一个例子是飞矢不动，此处不详细描述，但是我觉得物理学上有句话叫静止时相对的，运动时绝对的，可以解释这个悖论。

本书的一个特点是每到一个新的章节作者都会借用阿基里斯和乌龟来聊聊天作为抛砖引玉。

第一章讲的内容是WU谜题，由于有离散数学和数理逻辑的基础理解起来不是很复杂。但是里面的确有很多巧妙和让人回味的地方。

一个初始串WJ，要构造或者推导出一个目标串WU。

一些规则：

如果一个归你所有的符号串结尾时J，则可以在其后面再加上一个U。
如果你有Wx，那么Wxx也是你的。
如果JJJ出现在你的储备中的一个符号串里，那么你可以用U代替JJJ而得到一个新的串。
如果UU出现在你的串中，你可以去掉它。

要构造WU人和机器是区别的，机器不会累但是也不会思考，所以他会一直按照你的规则找下去，而人不一样，会通过一些洞察力去寻找这个串，或者抱怨找不到。

或者更直观的讲，人有一种能力可以跳出来！跳出系统，去看别的，机器可不行。

判定过程：我们定义判定过程，就是在有限的时间内，指出一个串到底是不是一个定理。一般地讲，我们可以推出一个串是不是一个定理，但是它可能需要花上无穷的时间。

假设有一个怪物，它就是有足够的时间，如果他来解这个WU谜题，他可能会：

对于公理WJ应用每一条可以应用的规则，这产生出两个新的定理：WJU，WJJJ。
对于1产生的定理应用所有可以应用的规则，产生出新的定理：WJJU，WJUJU和WJJJJ。
对于2中的定理同样应用规则，并产生出新的定理。
……

乌龟说给阿基里斯的话。

这次的对话看似荒谬，但是却给我一种启迪或者叫震撼！什么叫做证明！推理！推论！我也见识到了假言命题的威力。

下面来看一个论证的小片段：

同等于一物的彼此亦相等
这个三角形的两条边同等于一物
这个三角形的两条边彼此相等

欧几里德的读者都会认为Z是合乎逻辑的推论，所以任何人只要认为A和B为真，则必定Z为真。

但是提出以下两种疑问：

1.有人不认为A、B为真。同意“如果A、B为真，则Z为真”

2.有人同意A、B为真。不认为“如果A、B为真，则Z为真”

1的情况我们可以理解，暂时不考虑。

下面讨论2的情况，请问如何试图让持2观点的人同意ABZ的这个论证呢。

下面尝试这种证法：

不妨把假言命题：“如果A、B为真，则Z为真”定义为命题C

以下证明是否可行呢？

ABCZ

OK! 那么出现质疑假言命题“若ABC为真则Z为真”的人呢？

难道要再次定义假言命题D? 循环往复？这儿是否让人想到巴赫的无穷升调呢！

多么有趣的一个抛砖引玉的例子~

先定义一个简单的系统：pq系统：

**三种符号：**p q –

**公理的定义：**只要x仅由一串短杠组成，那么x-qxp-就是一条公理

**规则：**假设x、y、z都代表只包含短杠的特定的符号产，并假设xqypz是一条已知的公理的话，那么x-qypz-是一条定理。

那么给定一个串如何判定他是否是一条定理？

1.自底向上该方法类似于前面的WU谜题此处不再说明。

2.自顶向下：按照规则不停地寻找它的前驱串，并确认该串是否是一条公理。（当然我们有显然的方法判定一个串是否是一个公理，不然侯世达说：一切都没有希望了。）

经过仔细研究pg系统，可以发现一个经过洞察力可以发现的规律，就是若为定理那么一定是xqypz，且|x|=|y|+|z|

实际上，这是之前笔记中提到的一种东西叫同构：两个复杂的结构可以相互映射，并且每一个结构的每一部分在另一个结构中都有一个相应的部分。我们将一些列单纯的符号，赋予了现实生活的意义：加法。

可以看到这是我们的一厢情愿，当然你可以说q对应马，p对应幸福，-对应苹果。但是得出来的定理都是奇奇怪怪的目前现实生活毫无意义的关于马幸福和苹果的解释。当然我们的系统是实现定义好的，不能因为可以对应为加法，我们就异想天开地觉得x-q-x-p-x-是一个定理，因为6=2+2+2。这在现实生活中正确，但是在我们的pq系统是显然说不通的。

当然这种同构也不是唯一的，比如你可以把q对应为减法，p对应为等号这也说得通。以上一些简单但是在我看来比较妙趣横生的例子让我们感到了形式系统与现实的差别。

最后来讲讲给我最震撼的一个小例子：

12乘以12等于多少？144？对！如果我们对它怀疑可以去数一下12乘以12的矩阵格子有多少个。

那么123456789乘以987654321呢？我们不能去数数了吧。谁有能说这个值就是现在这个值呢？怎么证明呢？

下面介绍一个叫欧几里德定理的定理：针对有无穷多个素数这个命题，没有一个计数过程能够证明它的真假。不管我们数出了多少的素数，我们都无法确定素数的个数是有穷的还是无穷的。

欧几里德给出了一个神一样的证明，至少我觉得在当时甚是当时之后的相当长一段时间，大家都这样想。

挑出一个数N，可求得N!，得到一个新的数N!+1，这个数不能被2,3,4,5,6,7,8,9……N的任何数整除。

这种情况下只有两种结果N!+1要么是一个素数，要么它的素因数比N大，任何一种情况下，我们都找到了一个比N更大的素数。

所以当我们想绕过无穷这个概念来证明问题的时候可以使用类似于“所有”这种本身有穷的但是体现了无穷概念的词。

先来看看一幅艾舍尔的镶嵌

写在第一次面试

Tue, 21 Jul 2015 16:08:32 +0000

在经历过好多次被别人面试的经历之后，自己也终于可以开始面试别人了。虽然还是一只小菜鸟，但是依然还是想记录一下这次经历。

总体来说，开始一直没说话，后来看到面试者简历里面有TP框架和Yii框架之后，还是忍不住问了几句关于这些框架如何做xss和csrf防止的问题。

当聊到如何判断array中是否存在两个数之后满足目标数的时候，也问了几个问题。

总体来说，对自己的第一次面试还是比较满意的。但是，谈吐之前，可能攻击性比较强，希望自己引以为戒，多多改正:)。

[Yii]Yii下防守CSRF与XSS[二]

Tue, 21 Jul 2015 16:04:21 +0000

之前已经写过Yii下防守CSRF与XSS[一] 但是真正面临测试的时候，有一个需求是说希望过滤掉特殊的字符，比如:,:,”,<,>,%等。

Yii中的CHtml::purifier实际上只针对html的过滤，CHtml::encode本质上调用的是htmlspecialchars：

htmlspecialchars只转化<、>、单引号、双引号、&符号
htmlentities会转化所有的html符号

可以看到PHP内置的函数都不能过滤全部的特殊字符，此时采用的方式是在Yii框架下，新建一个Filter类，自己重写specialchar函数，可以随心所欲的替换字符。为了提高性能，可以定义成public static调用。

1
2
3
4
5
6
7


class Filter {
 public static function ReplaceSpecialChar($str) {
 $str=str_replace(":",$str); //TODO: replace other chars
 $str = htmlspecialchars($str);
 return $str;
 }
}

CoinJS——开源WEB组件库

Fri, 03 Jul 2015 17:06:30 +0000

最近想积累一个自己的开源的WEB组件库，尽量的简单，方便自己学习，同时也能给其他初学者分享一些心得。 GitHub下载地址：https://github.com/hujiulin/coinjs

- ProgressBar 进度条

- FloatBox 弹出框

- ImageWall 图片巨幕

- Nav 纯CSS导航条

- ScrollImage 滚动图片

写在毕业零周年

Fri, 03 Jul 2015 16:55:39 +0000

因为最近一直在忙毕业、搬家、入职的事儿，根本没有办法停下来好好写一些东西。感觉自己已经成为一个十足的家庭妇男了，买电器、买菜、做饭、带外卖、做家务一应俱全。

最近自己写了一句话在朋友圈——今天门一关，以后就是两个世界了。

毕业零周年，也是我学生生涯23周年（我妈妈说我两岁半开始上幼儿园）的结束，工作的零周年的开始。求职的这一年多来，杠过枪，打过炮，经历了风风雨雨，不过渐渐的也习惯了。

成长是什么：

成长就是：

当你进入超市的时候，你会发现一瓶最便宜的油也要30~40+；一个碗也要10元钱。精打细算过日子。
早上起来先煮个蛋来吃。
骑自行车，不要背书包，容易让背汗死，还是放篮子里面吧。
能分清电动自行车分为可拆卸的锂电池，与不可拆卸的铅酸蓄电池，锂电池的车不好看。
自习观察北京博大精深的交通，发现有自行车道，而且并线，分流十分合理，沿着自行车道骑，即便是立交桥也能顺畅的到达终点。这大抵就是和做人一样吧。
洗澡的喷头，可以泡在稀释的84消毒液中，杀菌效果好。
嗯，我就是穷。

未来的路该怎么走，我也不知道，最近想学学Android的开发，看看大神的《一行代码》。不过无论什么样的路，自己选的，跪着也要走完。

最后，送自己一句话吧，心态永远不死，那生活才会依然奔跑在路上。

——DevHu记录2015.07.04 于租的房子。

CCleaner清理电脑

Sun, 21 Jun 2015 07:33:06 +0000

即将迎来人生的一个重大转折，毕业。实验室有一台属于自己的电脑，在自己走的时候希望能对这台电脑有一个比较彻底的clean。听说有一个工具叫CCleaner，尝试了一下，效果还不错。可以对Windows | Mac | Andriod | iPhone 进行比较方便的清理工作。

Windows下可以进行：

Windows及应用程序清理
注册表清理
软件卸载及磁盘擦除

游记攻略-云南

Sat, 20 Jun 2015 10:41:51 +0000

这次的旅行是我们的毕业旅行。经过磕磕绊绊的争吵与筹谋[因为我比较担心MERS；从研二开始不大喜欢坐飞机，目测航程也上万公里]，最后终于敲定去云南。

交通工具

我们选择的路线是北京-昆明-大理-昆明-北京。因为我本人基本只坐国航的飞机，但是国航的飞机没有直达大理荒草机场的，所以中途倒了一下。很麻烦。我的建议是：尽量直接来回飞。

当然如果要从昆明去的话，有两种选择一种是大巴，一种是火车。我们来回选择的都是大巴。票价136元左右，5h左右[大理兴盛客运站-昆明西部客运站]很不幸的是，去的路上堵了两个小时。但是火车的时间是7-8h。一般有人建议火车去睡一晚上到。到了大理之后可以坐公交车，很便宜一般是1.5或者2元左右，下关去古城。如果太晚可以让客栈的人来接。

住宿

有钱的可以选择住双廊，不过我们查了一下不是很方便。我的建议是住古城，古城挺便宜的，一般80-130元一个晚上。我们住的是梦心谷客栈。挺不错的，有只狗，萌萌的。开始挺害怕的。后来发现特别温厚。

最后一个晚上住的是1969海上客栈。挺贵的，没有电视，而且水很小。但是环境确实吊炸天。

游玩

古城可以闲逛，挺悠闲的。

可以在环海西路骑自行车。

最后，感慨一下，毕业快乐。路还很长，慢慢走。。

[Redis]Yii配置Redis相关问题

Fri, 12 Jun 2015 06:24:58 +0000

基本配置操作：

yii main.php中：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


return array(
 ...
 'components'=>array(
 'redis_cache' => array (
 'class' => 'system.caching.CRedisCache',
 'hostname' =>'127.0.0.1',
 'port' => 6379,
 'password'=>'123456',
 'database'=>1
 ),
 ),
 ...
)

其中：
class中的CRedisCache是Redis的官方插件；
如果设置了密码需要password项；
database制定对应的数据库

调用操作：
$r_key = “key”;
Yii::app()->redis_cache->set($r_key, 99999);
echo Yii::app()->redis_cache->get($r_key);

但是在Redis数据库中并未发现名为“key”的键值，是因为yii的redis插件默认对key会进行md5加密。
通过查看CRedisCahce的父类CCache可以知道在CRedisCache.php中需要声明以下两个变量：

1
2


public $hashKey = false;
public $keyPrefix = "";

即可解决问题。

另外，如果遇到中文乱码不能查看的问题，是因为Redis数据库默认ANSIC编码，输入命令是请使用：
./redis-cli –raw -h 127.0.0.1
连接即可。

官方文档请查看：http://www.yiiframework.com/doc/api/1.1/CRedisCache/。

二维码在线生成

Sat, 30 May 2015 03:19:13 +0000

分享一个自己编写的简单的二维码在线生成工具，点击下方链接即可：

二维码在线生成

[HTML]DIV和table页面布局的区别和联系

Sat, 23 May 2015 05:38:17 +0000

DIV和Table页面布局的区别和联系

现在对于网页制作是选择传统的Table还是用新型的DIV，有分歧。一部分说还是用Table好，开发快，容易控制，浏览器兼容也好些；另一部分认为DIV好，以后的发展趋势,主要是如下原因：

DIV+CSS布局比Table布局节省页面代码，代码结构也更清晰明了。
DIV+CSS开发速度要比Table快，而且布局更精确，不过手写代码明显增加DIV+CSS布局，使网站版面布局修改变得更简单。
DIV+CSS布局能够适应未来多种客户端需求。
DIV+CSS布局节约站点所占空间和站点流量。这些都是DIV的好处。

DIV有这么多好处是不是有些心动，决定学它。DIV和Table各有长处，通常情况下它们可以互换使用。我感觉正确的符合标准的设计思路是：使用DIV等布局元素来制作页面的设计布局，定位，色块，图片等。使用Table，UL等这样的元素来显示页面中需要展示的数据。因为DIV不会像Table一样，在IE下要将整个Table下载完后才全部显示内容 (firefox不会)，所以用Table来布局显然是不合适的，尤其是数据量大时，在IE下用Table会发现慢得多。而DIV就好多了。当然，DIV也起整理数据的作用。

DIV用于布局，Table用于显示数据，这是现在最基本的设计原则。

Table里可以内嵌DIV。反之DIV可以内嵌Table吗?
当然可以了。
DIV是不是跟Table一样的作用?
DIV的作用跟Table是差不多的，但是DIV对XML的支持更好而且使用起来比较灵活，因此被推荐为新的网页布局方式。
DIV和Table哪个速度快?
DIV相对比较快，网页内容的显示需要将相对一整块的内容下载完成后再显示。使用DIV布局是许多的独立的相对较小的范围，而使用Table布局一般都会表格嵌套多层形成较大的下载范围。

另外CSS中的.与#的区别在于：

. 用class调用
# 使用id调用。

[Discuz]论坛邀请码

Sat, 23 May 2015 05:37:16 +0000

论坛是否开通邀请码注册
进入管理后台 => 全局 => 注册与访问 => 注册，设置是否开放邀请注册，以及邀请奖励所用的扩展积分，给邀请人和被邀请人奖励的积分数量，邀请注册成功是否加为好友等
编辑管理员权限
用户 => 用户组 => 其他 => 注册相关
购买注册码在好友页面查看

[nginx]linux下nginx的启动，关闭，重启

Sat, 23 May 2015 05:36:29 +0000

启动操作

1

/usr/nginx/sbin/nginx

1

/usr/nginx/sbin/nginx -t

查看配置信息是否正确。

停止操作

停止操作是通过向nginx进程发送信号（什么是信号请参阅linux文章）来进行的。

步骤1：查询nginx主进程号

1

ps -ef | grep nginx

在进程列表里面找master进程，它的编号就是主进程号了。

步骤2：发送信号

从容停止Nginx：
1

kill -QUIT 主进程号
快速停止Nginx：
1

kill -TERM 主进程号
强制停止Nginx：
1

pkill -9 nginx

另外，若在nginx.conf配置了pid文件存放路径则该文件存放的就是Nginx主进程号，如果没指定则放在nginx的logs目录下。有了pid文件，我们就不用先查询Nginx的主进程号，而直接向Nginx发送信号了，命令如下：

1

kill -信号类型 '/usr/nginx/logs/nginx.pid'

平滑重启

如果更改了配置就要重启Nginx，要先关闭Nginx再打开？不是的，可以向Nginx发送信号，平滑重启。

平滑重启命令：

1

kill -HUP 住进称号或进程号文件路径

或者使用

1

/usr/nginx/sbin/nginx -s reload

注意，修改了配置文件后最好先检查一下修改过的配置文件是否正确，以免重启后Nginx出现错误影响服务器稳定运行。判断Nginx配置是否正确命令如下：

1

nginx -t -c /usr/nginx/conf/nginx.conf

或者

1

/usr/nginx/sbin/nginx -t

[HTML]HTML传值

Sat, 23 May 2015 05:35:22 +0000

JS中可以用window.location.href属性获取完整地址,那么我们的参数完全可以使用GET模式来传递即表单的method="GET"

下边是用JS构造的获取get模式提交值的一个函数.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


function Request(strName) {
 var strHref = window.document.location.href;
 var intPos = strHref.indexOf("?");
 var strRight = strHref.substr(intPos + 1);

 var arrTmp = strRight.split("&");
 for (var i = 0; i < arrTmp.length; i++) {
 var arrTemp = arrTmp[i].split("=");
 if (arrTemp[0].toUpperCase() == strName.toUpperCase()) return arrTemp[1];
 }
 return "";
}

使用方法:
var id=Request("id");
document.write(id);

[Apache]虚拟主机配置，实现多域名访问本地项目php的空间

Sat, 23 May 2015 05:34:23 +0000

首先修改C盘WINDOWS\system32\drivers\etc目录下的 hosts 文件，用记事本打开，加入：
1 2

127.0.0.1 www.a.com 127.0.0.1 www.b.com
打开xampp\apache\conf\httpd.conf文件，搜索 “Include conf/extra/httpd-vhosts.conf”，确保前面没有 # 注释符，也就是确保引入了 vhosts 虚拟主机配置文件。

开启了httpd-vhosts.conf，默认的httpd.conf默认配置失效（确保 httpd-vhosts.conf 文件里也开启了虚拟主机配置，见第3条），访问此IP的域名将全部指向 vhosts.conf 中的第一个虚拟主机。
在虚拟主机设置文件xampp\apache\conf\extra\httpd-vhosts.conf里设置：
取消 NameVirtualHost *:80 前面的 ##，这样就启用了 vhosts.conf ，默认的httpd.conf默认配置失效。虚拟主机配置将只设置在 httpd-vhosts.conf 里。
1 2

DocumentRoot /xampp/htdocs/a ServerName www.a.com
1 2

DocumentRoot /xampp/htdocs/b ServerName www.b.com
设置完了第3条之后，你会发现访问 localhost直接指向到设置的 a 那个路径去了，这个问题在第2条有讲。也就是开启了 vhosts 后，默认的 httpd 的配置就会失效了，默认的访问就指向到 vhosts 里的第一条设置去了。这时候你要把 localhost 的目录配置给设置回来。
1 2

DocumentRoot /xampp/htdocs/ ServerName localhost

至此，XAMPP 的虚拟主机设置完毕，现在访问 localhost 还是原来的 XAMPP 的帮助指南，访问 www.a.com 将指向到绑定的 a 目录，访问 www.b.com 将指向到绑定的 b 目录。

[VPN]相关配置

Sat, 23 May 2015 05:33:34 +0000

Windows XP搭建方法如下：

开始－－控制面板－－管理工具－－服务－－启动四个关键服务（Workstation、Telephony、Remote Access Connection Manager、Routing and Remote Access）并将其设置自动启动－－控制面板－－网络连接－－传入的连接－－常规选项卡（勾选：虚拟专用网，允许他人通过interner或其它网络以 “隧道操作”方式建立到我的计算机专用连接）－－用户选项卡（勾选那些用户可以远程VPN连接）－－网络选项卡（TCP/IP地址指派：手动指定不同于服务器网段的IP地址，如服务器IP:192.168.1.1段，那么此处填192.168.2.1段）。

找到服务器的外部IP地址：

直接拨号方式－－开始－－控制面板－－网络连接－－本地连接－－支持－－IP地址：类似”58.60._.133”。
路由器拨号方式－－用IE浏览器内输入路由器IP地址（本网网关）－－找到该路由器IP地址：类似”58.60._.133”。

Windows XP客户端呼叫设置：

开始－－控制面板－－网络连接－－创建一个新的网络连接－－下一步－－连接到我的工作场所的网络－－虚拟专用网络连接（V）－－取个名字VPN－－不拨初始连接－－输入服务器端的IP址址或是它的域名，IP地址类似”58.60.*.133”－－完成。

客户端呼叫：

开始－－控制面板－－网络连接－－虚拟专用网络内可以看到刚设置的VPN拨号－－双击连接。
连接成功后，本机就与服务器电脑处于同一个局域网了。

常见VPN拨号错误：

VPN 800错误：服务器的外网IP地址没有找对或是没有设置DMZ。
VPN 628错误或 VPN 721错误：客户机与服务器的外网Wan口是同一端口。两电脑处于同一局域网内，属于同一条ADSL下的两台电脑，这样的电脑可以直接在服务器端的IP地址内填入该服务器（目的主机）的内网地址测试呼叫。
VPN 733错误：tcp/ip cp报告了错误，服务器端与客户端呼入的IP地址处于同一网段下。服务器端设置成手动指定（控制面板－－网络连接－－传入的连接－－网络选项卡－－TCP/IP地址指派：手动指定不同于服务器网段的IP地址，如服务器IP:192.168.1.1段，那么此处填192.168.2.1段）。

昨天实验室有人在陪今天试了试，果然好使。

[MapService]如何在自己的网页中嵌入地图

Sat, 23 May 2015 05:32:44 +0000

要在自己的网页中嵌入地图，常用的方法可以归纳为以下几种：

最简单的方法 ——使用谷歌地图主页的"链接"

如果你只需要在自己的页面上显示某个特定范围的地图，比如你的公司所在地，但是不需要在地图上添加任何额外的内容，比如标记、折线等等，那么，使用这个方法来嵌入谷歌地图是最简单的。

登录谷歌地图主页，定位你需要显示的范围后，点击地图左上角的“链接”，会出现一个信息框，给出两个输入框，把第二个输入框中的内容拷贝到你的页面上就可以了。

其实，这段嵌入代码就是一个iframe的声明，所以，虽然地图主页提供一个自定义地图并预览的功能，但是只能自定义地图的大小，如果需要的话，我们完全可以通过手动修改这个iframe声明来实现更多的自定义，比如，给这段iframe加上自定义的样式。
最精简的方法 ——使用谷歌静态地图

如果你需要显示某个特定范围的地图，而且需要在地图上加上一些标记、折线。但是，你并不在乎你网页上的地图能否拖拽，那么，这个静态地图应该就是你需要的了。

所谓静态地图，意思就是你在页面上嵌入的其实只是一个GIF图片，这个GIF图片是你通过URL从谷歌动态获取的，这样的嵌入地图就有别于我们常用的“动态”地图了，而且，加载这样的地图，比加载一个完整的地图要快捷的多。

要在你的页面上使用这样的静态地图，只需要使用一个img标签，把这个标签的src属性指定为谷歌静态地图的url就可以了。

看一个简单的静态地图URL：
1

http://ditu.google.cn/staticmap?center=39.970981,116.314108&zoom=16&size=400×400&key=YOUR_API_KEY
在这个URL中，你可以编辑center、zoom、size这些参数来指定地图的中心点、缩放级别、地图大小等等，当然，如果需要在地图上添加标记、折线，你还可以加上对应的参数。不过，不用担心你要记住这么多参数，这里有一个定制静态地图的向导，简单的几步就可以得到你需要的URL了。如果有兴趣，可以去研究一下谷歌静态地图的API文档。

严格来说，谷歌静态地图也是谷歌地图API的一种，所以，使用静态地图是需要你的谷歌地图API密钥的，如果你之前定义过地图API的密钥，直接复制过来就可以了，不需要再去注册。
最自由的方法 ——使用谷歌地图API

如果上面两种方式都不能满足你的需求，那么，就试试谷歌地图API吧。虽然谷歌地图API已经细分为JavaScript、Flash、Earth、Static等多个版本，但是，在我看来，JavaScript API是谷歌地图API的根本，所以在此，除非特别指明，说到谷歌地图API都是指谷歌地图JavaScript API。使用这个API，你可以用你愿意的任何可行的表现形式在地图上展现你的数据，甚至可以把你自己的地图做的比谷歌地图还漂亮。

要使用这个API在页面中嵌入地图，简单的步骤就是：
1. 使用JavaScript标签导入地图API类库；
2. 在页面上定义一个装载地图的元素，通常使用一个div标签，指定width和height;
3. 在你的JavaScript代码中new GMap2(document.getElementById("your map container's id"));
4. 使用GMarker、GPolyline等API中提供的类定制你要在地图上添加的标记、折线等等。
详细的创建谷歌地图过程可以看看上面的“使用JavaScript创建地图详解”。但是，要想自如的使用这个API，你需要具备一定的JavaScript知识和动手能力，此外，强烈建议你先读读谷歌地图JavaScript API的开发指南，能够解决你的一些常见疑问，当然了，你也可以在此文档找找你想了解的知识。

除了上面说的这几种方法，其实还有一些比较少用的方法也可以在网页中嵌入地图，在此不再赘述。

[HTML]防止F5重复刷新页面

Sat, 23 May 2015 05:30:50 +0000

a页面上有个form
你提交这个页面，转到b页面
在b页面上按刷新键，会弹出那个重新发送信息的对话框

这个问题我可以从编网页的角度解决
a页面提交到你的server page 上(asp,jsp)
server page处理后，不返给用户b页面
而是一个简单的c页面，如

然后就会马上转到b页面，这里是main.jsp

如果在b页面上刷新，不会弹出那个对话框
如果在b页面上按“后退”，是到a页面
用户觉察不到中间c页面的存在

更深入的，可以设计弹出一个javascript的对话框，确定以后，不管是刷新，还是后退，这个对话框都不会再次弹出
redirect.jsp

[JSP]JSP免费空间

Sat, 23 May 2015 05:29:00 +0000

当JSP网站写完需要发布时，对没有钱的个人或者学生来说，是一个头痛的问题。
我也遇到了这个问题。我在网上查询了一下，发现了两篇比较好的博文：
推荐一个免费的JSP空间：http://fireinwind.iteye.com/blog/705611

这篇博文让我认识到有两种免费的JSP空间。一个是jhost，一个是EATJ。
谈谈我使用这两个免费空间的感觉，免费的东西毕竟都有缺陷。比如jhost我在教育网访问卡得要死，上传东西太慢了，囧。EATJ的缺陷是每天的每六个小时会关闭你的服务器，只有你自己去开（关闭的时间点是4:00、10:00、14:00、18:00、24:00）。

所以我建议前期没钱的时候可以使用EATJ，速度还行，效果不过，唯一的不足是开关服务器。测试的话问题非常适合。

来谈谈jhost，他在用户体验这块做得比较好，做成了操作系统桌面的方式，便于管理，不过卡。

具体如何使用这两种空间请见博文：

jsp php爱好者的福音 eatj 和jhost

备注：jhost申请比较麻烦，需要验证码，这个网上搜索 jhost邀请码即可。

请在激活帐号以后，登录空间后台，在【控制面板】中激活您的【网站空间服务】。

本站规定：普通用户需每3天至少登录续期一次（在【控制面板】的【会员服务管理】中点击【空间续期】按扭），以确保您仍在使用本站的服务。
另外，本站会定期对超过规定时间内没有续期的用户暂停空间的TOMCAT服务，下次续期会重新启动。如超过一个月没有续期，您的帐户将被注销。

您可以通过本站积分延长更多的空间使用期或兑换其它服务，积分可通过推荐用户或现金购买，详见本站帮助。

[编程之美_2.9]斐波那契数列

Sat, 23 May 2015 05:20:58 +0000

 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


int Fibonacci(int n)
{
 if (1 == n)
 {
 return 1;
 }
 if (2 == n)
 {
 return 2;
 }
 return Fibonacci(n-1) + Fibonacci(n-2);
}

int FibonacciIteration (int n)
{
 int a = 1;
 int b = 2;
 if (n == 1)
 return a;
 if (n == 2)
 return b;
 for (int i = 3; i <= n; i++)
 {
 int now = a + b;
 a = b;
 b = now;
 }
 return b;
}

书中提到了一种方法： fi = fi-1 + fi-2 =>转换成矩阵的形式

[编程之美_2.9]斐波那契数列
时间复杂度为：O(log2n)。

[编程之美_2.8]找符合条件的整数

Sat, 23 May 2015 05:19:47 +0000

题意很简单，给定一个n, 求一个最小的m，使得n_m中的10进制表示只有0,1
方法1：Brute Force [大整数的情况需要考虑，何时终止，时间复杂度如何？]

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


bool CheckNumber(int number)
{
 while(number)
 {
 if (number%10 != 0 && number%10 != 1)
 return false;
 number /= 10;
 }
 return true;
}

int CalcMBruteForce(int n)
{
 int m = 1;
 while (!CheckNumber(m * n))
 {
 m++;
 }
 return m;
}

方法2：BFS [大整数的情况需要考虑，何时终止，去重复计算问题]

 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


int CalcM(int number)
{
 int i = 1;
 vector<int> vList;
 vList.clear();
 vList.push_back(0);
 vList.push_back(1);
 vector<int> vListC;
 int k = 1;
 // TODO:
 // BigInt
 // Delete duplicate
 while (true)
 {
 vListC.clear();
 for (vector<int>::size_type i = 0; i < vList.size(); i++)
 {
 if (vList[i] && vList[i] % number == 0)
 {
 return vList[i];
 }
 vListC.push_back(vList[i] + 0);
 vListC.push_back(vList[i] + (int)pow(10.0, k));
 }
 vList.clear();
 vList = vListC;
 k++;
 }
}

[编程之美_2.7]最大公约数的问题

Sat, 23 May 2015 05:18:46 +0000

GCD: 最大公约数，能被m,n整数整除的最大的整数。
貌似很早的就有了欧几里得的辗转相除法法
GCD(x, y) = GCD(x, x%y)
x = k*y + ｂ若d是x, y的最大公约数，那么d一定能被b整除，且d是x和b的最大公约数，b为x%y
代码如下：

1
2
3
4
5


// GCD
int GCD(int x, int y)
{
 return y == 0 ? x : GCD(y, x % y);
}

在《编程之美》书中有对时间上的优化：

取模运算含有除法，比较耗时
大整数下该如何优化

[编程之美_2.6]精确表达浮点数

Sat, 23 May 2015 05:17:49 +0000

以下代码将问题简化为求无限循环小数的分数，至于有限的直接改成分数即可，不过涉及到另一个重要知识，就是求最大公约数，比较经典的是辗转相除法。
代码如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


// GCD
int GCD(int x, int y)
{
 return y == 0 ? x : GCD(y, x % y);
}

// Simplified conditions
// x: 无限循环小数
// n: 循环节的整数表示
// m: 循环节长度
// 10^m * x = n + x
// x = n / (10^m - 1)
void FloatNumber(string number)
{
 int start = number.find_first_of('(') + 1;
 int end = number.find_first_of(')');
 string repetend = number.substr(start, end - start);
 int n = atoi(repetend.c_str());
 int m = end - start;
 int d = GCD(n, ((int)pow(10.0, m) - 1));
 cout << n / d << '/' << ((int)pow(10.0, m) - 1) / d << endl;
}

[编程之美_2-5]寻找最大的k个数

Sat, 23 May 2015 05:16:43 +0000

这个问题与寻找第k大/小数等价。
方法1: 直接排序输出[编程之美书上说：不同的排序方法时间复杂度不一样，诚然，因为不需要n个数有序，只需要最大的k个数即可]
选用快速排序：

1
2
3
4
5
6


vector<int> FindMostKSort(vector<int>& vNumbers, int k)
{
 sort(vNumbers.begin(),vNumbers.end());
 vector<int> vKNumbers(vNumbers.rbegin(), vNumbers.rbegin() + k);
 return vKNumbers;
}

方法2: 实际上并不需要全部数有序，其实可以模拟快速排序的划分过程，求某个数排序之后在第k个位置即可。

 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
33
34


void swap(int &a, int &b)
{
 int tmp = a;
 a = b;
 b = tmp;
}
void FindMostKPartition(vector<int>& vNumber, int k, int left, int right)
{
 int index = left;
 int tmp = vNumber[index];
 int i = left;
 int j = right;
 while (i < j)
 {
 while(i < j && vNumber[j] >= vNumber[index]) j--;
 swap(vNumber[j], vNumber[index]);
 index = j;
 while(i < j && vNumber[i] <= vNumber[index]) i++;
 swap(vNumber[i], vNumber[index]);
 index = i;
 }
 if (index - left + 1 == k)
 {
 cout << vNumber[index] << endl;
 }
 else if (index - left + 1 < k)
 {
 FindMostKPartition(vNumber, k - (index - left + 1), index + 1, right);
 }
 else
 {
 FindMostKPartition(vNumber, k, left, index - 1);
 }
}

方法3: 堆排序[维护一个k数量的最小堆即可，STL代码如此短啊，不过可以自己用数组实现堆]

PS: 排序均用STL实现，具体的排序自己实现，将在近期尝试编写。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


void FindMostKHeap(vector<int>& vNumbers, int k)
{
 vector<int> vKNumbers(vNumbers.begin(), vNumbers.begin() + k);
 make_heap(vKNumbers.begin(), vKNumbers.end(), greater<int>());
 for (vector<int>::size_type i = k; i < vNumbers.size(); i++)
 {
 if (vNumbers[i] > vKNumbers[0])
 {
 vKNumbers[0] = vNumbers[i];
 make_heap(vKNumbers.begin(), vKNumbers.end(), greater<int>());
 }
 }
 cout << vKNumbers[0] << endl;
}

[编程之美_2.4]1的数目

Sat, 23 May 2015 05:15:31 +0000

题意很简单，给定一个正整数n，求1-n中，1出现在各个数中的位数的次数之和。
比如针对特定的数12312，global count += 2;因为出现了两个1，输入n，要统计1-n的情况。

 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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54


int VerifyCountOneNumberAns(int n)
{
 int ans = 0;
 for (int i = 1; i <= n; i++)
 {
 int tmp = i;
 while(tmp)
 {
 if (1 == tmp%10) ans++;
 tmp /= 10;
 }
 }
 return ans;
}
int CountOneNumber(int n)
{
 if (n == 0)
 return 0;
 if (n < 10)
 return 1;
 vector<int> vNumber;
 vNumber.clear();
 int tmp = n;
 while(tmp)
 {
 vNumber.push_back(tmp%10);
 tmp /= 10;
 }
 int count = 0;
 int vSize = vNumber.size();
 count = (vSize - 1) * vNumber[vSize - 1] * (int)pow(10.0, (int)(vSize - 2));
 if (vNumber[vSize - 1] > 1)
 {
 count += (int)pow(10.0, (int)(vSize - 1));
 }
 else
 {
 count += n - vNumber[vSize - 1] * (int)pow(10.0, vSize - 1) + 1;
 }
 count += CountOneNumber(n - vNumber[vSize - 1] * (int)pow(10.0, vSize - 1));
 return count;
}
int main()
{
 vector<int> ids;
 for (int i = 1; i <= 10000; i++)
 {
 int count = CountOneNumber(i);
 int ans = VerifyCountOneNumberAns(i);
 if (ans != count)
 cout << i << '\t' << ans << '\t' << count << endl;
 }
 return 0;
}

代码中有验证程序，验证程序的正确性是不用怀疑的，然后题目给出了一种递归的方法，时间上还可以接受，应该和数的位数成正比。
PS：自己果然不擅长数学，做起来挺吃力的。不过逻辑还挺好使的。。

[编程之美_2.3]寻找发帖“水王”

Sat, 23 May 2015 05:14:27 +0000

 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


int FindMostIds(vector<int> &ids)
{
 map<int,int> hashIds;
 map<int,int>::iterator it;
 hashIds.clear();
 for (int i = 0; i < ids.size(); i++)
 {
 it = hashIds.find(ids[i]);
 if (hashIds.end() == it)
 {
 hashIds.insert(map<int,int>::value_type(ids[i],1));
 }
 else
 {
 it->second++;
 }
 }
 int id = 0, count = -1;
 for (it = hashIds.begin(); it != hashIds.end(); it++)
 {
 if (it->second > count)
 {
 id = it->first;
 count = it->second;
 }
 }
 return id;
}

这个题1：可以继续优化；2：如果是出现3个发帖水王，每个人超过四分之一的帖子，该题如何解？今天晚了，先回宿舍，明日再解，其实我已经想到方法了。
问题1：
编程之美的书上说，可以在空间复杂度上优化到O(1)
看书之后得到提示：
用一个id来存当前id
count来存id的计数，然后比较是否相等，动态维护，最终的id一定是水王。

 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


int FindMostIds(vector<int> &ids)
{
 if (ids.size() <= 0)
 return -1;
 int id = ids[0];
 int count = 1;
 for (vector<int>::size_type i = 1; i < ids.size(); i++)
 {
 if (0 == count)
 {
 id = ids[i];
 count = 1;
 continue;
 }
 if (id == ids[i])
 {
 count++;
 }
 else
 {
 count--;
 }
 }
 return id;
}

问题2：可以用问题1解法2的推广：[自己想的，没有经过严格测试，目测思想正确]

 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
33
34
35
36
37
38
39
40
41
42
43


void FindMostIds(vector<int> &ids)
{
 if (ids.size() <= 0)
 return ;
 int id[3] = {-1, -1, -1};
 int count[3] = {0, 0, 0};
 for (vector<int>::size_type i = 1; i < ids.size(); i++)
 {
 bool flag = false;
 for (int j = 0; j < 3; j++)
 {
 if (id[j] == ids[i])
 {
 count[j]++;
 flag = true;
 break;
 }
 }
 if (flag) continue;

 flag = false;
 for (int j = 0; j < 3; j++)
 {
 if (count[j] == 0)
 {
 id[j] = ids[i];
 count[j]++;
 flag = true;
 break;
 }
 }
 if (flag) continue;
 for (int j = 0; j < 3; j++)
 {
 count[j]--;
 }
 }
 for (int i = 0; i < 3; i++)
 {
 cout << id[i] << '\t';
 }
 cout << endl;
}

[编程之美_2.2]不要被阶乘吓到

Sat, 23 May 2015 05:11:00 +0000

题意要求计算n!的value值后面有0的个数，实际上可以理解为n!的计算中有多少个5的倍数被乘入。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


int CountZero(int n)
{
 int cnt = 0;
 for (int i = 1; i <= n; i++)
 {
 int tmp = i;
 while (0 == i % 5)
 {
 cnt++;
 tmp /= 5;
 }
 }
 return cnt;
}

题意求N!中二进制表示最低位1的位置，可以发现奇数的乘入对1的位置没有影响。一旦乘以2，整个数值为左移1位，故最后结果和分解因数后2的个数有关

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


int CountBinaryOne(int n)
{
 int cnt = 0;
 for (int i = 1; i <= n; i++)
 {
 int tmp = i;
 while (0 == tmp % 2)
 {
 cnt++;
 tmp /= 2;
 }
 }
 return cnt;
}

[编程之美_2.1]求二进制中1的个数

Sat, 23 May 2015 05:09:14 +0000

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


int CountOne(int val)
{
 int cnt = 0;
 while (val)
 {
 val &= val - 1;
 cnt++;
 }
 return cnt;
}

[编程之美_1]CPU绘制曲线

Sat, 23 May 2015 05:06:15 +0000

其实这个题满跑很简单，那就是写个死循环就行了。操作系统分给的时间片就会越来越多。但是现在的程序都是多核的，比如我的电脑是4核的，会发现，CPU大概永远在25~27%左右，并没有达到100%。

如果想达到百分之百，只需要使用多线程，就可以了。

今天看到最挑衅的一句话是：

有种你让CPU画个圆，当时整个人都不好了。。。

下面来看50%的情况，编程之美上说，“sleep一个时间片，work一个时间片”不停切换应该就可以到50%。后来我发现效果不好。就算使用GetTickCount，效果也不好，因为毕竟电脑还有别的程序要运行。

 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
33
34
35
36
37
38
39


void Work(DWORD time)
{
 DWORD now = GetTickCount();
 for(;GetTickCount() <<- endstream>> now + time;)
 {
 }
}
DWORD WINAPI DrawThread(LPVOID lParam)
{
 double deta = 0.1f;
 while (true)
 {
 double time = 500 + 500 * sin(deta);
 Work(time);
 Sleep(1000-time);
 deta += 0.1f;
 }
 return 0;
}
int main()
{
 HANDLE hThread[4];
 DWORD idThread[4];
 hThread[0] = CreateThread(0,0,DrawThread,NULL,0,& idThread[0]);
 hThread[1] = CreateThread(0,0,DrawThread,NULL,0,& idThread[1]);
 hThread[2] = CreateThread(0,0,DrawThread,NULL,0,& idThread[2]);
 hThread[3] = CreateThread(0,0,DrawThread,NULL,0,& idThread[3]);
 SetThreadAffinityMask(hThread[0], 0x00000001);
 SetThreadAffinityMask(hThread[1], 0x00000010);
 SetThreadAffinityMask(hThread[2], 0x00000100);
 SetThreadAffinityMask(hThread[3], 0x00001000);

 WaitForSingleObject(hThread[0], INFINITE);
 WaitForSingleObject(hThread[1], INFINITE);
 WaitForSingleObject(hThread[2], INFINITE);
 WaitForSingleObject(hThread[3], INFINITE);

 return 0;
}

[leetcode_151]Reverse Words in a String

Sat, 23 May 2015 03:22:13 +0000

 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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47


class Solution
{
public:
 int getFirstLetter(string &s,int start)
 {
 int i;
 for(i = start;i < s.length();i++)
 {
 if(s[i] != ' ')return i;
 }
 return i;
 }
 int getFirstBlank(string &s,int start)
 {
 int i;
 for(i = start;i < s.length();i++)
 {
 if(s[i] == ' ')return i;
 }
 return i;
 }
 void reverseWords(string &s) {
 vector<string> splits;
 splits.clear();
 int i = 0;
 while(i < s.length())
 {
 i = getFirstLetter(s,i);
 if(i >= s.length())break;
 int next = getFirstBlank(s,i+1);
 if(next >= s.length())
 {
 next = s.length()-1;
 splits.push_back(s.substr(i,next-i+1));
 break;
 }
 splits.push_back(s.substr(i,next-i));
 i = next;
 }
 s = "";
 for(int i = splits.size()-1;i >= 0;i--)
 {
 s += splits[i];
 if(i != 0)s += " ";
 }
 }
};

[leetcode]发张截图纪念一下

Sat, 23 May 2015 03:21:17 +0000

[leetcode_68]Text Justification

Sat, 23 May 2015 03:20:29 +0000

好激动！！！leetcode终于全部AC一次了，虽然经历过波折，还是很兴奋啊！！！
大模拟，就是将字符串按规定句式输出。leetcode的好处就是很看到测试数据，好好理解题意，慢慢调试吧，一次AC其实应该蛮难的。

 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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89


class Solution {
public:
 vector<string> fullJustify(vector<string> &words, int L) {
 vector<vector<string>> result;
 result.clear();
 vector<string> ans;
 ans.clear();
 if (L == 0) {
 ans.push_back("");
 return ans;
 }
 for (int i = 0; i < words.size(); i++) {
 vector<string> item;
 item.clear();
 int sum = 0;
 while (true) {
 if (item.size() > 0) sum += 1;
 if (sum >= L) {
 i--;
 break;
 }
 if (i >= words.size()) break;
 item.push_back(words[i]);
 sum += words[i].length();
 if (sum > L) {
 item.pop_back();
 i--;
 break;
 }
 i++;
 }
 result.push_back(item);
 }
 for (int i = 0; i < result.size(); i++) {
 string item = "";
 if (i != result.size() - 1) item = genString(result[i], L);
 else
 item = genStringLast(result[i], L);
 ans.push_back(item);
 }
 return ans;
 }
private:
 string genStringLast(vector<string> &item, int L) {
 int sum = 0;
 string str = "";
 for (int i = 0; i < item.size(); i++) {
 str += item[i];
 sum += item[i].size();
 if (i != item.size() - 1) {
 str += " ";
 sum += 1;
 }
 }
 for (int i = 0; i < L - sum; i++)
 str += " ";
 return str;
 }
 string genString(vector<string> &item, int L) {
 int sum = 0;
 for (int i = 0; i < item.size(); i++)
 sum += item[i].size();
 string str = "";
 if (item.size() == 1) {
 int countS = L - sum;
 str += item[0];
 for (int j = 0; j < countS; j++)
 str += " ";
 return str;
 }
 int spaces;
 if (item.size() > 1) spaces = (L - sum) / (item.size() - 1);
 else
 spaces = 0;
 int ex = L - sum - spaces * (item.size() - 1);
 for (int i = 0; i < item.size(); i++) {
 str += item[i];
 int countS;
 if (i < ex)
 countS = 1 + spaces;
 else
 countS = spaces;
 if (i != item.size() - 1)
 for (int j = 0; j < countS; j++)
 str += " ";
 }
 return str;
 }
};

[leetcode_146]LRU Cache

Sat, 23 May 2015 03:19:36 +0000

双链表模拟队列，然后两个map存储key-value和key-_ListNode优化查找时间。

 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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95


struct ListNodel {
 int key;
 ListNodel *before;
 ListNodel *next;
 ListNodel(int x) : key(x), before(NULL), next(NULL) {}
};

class LRUCache{
public:
 map<int, int> mapkv;
 map<int, ListNodel*> mapkl;
 int capacityq;
 ListNodel * head, *tail;

 LRUCache(int capacity) {
 capacityq = capacity;
 mapkv.clear();
 mapkl.clear();
 head = NULL;
 tail = NULL;
 }

 int get(int key) {
 map<int, int>::iterator it = mapkv.find(key);
 if (it != mapkv.end()) {
 update(key);
 return it->second;
 } else {
 return -1;
 }
 }

 void set(int key, int value) {
 map<int, int>::iterator it = mapkv.find(key);
 if (it != mapkv.end()) {
 it->second = value;
 update(key);
 } else {
 if (mapkv.size() < capacityq) {
 insertKeyValue(key, value);
 } else {
 ListNodel * tmp = head;
 head = head->next;
 mapkl.erase(tmp->key);
 mapkv.erase(tmp->key);
 delete(tmp);
 insertKeyValue(key, value);
 }
 }
 }

private:
 void insertKeyValue(int key, int value) {
 mapkv.insert(map<int, int>::value_type(key, value));
 if (head == NULL) {
 ListNodel * tmp = new ListNodel(key);
 mapkl.insert(map<int, ListNodel*>::value_type(key, tmp));
 head = tmp;
 tail = tmp;
 head->next = tail;
 tail->before = head;
 tail->next = NULL;
 } else {
 ListNodel * tmp = new ListNodel(key);
 mapkl.insert(map<int, ListNodel*>::value_type(key, tmp));
 tmp->before = tail;
 tail->next = tmp;
 tmp->next = NULL;
 tail = tmp;
 }
 }

 void update(int key) {
 map<int, ListNodel*>::iterator it = mapkl.find(key);
 ListNodel * tmp = it->second;
 if (tmp == head) {
 if (head->next != NULL) {
 head = head->next;
 tail->next = tmp;
 tmp->before = tail;
 tmp->next = NULL;
 tail = tmp;
 }
 } else if (tmp != tail) {
 ListNodel * tmpb = tmp->before;
 ListNodel * tmpn = tmp->next;
 tmpb->next = tmpn;
 tmpn->before = tmpb;
 tmp->before = tail;
 tail->next = tmp;
 tmp->next = NULL;
 tail = tmp;
 }
 }
};

[leetcode_44]Wildcard Matching

Sat, 23 May 2015 03:18:44 +0000

dfs一直超时，就算用了备忘录也超时。代码附上，纪念一下：

 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
33
34
35
36
37
38
39


class Solution {
public:
 bool isMatch(const char *s, const char *p) {
 // Note: The Solution object is instantiated only once and is reused by each test case.
 const char *tmp = p;
 int cnt = 0;
 while (*tmp != '\0') if (*(tmp++) != '*') cnt++;
 if (cnt > strlen(s)) return false;

 if(strlen(s) == 0) {
 for(int i = 0;i < strlen(p);i++) {
 if(p[i] != '*')return false;
 }
 return true;
 }

 int **dp;
 dp = new int*[strlen(s) + 1];
 for(int i = 0; i <= strlen(s); i++) {
 dp[i] = new int[strlen(p) + 1];
 }
 dp[0][0] = 1;
 int i = 0;
 while(p[i++] == '*') dp[0][i] = 1;
 for(int i = 1; i <= strlen(s); i++) {
 for(int j = 1; j <= strlen(p); j++) {
 if(dp[i-1][j-1] == 1 && (s[i-1] == p[j-1] || p[j-1] == '?')) {
 dp[i][j] = 1;
 }
 if(p[j-1] == '*' && (dp[i][j-1] == 1 || dp[i-1][j-1] == 1 || dp[i-1][j] == 1)) {
 dp[i][j] = 1;
 }
 }
 }
 if(dp[strlen(s)][strlen(p)] == 1) return true;
 else
 return false;
 }
};

[leetcode_130]Surrounded Regions

Sat, 23 May 2015 03:17:52 +0000

还是宽度优先搜索。从边界开始找O，没访问到的O就是被X包围起来的。

 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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73


struct Pointp {
 int x;
 int y;
 Pointp() : x(0), y(0) {}
 Pointp(int a, int b) : x(a), y(b) {}
};
class Solution {
public:
 int lenm,lenn;
 int **map;
 void solve(vector<vector<char>> &board) {
 lenm = board.size();
 if(lenm <= 1)return ;
 lenn = board[0].size();
 map = new int *[lenm];
 for(int i = 0;i < lenm;i++) {
 map[i] = new int[lenn];
 }
 for(int i = 0;i < lenm;i++) {
 for(int j = 0;j < lenn;j++) {
 if(board[i][j] == 'O')map[i][j] = 0;
 else
 if(board[i][j] == 'X')map[i][j] = 1;
 }
 }
 for(int i = 0;i < lenm;i++) {
 for(int j = 0;j < lenn;j++) {
 if((i == 0 || j == 0 || i == lenm-1 || j == lenn-1)&&(map[i][j] == 0)) {
 map[i][j] = 2;
 bfs(i,j);
 }
 }
 }
 for(int i = 0;i < lenm;i++) {
 for(int j = 0;j < lenn;j++) {
 if(map[i][j] != 2)board[i][j] = 'X';
 }
 }
 //for(int i = 0;i < lenm;i++) {
 // for(int j = 0;j < lenn;j++) {
 // cout << board[i][j] << ' ';
 // }
 // cout << endl;
 //}
 }
private:
 void bfs(int x,int y) {
 int walk[4][2] = {{1,0},{-1,0},{0,1},{0,-1}};
 vector<Pointp>arr,arrs;
 arr.clear();
 arrs.clear();
 Pointp p(x,y);
 arr.push_back(p);
 while(true) {
 arrs.clear();
 for(int i = 0;i < arr.size();i++) {
 for(int j = 0;j < 4;j++) {
 int x = arr[i].x + walk[j][0];
 int y = arr[i].y + walk[j][1];
 if((x >= 0 && x <= lenm-1)&&(y >= 0 && y <= lenn-1)&&map[x][y] == 0) {
 map[x][y] = 2;
 arrs.push_back(Pointp(x,y));
 }
 }
 }
 if(arrs.size() == 0)break;
 arr.clear();
 for(int i = 0;i < arrs.size();i++) {
 arr.push_back(arrs[i]);
 }
 }
 }
};

[leetcode_140]Word Break II

Sat, 23 May 2015 03:16:58 +0000

依然是宽度优先搜索，这个题需要用dp判断下是否可解。我也是看别人的博客才知道，不然一直TLE。

 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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67


class Solution {
public:
 bool **map;
 set<int> wordlens;
 vector<string> result;
 vector<string> wordBreak(string s, unordered_set<string> &dict) {
 wordlens.clear();
 unordered_set<string>::iterator it;
 for(it = dict.begin(); it != dict.end(); it++) {
 string itstr = *it;
 wordlens.insert(itstr.length());
 }
 result.clear();
 map = new bool*[s.length()];
 for(int i = 0; i < s.length(); i++) {
 map[i] = new bool[s.length()];
 for(int j = 0; j < s.length(); j++) {
 map[i][j] = false;
 }
 }
 for(int start = 0; start < s.length(); start++) {
 for(int len = 1; len <= s.length() - start; len++) {
 string tmp = s.substr(start, len);
 if(dict.find(tmp) != dict.end()) {
 map[start][start + len - 1] = true;
 }
 }
 }
 for(int i = 0; i < s.length(); i++) {
 for(int j = 0; j <= i; j++) {
 for(int k = j; k < i; k++) {
 if(map[j][k] && map[k + 1][i]) map[j][i] = true;
 }
 }
 }
 // for(int i = 0; i < s.length(); i++) {
 // for(int j = 0; j < s.length(); j++) {
 // cout << map[i][j] << ' ';
 // }
 // cout << endl;
 // }
 if(map[0][s.length() - 1] == false) return result;
 string item = "";
 findSen(s, 0, dict, item);
 return result;
 }
private:
 void findSen(string &s, int start, unordered_set<string> &dict, string &item) {
 if(start >= s.length()) {
 result.push_back(item);
 return;
 }
 set<int>::iterator it;
 for(it = wordlens.begin(); it != wordlens.end(); it++) {
 int len = *it;
 if(start + len > s.length()) return;
 string tmp = string(s, start, len);
 if(dict.find(tmp) != dict.end()) {
 string itembp = item;
 if(start != 0) item += " ";
 item += tmp;
 findSen(s, start + len, dict, item);
 item = itembp;
 }
 }
 }
};

[leetcode_126]Word Ladder II

Sat, 23 May 2015 03:16:05 +0000

宽度优先搜索+存储路径。一直在做的就是优化时间。用map优化到1500ms好感动。

 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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97


struct NodeString {
 vector<NodeString *> before;
 string now;
};
class Solution {
public:
 vector<vector<string>> result;
 vector<vector<string>> findLadders(string start, string end, unordered_set<string> &dict) {
 // Note: The Solution object is instantiated only once and is reused by each test case.
 result.clear();
 if (dict.find(start) == dict.end()) {
 dict.insert(start);
 }
 if (dict.find(end) == dict.end()) {
 dict.insert(end);
 }
 map<string, NodeString *> maps;
 maps.clear();
 maps.insert(map<string, NodeString *>::value_type(start, NULL));
 vector<NodeString *> strs, strsc;
 strs.clear();
 NodeString *nodeString = new NodeString();
 nodeString->before.clear();
 nodeString->now = start;
 strs.push_back(nodeString);
 bool isFind = false;
 while (true) {
 map<string, NodeString *> mapstmp;
 mapstmp.clear();
 strsc.clear();
 for (int i = 0; i < strs.size(); i++) {
 string item = strs[i]->now;
 for (int j = 0; j < item.length(); j++) {
 for (char c = 'a'; c <= 'z'; c++) {
 string tmp = item;
 if (c != item[j]) {
 tmp[j] = c;
 if (dict.find(tmp) != dict.end()) {
 if (maps.find(tmp) == maps.end()) {
 NodeString *nodetmp = new NodeString();
 nodetmp->before.clear();
 nodetmp->before.push_back(strs[i]);
 nodetmp->now = tmp;
 if (tmp == end) {
 isFind = true;
 vector<string> items;
 items.clear();
 // items.push_back(end);
 genResult(nodetmp, items);
 continue;
 }
 strsc.push_back(nodetmp);
 maps.insert(map<string, NodeString *>::value_type(tmp, nodetmp));
 mapstmp.insert(map<string, NodeString *>::value_type(tmp, nodetmp));
 } else {
 if (tmp != start) {
 map<string, NodeString *>::iterator it = mapstmp.find(tmp);
 if (it != mapstmp.end())
 it->second->before.push_back(strs[i]);
 }
 }
 }
 }
 }
 }
 }

 if (strsc.size() == 0 || isFind) break;
 strs.clear();
 for (int i = 0; i < strsc.size(); i++) {
 strs.push_back(strsc[i]);
 }
 }
 return result;
 }

private:
 void genResult(NodeString *nodeString, vector<string> &items) {
 if (nodeString->before.size() == 0) {
 items.push_back(nodeString->now);
 vector<string> itemsr;
 itemsr.clear();
 vector<string>::reverse_iterator rit;
 for (rit = items.rbegin(); rit != items.rend(); rit++) {
 itemsr.push_back(*rit);
 }
 result.push_back(itemsr);
 items.pop_back();
 } else {
 for (int i = 0; i < nodeString->before.size(); i++) {
 items.push_back(nodeString->now);
 genResult(nodeString->before[i], items);
 items.pop_back();
 }
 }
 }
};

[leetcode_127]Word Ladder

Sat, 23 May 2015 03:15:01 +0000

图的最短路径T+T
看别人博客才知道的。之前一直傻傻地用BFS+map
各种超时啊。
后来也想到求出临近点了，就差一点点就可以到最短路径了。惭愧。
现附上超时的代码，明天再改最短路径。

 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
33
34
35
36
37
38
39
40
41
42
43
44
45


class Solution {
public:
 int ladderLength(string start, string end, unordered_set<string> &dict) {
 // Note: The Solution object is instantiated only once and is reused by each test case.
 if(dict.find(start) == dict.end()) {
 dict.insert(start);
 }
 if(dict.find(end) == dict.end()) {
 dict.insert(end);
 }
 map<string,bool> maps;
 maps.clear();
 maps.insert(map<string,bool>::value_type(start,true));
 vector<string> strs,strsc;
 strs.clear();
 strs.push_back(start);
 int count = 1;
 while(true) {
 strsc.clear();
 count++;
 for(int i = 0;i < strs.size();i++) {
 string item = strs[i];
 for(int j = 0;j < item.length();j++) {
 for(char c = 'a';c <= 'z';c++) {
 string tmp = item;
 if(c != item[j]) {
 tmp[j] = c;
 if(dict.find(tmp) != dict.end() && maps.find(tmp) == maps.end()) {
 strsc.push_back(tmp);
 if(tmp == end) return count;
 maps.insert(map<string,bool>::value_type(tmp,true));
 }
 }
 }
 }
 }
 if(strsc.size() == 0) break;
 strs.clear();
 for(int i = 0;i < strsc.size();i++) {
 strs.push_back(strsc[i]);
 }
 }
 return 0;
 }
};

[leetcode_76]Minimum Window Substring

Sat, 23 May 2015 03:14:00 +0000

双指针，第一个指针开始指向第一个字符，从前往后枚举第二个指针的位置，如果覆盖所有目标字符，则滑动首指针，看看是否依然满足条件。求出最小区间即可。

 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
33
34
35
36
37
38
39
40
41
42
43


class Solution {
public:
 int letters1[256];
 int letters2[256];
 string minWindow(string S, string T) {
 for(int k = 0;k < 256;k++) {
 letters1[k] = 0;
 letters2[k] = 0;
 }
 for(int k = 0;k < T.length();k++) {
 letters1[T[k]]++;
 letters2[T[k]]++;
 }
 int min = S.length()+T.length();
 int start,end;
 int count = T.length();
 int i = 0;
 for(int j = 0;j < S.length();j++) {
 if(letters2[S[j]] > 0) {
 letters1[S[j]]--;
 if(letters1[S[j]] >= 0)count--;
 }
 if(count == 0) {
 while(true) {
 if(letters2[S[i]] > 0) {
 if(letters1[S[i]] < 0)
 letters1[S[i]]++;
 else
 break;
 }
 i++;
 }
 if(j - i + 1 < min) {
 min = j - i + 1;
 start = i;
 end = j;
 }
 }
 }
 if(min == S.length()+T.length())return "";
 return string(S,start,end - start + 1);
 }
};

[leetcode_30]Substring with Concatenation of All Words

Sat, 23 May 2015 03:12:59 +0000

暴力bf过的。
使用map来查找当前定长的字符串是否是“需要”[需要找到]的。

 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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86


class Solution {
public:
 bool *flag;
 int len;
 vector<int> result;
 vector<int> copy;
 int sum;
 vector<int> findSubstring(string S, vector<string> &L) {
 result.clear();
 if(L.size() <= 0) return result;
 map<string,int> mapr;
 mapr.clear();
 vector<vector<int>> rtable;
 rtable.clear();
 len = L[0].size();
 map<string,int>::iterator it;
 for(int i = 0; i < L.size(); i++) {
 it = mapr.find(L[i]);
 if(it != mapr.end()) {
 it->second += 1;
 }
 else
 mapr.insert(map<string,bool>::value_type(L[i],1));
 }
 copy.clear();
 sum = 0;
 for(it = mapr.begin(); it != mapr.end(); it++) {
 copy.push_back(it->second);
 sum += it->second;
 }
 bfs(mapr, S, 0);
 return result;
 }
private:
 void bfs(map<string,int> &mapr, string &S, int start) {
 if(S.length() - start < sum * len) return;
 int position;
 map<string,int>::iterator it;
 int min = S.length();
 for(it = mapr.begin(); it != mapr.end(); it++) {
 string item = it->first;
 if((position = S.find(item,start)) == string::npos) return;
 if(position < min)
 min = position;
 }
 int i = 0;
 int end;
 if(bfsStep(mapr,min,S,end)) {
 end = min + 1;
 result.push_back(min);
 }
 end = min + 1;
 if(end >= S.length()) return;
 return bfs(mapr, S, end);
 }
 void resetMapr(map<string,int> &mapr) {
 int i = 0;
 map<string,int>::iterator it;
 for(it = mapr.begin(); it != mapr.end(); it++) {
 it->second = copy[i++];
 }
 }
 bool bfsStep(map<string,int> &mapr, int pos, string &S, int &end) {
 int count = 0;
 map<string,int>::iterator it;
 int i;
 for(i = pos; i < S.length(); i+=len) {
 it = mapr.find(string(S, i, len));
 if(it == mapr.end() || it->second <= 0) {
 end = i+len;
 resetMapr(mapr);
 return false;
 }
 it->second--;
 count++;
 if(count == sum) {
 resetMapr(mapr);
 return true;
 }
 }
 resetMapr(mapr);
 if(count == sum) return true;
 end = i;
 return false;
 }
};

[leetcode_91]Decode Ways

Sat, 23 May 2015 03:11:56 +0000

A message containing letters from A-Z is being encoded to numbers using the following mapping:

‘A’ -> 1
‘B’ -> 2
…
‘Z’ -> 26

Given an encoded message containing digits, determine the total number of ways to decode it.

For example,
Given encoded message “12”, it could be decoded as “AB” (1 2) or “L” (12).

The number of ways decoding “12” is 2.

开始用搜索，超时。

后来一想如果从后面前找，这样的话很多多余的状态不仅存下来了，而且不会重复计算。

然后注意0存在的情况。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


class Solution {
public:
 int counts[10000];
 int numDecodings(string s) {
 if(s.length() <= 0 || (s.length() == '1' && s[0] == '0'))return 0;
 if(s[s.length()-1] != '0')counts[s.length() - 1] = 1;
 else counts[s.length()-1] = 0;
 counts[s.length()] = 1;
 for(int i = s.length()-2;i >= 0;i--) {
 if(s[i] == '0') {
 counts[i] = 0;
 continue;
 }
 if(s[i] == '1' || (s[i] == '2'&&s[i+1] <= '6'))counts[i] = counts[i+1] + counts[i+2];
 else
 counts[i] = counts[i+1];
 }
 return counts[0];
 }
};

Coinidea的博客

[cesiumjs]分享一个学习cesiumjs的中文社区

Archives

使用Cesium将CDB转换为3D Tiles

用Cesium ion和Bentley的iModel.js创建数字孪生

Cesium与Intel Geospatial合作，为企业提供地理空间解决方案

可供政府用户使用的喀布尔(Kabul )数据

Reality Capture新增内置Cesium ion共享3D模型的支持

Cesium 2020回顾

Cesium 赢得2020年PACT技术创业企业奖

使用Flightradar24’s CesiumJS App追踪世界商用航线

Cesium和Kaarta用高分辨率激光雷达可视化室内和地下环境

Cesium中文网——如何开发一款地图下载工具[一]

准备工作

瓦片图服务器

瓦片图下载

瓦片图批量下载

下一步

声明

使用Cesium的地下渲染技术可视化瑞士的地质资源

免费向公众提供瑞士3D地图

看地底世界

工作中的地质数据

未来展望

用Cesium可视化地下设施、矿山和地质层

试一试

CesiumJS新增官方TypeScript类型定义

深入了解

手动维护定义文件

移植CesiumJS到TypeScript

使用TypeScript编译器生成定义文件

绘图板

Post-processing和验证

JSDoc错误

下一步

致谢

Cesium1.70-介绍CesiumOSM建筑新特性

宣布与Epic Games合作，为虚幻引擎创造Cesium

地底，TypeScript和全球3D建筑发布于CesiumJS 1.70

Cesium OSM建筑

地下支持

TypeScript

试用 CesiumJS 1.70

CesiumJS下载量超过1百万次

100万次下载是200多个贡献者齐心协力的结果

100万次下载意味着数千个3D地理空间应用程序

100万次下载意味着数百万行代码

100万次下载意味着刚刚开始

Cesium官方英文论坛

i-Urban Renovation使用3D Tiles可视化鸟取县Munakata建筑状态

将Cesium ion上的3D Tiles和Bing imagery应用到osgEarth

添加3D Tiles支持

Bing Maps

编码整合（Putting it all together）

从带Per-Building数据的KML/COLLADA中创建3D Tiles

将Cesium Tools用于更好的构建管理

聚集不同的数据集来评估进度

收集数据

传统调查

无人机调查

智能施工车辆

超乎想象

使用Cesium Stories在3D Tilesets中检查Features

使用Cesium Stories来可视化时序数据

使用3D Tiles Overview学习3D Tiles

使用EdgyGeo Cesium工具查询下载数据集

探索新冠肺炎（COVID-19）对全球航班的影响

如何创造上述可视化效果

[leetcode]Number Complement

[leetcode]Print in Order

Cesium近期更新及国内源码下载地址

[一]Cesium利其器——Visual Studio Code

IDE

Visual Studio Code 入门

1. 命令面板

2. 如何安装插件

安装live server插件

3. 常用插件列表

4. 中文语言包

Cesium中文网的朋友们