Fronts on Coding

Cesium之地形

Thu, 05 Jul 2018 01:54:11 +0000

Cesium支持对海洋，湖泊和河流的全球高分辨率地形和水影像进行流式传输和可视化。

支持多种地形provider来接收地形数据，大多数provider使用rest类型的接口来请求地形瓦片。

缺省情况下, 地球是一个 WGS84 椭球体。要添加Cesium的世界地形, 添加下面代码，珠穆朗玛峰显示如下：

viewer.terrainProvider = Cesium.createWorldTerrain();

Cesium世界地形还包括地形照明数据以及水效应所需的海岸线数据。默认情况下, 地形服务器不发送照明或海岸线数据与地形瓦片。在构造 CesiumTerrainProvider 时, 要启用地形照明, 从地形服务器请求 VertexNormals 扩展, 并启用全球照明。开启照明后珠穆朗玛峰显示如下：

Cesium之图像图层

Tue, 03 Jul 2018 15:56:07 +0000

Cesium支持从多种标准服务中绘制和分层高分辨率图像。层可以单独, 并混合在一起。每个层的亮度、对比度、伽玛、色相和饱和度都可以动态改变。

首先通过imageryProvider使用Esri ArcGIS MapServer中的图层:

var viewer = new Cesium.Viewer('cesiumContainer', {
    imageryProvider : new Cesium.ArcGisMapServerImageryProvider({
        url : '//services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer'
    }),
    baseLayerPicker : false
});

添加另一个图层：使用NASA Black Marble imagery的 Tile Map Service (TMS):

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'
}));

后添加的NASA层覆盖了先添加的Esri层，可以通过blackMarble.alpha使二者融合。

blackMarble.alpha = 0.5; // 0.0 is transparent.  1.0 is opaque.

Cesium之绘制图形

Mon, 02 Jul 2018 06:35:45 +0000

首先通过viewer.entities.add创建了一个entity(坐标定位在北京，根据坐标绘制了一个多边形)，然后通过zoomto确保entity在视图中。

var viewer = new Cesium.Viewer('cesiumContainer');
var beijing = viewer.entities.add({
  name: 'Beijing',
  polygon: {
    hierarchy: Cesium.Cartesian3.fromDegreesArray([
      116.4, 39.9,
      116.38, 39.9,
      116.37, 39.92]),
    height: 0,
    material: Cesium.Color.RED.withAlpha(0.5),
    outline: true,
    outlineColor: Cesium.Color.BLACK
  }
});
viewer.zoomTo(beijing);

运行上面的代码，效果如下：

下面代码，将多边形高度提升到了地球20万米上空。

beijing.polygon.height = 200000;

如果height为undefined,则体积从0开始，下面代码创建从20万米开始并延伸到25万米，就意味着体本身达到5万米。

beijing.polygon.height = 200000;
beijing.polygon.extrudedHeight = 250000;

除了多边形，还有下面这些形状的实体：

Cesium之Viewer

Mon, 02 Jul 2018 03:07:55 +0000

Viewer用于构建应用程序的基本构件。它将所有标准Cesium小部件合成为一个可重用的包。

new Cesium.Viewer(container, options)

参数	类型	说明
container	Element\|String	用于包含viewer组件的DOM对象或者容器ID
options	Object	选项

var viewer = new Cesium.Viewer('cesiumContainer', {
    //Start in Columbus Viewer
    sceneMode : Cesium.SceneMode.SCENE3D, //COLUMBUS_VIEW|MORPHING|SCENE2D|SCENE3D
    animation:true, 
    baseLayerPicker:true,
    fullscreenButton:true,
    geocoder:true,
    homeButton:true,
    infoBox:true,
    selectionIndicator:true,
    timeline:true,
    vrButton:true,
});

成员

Scene ：new Cesium.Scene(options)

虚拟场景中所有3D 图形对象和状态的容器。

var scene = viewer.scene;

var scene = new Cesium.Scene({
  canvas : canvas,
  contextOptions : {
    allowTextureFilterAnisotropic : false
}});

Camera：new Cesium.Camera(scene)

方法

flyto

flyTo(target, options) → Promise.<Boolean>

飞向提供的实体、实体或数据源。如果数据源仍在加载过程中, 或者可视化仍在加载, 则此方法等待数据在执行该飞行之前准备就绪。

