久仰cesium的大名,3dGIS的受欢迎程度在如今也是不言而喻。之前做过商业版的3dGIS项目用的是skyline的产品,对于开源3dGIS,看的我也是心痒难耐,今天就照着做了几个demo.确实强大。
准备工作:1.cesiumLab :yong 3dtile 的发布,例如地形,用于extrude的矢量面数据,点数据等。
2.广州市全市建筑轮廓 .shp 文件,广东省部分区域DEM。
3.cesium 1.45压缩包
将lab中制作的地形和建筑3DTile文件放到tomcat下面或者iis目录下运行即可,还是很容易上手的。细节的话,还是要多看api文档。
多的不说,直接上代码和效果图吧:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="../Build/Cesium/Cesium.js"></script>
<style>
@import url(../Build/Cesium/Widgets/widgets.css);
html, body, #container {
width: 98%; height: 98%; margin: 0; padding: 0; overflow: hidden;
}
</style>
</head>
<body>
<div id="container">
</div>
<button id='flytoGZ'style=" z-index:99999" onclick='flygz()'></button>
<button id='flytoSZ' style=" z-index:99999" onclick='flysz()' ></button>
<script>
var viewer = new Cesium.Viewer('container');
var longitude = 113.32000249500005;
var latitude = 23.149254307297817;
var height = 3.4846899907793303e-9;
var heading = 0;
var tileset = new Cesium.Cesium3DTileset({
url: 'http://localhost:8080/cesiumBuiding1/cesiumBuiding1/tileset.json'
});
viewer.scene.primitives.add(tileset);
tileset.readyPromise.then(function(argument) {
var position = Cesium.Cartesian3.fromDegrees(longitude, latitude, height);
var mat = Cesium.Transforms.eastNorthUpToFixedFrame(position);
var rotationX = Cesium.Matrix4.fromRotationTranslation(Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(heading)));
Cesium.Matrix4.multiply(mat, rotationX, mat);
tileset._root.transform = mat;
viewer.camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(longitude, latitude, height + 1000)});
});
//加载深圳地形
var rectangle = new Cesium.Rectangle(Cesium.Math.toRadians(112.99986),Cesium.Math.toRadians(21.99986),
Cesium.Math.toRadians(115.00014),Cesium.Math.toRadians(23.00014));
var terrainLayer = new Cesium.CesiumTerrainProvider({
url: 'http://localhost:8080/cesiumTerra',
requestWaterMask:true,
// credit: 'http://www.bjxbsj.cn',
});
viewer.terrainProvider = terrainLayer;
// viewer.scene.camera.flyTo({destination: rectangle});
function flygz(){
viewer.camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(longitude, latitude, height + 1000)});
}
function flysz(){
viewer.scene.camera.flyTo({destination: rectangle});
}
</script>
</body>
</html>