Y's ugly blog

日常工作随笔

发表于 更新于 分类于 本文字数： 1.3k 阅读时长 ≈ 5 分钟

1.加载GeoJson、KML、CZML数据

这几类数据都是矢量数据，所以这里放到一起介绍

1.1GeoJson

GeoJson是一种基于JSON的地理空间数据交换格式，它定义了几种类型JSON对象以及它们组合在一起的方法，以表示有关地理要素、属性和它们的空间范围的数据。

Cesium加载GeoJson的原理是先load数据，然后在对load后的entity逐一设置。具体方法如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
let dataSource = new Cesium.GeoJsonDataSource();

var promise = dataSource.load(jiangsu); // json路径，load后得到一个promise对象

promise.then((datasource) => {
  viewer.dataSources.add(datasource); // 加入到场景中
  var entities = datasource.entities.values; // 
  for (var i = 0; i < entities.length; i++) {
    var entity = entities[i];
    var name = entity.name;
    let color = that.colorHash[name];
    if (!color) {
      color = Cesium.Color.fromRandom({ alpha: 0.5 });
      that.colorHash[name] = color;
    }
    entity.polygon.material = color;
    entity.polygon.outline = false;
    entity.polygon.extrudedHeight = entity.properties.area;
  }

以上代码生成了江苏省各市的地形图

null

阅读全文 »

发表于 更新于 分类于 本文字数： 1.4k 阅读时长 ≈ 5 分钟

1.加载模型

使用很简单，就是现今常用的三维建模工具（3dmax、maya、creator、sketch up等等）都不支持gltf格式文件的直接导出，需要经过中间转化。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const entity = viewer.entities.add({
    id: "car",
    name: "car",
    availability: new Cesium.TimeIntervalCollection([ new Cesium.TimeInterval({start: start, stop: stop})]),
    position: property,
    orientation: new Cesium.VelocityOrientationProperty(property),
    model: {
      uri: "./GroundVehicle.glb", // 模型
      minimumPixelSize: 64,
      maximumSize: 128,
      maximumScale: 200,
      scale: 16,
      runAnimations: true
    },
  });
  viewer.trackedEntity = entity; // 镜头固定到模型上
阅读全文 »

发表于 更新于 分类于 本文字数： 490 阅读时长 ≈ 2 分钟

1.创建地形图层

接口 说明
createWorldTerrain 提供了全球在线地形数据
EllipsoidTerrainProvider 它提供了一个全球范围内高度为0的地形，不需要额外的地形文件，就可以实时的自己来构建这个高度为0的Mesh
CesiumTerrainProvider 以cesium的格式访问地形数据
sampleTerrain 允许我们使用异步方式请求指定坐标点的高程信息
阅读全文 »

发表于 更新于 分类于 本文字数： 1.4k 阅读时长 ≈ 5 分钟

1.图层介绍

Cesium中的图层分为两种：一种是普通图层，包含影像、线划等普通显示图层；还有一种是地形图层，用于真实的模拟地球表面的场景，Cesium会根据加载到的地形瓦片以三维的方式显示出山川、大海等。

我们先介绍影像图层，官方提供了丰富的接口给开发者自定义图层。

阅读全文 »

发表于 更新于 分类于 本文字数： 1.4k 阅读时长 ≈ 5 分钟

(一)命名规范

1.1.1 项目命名

全部采用小写方式， 以中划线分隔。
正例：mall-management-system
反例：mall_management-system / mallManagementSystem

1.1.2 目录命名

全部采用小写方式， 以中划线分隔，有复数结构时，要采用复数命名法， 缩写不用复数
正例： scripts / styles / components / images / utils / layouts / demo-styles / demo-scripts / img / doc
反例： script / style / demo_scripts / demoStyles / imgs / docs

【特殊】VUE 的项目中的 components 中的组件目录，使用 kebab-case 命名
正例： head-search / page-loading / authorized / notice-icon
反例： HeadSearch / PageLoading

【特殊】VUE 的项目中的除 components 组件目录外的所有目录也使用 kebab-case 命名
正例： page-one / shopping-car / user-management
反例： ShoppingCar / UserManagement

阅读全文 »

发表于 更新于 分类于 本文字数： 1.4k 阅读时长 ≈ 5 分钟

什么Cesiumjs

Cesium 是一个跨平台、跨浏览器的展示三维地球和地图的 javascript 库。
Cesium 使用WebGL 来进行硬件加速图形，使用时不需要任何插件支持，但是浏览器必须支持WebGL;
Cesium是基于Apache2.0 许可的开源程序。它可以免费的用于商业和非商业用途。

什么是WebGL

WebGL（Web图形库）是一个JavaScript API，可在任何兼容的Web浏览器中渲染高性能的交互式3D和2D图形，而无需使用插件。现在市面上大部分浏览器都支持WebGL。详情见下图

null

阅读全文 »

发表于 更新于 分类于 本文字数： 1.7k 阅读时长 ≈ 6 分钟

前言

目前公司和我个人所用的技术栈都是 vue 全家桶，平时自己也会做些个人项目。对很多人来说项目开发完就没我什么事了。这怎么行呢，自己辛辛苦苦的劳动成果怎么能不分享给别人，亮瞎他们的眼呢。所以，让我们动起手来。

前期准备

首先你得有个服务器，当然有个域名的话就更好了。云服务可以直接在网上买一个，最低配的就可以了（有钱的老板可以无视）。接着备案域名，等个十天半月的，备案通过了，就可以将域名和服务器绑定起来，直接通过域名访问服务器里面的内容。（没有域名的就直接服务器 IP 访问）

安装环境

我们将本地项目托管到 Github 上，再通过 Git 在服务器上拉去代码实现代码的同步。同时 vue 项目事运行在 node 服务上的，所以需要安装 nodejs、Git。

在购买服务器时，所买的服务器系统不同，对应的安装方法也不同。而我的服务器系统是 centos,下面没有特殊说明全部默认系统是 centos。其他系统可以在网上找到对应的方法。

用 PuTTY 远程链接登录服务器，具体方法就不细讲了，教程网上都有。

阅读全文 »

发表于 更新于 分类于 本文字数： 1.8k 阅读时长 ≈ 7 分钟

工作中接触过几次混合 APP 开发，所以将一些用得到的内容记录下来，乙方遗忘。

hybrid 简易开发环境搭建

软件安装

JDK

Java SE Downloads

环境变量

JDK

1
2
3
4
5
6
JAVA_HOME
D:\Program Files\Java\jdk1.8.0_172
PATH
%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;
CLASSPATH
.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;
阅读全文 »

发表于 更新于 分类于 本文字数： 1.2k 阅读时长 ≈ 4 分钟

在移动端开发中，fixed 元素和 input 输入框在同一页面是常有的事。但是 在键盘配唤起
（也就是输入框获取焦点）的情况下，会出现一些莫名其妙的 Bug，尤其在 ios 中。这里记录下我遇到的一些问题以及解决方案。

ios 下的 Fixed 和 Input Bug

假设有这样一个页面：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body>
  <header>
    ...
  </header>

  <main>
    ...
  </main>

  <footer>
    <input type="text" value="">
    <button class="btn"></button>
  </footer>
</body>

对应的页面样式如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
header{
  position: fixed;
  height: 44px;
  left:0;
  right:0;
  top:0;
}
footer {
  position: fixed;
  height: 40px;
  left: 0;
  right:0;
  bottom:0;
}
main{
  min-height: 100%;
  margin-top:44px;
  margin-bottom: 40px;
}

这样一个常规的 fixed 布局就完成了，目前事完全正常的。

但是底部输入框唤起键盘以后，再次滑动页面，就会发现 fixed 布局元素跟随页面滚动起来了？？？fixed 属性失效了！！！

怎么回事啊，老弟？？？

阅读全文 »

发表于 更新于 分类于 本文字数： 1.2k 阅读时长 ≈ 4 分钟

前言

前段时间对个人博客很感兴趣，而我这人又有点心血来潮，想干什么就一点要做，于是决定自己动手丰衣足食，顺便整理下，方便以后查看。

博客有第三方平台，也可以自建，比较早的博客园、CSDN，近几年新兴的也比较多诸如：WordPress、segmentFault、简书、掘金、知乎专栏、Github Page 等等。

综合考虑成本和个性化两方面，我采用了 Githb Page + Hexo 搭建个人博客的方式。Hexo 是使用 nodejs 编写的一个静态博客生成工具，而 Github Page 是 Github 提供的一种免费的静态网页托管服务，支持 Jekyll、Hugo、Hexo 编译静态资源。

Let’s Go ~

准备环境

准备 node 和 git 环境，
首先，安装 node.js，因为 Hexo 是基于 node.js 服务的博客框架。

后然安装git，一个免费开源的分布式版本控制系统，具体内容网上有详细介绍，这里就不过多说明。

安装成功后打开命令行终端，在终端中输入以下命令验证是否安装成功。

1
2
3
node -v
npm -v
git version
阅读全文 »
0%