Cesium简介

Thu, 28 Jun 2018 08:17:09 +0000

基于几种新的HTML5技术构建的，其中最重要的是WebGL。
官网
 github
API文档

支持Google Chrome、Firefox、Internet Explorer 11、Opera。

浏览器打开下面页面，查看是否支持：浏览器测试

install node.js。
下载代码并解压后进到根目录。
运行npm install。
运行npm start。（也可运行node server.js或者通过nginx、apache等web服务器加载当前目录）

cesium应用的基础是viewer，创建viewer并绑定在id=“cesiumContainer"的DIV上即可。

HTTP ETag

Tue, 23 Jan 2018 02:45:47 +0000

Etag全称EntityTags，HTTP1.1中才加入的，Response Header一个属性，用来帮助服务器控制Web端的缓存验证。由服务器端生成，并且随着文件的改变而改变。HTTP规范从未指定生成ETag的方法。

ETag是一个不透明的标识符，由Web服务器根据URL上的资源的特定版本而指定。如果那个URL上的资源内容改变，一个新的不一样的ETag就会被分配。用这种方法使用ETag即类似于指纹，并且他们能够被快速地被比较，以确定两个版本的资源是否相同。ETag的比较只对同一个URL有意义——不同URL上的资源的ETag值可能相同也可能不同，从他们的ETag的比较中无从推断。

浏览器刷新304(Not Modified)和再次请求200(From Cache)结果对比

Mon, 22 Jan 2018 03:11:23 +0000

在做性能测试时，无意中发现一个事情：在一个图片资源已经本地缓存到浏览器并且未过期的情况下，刷新网页和再次请求返回的状态不一致。
以资源ETag=W/“PSA-aj-5xx_WUsSsC"为例：

再次请求：

repsonse=200，直接从从本地缓存中取资源。

Request URL:http://guoj.top/wp-content/uploads/2018/01/QQ%E6%88%AA%E5%9B%BE20180115140217.png
Request Method:GET
Status Code:200 OK (from cache)
Remote Address:47.93.55.78:80

Response Headers
HTTP/1.1 200 OK
Server: nginx/1.13.7
Content-Type: image/png
Content-Length: 8487
Connection: keep-alive
Accept-Ranges: bytes
X-Original-Content-Length: 24343
ETag: W/"PSA-aj-5xx_WUsSsC"
Date: Tue, 16 Jan 2018 08:32:27 GMT
Expires: Wed, 14 Feb 2018 05:59:18 GMT
Cache-Control: max-age=2496410

Request Headers
GET /wp-content/uploads/2018/01/QQ%E6%88%AA%E5%9B%BE20180115140217.png HTTP/1.1
Host: guoj.top
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.104 Safari/537.36 Core/1.53.4295.400 QQBrowser/9.7.12661.400
Accept: image/webp,image/*,*/*;q=0.8
Referer: http://guoj.top/
Accept-Encoding: gzip, deflate, sdch
Accept-Language: zh-CN,zh;q=0.8
Cookie: Hm_lvt_624adbfe276a5668e7b4779815c5ff38=1513561518; Hm_lvt_7e91fd8ec5e72f05612cc7e567977104=1513561518; wordpress_test_cookie=WP+Cookie+check; wordpress_logged_in_50ac8821fe935de01bdede6b95928a78=dong4stop%7C1516241303%7CRg3hAvZn7NOjg2mST5JurlQ55m4pDmbTzuiMGDygRfn%7Ccb8c3ee4f27ffba3171f763e4df91e2bb1514bfb5167a8af59a20cbc2dac74ec; wp-settings-1=editor%3Dtinymce%26libraryContent%3Dbrowse%26mfold%3Do%26editor_expand%3Don%26hidetb%3D1%26post_dfw%3Doff%26widgets_access%3Doff%26advImgDetails%3Dshow; wp-settings-time-1=1516087140; _GPSLSC=qEFEXaHVp1!Yd4ct0hstK!DAGQ2tgLU_

刷新网页

不同浏览器的效果不一样，又或者做了特别的设置造成。chrome会返回200(From Cache)。qqbrowser会返回304(Not Modified)。
这是因为qqbrowser刷新网页时在Request Header中加入了：
Cache-Control:max-age=0
If-None-Match:W/“PSA-aj-5xx_WUsSsC”;