文章目录
0.前言
记得开始启动nginx服务，详情请见：
1. 模型编辑
本例程中，通过点击按钮对模型进行水平移动、垂直移动、旋转、缩放等操作。
主要分为三步：
- 初始化变量
- 添加模型与模型样式定义
- 操作函数的创建与定义
1.1 代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Document</title>
<style>
html,
body {
margin: 0;
width: 100%;
height: 100%;
}
#globe {
width: 100%;
height: 100%;
}
#canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="globe">
<canvas id="canvas"></canvas>
</div>
<!--定义编辑模型按钮-->
<div style="position: absolute; top: 5%; left: 10px;">
<div style="margin-bottom: 6px;">
<button onclick="Move()">水平移动</button>
<button onclick="Altitude()">垂直移动</button>
<button onclick="Scale()">缩放</button>
<button onclick="Rotate()">旋转</button>
</div>
</div>
<script type="text/javascript" src="PIEWrapperWeb.js"></script>
<script type="text/javascript" src="PIEMap.js"></script>
<script>
var globeControl = null;
var globe = null;
var renderableLayer = null;
createEarthModule().then(function (module) {
/**创建场景视图**/
var viewer = new PIE.GlobeViewer({
canvas: 'canvas',
dimensionMode: PIE.DimensionMode.D3D,
sceneMode: PIE.SceneMode.Sphere,
autoProjection: true,
center: [115.7, 39.4],
zoom: 10,
rasterDataSource: {
server: 'https://webst03.is.autonavi.com/appmaptile?style=6&z={z}&y={y}&x={x}',
alias: 'test',
},//影像瓦片数据源地址
});
//1、初始化变量
//添加globe控件
globeControl = viewer.getGlobeControl();
globe = globeControl.getGlobe();
//设置坐标转换
var spatialReference = globe.getSpatialReference();
//设置渲染图层
renderableLayer = new PIE.GlobeRenderableLayer();
globe.addLayer(renderableLayer, true);
//设置编辑模块
var globeEditor = globeControl.getGlobeEditor();
//设置编辑模块的模式
globeEditor.setEditMode(PIE.EditMode.Geometry3D);
//设置要编辑的图层
globeEditor.setEditLayer(renderableLayer);
//2、添加模型与样式定义
var urlsFBX = [];
urlsFBX.push('http://localhost:8080/data04/DDFSC.fbx');
urlsFBX.push('http://localhost:8080/data04/DDFSC.jpg');
//添加模型位置点
var sceneCenter = new PIE.Vector2(115.7, 39.4);
//地图坐标转换，经纬度坐标转投影坐标
var posGlobeSR = spatialReference.forward(sceneCenter);
//定义3d模型对象
var modelMesh = new PIE.ModelMesh();
//添加模型数据
modelMesh.load({
urls: urlsFBX}).then((value) => {
var model3D = new PIE.Model3D({
modelMesh: modelMesh});
//设置模型id
model3D.setModelId(0);
//设置模型风格
var vectorStyle = new PIE.VectorStyle();
vectorStyle.setAltitudeMode(PIE.AltitudeMode.RelativeToGround);
model3D.setStyle(vectorStyle);
//定义模型位置
var position3d = new PIE.Vector3(posGlobeSR.x, posGlobeSR.y, 0);
//定义模型缩放比例，放大1000倍
var scale3d = new PIE.Vector3(1000, 1000, 1000);
//定义模型旋转
var rotation3d = new PIE.Vector3(0, 0, -Math.PI / 2);
//定义渲染对象参数
var renderModel3D = new PIE.RenderModel({
model: model3D,
position: position3d,
scale: scale3d,
rotation: rotation3d,
});
//添加渲染的模型对象
renderableLayer.add(renderModel3D);
});
});
//3、操作函数的创建
/** 水平移动 **/
function Move() {
globeControl.setGlobeTool(PIE.GlobeToolType.EditPan);
renderableLayer.setSelectable(true);
}
/** 垂直移动 **/
function Altitude() {
globeControl.setGlobeTool(PIE.GlobeToolType.EditHeight);
renderableLayer.setSelectable(true);
}
/** 缩放 **/
function Scale() {
globeControl.setGlobeTool(PIE.GlobeToolType.EditScale);
renderableLayer.setSelectable(true);
}
/** 旋转 **/
function Rotate() {
globeControl.setGlobeTool(PIE.GlobeToolType.EditRotate);
renderableLayer.setSelectable(true);
}
</script>
</body>
</html>
1.2 模型加载显示
1.3 水平移动
1.4 垂直移动
1.5 缩放
1.6 旋转
2. 三维倾斜模型单体化
本例程中，通过点击按钮对三维倾斜模型进行加载显示、模型单体化。
主要分为三步：
- 初始化变量
- 加载数据源并显示
- 模型单体化
2.1 代码展示
2.1.1 三维倾斜模型进行加载显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>倾斜摄影模型单体化</title>
<style>
html,
body {
margin: 0;
width: 100%;
height: 100%;
}
#globe {
width: 100%;
height: 100%;
}
#canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="globe">
<canvas id="canvas"></canvas>
</div>
<script type="text/javascript" src="PIEWrapperWeb.js"></script>
<script type="text/javascript" src="PIEMap.js"></script>
<script>
createEarthModule(/* optional default settings */).then(function (module) {
/**创建场景视图**/
var viewer = new PIE.GlobeViewer({
canvas: 'canvas',
dimensionMode: PIE.DimensionMode.D3D,
sceneMode: PIE.SceneMode.Sphere,
autoProjection: true,
center: [106.521776, 38.910574],
zoom: 17,
rasterDataSource: {
server: 'https://webst03.is.autonavi.com/appmaptile?style=6&z={z}&y={y}&x={x}',
alias: 'test'
}, //影像瓦片数据源地址
});
//1、定义变量
var globeControl = viewer.getGlobeControl(); //获取场景操作
var globe = viewer.getGlobe(); //获取场景
var workspace = globe.getDocument(); //获取工作空间
//2、加载数据源并显示
//打开OSGB数据库(服务地址)
var baseUrl = 'https://pie-engine-test.s3.cn-northwest-1.amazonaws.com.cn/earthdata/mapdata/hd-osgb/Data/SJSWmesh-osgb.tmc';
//定义OSGB数据源
var dataSource = new PIE.OSGBDataSource();
//打开倾斜摄影模型数据源
dataSource.open({
database: baseUrl});
//添加数据源到工作空间
workspace.getDataSourceManager().addDataSource(dataSource);
//倾斜摄影模型图层
var globeTiltModelLayer = new PIE.GlobeTiltModelLayer();
globeTiltModelLayer.setDataSource(dataSource);
globe.addLayer(globeTiltModelLayer, true);
// 3、模型单体化
/**设置（X轴）旋转角度**/
globe.setPitchAngle(65);
globe.refresh(false, false);
});
</script>
</body>
</html>
2.1.2 倾斜摄影模型效果图
2.1.3 三维倾斜模型单体化
// 3、模型单体化
var featureDataSource = new PIE.GSFDataSource();
featureDataSource.load({
gsfUrl: 'http://localhost:8080/data04/dantishuju.gsf'}).then((vaule) => {
workspace.getDataSourceManager().addDataSource(vaule);
var vectorStyle = new PIE.VectorStyle({
fillColor: [0, 255, 0, 60], //设置颜色（绿色）和透明度（60%）[0, 255, 0, 60]
classifyMode: PIE.ClassifyMode.ClassifyModel,//设置分类模式
altitudeMode: PIE.AltitudeMode.ClampToModel,//设置依地模式
});
//分类矢量渲染器
var classifyFeatureRenderer = new PIE.ClassifyFeatureRenderer();
classifyFeatureRenderer.setStyle(vectorStyle);
//三维矢量数据图层
var featureLayer = new PIE.GlobeFeatureLayer();
//设置三维图层数据源
featureLayer.setDataSource(vaule);
//设置三维矢量渲染器
featureLayer.setRenderer(classifyFeatureRenderer);
//将图层添加到球上
globe.addLayer(featureLayer, true);
//设置图层可选择
featureLayer.setSelectable(true);
//设置单体化工具
globeControl.setGlobeTool('PickingGlobeTool');
2.1.4 倾斜摄影模型单体化效果图
3. 三维倾斜模型叠加视频
本例程中，通过点击按钮对三维倾斜模型进行加载显示、叠加视频。
主要分为三步：
- 初始化变量
- 加载数据源并显示
- 叠加视频
3.1 代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Document</title>
<style>
html,
body {
margin: 0;
width: 100%;
height: 100%;
}
#globe {
width: 100%;
height: 100%;
}
#canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="globe">
<canvas id="canvas"></canvas>
</div>
<video id="trailer" muted="" autoplay="" loop="" crossorigin="" controls="">
<source src="./data04/roadmonitor.mp4" type="video/mp4"/>
</video>
<script type="text/javascript" src="PIEWrapperWeb.js"></script>
<script type="text/javascript" src="PIEMap.js"></script>
<script>
createEarthModule(/* optional default settings */).then(function (module) {
/**创建场景视图**/
var viewer = new PIE.GlobeViewer({
canvas: 'canvas',
dimensionMode: PIE.DimensionMode.D3D,
sceneMode: PIE.SceneMode.Sphere,
autoProjection: true,
center: [104.399131, 31.134956],
zoom: 17,
rasterDataSource: {
server: 'https://webst03.is.autonavi.com/appmaptile?style=6&z={z}&y={y}&x={x}',
alias: 'test',
}, //影像瓦片数据源地址
terrainDataSource: {
server: 'https://pie-engine-test.s3.cn-northwest-1.amazonaws.com.cn/earthdata/mapdata/sichuandem/_alllayers/{z}/{y}/{x}.terrain',
alias: 'terrain',
},
});
/**创建绘制对象图层,添加在场景中**/
//1、定义变量
// 获取场景操作
var globeControl = viewer.getGlobeControl();
//获取场景
var globe = globeControl.getGlobe();
//获取工作空间
var workspace = globe.getDocument();
//2、加载数据源并显示
//打开OSGB数据库(服务地址)
var baseUrl = 'https://pie-engine-test.s3.cn-northwest-1.amazonaws.com.cn/earthdata/mapdata/Production_OSGB15/Data/Production_OSGB15.tmc';
//定义OSGB数据源
var dataSource = new PIE.OSGBDataSource();
//打开倾斜摄影模型数据源
dataSource.open({
database: baseUrl});
//添加数据源到工作空间
workspace.getDataSourceManager().addDataSource(dataSource);
//倾斜摄影模型图层
var globeTiltModelLayer = new PIE.GlobeTiltModelLayer();
globeTiltModelLayer.setDataSource(dataSource);
globe.addLayer(globeTiltModelLayer, true);
// 3、叠加视频
//设置视频对象
var videoElement = null;
videoElement = document.getElementById('trailer');
videoElement.style.display = 'none';
videoElement.play();
//设置纹理对象
var texture = null;
texture = new PIE.Texture();
texture.create();
//设置视频位置、方向
var position1 = globe.mapToWorld(PIE.SceneMode.Sphere, [11621681.87009008, 3650322.53826947], 0);
var position2 = globe.mapToWorld(PIE.SceneMode.Sphere, [11621681.87009008, 3650322.53826947], 530);
var direction = new PIE.Vector3(position1[0], position1[1], position1[2])
.sub(new PIE.Vector3(position2[0], position2[1], position2[2]))
.normalized();
var up = new PIE.Vector3(1.43, 0.9, 0);
var projector = new PIE.Projector();
projector.setPosition(position2);
projector.setDirection(direction);
projector.setUp(up);
projector.setFov(45);
projector.setNearDistance(1); //相机拍摄的最近距离
projector.setFarDistance(10000); //相机拍摄的最远距离
projector.setTexture(texture); //设置动态对象的纹理
globeTiltModelLayer.addProjector(projector);
globe.refresh(false, false);
var doRenderFrame = function () {
if (texture != null) {
var context = globeControl.getContext();
texture.bind(true); //绑定纹理对象
texture.updateImage(context, videoElement); //更新纹理对象
texture.bind(false);
}
globeControl.onRender();
requestAnimationFrame(doRenderFrame);
};
doRenderFrame();
});
</script>
</body>
</html>
3.2 倾斜摄影模型添加视频效果图
