forked from srs-police-affairs
| public/img/icon/overlook.png | patch | view | raw | blame | history | |
| src/components/map/index.vue | ●●●●● patch | view | raw | blame | history | |
| src/styles/dc/index.scss | ●●●●● patch | view | raw | blame | history | |
| src/styles/media/index.scss | ●●●●● patch | view | raw | blame | history | |
| src/views/home/index.vue | ●●●●● patch | view | raw | blame | history | |
| src/views/layout/index.vue | ●●●●● patch | view | raw | blame | history |
public/img/icon/overlook.png
@@ -2,7 +2,7 @@ * @Author: shuishen 1109946754@qq.com * @Date: 2022-08-18 17:00:30 * @LastEditors: shuishen 1109946754@qq.com * @LastEditTime: 2023-03-17 08:55:29 * @LastEditTime: 2023-03-18 09:19:55 * @FilePath: \srs-police-affairs\src\components\map\index.vue * @Description: 公用地图组件 * @@ -12,6 +12,11 @@ <div class="viewer-box" id="viewer-container"> <slot ref="mainContent" name="mainContent"></slot> <slot name="showButton"></slot> <div class="over-look-btn"> <el-tooltip content="一键俯视" placement="bottom" effect="dark"> <i class="fa fa-eye" style="vertical-align: middle; cursor: pointer" @click="overLookClick"></i> </el-tooltip> </div> <!-- 全屏控制按钮 --> <div class="screen-full-btn"> <el-tooltip v-if="isFullscreen" content="缩放" placement="bottom" effect="dark"> @@ -23,9 +28,12 @@ </div> <!-- 切换矢量图按钮 --> <div class="image-switch-icon-btn"> <div class="icon-box" @click.stop="showImgBtn = !showImgBtn"> <img src="/img/base_map.png" alt /> </div> <el-tooltip content="图层、模型、视角" placement="bottom" effect="dark"> <div class="icon-box" @click.stop="showImgBtn = !showImgBtn"> <img src="/img/base_map.png" alt /> </div> </el-tooltip> <div class="image-switch-img-btn" v-show="showImgBtn"> <div class="layer-change-box"> @@ -33,6 +41,7 @@ 底图 <div class="close" @click.stop="showImgBtn = false" title="关闭"></div> </div> <div class="content"> <div class="img" @click="switchImg"> <span :class="{ on: imgtype == 0 }">影像</span> @@ -304,21 +313,15 @@ that.switchImg() // 外网 global.viewer.imageryLayers.addImageryProvider( new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({ url: 'http://t{s}.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=e45274b0235bb913eceb393aabbf9c9c', subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'], format: 'image/jpeg', show: true, maximumLevel: 18 }) ) global.viewer.imageryLayers.addImageryProvider( new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({ url: '/sryx/{z}/{x}/{y}.png', }) ) // global.viewer.imageryLayers.addImageryProvider( // new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({ // url: 'http://t{s}.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=e45274b0235bb913eceb393aabbf9c9c', // subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'], // format: 'image/jpeg', // show: true, // maximumLevel: 18 // }) // ) // 设置地图初始位置，角度等 global.viewer.camera.setView({ @@ -524,10 +527,30 @@ sitePitch: -45 }) } document.querySelector('.dc-zoom-controller .refresh svg title').innerHTML = '初始化位置' }) }, methods: { overLookClick () { global.viewer.camera.setView({ // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州 // fromDegrees()方法，将经纬度和高程转换为世界坐标 destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees( 118.04, 28.46938164123123, 60000 ), orientation: { // 指向 heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0), // 视角 pitch: global.DC.Namespace.Cesium.Math.toRadians(-90), roll: 0.0 } }) }, angleChange (e) { if (e) { global.viewer.camera.flyTo({ @@ -557,7 +580,7 @@ this.removeMxTileset(`sdTilesetLayer${item}`, this.housingIndent) }) this.addMxTileset('sdTilesetLayer', `${tile3DUrl}/sf3d/361102/model/wanda/tileset.json`, this.housingIndent) // this.addMxTileset('sdTilesetLayer', `${tile3DUrl}/sf3d/361102/model/wanda/tileset.json`, this.housingIndent) if (this.tilesetLayerType == type) { this.tilesetLayerType = '' @@ -601,9 +624,10 @@ baseLayers = global.viewer.imageryLayers.addImageryProvider( new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({ url: `${window.BASE_URL_CONFIG.VUE_APP_MAP_YX}/{z}/{x}/{y}.png`, url: `${window.BASE_URL_CONFIG.VUE_APP_MAP_YX}/{z}/{x}/{reverseY}.png`, minimumLevel: 0, maximumLevel: 25 maximumLevel: 25, tilingScheme: new global.DC.Namespace.Cesium.GeographicTilingScheme(), }) ) @@ -778,8 +802,13 @@ 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(params.alt)), params.url) pointElement = new global.DC.Billboard(new global.DC.Position(Number(params.lng), Number(params.lat), Number(alt)), params.url) // pointElement.setStyle({ // disableDepthTestDistance: 0 // }) pointElement.size = [32, 32] pointElement.attrParams = params layersObjcect[layerName].addOverlay(pointElement) @@ -787,7 +816,7 @@ pointElement.on(global.DC.MouseEventType.MOUSE_OVER, mouseOverIncident) pointElement.on(global.DC.MouseEventType.MOUSE_OUT, mouseOutIncident) } else if (type == "label") { labelElement = new global.DC.Label(new global.DC.Position(Number(params.lng), Number(params.lat), Number(params.alt)), params.text) labelElement = new global.DC.Label(new global.DC.Position(Number(params.lng), Number(params.lat), Number(alt)), params.text) labelElement.setStyle({ fillColor: global.DC.Color.CRIMSON, style: global.DC.Namespace.Cesium.LabelStyle.FILL_AND_OUTLINE, @@ -803,13 +832,13 @@ layersObjcect[layerName].addOverlay(labelElement) 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(params.alt)), params.url) pointElement = new global.DC.Billboard(new global.DC.Position(Number(params.lng), Number(params.lat), Number(alt)), 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(params.alt)), params.text) labelElement = new global.DC.Label(new global.DC.Position(Number(params.lng), Number(params.lat), Number(alt)), params.text) labelElement.setStyle({ fillColor: global.DC.Color.CRIMSON, style: global.DC.Namespace.Cesium.LabelStyle.FILL_AND_OUTLINE, src/styles/dc/index.scss
@@ -55,6 +55,32 @@ bottom: 362px !important; } .over-look-btn { display: flex; align-items: center; justify-content: center; position: absolute; left: 10px; bottom: 10px; width: 36px; height: 36px; font-size: 20px; color: #fff; background: #fff; border-radius: 5px; z-index: 97; background-color: $bg-color !important; } .over-look-btn.homebottom { left: 402px !important; bottom: 540px; } .over-look-btn.shrink-btn { left: 410px !important; } .screen-full-btn { display: flex; align-items: center; @@ -87,11 +113,11 @@ bottom: 318px; } .dc-zoom-controller.shrink-btn { .screen-full-btn.shrink-btn { left: 410px !important; } .screen-full-btn.shrink-btn { .dc-zoom-controller.shrink-btn { left: 410px !important; }
@@ -2447,7 +2447,18 @@ left: countSizeVw(400, 1920); } .over-look-btn.homebottom { left: countSizeVw(402, 1920) !important; bottom: calc((100% - maxCountSizeVh(120)) / 3 + countSizeVh(220)); } .over-look-btn.shrink-btn { left: countSizeVw(410, 1920) !important; } // 地图，控制按钮 .over-look-btn, .screen-full-btn { left: countSizeVh(10); bottom: countSizeVh(10); src/views/home/index.vue
@@ -2,7 +2,7 @@ * @Author: shuishen 1109946754@qq.com * @Date: 2022-08-18 16:18:17 * @LastEditors: shuishen 1109946754@qq.com * @LastEditTime: 2023-03-16 09:34:42 * @LastEditTime: 2023-03-18 08:59:32 * @FilePath: \srs-police-affairs\src\views\home\index.vue * @Description: 小区-栋-层-房屋 * @@ -658,6 +658,7 @@ document.querySelector('.dc-container .dc-zoom-controller').classList.add('homebottom') // document.querySelector('.dc-container .dc-location-bar').classList.add('homebottom') document.querySelector('.screen-full-btn').classList.add('homebottom') document.querySelector('.over-look-btn').classList.add('homebottom') document.querySelector('.image-switch-icon-btn').classList.add('iconbottom') this.setDomStyle() @@ -781,7 +782,6 @@ ...item, lng: item.longitude, lat: item.latitude, alt: 1, url: '/img/icon/car.png' }, incident: this.phoneSiteClick @@ -817,7 +817,6 @@ ...item, lng: item.longitude, lat: item.latitude, alt: 1, url: '/img/icon/camera.png' }, incident: this.siteClick @@ -2128,6 +2127,7 @@ document.querySelector('.dc-container .dc-zoom-controller').classList.remove('homebottom') // document.querySelector('.dc-container .dc-location-bar').classList.remove('homebottom') document.querySelector('.screen-full-btn').classList.remove('homebottom') document.querySelector('.over-look-btn').classList.remove('homebottom') document.querySelector('.image-switch-icon-btn').classList.remove('iconbottom') window.removeEventListener('resize', this.setDomStyle) }, src/views/layout/index.vue
@@ -2,7 +2,7 @@ * @Author: shuishen 1109946754@qq.com * @Date: 2022-08-18 16:18:24 * @LastEditors: shuishen 1109946754@qq.com * @LastEditTime: 2023-02-22 13:43:08 * @LastEditTime: 2023-03-18 09:00:11 * @FilePath: \srs-police-affairs\src\views\layout\index.vue * @Description: * @@ -12,23 +12,13 @@ <div class="wrapper"> <div class="main-header"> <div class="menu-list left"> <div @mouseenter="item.childrenFlag = true" @mouseleave="item.childrenFlag = false" class="nav-list" @click="goToPath(item)" v-for="(item, index) in menuLeftList" :key="index" > <div @mouseenter="item.childrenFlag = true" @mouseleave="item.childrenFlag = false" class="nav-list" @click="goToPath(item)" v-for="(item, index) in menuLeftList" :key="index"> <span :class="{ on: currentUrl.indexOf(item.path) != -1 }">{{ item.menuName }}</span> <div class="sub-nav-list" v-show="item.children && item.childrenFlag"> <div v-for="(subItem, subIndex) in item.children" :key="subIndex" @click="goToPath(subItem)" > <div v-for="(subItem, subIndex) in item.children" :key="subIndex" @click="goToPath(subItem)"> {{ subItem.menuName subItem.menuName }} </div> </div> @@ -41,23 +31,13 @@ <!-- 菜单导航 --> <div class="menu-list right"> <div @mouseenter="item.childrenFlag = true" @mouseleave="item.childrenFlag = false" class="nav-list" @click="goToPath(item)" v-for="(item, index) in menuRightList" :key="index" > <div @mouseenter="item.childrenFlag = true" @mouseleave="item.childrenFlag = false" class="nav-list" @click="goToPath(item)" v-for="(item, index) in menuRightList" :key="index"> <span :class="{ on: currentUrl.indexOf(item.path) != -1 }">{{ item.menuName }}</span> <div class="sub-nav-list" v-show="item.children && item.childrenFlag"> <div v-for="(subItem, subIndex) in item.children" :key="subIndex" @click="goToPath(subItem)" > <div v-for="(subItem, subIndex) in item.children" :key="subIndex" @click="goToPath(subItem)"> {{ subItem.menuName subItem.menuName }} </div> </div> @@ -75,53 +55,43 @@ <div class="userBtn"> <div class="back-system" v-if="userBackSystem" @click="goToBack"> <i class="el-icon-user-back"></i> 运维管理 </div> <div class="edit" @click="goTOLogout"> <i class="el-icon-user-quit"></i> 退出登录 </div> 运维管理 </div> <div class="edit" @click="goTOLogout"> <i class="el-icon-user-quit"></i> 退出登录 </div> </div> </div> <!-- <div class="userIcon" :class="{on: userOn == true}" @click="openUser"> </div> <!-- <div class="userIcon" :class="{on: userOn == true}" @click="openUser"> <div class="userDetail" v-if="isShowUserDetail"> <div class="triangle"></div> <div class="userName">用户名：{{userName}}</div> <div class="userBtn"> <div class="edit" @click="goTOLogin"> > <img src="../../../public/img/editLogin.webp" alt /> </div> <div class="return" @click="goTOFllow">返回引导页</div> </div> </div> </div>--> <div class="userName">用户名：{{userName}}</div> <div class="userBtn"> <div class="edit" @click="goTOLogin"> > <img src="../../../public/img/editLogin.webp" alt /> </div> <div class="return" @click="goTOFllow">返回引导页</div> </div> </div> </div>--> </div> <div class="main-container"> <!-- 地图区域 --> <map-box ref="modalForm"> <!-- 主体内容区域 --> <div slot="mainContent" class="main-content" id="MainContent" :class="{ 'spread': leftShow && show, 'take-back': leftShow && !show }" > <div slot="mainContent" class="main-content" id="MainContent" :class="{ 'spread': leftShow && show, 'take-back': leftShow && !show }"> <router-view ref="target-name"></router-view> </div> <el-button slot="showButton" v-show="leftShow" class="flexible-btn" <el-button slot="showButton" v-show="leftShow" class="flexible-btn" :class="{ 'spread': leftShow && show, 'take-back': leftShow && !show }" :icon="show ? 'el-icon-arrow-left' : 'el-icon-arrow-right'" id="FlexibleBtn" type="primary" @click="flexibelClick" ></el-button> :icon="show ? 'el-icon-arrow-left' : 'el-icon-arrow-right'" id="FlexibleBtn" type="primary" @click="flexibelClick"></el-button> </map-box> </div> </div> @@ -236,6 +206,7 @@ this.$nextTick(() => { document.querySelector('.dc-container .dc-zoom-controller').classList.remove('shrink-btn') document.querySelector('.screen-full-btn').classList.remove('shrink-btn') document.querySelector('.over-look-btn').classList.remove('shrink-btn') document.querySelector('.image-switch-icon-btn').classList.remove('shrink-btn') }) @@ -297,12 +268,14 @@ if (this.show) { document.querySelector('.dc-container .dc-zoom-controller').classList.add('shrink-btn') document.querySelector('.screen-full-btn').classList.add('shrink-btn') document.querySelector('.over-look-btn').classList.add('shrink-btn') document.querySelector('.image-switch-icon-btn').classList.add('shrink-btn') } else { document.querySelector('.dc-container .dc-zoom-controller').classList.remove('shrink-btn') document.querySelector('.screen-full-btn').classList.remove('shrink-btn') document.querySelector('.over-look-btn').classList.remove('shrink-btn') document.querySelector('.image-switch-icon-btn').classList.remove('shrink-btn') } }, @@ -319,12 +292,14 @@ document.querySelector('.dc-container .dc-zoom-controller').classList.add('shrink-btn') document.querySelector('.screen-full-btn').classList.add('shrink-btn') document.querySelector('.over-look-btn').classList.add('shrink-btn') document.querySelector('.image-switch-icon-btn').classList.add('shrink-btn') } else { document.querySelector('.dc-container .dc-zoom-controller').classList.remove('shrink-btn') document.querySelector('.screen-full-btn').classList.remove('shrink-btn') document.querySelector('.over-look-btn').classList.remove('shrink-btn') document.querySelector('.image-switch-icon-btn').classList.remove('shrink-btn') } }) @@ -412,7 +387,7 @@ overflow: hidden; letter-spacing: 6px; & > img { &>img { // width: 100%; height: 80%; margin: 0 10px 0 10px; @@ -428,7 +403,7 @@ // border-radius: 10px 16px 10px 16px; transform: skew(58deg); & > span { &>span { transform: skew(-58deg); } } @@ -442,7 +417,7 @@ // border-radius: 16px 10px 16px 10px; transform: skew(-58deg); & > span { &>span { transform: skew(58deg); } } @@ -452,10 +427,11 @@ display: flex; align-items: center; & > .nav-list { &>.nav-list { // color: rgba(32, 106, 181, 1); // border-bottom: 2px solid #409eff; & > span.on { &>span.on { color: rgba(252, 189, 86, 1); } } @@ -583,7 +559,7 @@ font-size: 16px; font-weight: normal; & > div { &>div { margin-top: 4px; width: 100px; height: 32px;
