刚开始用的是cesium加载geojson来达到加载三维建筑的目的,加载建筑物倒是没什么太大问题,只是建筑物还要进行贴图,如果再用geojson来加载贴图会特别卡,浏览器会崩溃,电脑会死机,于是发现官网有这种方法,加载完成之后速度特别快。而且是分片加载的,只加载视野区域内的建筑物,并且用这种方法来加载贴图也很快。
数据源是带有高度字段的建筑物shp(面),可以用arcgis画一些测试,然后导入到CesiumLab里发布成三维数据,前端调用就是那个http://xxx/tileset.json的接口。
Cesium.Ion.defaultAccessToken = "官网申请的token"
var viewer = new Cesium.Viewer('cesiumContainer', {
imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
}),
animation: false,
timeline: false, //时间线
fullscreenButton: true, //全屏模式
infoBox: false, //要素信息框
homeButton: false, //显示主页
geocoder: false, //搜索位置
sceneModePicker: true,//模式切换
selectionIndicator: true, //展示三维的指示器
navigationHelpButton: false, //帮助按钮
navigationInstructionsInitiallyVisible: false
});
CesiumZh.load();//汉化组件函数,不用组件就可以屏蔽不调用,不屏蔽也没影响
/** 设置页面加载的初始位置 */
//经度、纬度、建筑物视角高度
var initialPosition = new Cesium.Cartesian3.fromDegrees(117.11744684384189,39.128615983991416,500);
var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(7.1077496389876024807, -31.987223091598949050, 0.025883251314950971306);
var homeCameraView = {
destination: initialPosition,
orientation: {
heading: initialOrientation.heading,//围绕负z轴的旋转
pitch: initialOrientation.pitch,//围绕负y轴的旋转
roll: initialOrientation.roll//围绕正x轴的旋转
}
};
viewer.scene.camera.setView(homeCameraView); //将相机设定在特定的位置和方向
/** 防止地面穿透 */
viewer.clock.onTick.addEventListener(function () {
if (viewer.camera.pitch > -0.5) {
viewer.scene.screenSpaceCameraController.enableTilt = false;
}
});
var mousePosition, startMousePosition;
var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
handler.setInputAction(function (movement) {
mousePosition = startMousePosition = Cesium.Cartesian3.clone(movement.position);
handler.setInputAction(function (movement) {
mousePosition = movement.endPosition;
var y = mousePosition.y - startMousePosition.y;
// console.log(y)
if (y > 0) {
viewer.scene.screenSpaceCameraController.enableTilt = true;
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
}, Cesium.ScreenSpaceEventType.MIDDLE_DOWN);
var layer = new Cesium.WebMapTileServiceImageryProvider({
url: 'http://t0.tianditu.gov.cn/img_w/wmts?tk=官网申请的token',
layer: 'img',
style: 'default',
tileMatrixSetID: 'w',
format: 'tiles',
maximumLevel: 18
});
viewer.imageryLayers.addImageryProvider(layer);
var layer1 = new Cesium.WebMapTileServiceImageryProvider({
url: 'http://t0.tianditu.gov.cn/cia_w/wmts?tk=官网申请的token',
layer: 'cia',
style: 'default',
tileMatrixSetID: 'w',
format: 'tiles',
maximumLevel: 18
});
viewer.imageryLayers