cesium的学习_学cesium要多久-程序员宅基地
1、下载cesium
2、配置cesium
其实最主要配置widgets.css和Cesium.js的包
<script src="Cesium-1.74/Build/Cesium/Cesium.js"></script>
<style>
@import url(Cesium-1.74/Build/Cesium/Widgets/widgets.css);
html, body, #cesiumContainer {
width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
}
</style>
<body>
<div id="cesiumContainer" style="height: 100%"></div>
<script>
var viewer = new Cesium.Viewer('cesiumContainer')
</script>
3、官网注册cesium并获取自己用户的token值
cesium官网地址
有了这个地址页面不会显示未注册信息，
2、在官网方便调整模型位置（点击红色框框位置）
通过cesium官网上传模型信息后，再在官网调整模型位置
4、取消cesium的页面logo信息
var viewer = new Cesium.Viewer("cesiumContainer", {
geocoder: false,
homeButton: false,
sceneModePicker: false,
baseLayerPicker: false,
navigationHelpButton: false,
animation: false,
timeline: false,
fullscreenButton: false,
vrButton: false,
infoBox: false,
});
1、去除小组件信息
animation: false, //是否显示动画控件
baseLayerPicker: false, //是否显示图层选择控件
geocoder: false, //是否显示地名查找控件
timeline: false, //是否显示时间线控件
sceneModePicker: false, //是否显示投影方式控件
navigationHelpButton: false, //是否显示帮助信息控件
infoBox: false, //是否显示点击要素之后显示的信息
// selectionIndicator:false,
fullscreenButton: false,
homeButton: false,
scene3DOnly: false,//仅仅显示3d,可隐藏右上角2d和3d按钮
selectionoIndicatr: false,
2、去除商标
$(".cesium-widget-credits").remove();
5、加载影像数据
imageryProvider就是在cesium中的影像数据api
1、谷歌中国影像数据
var url = "http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali";
var guge = new Cesium.Viewer('cesiumContainer', {
baseLayerPicker: false,
imageryProvider: new Cesium.UrlTemplateImageryProvider({
url: url})
});
2、天地图影像数据
这个token值需要自己申请，我没有放token值
var tiandi = new Cesium.WebMapTileServiceImageryProvider({
url:
"http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=自己的token值",
layer: "img",
style: "default",
format: "tiles",
tileMatrixSetID: "w",
credit: new Cesium.Credit("天地图全球影像服务"),
subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
maximumLevel: 18,
show: false,
});
3、加载自定义影像加载
当.tif影像原始数据通过cesium实验室转化为瓦片数据并存放在自定义ditu(文件夹)下面，加载方式
var layers = viewer.scene.imageryLayers;
var myLayer = layers.addImageryProvider(
new Cesium.UrlTemplateImageryProvider({
url: "ditu/{z}/{x}/{y}.png",
// url: "ditu/{z}/{x}/{y}",
tilingScheme: new Cesium.WebMercatorTilingScheme(),
fileExtension: "png",
minimumLevel: 0,
maximumLevel: 20,
})
);
4、添加高德地图影像
oneLayer = viewer.imageryLayers.addImageryProvider(
new Cesium.WebMapServiceImageryProvider({
url:
"http://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}", //图层地址
layers: "gaode",
tilingScheme: new Cesium.WebMercatorTilingScheme(),
})
);
5、删除影像
viewer.imageryLayers.remove(oneLayer);
最后的加载到new cesium下面，或者自定义一个窗口
6、加载地形数据
1、加载cesium自定义地形
terrainProvider: new Cesium.CesiumTerrainProvider({
url: Cesium.IonResource.fromAssetId(1),
}),
2、加载cesium全球地形
terrainProvider: Cesium.createWorldTerrain({
requestWaterMask: true,
requestVertexNormals: true
})
3、加载自定义地形数据（文件夹是cesium实验室转化出来的数据存放的文件夹）
terrainProvider : new Cesium.CesiumTerrainProvider({
// url : Cesium.IonResource.fromAssetId(1),
url : '文件夹/',
requestVertexNormals : true
}),
4、删除地形数据、
var scene = viewer.scene;
scene.terrainProvider = new Cesium.EllipsoidTerrainProvider({
});
7、设置视角
setView是加载时候的视角，flyTo是飞过去
fromDegrees经纬度转世界坐标系
viewer.camera.setView({
//位置,经纬度，高度
destination: Cesium.Cartesian3.fromDegrees(经度，纬度，高度),
//设置摄像头角度
orientation: {
heading: 2.1439295174687043, // 左右摆头
pitch: -0.6379486908001799, // 上下摇头
roll: 0.0 // default value
}
});
Cartesian3笛卡尔高度
viewer.camera.flyTo({
//位置,经纬度，高度
destination:new Cesium.Cartesian3(‘’‘’‘’‘’),
//设置摄像头角度
orientation: {
heading: 2.1439295174687043, // 左右摆头
pitch: -0.6379486908001799, // 上下摇头
roll: 0.0 // default value
}
});
有个自动定位的，在控制台
viewer.camera.heading
viewer.camera.pitch
viewer.camera.position 得到的是世界坐标系
分别可以拿到位置，倾角，摆角
cesium中坐标系之间的转化
8、加载模型
通过cesium实验室转化的模型数据我测试了三种
1、点云数据
2、BIM模型
3、倾斜摄影数据
var tileset = new Cesium.Cesium3DTileset({
//添加本地模型
// url : 'models/hongguangdianyun2/tileset.json',
// url : 'models/hospital/tileset.json',
url : 'models/qxsy4/tileset.json',
// url: Cesium.IonResource.fromAssetId(197169),
// maximumScreenSpaceError : 0, // 最大的屏幕空间误差 解决精确度的关键
});
//加载模型
var city = viewer.scene.primitives.add(tileset);
因为BIM模型自身不带坐标所以可以自定义坐标存放
自定义坐标查看
var longitude = 104.9821565;
var latitude = 28.8465238381;
var height = 200.7312282155;//大面积倾斜摄影高度
// var height = 240.7312282155;//医院的高度
var heading = 180;
//设置模型位置，以及摄像头位置
city.readyPromise.then(function (tileset) {
var position = Cesium.Cartesian3.fromDegrees(longitude, latitude, height);
var mat = Cesium.Transforms.eastNorthUpToFixedFrame(position);
var rotationX = Cesium.Matrix4.fromRotationTranslation(Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(heading)));
Cesium.Matrix4.multiply(mat, rotationX, mat);
tileset._root.transform = mat;
viewer.zoomTo(tileset);
// viewer.camera.flyTo(
// {
// destination: new Cesium.Cartesian3(-1333850.286642842, 5326945.044495704, 3234427.4588005696),
// orientation: {
// heading: 2.5281492746803575, // 左右摆头
// pitch: -0.6665721131991886, // 上下摇头
// roll: 0.0 // default value
// }
//
// });
});
这个是视角自动匹配模型
viewer.zoomTo(tileset);
这个是自定义视角飞到模型上
// viewer.camera.flyTo(
// {
// destination: new Cesium.Cartesian3(-1333850.286642842, 5326945.044495704, 3234427.4588005696),
// orientation: {
// heading: 2.5281492746803575, // 左右摆头
// pitch: -0.6665721131991886, // 上下摇头
// roll: 0.0 // default value
// }
//
// });
这个是BIM模型的加载
2、倾斜摄影及点云数据的加载（自带位置坐标的模型）
var tileset = new Cesium.Cesium3DTileset({
//相对路径
url: 'tiles/qxsy4/Tileset.json',
});
//添加到球体上
viewer.scene.primitives.add(tileset);
//定位过去
viewer.zoomTo(tileset);
3、删除模型
通过模型的命名来删除
viewer.scene.primitives.remove(tileset1);
9、实体entity的操作
1、实体的添加
viewer.entities.add({
position : Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
point : {
pixelSize : 10,
color : Cesium.Color.YELLOW
}
});
1、删除实体有两种方法
(一)、删除全部实体
viewer.entities.removeAll();
（二）、通过实体的Id删除实体
var radar = viewer.entities.getById('radar')；
viewer.entities.remove(radar );
10、风险源的加载动态加载
三个实线圈 的加载
var lon = 104.9821565;
var lat = 28.8465238381;
//红
viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(lon, lat),
name: 'Red ellipse on surface with outline222',
ellipse: {
semiMinorAxis: 160.0,
semiMajorAxis: 160.0,
height: 220,
material: Cesium.Color.RED.withAlpha(0),
outlineColor: Cesium.Color.RED,
outline: true
}
});
viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(lon, lat),
name: 'Red ellipse on surface with outline',
ellipse: {
semiMinorAxis: 250.0,
semiMajorAxis: 250.0,
height: 220,
material: Cesium.Color.ORANGE.withAlpha(0),
outlineColor: Cesium.Color.ORANGE ,
outline: true,
outlineWidth:10.0
}
});
viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(lon, lat),
name: 'Red ellipse on surface with outline222',
ellipse: {
semiMinorAxis: 280.0,
semiMajorAxis: 280.0,
height: 220,
// material: Cesium.Color.GREENYELLOW .withAlpha(0.7),
material: Cesium.Color.BLUE.withAlpha(0),
outlineColor: Cesium.Color.BLUE,
outline: true
}
});
中心动态扩散的红圈的加载方式
function addCircleRipple(viewer,data){
var r1=data.minR,r2=data.minR;
function changeR1() {
//这是callback，参数不能内传
r1=r1+data.deviationR;
if(r1>=data.maxR){
r1=data.minR;
}
return r1;
}
function changeR2() {
r2=r2+data.deviationR;
if(r2>=data.maxR){
r2=data.minR;
}
return r2;
}
viewer.entities.add({
id:data.id,
name:"",
position:Cesium.Cartesian3.fromDegrees(data.lon,data.lat,data.height),
ellipse : {
semiMinorAxis :new Cesium.CallbackProperty(changeR1,false),
semiMajorAxis :new Cesium.CallbackProperty(changeR1,false),
height:data.height,
material:new Cesium.ImageMaterialProperty({
image:data.imageUrl,
repeat:new Cesium.Cartesian2(1.0, 1.0),
transparent:true,
color:new Cesium.CallbackProperty(function () {
var alp=1-r1/data.maxR;
return Cesium.Color.WHITE.withAlpha(alp) //entity的颜色透明 并不影响材质，并且 entity也会透明哦
},false)
})
}
});
setTimeout(function () {
viewer.entities.add({
name:"",
position:Cesium.Cartesian3.fromDegrees(data.lon,data.lat,data.height),
ellipse : {
semiMinorAxis :new Cesium.CallbackProperty(changeR2,false),
semiMajorAxis :new Cesium.CallbackProperty(changeR2,false),
height:data.height,
material:new Cesium.ImageMaterialProperty({
image:data.imageUrl,
repeat:new Cesium.Cartesian2(1.0, 1.0),
transparent:true,
color:new Cesium.CallbackProperty(function () {
var alp=1;
alp=1-r2/data.maxR;
return Cesium.Color.WHITE.withAlpha(alp)
},false)
})
}
});
},data.eachInterval)
}
addCircleRipple(viewer,{
//默认只绘制两个圆圈叠加 如遇绘制多个，请自行源码内添加。
id:"111",
lon:lon,
lat:lat,
height:230,
maxR:170,
minR:0,//最好为0
deviationR:1,//差值 差值也大 速度越快
eachInterval:2000,//两个圈的时间间隔
imageUrl:"imgs/redCircle3.png"
});
11、cesium调节整体亮度
通过下面的Number调节亮度
viewer.scene.brightness =
viewer.scene.brightness ||stages.add(Cesium.PostProcessStageLibrary.createBrightnessStage());
viewer.scene.brightness.enabled = true;
viewer.scene.brightness.uniforms.brightness = Number(0.5);
在这里插入图片描述
当number中数值设置为2时候
12、cesium模型中心点和基点坐标
1、获取中心点
function moveTile(tileset) {
tileset.readyPromise.then(function () {
let cartographic = Cesium.Cartographic.fromCartesian(
tileset.boundingSphere.center
);
let x = Cesium.Math.toDegrees(cartographic.longitude);
let y = Cesium.Math.toDegrees(cartographic.latitude);
let z = cartographic.height;
let pot = {x, y, z}
console.log(“中心点坐标”,pot)
})
}
2、获取基点坐标
tileset.readyPromise.then(function () {
const position = Cesium.Matrix4.getTranslation(tileset._root.transform, new Cesium.Cartesian3());
let cartographic = Cesium.Cartographic.fromCartesian(
position
);
let x = Cesium.Math.toDegrees(cartographic.longitude);
let y = Cesium.Math.toDegrees(cartographic.latitude);
let z = cartographic.height;
let params = {
tx: x,
ty: y,
tz: z,
rx: 0,
ry: 0,
rz: 0,
}
console.log(“现在的基点坐标”, params)
}
3、模型平移
传入模型和偏移的经纬度
function getTranslationMatrix(tileset, mdlParams) {
const cartographicCenter =
Cesium.Cartographic.fromCartesian(tileset.boundingSphere.center);
const surface = Cesium.Cartesian3.fromRadians(
cartographicCenter.longitude,
cartographicCenter.latitude,
cartographicCenter.height
);
const offset = Cesium.Cartesian3.fromDegrees(
mdlParams.tx,
mdlParams.ty,
mdlParams.tz
);
// 平移矩阵必须相减，才能得到贴面的模型
const translation = Cesium.Cartesian3.subtract(
offset,
surface,
new Cesium.Cartesian3()
);
tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
}
4、模型平移旋转
function update3dtilesMaxtrix(tileset, params) {
// //旋转
var mx = Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(params.rx));
var my = Cesium.Matrix3.fromRotationY(Cesium.Math.toRadians(params.ry));
var mz = Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(params.rz));
var rotationX = Cesium.Matrix4.fromRotationTranslation(mx);
var rotationY = Cesium.Matrix4.fromRotationTranslation(my);
var rotationZ = Cesium.Matrix4.fromRotationTranslation(mz);
//平移
var position = Cesium.Cartesian3.fromDegrees(params.tx, params.ty, params.tz);
var m = Cesium.Transforms.eastNorthUpToFixedFrame(position);
//旋转、平移矩阵相乘
Cesium.Matrix4.multiply(m, rotationX, m);
Cesium.Matrix4.multiply(m, rotationY, m);
Cesium.Matrix4.multiply(m, rotationZ, m);
//赋值给tileset
tileset._root.transform = m;
}
智能推荐
解决win10/win8/8.1 64位操作系统MT65xx preloader线刷驱动无法安装_mt65驱动-程序员宅基地
文章浏览阅读1.3w次。转载自 http://www.miui.com/thread-2003672-1-1.html 当手机在刷错包或者误修改删除系统文件后会出现无法开机或者是移动定制（联通合约机）版想刷标准版，这时就会用到线刷，首先就是安装线刷驱动。 在XP和win7上线刷是比较方便的，用那个驱动自动安装版，直接就可以安装好，完成线刷。不过现在也有好多机友换成了win8/8.1系统，再使用这个_mt65驱动
SonarQube简介及客户端集成_sonar的客户端区别-程序员宅基地
文章浏览阅读1k次。SonarQube是一个代码质量管理平台，可以扫描监测代码并给出质量评价及修改建议，通过插件机制支持25+中开发语言，可以很容易与gradle\maven\jenkins等工具进行集成，是非常流行的代码质量管控平台。通CheckStyle、findbugs等工具定位不同，SonarQube定位于平台，有完善的管理机制及强大的管理页面，并通过插件支持checkstyle及findbugs等既有的流..._sonar的客户端区别
元学习系列（六）：神经图灵机详细分析_神经图灵机方法改进-程序员宅基地
文章浏览阅读3.4k次，点赞2次，收藏27次。神经图灵机是LSTM、GRU的改进版本，本质上依然包含一个外部记忆结构、可对记忆进行读写操作，主要针对读写操作进行了改进，或者说提出了一种新的读写操作思路。神经图灵机之所以叫这个名字是因为它通过深度学习模型模拟了图灵机，但是我觉得如果先去介绍图灵机的概念，就会搞得很混乱，所以这里主要从神经图灵机改进了LSTM的哪些方面入手进行讲解，同时，由于模型的结构比较复杂，为了让思路更清晰，这次也会分开几..._神经图灵机方法改进
【机器学习】机器学习模型迭代方法(Python)-程序员宅基地
文章浏览阅读2.8k次。一、模型迭代方法机器学习模型在实际应用的场景，通常要根据新增的数据下进行模型的迭代，常见的模型迭代方法有以下几种：1、全量数据重新训练一个模型，直接合并历史训练数据与新增的数据，模型直接离线学习全量数据，学习得到一个全新的模型。优缺点：这也是实际最为常见的模型迭代方式，通常模型效果也是最好的，但这样模型迭代比较耗时，资源耗费比较多，实时性较差，特别是在大数据场景更为困难；2、模型融合的方法，将旧模..._模型迭代
base64图片打成Zip包上传，以及服务端解压的简单实现_base64可以装换zip吗-程序员宅基地
文章浏览阅读2.3k次。1、前言上传图片一般采用异步上传的方式，但是异步上传带来不好的地方，就如果图片有改变或者删除，图片服务器端就会造成浪费。所以有时候就会和参数同步提交。笔者喜欢base64图片一起上传，但是图片过多时就会出现数据丢失等异常。因为tomcat的post请求默认是2M的长度限制。2、解决办法有两种：① 修改tomcat的servel.xml的配置文件，设置 maxPostSize=..._base64可以装换zip吗
Opencv自然场景文本识别系统（源码＆教程）_opencv自然场景实时识别文字-程序员宅基地
文章浏览阅读1k次，点赞17次，收藏22次。Opencv自然场景文本识别系统（源码＆教程）_opencv自然场景实时识别文字
随便推点
ESXi 快速复制虚拟机脚本_exsi6.7快速克隆centos-程序员宅基地
文章浏览阅读1.3k次。拷贝虚拟机文件时间比较长，因为虚拟机 flat 文件很大，所以要等。脚本完成后，以复制虚拟机文件夹。将以下脚本内容写入文件。_exsi6.7快速克隆centos
好友推荐—基于关系的java和spark代码实现_本关任务:使用 spark core 知识完成 " 好友推荐 " 的程序。-程序员宅基地
文章浏览阅读2k次。本文主要实现基于二度好友的推荐。数学公式参考于：http://blog.csdn.net/qq_14950717/article/details/52197565测试数据为自己随手画的关系图把图片整理成文本信息如下：a b c d e f yb c a f gc a b dd c a e h q re f h d af e a b gg h f bh e g i di j m n ..._本关任务:使用 spark core 知识完成 " 好友推荐 " 的程序。
南京大学-高级程序设计复习总结_南京大学高级程序设计-程序员宅基地
文章浏览阅读367次。南京大学高级程序设计期末复习总结，c++面向对象编程_南京大学高级程序设计
4.朴素贝叶斯分类器实现－matlab_朴素贝叶斯 matlab训练和测试输出-程序员宅基地
文章浏览阅读3.1k次，点赞2次，收藏12次。实现朴素贝叶斯分类器，并且根据李航《统计机器学习》第四章提供的数据训练与测试，结果与书中一致分别实现了朴素贝叶斯以及带有laplace平滑的朴素贝叶斯%书中例题实现朴素贝叶斯%特征1的取值集合A1=[1;2;3];%特征2的取值集合A2=[4;5;6];%S M LAValues={A1;A2};%Y的取值集合YValue=[-1;1];%数据集和T=[ 1,4,-1;..._朴素贝叶斯 matlab训练和测试输出
Markdown 文本换行_markdowntext 换行-程序员宅基地
文章浏览阅读1.6k次。Markdown 文本换行_markdowntext 换行
错误:0xC0000022 在运行 Microsoft Windows 非核心版本的计算机上,运行”slui.exe 0x2a 0xC0000022″以显示错误文本_错误: 0xc0000022 在运行 microsoft windows 非核心版本的计算机上,运行-程序员宅基地
文章浏览阅读6.7w次，点赞2次，收藏37次。win10 2016长期服务版激活错误解决方法：打开“注册表编辑器”；（Windows + R然后输入Regedit）修改SkipRearm的值为1：（在HKEY_LOCAL_MACHINE–》SOFTWARE–》Microsoft–》Windows NT–》CurrentVersion–》SoftwareProtectionPlatform里面，将SkipRearm的值修改为1）重..._错误: 0xc0000022 在运行 microsoft windows 非核心版本的计算机上,运行“slui.ex