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-04-19 15:03:27 * @LastEditTime: 2023-05-08 14:03:31 * @FilePath: \srs-police-affairs\src\components\map\index.vue * @Description: 公用地图组件 * @@ -14,20 +14,46 @@ <slot name="showButton"></slot> <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> <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="!isShowHomeContentBtn && isFullscreen" content="缩放" placement="top" effect="dark"> <i class="fa fa-compress" style="vertical-align: middle; cursor: pointer" @click="fullscreenchange"></i> <el-tooltip v-if="!isShowHomeContentBtn && isFullscreen" content="缩放" placement="top" effect="dark" > <i class="fa fa-compress" style="vertical-align: middle; cursor: pointer" @click="fullscreenchange" ></i> </el-tooltip> <el-tooltip v-if="!isShowHomeContentBtn && !isFullscreen" content="全屏" placement="top" effect="dark"> <i class="fa fa-expand" style="vertical-align: middle; cursor: pointer" @click="fullscreenchange"></i> <el-tooltip v-if="!isShowHomeContentBtn && !isFullscreen" content="全屏" placement="top" effect="dark" > <i class="fa fa-expand" style="vertical-align: middle; cursor: pointer" @click="fullscreenchange" ></i> </el-tooltip> <el-tooltip v-if="isShowHomeContentBtn" content="显示/隐藏" placement="top" effect="dark"> <i class="fa fa-expand" style="vertical-align: middle; cursor: pointer" @click="switchShowHomeContent"></i> <i class="fa fa-expand" style="vertical-align: middle; cursor: pointer" @click="switchShowHomeContent" ></i> </el-tooltip> </div> <!-- 切换矢量图按钮 --> @@ -43,7 +69,7 @@ <div class="title"> 底图 <div class="close" @click.stop="showImgBtn = false"> <img src="/img/icon/close.png" alt=""> <img src="/img/icon/close.png" alt /> </div> </div> @@ -57,9 +83,7 @@ </div> </div> <div class="layer-change-box"> <div class="title"> 模型 </div> <div class="title">模型</div> <div class="content"> <div class="img light" @click="highOrLightChange('light')"> <span :class="{ on: tilesetLayerType == 'light' }">轻量</span> @@ -70,12 +94,15 @@ </div> </div> <div class="angle-btn"> 是否锁定视角：<el-checkbox v-model="angleCheck" @change="angleChange"></el-checkbox> 是否锁定视角： <el-checkbox v-model="angleCheck" @change="angleChange"></el-checkbox> </div> </div> </div> <map-popup></map-popup> <architecture-popup></architecture-popup> <activity-police-popup></activity-police-popup> @@ -156,6 +183,7 @@ ] import mapPopup from './components/mapPopup.vue' import architecturePopup from './components/architecturePopup.vue' import activityPolicePopup from './components/activityPolicePopup.vue' import videoListPopup from './components/videoListPopup.vue' import videoRowClickPopup from './components/videoRowClickPopup.vue' @@ -170,7 +198,7 @@ export default { name: 'mapBox', components: { mapPopup, activityPolicePopup, videoListPopup, mapSearchPopup, houseDeepDataPopup, yToolTip, videoRowClickPopup }, components: { mapPopup, architecturePopup, activityPolicePopup, videoListPopup, mapSearchPopup, houseDeepDataPopup, yToolTip, videoRowClickPopup }, data () { return { @@ -295,11 +323,9 @@ that.switchImg() // 地形数据添加 this.addTerrain() that.addTerrain() // 外网 // 外网 // 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=d083e4cf30bfc438ef93436c10c2c20a', @@ -473,6 +499,10 @@ this.$EventBus.$on('layerWallAdd', (params) => { that.layerWallAdd(params.layerName, params.positions) }) this.$EventBus.$on('rowLayerWallAdd', (params) => { that.rowLayerWallAdd(params.layerName, params.positions) }) this.$EventBus.$on('getOverLayerID', (params) => { @@ -703,7 +733,6 @@ }) ) qp.contrast = 0.8 baseLayers.push(qp) @@ -831,13 +860,13 @@ console.log(document.querySelector('.dc-zoom-controller'), 3333444) if (this.$store.state.popupParams.isShowHomeContent) { // if (document.querySelector('.dc-container .dc-zoom-controller').classList.contains('homebottom')) return // document.querySelector('.dc-container .dc-zoom-controller').classList.add('homebottom') 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('.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('.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('.image-switch-icon-btn').classList.remove('iconbottom') @@ -863,26 +892,32 @@ * @param {*} type 图层类型 */ mapAddLayer (layerName, type, ClusterLayerType) { if (!layersObjcect[layerName]) { this.mapRemoveLayer(layerName, type) layersObjcect[layerName] = null } if (type == 'VectorLayer') { if (!layersObjcect[layerName]) layersObjcect[layerName] = null layersObjcect[layerName] = new global.DC.VectorLayer(layerName) layersObjcect[layerName].addTo(global.viewer) } else if (type == 'ClusterLayer') { if (!layersObjcect[layerName]) layersObjcect[layerName] = null layersObjcect[layerName] = new global.DC.ClusterLayer(layerName, { pixelRange: 40, style: ClusterLayerType }) layersObjcect[layerName].addTo(global.viewer) } else if (type == 'HeatLayer') { if (!layersObjcect[layerName]) layersObjcect[layerName] = null layersObjcect[layerName] = new global.DC.HeatLayer(layerName) layersObjcect[layerName].addTo(global.viewer) layersObjcect[layerName] = new global.DC.HeatLayer(layerName, { gradient: { "0.5": "green", "0.6": "orange", "0.95": "red" }, //颜色设置 height: 0, // 高度 radius: 100, // 半径 useGround: false, //是否使用贴地模式 classificationType: 2 //分类 是否影响地形，3D切片或同时影响这两者。0:地形、1:3D切片、2：两者。贴地模式下生效 }) } global.viewer.addLayer(layersObjcect[layerName]) }, /** @@ -1084,6 +1119,23 @@ layersObjcect[layerName].addOverlay(wall) }, rowLayerWallAdd (layerName, positions) { if (!layersObjcect[layerName] || layersObjcect[layerName] == null) { this.mapAddLayer(layerName, 'VectorLayer') } let wall = new global.DC.Wall(positions) wall.setStyle({ material: new global.DC.WallImageTrailMaterialProperty({ image: '/images/jjx.png', color: global.DC.Namespace.Cesium.Color.fromBytes(255, 255, 0, 180), repeat: { x: 20, y: 1 }, speed: 10 }) }) layersObjcect[layerName].addOverlay(wall) }, /** * @description: 通过ID获取图层 * @return {*} @@ -1175,8 +1227,6 @@ shadows: global.DC.Namespace.Cesium.ShadowMode.DISABLED }) tilesetObject[titlesetName].setHeight(10) // 地形数据添加 // tilesetObject[titlesetName].setHeight(-73) @@ -1250,8 +1300,8 @@ polygonHierarchy: new global.DC.Namespace.Cesium.PolygonHierarchy( global.DC.Namespace.Cesium.Cartesian3.fromDegreesArray(floorPositions), ), extrudedHeight: maxHeight + 10,//分层顶部海拔 height: minHeight + 10,//分层底部海拔 extrudedHeight: maxHeight,//分层顶部海拔 height: minHeight,//分层底部海拔 }), attributes: { @@ -1295,6 +1345,33 @@ } }) } }, destroyed () { this.$EventBus.$off('mapAddLayer') this.$EventBus.$off('mapRemoveLayer') this.$EventBus.$off('mapRemovePolygonLayer') this.$EventBus.$off('mapRemovePolygon') this.$EventBus.$off('mapClearLayer') this.$EventBus.$off('layerPointAdd') this.$EventBus.$off('layerPolygonAdd') this.$EventBus.$off('layerPolylineAdd') this.$EventBus.$off('layerWallAdd') this.$EventBus.$off('rowLayerWallAdd') this.$EventBus.$off('getOverLayerID') this.$EventBus.$off('layerShow') this.$EventBus.$off('toPosition') this.$EventBus.$off('highOrLightChange') this.$EventBus.$off('addMxTileset') this.$EventBus.$off('closeMxTileset') this.$EventBus.$off('tilesetLayerFlag') this.$EventBus.$off('removeMxTileset') this.$EventBus.$off('flytoLayer') this.$EventBus.$off('showThreeDimensions') this.$EventBus.$off('switchThreeDimensions') this.$EventBus.$off('clearHouse3D') this.$EventBus.$off('registerMxClick') this.$EventBus.$off('unbindMxClick') } } </script>
