<!DOCTYPE html> <html> <head> <meta charset='UTF-8' /> <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> <link href='http://www.bigemap.com:9000/bigemap-gl.js/v1.1.0/Widgets/widgets.css' rel='stylesheet' /> <script src='http://www.bigemap.com:9000/bigemap-gl.js/v1.1.0/bigemap-gl.js'></script> <script src="https://cdn.bootcdn.net/ajax/libs/dat-gui/0.7.9/dat.gui.js"></script> <link rel="stylesheet" href="./font/iconfont.css"> <style> body { margin: 0; padding: 0; } #container { position: absolute; top: 0; bottom: 0; width: 100%; } .bmgl-widget-credits { display: none } #my-gui-container { position: absolute; left: 20px; top: 0; } </style> <title>part_test</title> </head> <body> <div id='container'></div> <div id="my-gui-container"></div> <script> bmgl.Config.HTTP_URL = 'http://www.bigemap.com:9000'; var viewer = new bmgl.Viewer('container', { mapId: 'bigemap.arcgis-satellite', shouldAnimate: true, requestRenderMode: true, //及时更新 }); // viewer.imageryLayers.add(new bmgl.ImageryLayer(new bmgl.BMImageryProvider({ // mapId: 'bigemap.tian2-terrainstreets-c', // }))); var FizzyText = function () { this.backCamera = function () { this.showTileset && viewer.flyTo(tilesets) }; this.useTerrian = true, this.lod = 16, this.showTileset = true, this.height = 113, this.scale = 1, this.changePosition = false, this.longitude = 104, this.latitude = 30, this.rx = 0, this.ry = 0, this.rz = 0, this.alpha = 1; }; var text = new FizzyText(); var tileData, tilesets; var gui = new dat.GUI({ autoPlace: false }); var customContainer = document.getElementById('my-gui-container'); customContainer.appendChild(gui.domElement); gui.add(text, 'useTerrian', false, true).onFinishChange(toggleTerrian).name('切换地形遮挡'); gui.add(text, 'backCamera').name('看到倾斜摄影'); var tilesetFolder = gui.addFolder('倾斜摄影操作') tilesetFolder.add(text, 'showTileset', false, true).onFinishChange(toggleTileset).name('显示倾斜摄影'); tilesetFolder.add(text, 'lod', 1, 128).onFinishChange(changeLod).name('倾斜摄影清晰度(越小越清晰)'); tilesetFolder.add(text, 'height', -300, 300, 1).onFinishChange(update).name('高度'); tilesetFolder.add(text, 'scale', 0, 5, 0.1).onFinishChange(update).name('缩放'); tilesetFolder.add(text, 'changePosition', false, true).onFinishChange(update).name('修改倾斜摄影位置'); tilesetFolder.add(text, 'longitude', 100, 110, 0.001).onFinishChange(update).name('经度'); tilesetFolder.add(text, 'latitude', 0, 60).onFinishChange(update).name('纬度'); tilesetFolder.add(text, 'rx', -360, 360).onFinishChange(update); tilesetFolder.add(text, 'ry', -360, 360).onFinishChange(update); tilesetFolder.add(text, 'rz', -360, 360).onFinishChange(update); tilesetFolder.add(text, 'alpha', 0, 1).onFinishChange(update).name('透明'); function toggleTerrian(boolean) { viewer.scene.globe.depthTestAgainstTerrain = boolean; }; function toggleTileset(boolean) { tilesets.show = boolean; } function changeLod(value) { tilesets.maximumScreenSpaceError = value; } function update(value) { if (text.changePosition == false) { tileData._root.transform = update3dtilesMaxtrix(text); } else { tileData._root.transform = update3dtilesMaxtrix(text, true); } } function getNativePosiotion(tileset, tileModelTool) { var cartographic = bmgl.Cartographic.fromCartesian(tileset.default); console.log(bmgl.Math.toDegrees(cartographic.longitude), bmgl.Math.toDegrees(cartographic.latitude)); var delta_lng = 0, delta_lat = 0; var surface = bmgl.Cartesian3.fromRadians(cartographic.longitude + delta_lng, cartographic.latitude + delta_lat, 0.0); var offset = bmgl.Cartesian3.fromRadians(cartographic.longitude + delta_lng, cartographic.latitude + delta_lat, tileModelTool.height); var translation = bmgl.Cartesian3.subtract(offset, surface, new bmgl.Cartesian3()); var M = bmgl.Matrix4.fromTranslation(translation); return M } function update3dtilesMaxtrix(tileModelTool, changePosition) { var mx = bmgl.Matrix3.fromRotationX( bmgl.Math.toRadians(tileModelTool.rx) ); var my = bmgl.Matrix3.fromRotationY( bmgl.Math.toRadians(tileModelTool.ry) ); var mz = bmgl.Matrix3.fromRotationZ( bmgl.Math.toRadians(tileModelTool.rz) ); var rotationX = bmgl.Matrix4.fromRotationTranslation(mx); var rotationY = bmgl.Matrix4.fromRotationTranslation(my); var rotationZ = bmgl.Matrix4.fromRotationTranslation(mz); //平移 修改经纬度 var position; if (changePosition) { position = bmgl.Cartesian3.fromDegrees( tileModelTool.longitude, tileModelTool.latitude, tileModelTool.height ); } else { var cartographic = bmgl.Cartographic.fromCartesian(tileData.default); position = bmgl.Cartesian3.fromDegrees( bmgl.Math.toDegrees(cartographic.longitude), bmgl.Math.toDegrees(cartographic.latitude), tileModelTool.height ); } var m = bmgl.Transforms.eastNorthUpToFixedFrame(position); //旋转、平移矩阵相乘 bmgl.Matrix4.multiply(m, rotationX, m); bmgl.Matrix4.multiply(m, rotationY, m); bmgl.Matrix4.multiply(m, rotationZ, m); //缩放 修改缩放比例 var scale = bmgl.Matrix4.fromUniformScale(tileModelTool.scale); bmgl.Matrix4.multiply(m, scale, m); return m; } tilesets = new bmgl.BM3DTileset({ url: '/bmgl/data/osgb/tileset.json', }); viewer.scene.globe.depthTestAgainstTerrain = true; tilesets.readyPromise.then(function (tileset) { viewer.scene.primitives.add(tileset); tileset.default = tileset.boundingSphere.center; var default_HeadingPitchRange = new bmgl.HeadingPitchRange(0.0, -0.5, tileset.boundingSphere.radius * 2.0); viewer.zoomTo(tileset, default_HeadingPitchRange); tileData = tileset; tileset.modelMatrix = getNativePosiotion(tileData, text); }).otherwise(function (error) { console.log(error); }); </script> </body> </html>
源码