Article Directory
0. Preface
Remember to start the nginx service. For details, see:
【PIE-Earth】Getting started and configuring the development environment
【PIE-Earth】Online data loading and basic analysis
1. Model editing
In this routine, the model is moved horizontally, vertically, rotated, scaled, etc. by clicking the button.
It is mainly divided into three steps:
- Initialize variables
- Add model and model style definitions
- Creation and definition of operation functions
1.1 Code display
<!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 Model loading display
1.3 Horizontal movement
1.4 Vertical movement
1.5 Zoom
1.6 rotation
2. Singularization of 3D tilted models
In this routine, the 3D tilted model is loaded and displayed by clicking the button, and the model is singled out.
It is mainly divided into three steps:
- Initialize variables
- Load the data source and display
- Model Unitization
2.1 Code display
2.1.1 Loading and displaying the 3D tilted model
<!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 Rendering diagram of oblique photographic model
2.1.3 Singularization of 3D tilted model
// 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 Singularization renderings of oblique photographic models
3. Overlay video of 3D tilted model
In this routine, click the button to load and display the 3D tilted model and superimpose the video.
It is mainly divided into three steps:
- Initialize variables
- Load the data source and display
- overlay video
3.1 Code display
<!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 Add video renderings to the tilted camera model
References
[1] Quick start and development environment setup (PIE-Earth)
[2] PIE-Earth official website