|
@@ -46,86 +46,80 @@
|
|
|
|
|
|
</div>
|
|
|
</template>
|
|
|
- <script>
|
|
|
- import screenfull from "screenfull";
|
|
|
- export default ({
|
|
|
- computed: {
|
|
|
+<script>
|
|
|
+import screenfull from 'screenfull';
|
|
|
+export default ({
|
|
|
+ computed: {
|
|
|
|
|
|
- },
|
|
|
+ },
|
|
|
|
|
|
- data() {
|
|
|
- return {
|
|
|
- viewer2D: null,
|
|
|
- viewer3D: null,
|
|
|
- dimension: 3,
|
|
|
- leftwidth: 0,
|
|
|
- mousevalue: null,
|
|
|
- shouldAnimate: false,
|
|
|
- activeName: 'first',
|
|
|
- currentLab: {
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ viewer2D: null,
|
|
|
+ viewer3D: null,
|
|
|
+ dimension: 3,
|
|
|
+ leftwidth: 0,
|
|
|
+ mousevalue: null,
|
|
|
+ shouldAnimate: false,
|
|
|
+ activeName: 'first',
|
|
|
+ currentLab: {
|
|
|
index: -1,
|
|
|
isActive: false
|
|
|
}
|
|
|
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted () {
|
|
|
+ this.cesiumInit();
|
|
|
+ },
|
|
|
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- },
|
|
|
- mounted() {
|
|
|
-
|
|
|
- this.cesiumInit();
|
|
|
-
|
|
|
- },
|
|
|
-
|
|
|
- methods: {
|
|
|
+ methods: {
|
|
|
|
|
|
- cesiumInit() {
|
|
|
- this.viewer2D = new this.Cesium.Viewer("2DcesiumContainer", {
|
|
|
- sceneMode: this.Cesium.SceneMode.SCENE2D,
|
|
|
- animation: false, // 是否显示时间轴动画
|
|
|
- baseLayerPicker: false,
|
|
|
- homeButton: false,
|
|
|
- geocoder: false,
|
|
|
- timeline: false,
|
|
|
- fullscreenButton: false,
|
|
|
- sceneModePicker: false,
|
|
|
- navigationHelpButton: false,
|
|
|
- selectionIndicator: false,
|
|
|
- imageryProvider: new this.Cesium.UrlTemplateImageryProvider({
|
|
|
- url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
|
|
|
- layer: "tdtVecBasicLayer",
|
|
|
- style: "default",
|
|
|
- format: "image/png",
|
|
|
- tileMatrixSetID: "GoogleMapsCompatible",
|
|
|
- show: false
|
|
|
- })
|
|
|
-
|
|
|
+ cesiumInit () {
|
|
|
+ this.viewer2D = new this.Cesium.Viewer('2DcesiumContainer', {
|
|
|
+ sceneMode: this.Cesium.SceneMode.SCENE2D,
|
|
|
+ animation: false, // 是否显示时间轴动画
|
|
|
+ baseLayerPicker: false,
|
|
|
+ homeButton: false,
|
|
|
+ geocoder: false,
|
|
|
+ timeline: false,
|
|
|
+ fullscreenButton: false,
|
|
|
+ sceneModePicker: false,
|
|
|
+ navigationHelpButton: false,
|
|
|
+ selectionIndicator: false,
|
|
|
+ imageryProvider: new this.Cesium.UrlTemplateImageryProvider({
|
|
|
+ url: 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
|
|
|
+ layer: 'tdtVecBasicLayer',
|
|
|
+ style: 'default',
|
|
|
+ format: 'image/png',
|
|
|
+ tileMatrixSetID: 'GoogleMapsCompatible',
|
|
|
+ show: false
|
|
|
+ })
|
|
|
|
|
|
- });
|
|
|
+ });
|
|
|
|
|
|
- this.viewer3D = new this.Cesium.Viewer('3DcesiumContainer', {
|
|
|
- animation: false, // 是否显示时间轴动画
|
|
|
- baseLayerPicker: false,
|
|
|
- homeButton: false,
|
|
|
- geocoder: false,
|
|
|
- timeline: false,
|
|
|
- fullscreenButton: false,
|
|
|
- sceneModePicker: false,
|
|
|
- navigationHelpButton: false,
|
|
|
- selectionIndicator: false,
|
|
|
- // imageryProvider: new this.Cesium.WebMapServiceImageryProvider({
|
|
|
- // url: '/geoserver/map/wms',
|
|
|
- // // 这里是自定义的图层名称
|
|
|
- // layers: 'map',
|
|
|
- // parameters: {
|
|
|
- // service: 'WMS',
|
|
|
- // format: 'image/png',
|
|
|
- // transparent: true
|
|
|
- // }
|
|
|
- // }),
|
|
|
+ this.viewer3D = new this.Cesium.Viewer('3DcesiumContainer', {
|
|
|
+ animation: false, // 是否显示时间轴动画
|
|
|
+ baseLayerPicker: false,
|
|
|
+ homeButton: false,
|
|
|
+ geocoder: false,
|
|
|
+ timeline: false,
|
|
|
+ fullscreenButton: false,
|
|
|
+ sceneModePicker: false,
|
|
|
+ navigationHelpButton: false,
|
|
|
+ selectionIndicator: false,
|
|
|
+ // imageryProvider: new this.Cesium.WebMapServiceImageryProvider({
|
|
|
+ // url: '/geoserver/map/wms',
|
|
|
+ // // 这里是自定义的图层名称
|
|
|
+ // layers: 'map',
|
|
|
+ // parameters: {
|
|
|
+ // service: 'WMS',
|
|
|
+ // format: 'image/png',
|
|
|
+ // transparent: true
|
|
|
+ // }
|
|
|
+ // }),
|
|
|
|
|
|
- imageryProvider:
|
|
|
+ imageryProvider:
|
|
|
// new this.Cesium.WebMapTileServiceImageryProvider({
|
|
|
// url: "http://10.170.16.95:8080/geoserver/gwc/service/wmts/rest/map:map/{style}/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png",
|
|
|
// layer: 'map:map',
|
|
@@ -135,213 +129,207 @@
|
|
|
|
|
|
// }),
|
|
|
new this.Cesium.UrlTemplateImageryProvider({
|
|
|
- url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
|
|
|
- layer: "tdtVecBasicLayer",
|
|
|
- style: "default",
|
|
|
- format: "image/png",
|
|
|
- tileMatrixSetID: "GoogleMapsCompatible",
|
|
|
- show: false
|
|
|
- })
|
|
|
- });
|
|
|
-
|
|
|
- this.viewer3D._cesiumWidget._creditContainer.style.display = "none";
|
|
|
- this.viewer2D._cesiumWidget._creditContainer.style.display = "none";
|
|
|
- this.viewer3D.camera.setView({
|
|
|
- destination: new this.Cesium.Cartesian3.fromDegrees(117.918977,25.0,1500000),
|
|
|
- // 方向,俯视和仰视的视角
|
|
|
- // orientation:{
|
|
|
- // heading: this.Cesium.Math.toRadians(90),//坐标系旋转90度
|
|
|
- // pitch: this.Cesium.Math.toRadians(-45) ,//设置俯仰角度为-45度
|
|
|
- // }
|
|
|
- })
|
|
|
- this.viewer2D.camera.setView({
|
|
|
- destination: new this.Cesium.Cartesian3.fromDegrees(117.918977,25.0,1500000),
|
|
|
- // 方向,俯视和仰视的视角
|
|
|
- // orientation:{
|
|
|
- // heading: this.Cesium.Math.toRadians(90),//坐标系旋转90度
|
|
|
- // pitch: this.Cesium.Math.toRadians(-45) ,//设置俯仰角度为-45度
|
|
|
- // }
|
|
|
+ url: 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
|
|
|
+ layer: 'tdtVecBasicLayer',
|
|
|
+ style: 'default',
|
|
|
+ format: 'image/png',
|
|
|
+ tileMatrixSetID: 'GoogleMapsCompatible',
|
|
|
+ show: false
|
|
|
})
|
|
|
- // this.viewer.scene.screenSpaceCameraController.maximumZoomDistance = 1500000; //相机高度的最大值
|
|
|
- this.viewer2D.camera.percentageChanged = 0.01;
|
|
|
- this.viewer2D.camera.changed.addEventListener(this.sync);
|
|
|
- this.viewer3D.camera.percentageChanged = 0.01;
|
|
|
- this.viewer3D.camera.changed.addEventListener(this.sync);
|
|
|
- },
|
|
|
- removeAllModel(){
|
|
|
- this.viewer.entities.removeAll(); // 移除全部模型
|
|
|
- },
|
|
|
- sync() {
|
|
|
-
|
|
|
- if(this.mousevalue=='3D'){
|
|
|
- // 三维地图中心点
|
|
|
- let center = new this.Cesium.Cartesian2(
|
|
|
- Math.floor(this.viewer3D.canvas.clientWidth / 2),
|
|
|
- Math.floor(this.viewer3D.canvas.clientHeight / 2)
|
|
|
- );
|
|
|
-
|
|
|
-
|
|
|
+ });
|
|
|
|
|
|
- // 转为世界坐标系
|
|
|
- let position = this.viewer3D.scene.camera.pickEllipsoid(center);
|
|
|
- console.log(position);
|
|
|
- // 判断中心点是否在椭球体上
|
|
|
- if (this.Cesium.defined(position)) {
|
|
|
+ this.viewer3D._cesiumWidget._creditContainer.style.display = 'none';
|
|
|
+ this.viewer2D._cesiumWidget._creditContainer.style.display = 'none';
|
|
|
+ this.viewer3D.camera.setView({
|
|
|
+ destination: new this.Cesium.Cartesian3.fromDegrees(117.918977, 25.0, 1500000)
|
|
|
+ // 方向,俯视和仰视的视角
|
|
|
+ // orientation:{
|
|
|
+ // heading: this.Cesium.Math.toRadians(90),//坐标系旋转90度
|
|
|
+ // pitch: this.Cesium.Math.toRadians(-45) ,//设置俯仰角度为-45度
|
|
|
+ // }
|
|
|
+ })
|
|
|
+ this.viewer2D.camera.setView({
|
|
|
+ destination: new this.Cesium.Cartesian3.fromDegrees(117.918977, 25.0, 1500000)
|
|
|
+ // 方向,俯视和仰视的视角
|
|
|
+ // orientation:{
|
|
|
+ // heading: this.Cesium.Math.toRadians(90),//坐标系旋转90度
|
|
|
+ // pitch: this.Cesium.Math.toRadians(-45) ,//设置俯仰角度为-45度
|
|
|
+ // }
|
|
|
+ })
|
|
|
+ // this.viewer.scene.screenSpaceCameraController.maximumZoomDistance = 1500000; //相机高度的最大值
|
|
|
+ this.viewer2D.camera.percentageChanged = 0.01;
|
|
|
+ this.viewer2D.camera.changed.addEventListener(this.sync);
|
|
|
+ this.viewer3D.camera.percentageChanged = 0.01;
|
|
|
+ this.viewer3D.camera.changed.addEventListener(this.sync);
|
|
|
+ },
|
|
|
+ removeAllModel () {
|
|
|
+ this.viewer.entities.removeAll(); // 移除全部模型
|
|
|
+ },
|
|
|
+ sync () {
|
|
|
+ if (this.mousevalue == '3D') {
|
|
|
+ // 三维地图中心点
|
|
|
+ let center = new this.Cesium.Cartesian2(
|
|
|
+ Math.floor(this.viewer3D.canvas.clientWidth / 2),
|
|
|
+ Math.floor(this.viewer3D.canvas.clientHeight / 2)
|
|
|
+ );
|
|
|
|
|
|
- // 获取三维地图中心点与相机之间的距离
|
|
|
- let distance = this.Cesium.Cartesian3.distance(
|
|
|
- position,
|
|
|
- this.viewer3D.scene.camera.positionWC
|
|
|
- );
|
|
|
- position = this.convertWorldToCartographic(position)
|
|
|
- // 更新二维地图
|
|
|
- this.viewer2D.scene.camera.setView({
|
|
|
- destination: new this.Cesium.Cartesian3.fromDegrees(position.longitude,position.latitude,distance),
|
|
|
- })
|
|
|
- console.log(distance);
|
|
|
- }
|
|
|
- }
|
|
|
- if(this.mousevalue=='2D'){
|
|
|
- // 二维地图中心点
|
|
|
+ // 转为世界坐标系
|
|
|
+ let position = this.viewer3D.scene.camera.pickEllipsoid(center);
|
|
|
+ console.log(position);
|
|
|
+ // 判断中心点是否在椭球体上
|
|
|
+ if (this.Cesium.defined(position)) {
|
|
|
+ // 获取三维地图中心点与相机之间的距离
|
|
|
+ let distance = this.Cesium.Cartesian3.distance(
|
|
|
+ position,
|
|
|
+ this.viewer3D.scene.camera.positionWC
|
|
|
+ );
|
|
|
+ position = this.convertWorldToCartographic(position)
|
|
|
+ // 更新二维地图
|
|
|
+ this.viewer2D.scene.camera.setView({
|
|
|
+ destination: new this.Cesium.Cartesian3.fromDegrees(position.longitude, position.latitude, distance)
|
|
|
+ })
|
|
|
+ console.log(distance);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (this.mousevalue == '2D') {
|
|
|
+ // 二维地图中心点
|
|
|
let center = new this.Cesium.Cartesian2(
|
|
|
- Math.floor(this.viewer2D.canvas.clientWidth / 2),
|
|
|
- Math.floor(this.viewer2D.canvas.clientHeight / 2)
|
|
|
+ Math.floor(this.viewer2D.canvas.clientWidth / 2),
|
|
|
+ Math.floor(this.viewer2D.canvas.clientHeight / 2)
|
|
|
);
|
|
|
// 转为世界坐标系
|
|
|
let position = this.viewer2D.scene.camera.pickEllipsoid(center);
|
|
|
console.log(position);
|
|
|
// 判断中心点是否在椭球体上
|
|
|
if (this.Cesium.defined(position)) {
|
|
|
+ // 获取三维地图中心点与相机之间的距离
|
|
|
+ let distance = this.viewer2D.scene.camera.positionCartographic.height;
|
|
|
|
|
|
- // 获取三维地图中心点与相机之间的距离
|
|
|
- let distance = this.viewer2D.scene.camera.positionCartographic.height;
|
|
|
-
|
|
|
- position = this.convertWorldToCartographic(position)
|
|
|
- // 更新三维地图
|
|
|
- this.viewer3D.scene.camera.setView({
|
|
|
- destination: new this.Cesium.Cartesian3.fromDegrees(position.longitude,position.latitude,distance),
|
|
|
- })
|
|
|
- console.log(this.viewer2D.scene.camera.positionWC)
|
|
|
- }
|
|
|
- }},
|
|
|
- // 将世界坐标系转换为经纬度坐标系
|
|
|
- convertWorldToCartographic(worldPosition) {
|
|
|
- const ellipsoid = this.viewer2D.scene.globe.ellipsoid;
|
|
|
- const cartographic = ellipsoid.cartesianToCartographic(worldPosition);
|
|
|
- const longitude = this.Cesium.Math.toDegrees(cartographic.longitude);
|
|
|
- const latitude = this.Cesium.Math.toDegrees(cartographic.latitude);
|
|
|
- const height = cartographic.height;
|
|
|
- return { longitude, latitude, height };
|
|
|
- },
|
|
|
- // 监听地图变化
|
|
|
- changeActive(value){
|
|
|
- this.mousevalue = value
|
|
|
- console.log(value)
|
|
|
- },
|
|
|
- dimensionswitch(value){
|
|
|
- this.dimension = value
|
|
|
- if(value == 3) {
|
|
|
- this.leftwidth = 24;
|
|
|
- }else if(value == 2){
|
|
|
- this.leftwidth = 0;
|
|
|
-
|
|
|
- }else{
|
|
|
- this.leftwidth = 12;
|
|
|
+ position = this.convertWorldToCartographic(position)
|
|
|
+ // 更新三维地图
|
|
|
+ this.viewer3D.scene.camera.setView({
|
|
|
+ destination: new this.Cesium.Cartesian3.fromDegrees(position.longitude, position.latitude, distance)
|
|
|
+ })
|
|
|
+ console.log(this.viewer2D.scene.camera.positionWC)
|
|
|
}
|
|
|
- },
|
|
|
- //全屏缩小
|
|
|
- ismax(){
|
|
|
- if(screenfull.isEnabled && screenfull.isFullscreen){
|
|
|
- screenfull.exit();
|
|
|
- }else{
|
|
|
- screenfull.request();
|
|
|
- }
|
|
|
- },
|
|
|
- /* 获取camera中心点坐标 */
|
|
|
- getCenterPosition () {
|
|
|
- var result = this.viewer2D.camera.pickEllipsoid(new this.Cesium.Cartesian2(this.viewer2D.canvas.clientWidth / 2, this.viewer2D.canvas
|
|
|
- .clientHeight / 2))
|
|
|
- var curPosition = this.Cesium.Ellipsoid.WGS84.cartesianToCartographic(result)
|
|
|
- var lon = curPosition.longitude * 180 / Math.PI
|
|
|
- var lat = curPosition.latitude * 180 / Math.PI
|
|
|
- var height = this.viewer2D.camera.positionCartographic.height
|
|
|
- return {
|
|
|
- lon: lon,
|
|
|
- lat: lat,
|
|
|
- height: height
|
|
|
- }
|
|
|
- },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 将世界坐标系转换为经纬度坐标系
|
|
|
+ convertWorldToCartographic (worldPosition) {
|
|
|
+ const ellipsoid = this.viewer2D.scene.globe.ellipsoid;
|
|
|
+ const cartographic = ellipsoid.cartesianToCartographic(worldPosition);
|
|
|
+ const longitude = this.Cesium.Math.toDegrees(cartographic.longitude);
|
|
|
+ const latitude = this.Cesium.Math.toDegrees(cartographic.latitude);
|
|
|
+ const height = cartographic.height;
|
|
|
+ return { longitude, latitude, height };
|
|
|
+ },
|
|
|
+ // 监听地图变化
|
|
|
+ changeActive (value) {
|
|
|
+ this.mousevalue = value
|
|
|
+ console.log(value)
|
|
|
+ },
|
|
|
+ dimensionswitch (value) {
|
|
|
+ this.dimension = value
|
|
|
+ if (value == 3) {
|
|
|
+ this.leftwidth = 24;
|
|
|
+ } else if (value == 2) {
|
|
|
+ this.leftwidth = 0;
|
|
|
+ } else {
|
|
|
+ this.leftwidth = 12;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 全屏缩小
|
|
|
+ ismax () {
|
|
|
+ if (screenfull.isEnabled && screenfull.isFullscreen) {
|
|
|
+ screenfull.exit();
|
|
|
+ } else {
|
|
|
+ screenfull.request();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /* 获取camera中心点坐标 */
|
|
|
+ getCenterPosition () {
|
|
|
+ var result = this.viewer2D.camera.pickEllipsoid(new this.Cesium.Cartesian2(this.viewer2D.canvas.clientWidth / 2, this.viewer2D.canvas
|
|
|
+ .clientHeight / 2))
|
|
|
+ var curPosition = this.Cesium.Ellipsoid.WGS84.cartesianToCartographic(result)
|
|
|
+ var lon = curPosition.longitude * 180 / Math.PI
|
|
|
+ var lat = curPosition.latitude * 180 / Math.PI
|
|
|
+ var height = this.viewer2D.camera.positionCartographic.height
|
|
|
+ return {
|
|
|
+ lon: lon,
|
|
|
+ lat: lat,
|
|
|
+ height: height
|
|
|
+ }
|
|
|
+ },
|
|
|
|
|
|
- /* 地图放大 */
|
|
|
- big () {
|
|
|
- // 镜头拉进
|
|
|
- this.viewer2D.camera.flyTo({
|
|
|
- destination: this.Cesium.Cartesian3.fromDegrees(this.getCenterPosition().lon, this.getCenterPosition().lat, this.getCenterPosition().height / 1.8),
|
|
|
- duration: 1.0
|
|
|
- })
|
|
|
- },
|
|
|
- /* 地图缩小 */
|
|
|
- small () {
|
|
|
- // 镜头远离
|
|
|
- this.viewer2D.camera.flyTo({
|
|
|
- destination: this.Cesium.Cartesian3.fromDegrees(this.getCenterPosition().lon, this.getCenterPosition().lat, this.getCenterPosition().height * 1.2),
|
|
|
- duration: 1.0
|
|
|
- })
|
|
|
- },
|
|
|
- home () {
|
|
|
- this.viewer2D.camera.flyTo({
|
|
|
- destination: this.Cesium.Cartesian3.fromDegrees(117.918977,25.0,1500000)
|
|
|
- });
|
|
|
- },
|
|
|
- Fly() {
|
|
|
- this.shouldAnimate = !this.shouldAnimate
|
|
|
- this.viewer2D.clock.shouldAnimate = true
|
|
|
- this.viewer3D.clock.shouldAnimate = true
|
|
|
- if(this.shouldAnimate == true){
|
|
|
- this.startRun({ multiplier: 2000 })
|
|
|
- }else{
|
|
|
- this.stopRun()
|
|
|
- }
|
|
|
- },
|
|
|
- startRun (option = { multiplier: 1 }) {
|
|
|
- // 监听每次渲染前执行矩阵求解
|
|
|
- this.viewer3D.scene.postUpdate.addEventListener(this.rotateSetting)
|
|
|
- // 根据option修改一些参数
|
|
|
- if (this.viewer3D.clock) {
|
|
|
- const keys = Object.keys(option)
|
|
|
- for (let k of keys) {
|
|
|
- this.viewer3D.clock[k] = option[k]
|
|
|
- }
|
|
|
+ /* 地图放大 */
|
|
|
+ big () {
|
|
|
+ // 镜头拉进
|
|
|
+ this.viewer2D.camera.flyTo({
|
|
|
+ destination: this.Cesium.Cartesian3.fromDegrees(this.getCenterPosition().lon, this.getCenterPosition().lat, this.getCenterPosition().height / 1.8),
|
|
|
+ duration: 1.0
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /* 地图缩小 */
|
|
|
+ small () {
|
|
|
+ // 镜头远离
|
|
|
+ this.viewer2D.camera.flyTo({
|
|
|
+ destination: this.Cesium.Cartesian3.fromDegrees(this.getCenterPosition().lon, this.getCenterPosition().lat, this.getCenterPosition().height * 1.2),
|
|
|
+ duration: 1.0
|
|
|
+ })
|
|
|
+ },
|
|
|
+ home () {
|
|
|
+ this.viewer2D.camera.flyTo({
|
|
|
+ destination: this.Cesium.Cartesian3.fromDegrees(117.918977, 25.0, 1500000)
|
|
|
+ });
|
|
|
+ },
|
|
|
+ Fly () {
|
|
|
+ this.shouldAnimate = !this.shouldAnimate
|
|
|
+ this.viewer2D.clock.shouldAnimate = true
|
|
|
+ this.viewer3D.clock.shouldAnimate = true
|
|
|
+ if (this.shouldAnimate == true) {
|
|
|
+ this.startRun({ multiplier: 2000 })
|
|
|
+ } else {
|
|
|
+ this.stopRun()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ startRun (option = { multiplier: 1 }) {
|
|
|
+ // 监听每次渲染前执行矩阵求解
|
|
|
+ this.viewer3D.scene.postUpdate.addEventListener(this.rotateSetting)
|
|
|
+ // 根据option修改一些参数
|
|
|
+ if (this.viewer3D.clock) {
|
|
|
+ const keys = Object.keys(option)
|
|
|
+ for (let k of keys) {
|
|
|
+ this.viewer3D.clock[k] = option[k]
|
|
|
}
|
|
|
- },
|
|
|
- stopRun () {
|
|
|
- let viewer = this.viewer3D
|
|
|
- viewer.clock.multiplier = 1
|
|
|
- viewer.scene.postUpdate.removeEventListener(this.rotateSetting)
|
|
|
- },
|
|
|
- rotateSetting () {
|
|
|
- let Cesium = this.Cesium
|
|
|
- let viewer = this.viewer3D
|
|
|
- if (!viewer || viewer.scene.mode !== Cesium.SceneMode.SCENE3D) {
|
|
|
- return
|
|
|
- }
|
|
|
- const icrfToFixed = Cesium.Transforms.computeIcrfToFixedMatrix(
|
|
|
- viewer.clock.currentTime
|
|
|
- )
|
|
|
- // icrfToFixed 在上面的方法中,若没加载好所需的计算资源会返回undefined,判断下
|
|
|
- if (Cesium.defined(icrfToFixed)) {
|
|
|
- const camera = viewer.camera
|
|
|
- const offset = Cesium.Cartesian3.clone(camera.position)
|
|
|
- const transform = Cesium.Matrix4.fromRotationTranslation(icrfToFixed)
|
|
|
- camera.lookAtTransform(transform, offset)
|
|
|
- }
|
|
|
- },
|
|
|
- //// tabs 切换点击
|
|
|
- legendClick(tab, event) {
|
|
|
-
|
|
|
- var tab_content = document.querySelectorAll(".menu .el-tabs__content");
|
|
|
+ }
|
|
|
+ },
|
|
|
+ stopRun () {
|
|
|
+ let viewer = this.viewer3D
|
|
|
+ viewer.clock.multiplier = 1
|
|
|
+ viewer.scene.postUpdate.removeEventListener(this.rotateSetting)
|
|
|
+ },
|
|
|
+ rotateSetting () {
|
|
|
+ let Cesium = this.Cesium
|
|
|
+ let viewer = this.viewer3D
|
|
|
+ if (!viewer || viewer.scene.mode !== Cesium.SceneMode.SCENE3D) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const icrfToFixed = Cesium.Transforms.computeIcrfToFixedMatrix(
|
|
|
+ viewer.clock.currentTime
|
|
|
+ )
|
|
|
+ // icrfToFixed 在上面的方法中,若没加载好所需的计算资源会返回undefined,判断下
|
|
|
+ if (Cesium.defined(icrfToFixed)) {
|
|
|
+ const camera = viewer.camera
|
|
|
+ const offset = Cesium.Cartesian3.clone(camera.position)
|
|
|
+ const transform = Cesium.Matrix4.fromRotationTranslation(icrfToFixed)
|
|
|
+ camera.lookAtTransform(transform, offset)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /// / tabs 切换点击
|
|
|
+ legendClick (tab, event) {
|
|
|
+ var tab_content = document.querySelectorAll('.menu .el-tabs__content');
|
|
|
if (this.currentLab.index == tab.index) {
|
|
|
- tab_content[0].style.display == 'none'|| ''? tab_content[0].style.display = 'block' : tab_content[0].style.display = 'none';
|
|
|
+ tab_content[0].style.display == 'none' || '' ? tab_content[0].style.display = 'block' : tab_content[0].style.display = 'none';
|
|
|
}
|
|
|
if (this.currentLab.index != tab.index) {
|
|
|
this.currentLab.index = tab.index;
|
|
@@ -351,8 +339,8 @@
|
|
|
|
|
|
}
|
|
|
|
|
|
- })
|
|
|
- </script>
|
|
|
+})
|
|
|
+</script>
|
|
|
<style scoped>
|
|
|
.header{
|
|
|
background-color: #1c222b;
|
|
@@ -368,7 +356,7 @@
|
|
|
margin: 0 10px;
|
|
|
height:30px;
|
|
|
padding: 1px 23px;
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
.box-card {
|
|
|
min-height: 100%;
|
|
@@ -380,7 +368,6 @@
|
|
|
padding: 0px !important;
|
|
|
}
|
|
|
|
|
|
-
|
|
|
.main-layout {
|
|
|
height: 100%;
|
|
|
width: 100%;
|
|
@@ -421,4 +408,4 @@
|
|
|
.el-button{
|
|
|
margin: 5px !important;
|
|
|
}
|
|
|
- </style>
|
|
|
+ </style>
|