1. 简单入门
2. BOSGeo前端介绍
面向BIM应用的三维GIS数据存储、管理、分享和开发平台，为城市基础设施提供基础数据服务 —— 给建筑一个地理环境，给地理环境更多真实建筑。
BOSGeo展示效果如图所示
3. BIM转Geo数据基本流程
3.1. 第一步：上传BIM模型
可以在bos，bos3d或数字建筑物中上传模型，上传模型后，能够得到bos3durl，modelDb，modelKey
3.2. 第二步： BIM转Geo模型数据
根据BIM模型创建GEO模型，即将bim数据转化为3dtiles数据
3.3. 第三步： 查询Geo模型解析进度
根据BIM模型创建GEO模型，即将bim数据转化为3dtiles数据
3.4. 第四步： 获取Geo模型信息
根据BIM模型创建GEO模型，即将bim数据转化为3dtiles数据
3.5. 第四步： 验证Geo模型数据
原始请求格式为：{bos3dAPI} /{databaseKey}/geomodels/{key}/data/{url} 其中url即为上一个请求中的mainPath，模型数据的主文件
4. 前端展示Geo数据基本流程
4.1. 第一步：html页面
<div id="mapContainer" style="width: 1000px; height: 800px;"></div>
4.2. 第二步： 引入依赖文件
<link rel="stylesheet" href="http://model.rickricks.com:7780/static/BOSGeo/BOSGeo.css" />
<script type="application/javascript" src="http://model.rickricks.com:7780/static/BOSGeo/BOSGeo.js"></script>
4.3. 第三步： 编写初始化代码
var map = new BOSGeo.Map('mapContainer', {
mapType: BOSGeo.GD_VECTOR
});
4.4. 第四步： 加载模型
var layers = map.layers;
var modelCollection = new BOSGeo.LayerCollection({
name: '模型集合',
type: 'model'
});
layers.add(modelCollection);
modelCollection.add(new BOSGeo.ModelLayer({
name: '测试',
type: '3dtiles',
url: './G1595408695930/tileset.json',
position: [113.10753420284743, 23.03054599944751, 20],
enableCache: true,
}));
5. 示例demo代码
特别说明： 下面示例代码中url 使用 “验证Geo模型数据” 这一步的地址。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="http://model.rickricks.com:7780/static/BOSGeo/BOSGeo.css" />
<title>加载模型</title>
<style>
html {
font-size: 12px;
}
html,
body,
#mapContainer {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div id="mapContainer"></div>
<script src="http://model.rickricks.com:7780/static/BOSGeo/BOSGeo.js"></script>
<script>
var map = new BOSGeo.Map('mapContainer', {
mapType: BOSGeo.TDT_IMAGERY,
enableHighlight: true // 是否高亮选中的模型
});
// 获取图层管理类
var layers = map.layers;
// 设置收集模型的集合
var modelCollection = new BOSGeo.LayerCollection({
name: '模型集合',
type: 'model'
});
// 将集合添加到图层管理中
layers.add(modelCollection);
var tiles = new BOSGeo.ModelLayer({
name: '油罐4',
type: '3dtiles',
url: 'http://canyou.rickricks.com:8093/G1578458793946/tileset.json', //这里url使用“验证Geo模型数据”这一步的地址
position: [121.46517, 31.16734, 3],
rotation: [0, 0, 0],
enableCache: true,
scale: 1,
// onClick: layer => {
// layer.zoomTo();
// },
loaded: tileLoaded
});
map.viewChange.addEventListener((position, rotation) => {
// position = 相机视角的数据 = [经度,纬度,高度]
})
modelCollection.add(tiles);
function tileLoaded (tileset) {
// var axis = new BOSGeo.MeasureAxis({model: tileset, x: false, width: 1, alpha: 0.1});
// axis.showAxis(); // 添加坐标轴
// axis.showCube(); // 添加包围盒
map.flyToEntity(tileset, {duration: 1.6});
}
</script>
</body>
</html>