osbg倾斜文件转3DTiles文件通过Cesium实现3D地图
流程:安装Node.js,安装Cesium环境，安装http-server发布网页，编写加载3DTiles文件做地图的代码。
首先把我们拿到的osbg文件通过工具转成3dTiles文件，工具有很多，我这里是用的osg2cesiumApp，网盘提取码：lz11；操作流程如图
生成的3DTiles文件格式如下：
使用时加载tileset.json文件即可。
下载Node.js 点这里win7电脑 点这里 下载 提取码lz11
这里以.zip安装为例 在解压缩后的目录新建文件夹node-cache 、 node-global
将 C:\Program Files\node-v10.16.0-win-x64 和 C:\Program Files\node-v10.16.0-win-x64\node-global添加到环境变量的path中，以便于cmd命令行能找到程序。
添加环境变量后，在命令提示行中输入node -v 和npm -v 查看是否安装成功，如下图。
命令行输入 npm install http-server -g 安装 http-server进行发布，当然也可以用其他方式发布。
命令行cd到要发布网页的文件夹位置，输入 hs -p 8012 ；8012是端口号，重复的时候可以填其他的端口。
访问编写的html文件就可以看到效果啦。
参考代码如下
var viewer = new Cesium.Viewer("cesiumContainer");
var scene = viewer.scene;
var tileset = scene.primitives.add(
new Cesium.Cesium3DTileset({
url:'../../../data/3dtiles/tileset.json',
})
);
viewer.scene.primitives.add(tileset);
tileset.readyPromise
.then(function (tileset) {
viewer.zoomTo(
tileset,
new Cesium.HeadingPitchRange(
0.1,
-0.6,
tileset.boundingSphere.radius * 1.0
)
);
var height = -160;
var boundingSphere = tileset.boundingSphere;
var cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center);
var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0);
var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, height);
var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
})
.otherwise(function (error) {
console.log(error);
});
//回到初始化点位
function InitialPoision(){
viewer.zoomTo(
tileset,
new Cesium.HeadingPitchRange(
0.1,
-0.6,
tileset.boundingSphere.radius * 1.0
)
);
}
//到北城街道点位
var entity;
function viewerflyToLonLat(alt) {
if(entity){
viewer.entities.remove(entity);
}
entity = new Cesium.Entity({
id : 'flyTmp',
// position : Cesium.Cartesian3.fromDegrees(105.446697, 28.89598),
position : Cesium.Cartesian3.fromDegrees(105.4469343312411,28.895892047580578),
point : {
pixelSize : 10,
color : Cesium.Color.WHITE.withAlpha(0.9),
outlineColor : Cesium.Color.WHITE.withAlpha(0.9),
outlineWidth : 1
}
});
viewer.entities.add(entity);
viewer.flyTo(entity, {
offset : {
heading : Cesium.Math.toRadians(-180.0),//航向角（以弧度为单位）。
pitch : Cesium.Math.toRadians(-50),//俯仰角（以弧度为单位）。
range : 200//距中心的距离，以米为单位。
}
});
}
代码已打包，点这里 下载 提取码lz11
网友评论