Cesium-526互联

实景三维

参考资料

数字三维

http://csit.anancar.cn/p/index.php?title=%E6%95%B0%E5%AD%97%E4%B8%89%E7%BB%B4#Cesium_.E6.8B.9B.E8.81.98.E8.A6.81.E6.B1.82

Cesium中国博客列表

https://my.oschina.net/u/1470240

CesiumLab 视频教程

http://www.iqiyi.com/w_19s2ql9p69.html

Cesium 批量显示三维模型(gltf)的心得体会

https://blog.csdn.net/zxzfcsu/article/details/80957399

学习 Cesium 过程中搜集到的优秀资源

http://cesium.xin/wordpress/archives/130.html

一位研究得很深的Giser 写的 Cesium 学习笔记

https://www.cnblogs.com/fuckgiser/tag/Cesium/default.html?page=1

Cesium 教程系列目录：

https://www.cnblogs.com/fuckgiser/p/5706842.html

笔记代码

https://gitee.com/Youda2019/ExamplesforCesium

语雀的知识库- 三维

https://www.yuque.com/search?q=%E4%B8%89%E7%BB%B4

三维数据可视化-资料

https://www.yuque.com/gisser/3d

Cesium 基础知识介绍

https://www.jianshu.com/p/3de8cb08bc4c

这几类数据归为一类都是矢量数据，所以这里要介绍的就是如何加载矢量数据，当然数据量特别大的时候就需要考虑矢量瓦片，Cesium也正在开发矢量瓦片相关版本，之前看到一个折中方法是先读取矢量瓦片而后转换成GeoJson进行加载

GeoJson是较为通用的一种网络矢量数据传输方案。

KML是Google Earth定义的一种矢量数据组织方式，其加载方式与GeoJson基本相同，

Cesium QQ学习群

476893082

Cesium学习笔记-工具篇32-cesium圆形扫面线

http://blog.sina.com.cn/s/blog_15e866bbe0102yiw2.html

STK11.6
链接：https://pan.baidu.com/s/1rUbu-dWujWqDSbq93ekTbQ 提取码：84fz

STK官方全套视频教程
链接：https://pan.baidu.com/s/16MQ1HqcXjAL0AD2_g7TvDg
提取码：hb7m

ODTK6.4.3
链接: https://pan.baidu.com/s/1ZtR2ZZ3-3RFIQZCtIUmJ5w 提取码: 2333

开源项目

官网地址：

https://github.com/AnalyticalGraphicsInc/cesium

演示示例的沙箱请求的地址是：

http://localhost:8080/Apps/Sandcastle/

加载了3d模型的效果

https://gitee.com/someu/cesium3d

编译Cesium

cd E:\temp\Cesium-1.51

cnpm install

npm run release

https://blog.csdn.net/wt346326775/article/details/83789578

常用代码

// 去掉左下角的商标信息

viewer._cesiumWidget._creditContainer.style.display = "none";

计算经纬度

// 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);

去掉底部的空白横线

原因： #app 元素未设定宽高：

<style>
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#app {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
</style>

官网

https://cesium.com

目前的理解：

建模等资料需要上传到他cesium 服务器，并且做了权限验证，如果内网部署，还需要额外的费用。

官网 js api 文档

https://cesiumjs.org/Cesium/Build/Documentation/

资料

官网中的第一个app

https://cesium.com/docs/tutorials/getting-started/#your-first-app

纽约城市地图工作坊

https://cesium.com/docs/tutorials/cesium-workshop/

上传文件到资料库

所支持的文件格式： glTF (.gltf, .glb)、KML/COLLADA (.kml, .kmz) 等等

https://cesium.com/docs/tutorials/uploading/

D:\station-share\高峰3D\Model\Model

mtl + 图片 model

Primitive API面向图形开发人员的低级别，

以及Entity API数据驱动可视化的高级别。

开源项目

Cesium的教程

https://gitee.com/HQCode/Cesium-test

Cesium中的地形介绍

https://my.oschina.net/u/1585572/blog/290481

交流前准备的问题

硬件采集回来的模型有哪些？ 3D 模型如何编辑？
如何把采集的模型转换成三维图形？
量测，通视分析，日照分析，淹没分析，剖面分析如何做？
有哪些做的框架，类似 MarsGIS, ThingJS 这些框架，有没有推荐使用的？
有哪些做三维的框架？
没有地理信息人员如何做？
大神的微信（小解）
之前做项目周期，经验有哪些？
gis服务器用的什么？
需要Gis工程师吗？
Cesium 地形图文件？
整理的资料
Cesium 怎么部署离线版？环境 nodejs/ tomcat

