forked from srs-police-affairs
src/components/map/index.vue
@@ -2,7 +2,7 @@ * @Author: shuishen 1109946754@qq.com * @Date: 2022-08-18 17:00:30 * @LastEditors: shuishen 1109946754@qq.com * @LastEditTime: 2023-05-18 15:43:37 * @LastEditTime: 2023-05-30 10:15:14 * @FilePath: \srs-police-affairs\src\components\map\index.vue * @Description: 公用地图组件 * @@ -12,6 +12,14 @@ <div class="viewer-box" id="viewer-container" @click="showImgBtn = false"> <slot ref="mainContent" name="mainContent"></slot> <slot name="showButton"></slot> <div class="compass-btn"> <el-tooltip content="指北针" placement="top" effect="dark"> <i id="COMPASSBTN" class="el-icon-compass-btn" style="vertical-align: middle; cursor: pointer" :style="{ transform: compassBtnTranslate }" @click="compassBtnClick"></i> </el-tooltip> </div> <div class="over-look-btn"> <el-tooltip content="一键俯视" placement="top" effect="dark"> <i class="fa fa-eye" style="vertical-align: middle; cursor: pointer" @click="overLookClick"></i> @@ -190,7 +198,8 @@ showImgBtn: false, imgtype: 0, tilesetLayerType: '', angleCheck: true angleCheck: true, compassBtnTranslate: 'rotate(0deg)' } }, @@ -217,6 +226,12 @@ preserveDrawingBuffer: true } } }) global.viewer.scene.postRender.addEventListener(function () { var heading = global.viewer.scene.camera.heading var x = -global.DC.Namespace.Cesium.Math.toDegrees(heading) that.compassBtnTranslate = "rotate(" + x + "deg)" }) const curTools = createTools() @@ -584,11 +599,40 @@ lat: curLatitude, } }, compassBtnClick () { const degrees = global.viewer.camera.heading * (180 / Math.PI) if (degrees == 360) { return } const position = global.DC.Transform.transformCartesianToWGS84(global.viewer.camera.position) global.viewer.camera.flyTo({ // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州 // fromDegrees()方法，将经纬度和高程转换为世界坐标 destination: global.DC.Transform.transformWGS84ToCartesian(new global.DC.Position(position.lng, position.lat, position.alt + 1000)), orientation: { // 指向 heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0), // 视角 pitch: global.viewer.camera.pitch, roll: global.viewer.camera.roll }, duration: 3 }) }, overLookClick () { const degrees = global.viewer.camera.pitch * (180 / Math.PI) if (degrees == -90) { return } const position = this.getSceneCenterPosition(global.viewer) global.viewer.camera.setView({ global.viewer.camera.flyTo({ // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州 // fromDegrees()方法，将经纬度和高程转换为世界坐标 destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees( @@ -596,11 +640,12 @@ ), orientation: { // 指向 heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0), heading: global.viewer.camera.heading, // 视角 pitch: global.DC.Namespace.Cesium.Math.toRadians(-90), roll: 0.0 } roll: global.viewer.camera.roll }, duration: 3 }) }, @@ -839,12 +884,14 @@ document.querySelector('.dc-container .dc-zoom-controller').classList.add('homebottom') document.querySelector('.screen-full-btn').classList.add('homebottom') document.querySelector('.over-look-btn').classList.add('homebottom') document.querySelector('.compass-btn').classList.add('homebottom') document.querySelector('.image-switch-icon-btn').classList.add('iconbottom') } else { // if (!document.querySelector('.dc-container .dc-zoom-controller').classList.contains('homebottom')) return document.querySelector('.dc-container .dc-zoom-controller').classList.remove('homebottom') document.querySelector('.screen-full-btn').classList.remove('homebottom') document.querySelector('.over-look-btn').classList.remove('homebottom') document.querySelector('.compass-btn').classList.remove('homebottom') document.querySelector('.image-switch-icon-btn').classList.remove('iconbottom') } @@ -963,11 +1010,9 @@ let pointElement let labelElement let alt = params.alt || 2 if (type == "billboard") { // pointElement = new global.DC.Billboard(new global.DC.Position(Number(params.lng), Number(params.lat), Number(alt)), params.url) pointElement = new global.DC.Billboard(new global.DC.Position(Number(params.lng), Number(params.lat), 4), params.url) pointElement = new global.DC.Billboard(new global.DC.Position(Number(params.lng), Number(params.lat), 0), params.url) pointElement.setStyle(params.setStyle) pointElement.size = [32, 32] pointElement.style = "clustering" @@ -979,7 +1024,7 @@ pointElement.on(global.DC.MouseEventType.MOUSE_MOVE, pointMouseMove) } else if (type == "label") { // labelElement = new global.DC.Label(new global.DC.Position(Number(params.lng), Number(params.lat), Number(alt)), params.text) labelElement = new global.DC.Label(new global.DC.Position(Number(params.lng), Number(params.lat), 4), params.text) labelElement = new global.DC.Label(new global.DC.Position(Number(params.lng), Number(params.lat), 0), params.text) let fontColor = 'fontColor' in params ? params.fontColor : global.DC.Color.CRIMSON let style = 'fontColor' in params ? global.DC.Namespace.Cesium.LabelStyle.FILL : global.DC.Namespace.Cesium.LabelStyle.FILL_AND_OUTLINE labelElement.setStyle({ @@ -996,14 +1041,14 @@ labelElement.on(global.DC.MouseEventType.CLICK, incident) } else if (type == "billboardOrLabel") { // pointElement = new global.DC.Billboard(new global.DC.Position(Number(params.lng), Number(params.lat), Number(alt)), params.url) pointElement = new global.DC.Billboard(new global.DC.Position(Number(params.lng), Number(params.lat), 4), params.url) pointElement = new global.DC.Billboard(new global.DC.Position(Number(params.lng), Number(params.lat), 0), params.url) pointElement.size = [32, 32] pointElement.attrParams = params layersObjcect[layerName].addOverlay(pointElement) pointElement.on(global.DC.MouseEventType.CLICK, incident) // labelElement = new global.DC.Label(new global.DC.Position(Number(params.lng), Number(params.lat), Number(alt)), params.text) labelElement = new global.DC.Label(new global.DC.Position(Number(params.lng), Number(params.lat), 4), params.text) labelElement = new global.DC.Label(new global.DC.Position(Number(params.lng), Number(params.lat), 0), params.text) labelElement.setStyle({ fillColor: global.DC.Color.CRIMSON, style: global.DC.Namespace.Cesium.LabelStyle.FILL_AND_OUTLINE,
