加载glb模型
以下是代码
点击查看详细内容
//=======================
// 加载GLB模型
//=======================
// 加载glb文件必须设置位置
let position = Cesium.Cartesian3.fromDegrees(120.6900548047, 31.2939398963, 9);
// 设置模型方向
let hpRoll = new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(45), 0, 0);
// 生成一个函数，该函数从以提供的原点为中心的参考帧到提供的椭圆体的固定参考帧计算4x4变换矩阵。
let fixedFrame = Cesium.Transforms.localFrameToFixedFrameGenerator('north','west');
viewer.scene.primitives.add(Cesium.Model.fromGltf({
// 资源路径
url: 'res/blender.glb',
// '../Apps/SampleData/models/CesiumAir/Cesium_Air.glb',
modelMatrix: Cesium.Transforms.headingPitchRollToFixedFrame(position, hpRoll, Cesium.Ellipsoid.WGS84, fixedFrame, position), // 模型矩阵
minimumPixelSize: 128,// 模型最小刻度
scale : 2.0, // 模型标尺
maximumScale: 20000,// 模型最大刻度
debugShowBoundingVolume : false, // 仅用于调试。显示模型绘制时的边界球。
debugWireframe : false // 仅用于调试，显示模型绘制时的线框
}));
缩放至贴图
占位符
点击查看详细内容
//=======================
// 加载GLB模型
//=======================
// 两种方式放大至贴图
// 方法一
viewer.zoomTo(tileset);
// 方法二
// tileset.readyPromise.then(zoomToTileset);
function zoomToTileset() {
boundingSphere = tileset.boundingSphere;
viewer.camera.viewBoundingSphere(boundingSphere, new Cesium.HeadingPitchRange(0, -2.0, 0));
viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
// changeHeight(200);
}
查看cesium版本
重新编辑我
点击查看详细内容
//1 by code
var version = Cesium.VERSION;
console.log('Version is ' + version);
//2 by looking in js file
//打开cesium.js文件，锁定大写查找VERSION
点击查看详细内容
tileset.readyPromise.then(zoomToTileset);
function zoomToTileset() {
boundingSphere = tileset.boundingSphere;
viewer.camera.viewBoundingSphere(boundingSphere, new Cesium.HeadingPitchRange(0, -2.0, 0));
viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
// changeHeight(200);
}
// // 改变tileset高度下
function changeHeight(height) {
height = Number(height);
if (isNaN(height)) {
return;
}
var cartographic = Cesium.Cartographic.fromCartesian(tileset.boundingSphere.center);
var origin = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude,height);
var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height);
var translation = Cesium.Cartesian3.subtract(origin, offset, new Cesium.Cartesian3());
tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
}
一些参数解读
重新编辑我
点击查看详细内容
// param1：tileset [option param2:Cesium.HeadingPitchRange]
// Cesium.HeadingPitchRange(heading, pitch, range)
// heading, pitch, 以弧度为单位。
// range, 以米为单位, 指镜头和实体中心的距离。
// new Cesium.HeadingPitchRoll(heading, pitch, roll)
// heading,pitch,roll都是以弧度为单位。
// 规定镜头在右手笛卡尔坐标系里飞机模型的朝向，俯仰，旋转。
// x y z
// pitch yaw roll
// heading
// 俯仰角 偏航角 翻滚角
// 前后翻滚 左右旋转 左右翻滚
cesium控件
重新编辑我
点击查看详细内容
viewer = new Cesium.Viewer('cesiumContainer', {
// -------------谷歌底图
imageryProvider: GoogleMap ,
contextOptions: {
webgl: {
alpha: true
}
},
layer: "World Street Map",
//-------------- 以上底图加载区
// 右上角5个控件
geocoder : false,//是否显示地名查找控件 查找位置工具，查找到之后会将镜头对准找到的地址，默认使用bing地图
homeButton: false, //是否显示Home按钮 视角返回初始位置
sceneModePicker: false, //是否显示投影方式控件 选择视角的模式，有三种：3D，2D，哥伦布视图（2.5D)
baseLayerPicker : false,//图层选择器，选择要显示的地图服务和地形服务
navigationHelpButton: false, //是否显示导航帮助信息按钮
// 底部一排控件
animation: false, //是否显示动画控件
timeline: false, //是否显示时间线控件
fullscreenButton: false, //是否显示全屏按钮
// 屏幕中央
// selectionIndicator: false,//是否显示选择显示器，四角方形准心
// 不清楚的
infoBox: false, //是否显示点击要素之后显示的信息
// terrainProvider: Cesium.createWorldTerrain()
// shouldAnimate : true,
// requestRenderMode: true, //启用请求渲染模式
// scene3DOnly: false, //每个几何实例将只能以3D渲染以节省GPU内存
// sceneMode: 3, //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式 Cesium.SceneMode
// fullscreenElement: document.body, //全屏时渲染的HTML元素 暂时没发现用处
});
//去掉cesium版权信息
viewer._cesiumWidget._creditContainer.style.display="none";
点击显示坐标
动态水面
加载geojson 设置geojson颜色
重新编辑我
点击查看详细内容
//加载geojson 设置线条等
var promise= viewer.dataSources.add(Cesium.GeoJsonDataSource.load(strToObj, {
// stroke: Cesium.Color.HOTPINK, //多边形轮廓的默认颜色
// fill: Cesium.Color.PINK, //多边形内部的默认颜色。
// markerColor: Cesium.Color.RED, //获取或设置为每个点创建的地图针脚的默认颜色
// strokeWidth: 5, //线段或者多边形默认宽度
// markerSymbol: 'name' //是被标注字段
}));
// 以下是设置线条
promise.then(function(dataSource) {
viewer.dataSources.add(dataSource);
var entities = dataSource.entities.values;
console.log(entities)
var colorHash = {};
for (var i = 0; i < entities.length; i++) {
var entity = entities[i];
var name = entity.name; //geojson里面必须得有一个name属性，entity.name对应
var color = colorHash[name]; //可以使两个同名要素使用同一种颜色。。。
if (!color) {
color = Cesium.Color.fromRandom({
alpha : 1.0
});
colorHash[name] = color;
}
entity.polygon.material = color;
entity.polygon.outline = true;
// entity.polygon.outlineWidth = 40;// 仅在非windows系统有效 eg:Android、IOS、Linux、OS X
// windows系统中外框线永远是1.主要是因为三大主流浏览器引擎在windows平台上实现WebGL上的技术限制
entity.polygon.outlineColor = Cesium.Color.RED;
entity.polygon.fill = false;
entity.polygon.height = Math.floor(8);
viewer.zoomTo(promise);
}
});