3D Tile

加载3D Tile

3D瓦片可以显示建筑物、地标乃至森林广告牌等等以及其对应的属性信息。每个3D瓦片就是一个3D对象

https://github.com/AnalyticalGraphicsInc/3d-tiles-samples

支持的格式

b3dm： Batched 3D Model 用于展示城市建筑等大规模的3D对象

l3dm： Instanced 3D Model 用于展示模型等。

pnts： Point Cloud 用于展示大量的3D点。

vctr： Vector Data 用于展示矢量元素，代替KML（那么CZML呢？动画？）

cmpt： Composite 用于合并异构3D瓦片，如将城市建筑的b3dm和树的i3dm合在一起展示。

解决Cesium1.50对gltf2.0/3dtiles数据读取的问题

http://liubf.com/2018/10/23/%E8%A7%A3%E5%86%B3cesium1-50%E5%AF%B9gltf2-0-3dtiles%E6%95%B0%E6%8D%AE%E8%AF%BB%E5%8F%96%E7%9A%84%E9%97%AE%E9%A2%98/

大量模型肯定是3dtiles啊如果是个小体量的可以考虑gltf啊。各人感觉gltf数据集比3dtiles 好操控

max格式模型 -> obj格式 -> 3DTiles格式

现在的问题是我的3DTiles数据只有一个级别的瓦片，如何制作多级别的瓦片数据呢

提供程序请求切片

需要流式传输到客户端。Cesium支持使用图像提供程序请求切片的几种标准。大多数图像提供程序使用HTTP上的REST接口来请求切片

地图服务器 GeoServer 搭建

http://geoserver.org/

GeoServer一：GeoServer的安装与初步使用

https://blog.csdn.net/qq_35732147/article/details/81869864

如果是默认安装，那么用户名为"admin"，密码为"geoserver"。

GeoServer发布影像和地形数据供Cesium使用

https://blog.csdn.net/qq_27532167/article/details/82590086

跨域解决

安装版的 jetty 设置

https://www.jianshu.com/p/3bce123cbaf4

Tomcat 部署版设置

CORS的原理为：跨域资源共享标准新增了一组 HTTP 首部字段，允许服务器声明哪些源站有权限访问哪些资源。另外，规范要求，对那些可能对服务器数据产生副作用的 HTTP 请求方法（特别是 GET

    <filter>  
        <filter-name>CorsFilter</filter-name>  
        <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>  
    </filter>  
    <filter-mapping>  
        <filter-name>CorsFilter</filter-name>  
        <url-pattern>/*</url-pattern>  
    </filter-mapping>

https://blog.csdn.net/qq_24622397/article/details/78344221

OBJ 文件

3D中的OBJ文件格式详解（转载）

https://www.cnblogs.com/zhouyunqing/p/4305008.html

OBJ文件是Alias|Wavefront公司为它的一套基于工作站的3D建模和动画软件"Advanced Visualizer"开发的一种标准3D模型文件格式，很适合用于3D软件模型之间的互导，

OBJ3.0文件格式支持直线(Line)、多边形(Polygon)、表面(Surface)和自由形态曲线(Free-form Curve)。直线和多角形通过它们的点来描述，曲线和表面则根据它们的控制点和依附于曲线类型的额外信息来定义，这些信息支持规则和不规则的曲线，包括那些基于贝塞尔曲线(Bezier)、B样条(B-spline)、基数(Cardinal/Catmull-Rom)和泰勒方程(Taylor equations)的曲线。其他特点如下：
(1)OBJ文件是一种3D模型文件。不包含动画、材质特性、贴图路径、动力学、粒子等信息。

地下管线

cesium地下管线和挖坑问题 2017

clippanle

https://www.jianshu.com/p/c0874f226316

尝试：无地图模型？

http://cesium.marsgis.cn/cesium-example/editor.html#31_onlyModel

Cesium三维球开发的时候，会遇到需要对地下数据可视化的情况，如果只是显示的需要，可以采用这个办法：移除球上的imageryLayers，再设置Cesium球体的透明度，将绘制元素的高度设置为负值（需要夸张一定倍数）。

https://blog.csdn.net/weixin_44674963/article/details/88540333

https://blog.csdn.net/zhangqun23/article/details/88837053

英文论坛，实现了三维实体效果的显示

https://groups.google.com/forum/#!topic/cesium-dev/M7cKgT1IEsw

完善的三维效果展示代码及步骤

https://stackoverflow.com/questions/41541223/how-to-display-data-underground-in-cesium-js

1.change only one line code in cesium source code;get the cesium source code,then find the file named GlobeSurfaceTileProvider.js,change

<code>command.pass = Pass.GLOBE;</code>

<code>command.pass = Pass.TRANSLUCENT;</code>

2.generate the cesium release code with gulp tool;use your CLI to execute gulp release. PS： You may need set your node environment and install the dependency node modules and install gulp tool.

3.Implemention code.PS: note the following snippet can run only if you have changed the cesium source code which is illustrated in step one.

<code><!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;
            position: relative;
        }

        .tools {
            position: absolute;
            top: 20px;
            left: 20px;
            width: 100px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div id="cesiumContainer">
        </div>
        <div class="tools">
            Opacity: <input id="btnImageryAlpha" type="range" min="0" max="10" value="10" oninput="change()" />
        </div>
    </div>
    <script>
        function change() {
            var value = document.getElementById("btnImageryAlpha").value;
            if (viewer.imageryLayers) {
                for (var i = 0; i < viewer.imageryLayers.length; i++) {
                    viewer.imageryLayers.get(i).alpha = value / 10;
                }
            }
            console.log(value);
        }

        var terrainProvider = new Cesium.CesiumTerrainProvider({
            url: 'https://assets.agi.com/stk-terrain/v1/tilesets/world/tiles',
            requestVertexNormals: true
        });
        var viewer = new Cesium.Viewer('cesiumContainer', {
            //skyAtmosphere: false,
            //orderIndependentTranslucency: false,
            baseLayerPicker: false,
            terrainProvider: terrainProvider
        });
        //viewer.scene.globe.depthTestAgainstTerrain = false;
        //change the ugly blue color to black
        viewer.scene.globe.baseColor = new Cesium.Color(0, 0, 0, 0);
        //default is 1
        //viewer.scene.globe.imageryLayers.get(0).alpha = 0.5;

        var blueBox = viewer.entities.add({
            name: 'Blue box',
            position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 5),
            box: {
                dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
                material: Cesium.Color.BLUE
            }
        });

        viewer.zoomTo(blueBox);
    </script>
</body>

</html></code>

Cesium学习笔记-工具篇06-GroundPush挖地形

http://blog.sina.com.cn/s/blog_15e866bbe0102xwyb.html

groundpush plugin

https://github.com/NICTA/cesium-groundpush-plugin

地下开挖效果展示：

https://www.cnblogs.com/giserhome/p/11029020.html

室内模型

或者说是这个。目前能实现室内模型的，

1. ThreeJS

2. Cesium BIM 模型
https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/index.html?src=3D%20Tiles%20BIM.html

集成 Vue

Vue+Cesium集成笔记

https://blog.csdn.net/u011347088/article/details/83090527

Vue 项目启动抛出 Error/ No PostCSS Config found in

https://yq.aliyun.com/articles/646385

在项目根目录创建 postcss.config.js 文件，并配置以下内容

<code data-spm-anchor-id="a2c4e.11153940.0.i1.5a5c3ecanyvqMG">module.exports = {  
  plugins: {  
    'autoprefixer': {browsers: 'last 5 version'}  
  }  
} </code>

局域网访问配置

localhost -> 0.0.0.0

https://blog.csdn.net/qq_32340877/article/details/79738949

注意出现Unable to determine Cesium base URL automatically, try defining a global variable called CESIUM_BASE_URL.错误时，解决方法是在webpack.dev.conf.js和webpack.prod.conf.js文件中plugin里面加上：
CESIUM_BASE_URL:JSON.stringify(’’)
https://blog.csdn.net/wqy248/article/details/87970163

开发工具

VSCode 小技巧

添加cesium的vscode帮助

npm install --save @types/cesium

参考资料：

http://cesium.xin/wordpress/archives/283.html

gltf 三维模型验证工具

https://pissang.github.io/clay-viewer/editor/

模型转化工具

安装方法：

https://www.npmjs.com/package/obj23dtiles

obj23dtiles -i AGI_HQ.obj --b3dm

obj23dtiles -i AGI_HQ.obj  --b3dm --outputBatchTable

obj23dtiles -i AGI_HQ.obj --tileset

obj23dtiles -i Model.obj --tileset

obj23dtiles -i 巷道.obj --tileset

obj23dtiles -i 400维修硐室点云.obj --tileset