| | |
| | | * @Author: shuishen 1109946754@qq.com |
| | | * @Date: 2022-08-18 17:00:30 |
| | | * @LastEditors: shuishen 1109946754@qq.com |
| | | * @LastEditTime: 2023-04-07 15:27:58 |
| | | * @LastEditTime: 2023-05-08 14:03:31 |
| | | * @FilePath: \srs-police-affairs\src\components\map\index.vue |
| | | * @Description: 公用地图组件 |
| | | * |
| | |
| | | <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="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="!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> |
| | | </el-tooltip> |
| | | </div> |
| | | <!-- 切换矢量图按钮 --> |
| | |
| | | </div> |
| | | </el-tooltip> |
| | | |
| | | |
| | | <div class="image-switch-img-btn" v-show="showImgBtn"> |
| | | <div class="layer-change-box"> |
| | | <div class="title"> |
| | | 底图 |
| | | <div class="close" @click.stop="showImgBtn = false"> |
| | | <img src="/img/icon/close.png" alt /> |
| | | </div> |
| | | </div> |
| | | |
| | |
| | | </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> |
| | |
| | | </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> |
| | | |
| | |
| | | |
| | | <script> |
| | | let tile3DUrl = '' |
| | | let floorEntitysLayers = null |
| | | let flootEntitysEntites = null |
| | | |
| | | if (process.env.NODE_ENV == 'development') { |
| | | // 开发 |
| | |
| | | } |
| | | |
| | | import { label } from "./label" |
| | | |
| | | let projectTerrain = null |
| | | |
| | | var siteEntitylayers = null |
| | | |
| | |
| | | |
| | | let tilesetLayer = null |
| | | |
| | | let baseLayers = null |
| | | let baseLayers = [] |
| | | |
| | | let tilesetObject = { |
| | | sdTilesetLayer: null |
| | | } |
| | | |
| | | let curPolygon = null |
| | | |
| | | const ysLabels = [ |
| | | 'EPSG:4490_test:0', |
| | |
| | | ] |
| | | |
| | | 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' |
| | |
| | | import houseDeepDataPopup from './components/houseDeepDataPopup.vue' |
| | | import yToolTip from './components/yToolTip.vue' |
| | | import createTools from '@/utils/tools/index' |
| | | import { mapGetters } from 'vuex' |
| | | |
| | | import yxLayerJson from './yxlayer' |
| | | |
| | | export default { |
| | | name: 'mapBox', |
| | | |
| | | components: { mapPopup, activityPolicePopup, videoListPopup, mapSearchPopup, houseDeepDataPopup, yToolTip, videoRowClickPopup }, |
| | | components: { mapPopup, architecturePopup, activityPolicePopup, videoListPopup, mapSearchPopup, houseDeepDataPopup, yToolTip, videoRowClickPopup }, |
| | | |
| | | data () { |
| | | return { |
| | |
| | | }, |
| | | |
| | | computed: { |
| | | |
| | | ...mapGetters([ |
| | | 'isShowHomeContentBtn' |
| | | ]), |
| | | }, |
| | | |
| | | mounted () { |
| | | if (global.viewer != null) { |
| | | global.viewer = null |
| | | } |
| | | |
| | | const that = this |
| | | |
| | | // 初始化地图 |
| | |
| | | // let curTilesetLayer = new global.DC.TilesetLayer('curTilesetLayer') |
| | | // global.viewer.addLayer(curTilesetLayer) |
| | | // let curTileset = new global.DC.Tileset( |
| | | // // '/mx/tileset.json' |
| | | // 'https://tuan-gis.sit.fengtu.com.cn/361102/wanda/tileset.json' |
| | | // '/mx/tileset.json' |
| | | // ) |
| | | // // curTileset.setHeight(20) |
| | | // curTileset.setHeight(0) |
| | |
| | | global.viewer.addLayer(layersObjcect.monitoringLayer) |
| | | layersObjcect.panoramaLayer = new global.DC.VectorLayer('panoramaLayer') |
| | | global.viewer.addLayer(layersObjcect.panoramaLayer) |
| | | |
| | | floorEntitysLayers = new global.DC.VectorLayer('floorEntitysLayers') |
| | | global.viewer.addLayer(floorEntitysLayers) |
| | | |
| | | // 模型图层添加 |
| | | tilesetLayer = new global.DC.TilesetLayer('tilesetLayer') |
| | |
| | | // 内网 |
| | | 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 |
| | | }) |
| | | ) |
| | | // 地形数据添加 |
| | | 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', |
| | | // subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'], |
| | | // format: 'image/jpeg', |
| | | // show: true, |
| | | // maximumLevel: 18 |
| | | // }) |
| | | // ) |
| | | |
| | | // 设置地图初始位置,角度等 |
| | | global.viewer.camera.setView({ |
| | |
| | | // global.viewer.scene.morphTo2D(1) |
| | | |
| | | // 清除控制台 |
| | | // console.clear() |
| | | console.clear() |
| | | |
| | | function isEleFullScreen () { |
| | | const fullScreenEle = |
| | |
| | | |
| | | this.$EventBus.$on('layerPolygonAdd', (params) => { |
| | | if ('polygonName' in params) { |
| | | that.layerPolygonAdd(params.layerName, params.positions, params.material, params.distanceDisplayCondition, params.polygonName, params.params, params.incident, params.setStyle) |
| | | that.layerPolygonAdd(params.layerName, params.positions, params.material, params.distanceDisplayCondition, params.polygonName, params.params, params.incident, params.mouseOverIncident, params.mouseOutIncident, params.setStyle) |
| | | } else { |
| | | that.layerPolygonAdd(params.layerName, params.positions, params.material, params.distanceDisplayCondition, 'polygon', params.params, params.incident, params.setStyle) |
| | | that.layerPolygonAdd(params.layerName, params.positions, params.material, params.distanceDisplayCondition, 'polygon', params.params, params.incident, params.mouseOverIncident, params.mouseOutIncident, params.setStyle) |
| | | } |
| | | }) |
| | | |
| | |
| | | |
| | | 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) => { |
| | |
| | | that.showThreeDimensions(params.positions, params.minHeight, params.maxHeight) |
| | | }) |
| | | |
| | | this.$EventBus.$on('switchThreeDimensions', (params) => { |
| | | that.switchThreeDimensions(params) |
| | | }) |
| | | |
| | | this.$EventBus.$on('clearHouse3D', () => { |
| | | that.clearHouse3D() |
| | | }) |
| | |
| | | // 重写定位方法 |
| | | const homeCenter = [117.99311892441567, 28.46938164123123] |
| | | this.$nextTick(() => { |
| | | document.querySelector('.dc-zoom-controller').children[1].onclick = |
| | | function () { |
| | | that.$EventBus.$emit('toPosition', { |
| | | siteJd: homeCenter[0] + 0.046, |
| | | siteWd: homeCenter[1] - 0.36, |
| | | siteGd: 36000, |
| | | siteHeading: -3, |
| | | sitePitch: -45 |
| | | }) |
| | | } |
| | | // console.log('dc-zoom-controller', document.querySelector('.dc-zoom-controller')) |
| | | // if (document.querySelector('.dc-zoom-controller') == null) return |
| | | // document.querySelector('.dc-zoom-controller').children[1].onclick = |
| | | // function () { |
| | | // that.$EventBus.$emit('toPosition', { |
| | | // siteJd: homeCenter[0] + 0.046, |
| | | // siteWd: homeCenter[1] - 0.36, |
| | | // siteGd: 36000, |
| | | // siteHeading: -3, |
| | | // sitePitch: -45 |
| | | // }) |
| | | // } |
| | | |
| | | document.querySelector('.dc-zoom-controller .refresh svg title').innerHTML = '初始化位置' |
| | | |
| | | // document.querySelector('.dc-zoom-controller .refresh svg title').innerHTML = '初始化位置' |
| | | }) |
| | | }, |
| | | |
| | |
| | | if (this.tilesetLayerType == type && status == '') { |
| | | this.tilesetLayerType = '' |
| | | |
| | | |
| | | } else { |
| | | this.tilesetLayerType = type |
| | | |
| | |
| | | this.addMxTileset(`sdTilesetLayer${item}`, `${tile3DUrl}/sf3d/361102/model/all1/${item}/tileset.json`) |
| | | }) |
| | | |
| | | this.$EventBus.$emit('showHouseingTileset', { |
| | | type: 'add' |
| | | }) |
| | | if (this.$route.path == "/layout/house") { |
| | | this.$EventBus.$emit('showHouseingTileset', { |
| | | type: 'add' |
| | | }) |
| | | } |
| | | } |
| | | }, |
| | | |
| | |
| | | switchImg () { |
| | | // 天地图 影像 |
| | | this.imgtype = 0 |
| | | baseLayers != null && global.viewer.imageryLayers.remove(baseLayers) |
| | | baseLayers.length && baseLayers.forEach(item => { |
| | | item && global.viewer.imageryLayers.remove(item) |
| | | }) |
| | | |
| | | baseLayers = global.viewer.imageryLayers.addImageryProvider( |
| | | baseLayers = [] |
| | | |
| | | // const layer = global.viewer.imageryLayers.addImageryProvider( |
| | | // new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({ |
| | | // url: `${window.BASE_URL_CONFIG.VUE_APP_MAP_YX}/{z}/{x}/{reverseY}.png`, |
| | | // minimumLevel: 0, |
| | | // maximumLevel: 25, |
| | | // tilingScheme: new global.DC.Namespace.Cesium.GeographicTilingScheme(), |
| | | // }) |
| | | // ) |
| | | |
| | | // layer.contrast = 0.8 |
| | | |
| | | // baseLayers.push(layer) |
| | | |
| | | const qp = global.viewer.imageryLayers.addImageryProvider( |
| | | new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({ |
| | | url: `${window.BASE_URL_CONFIG.VUE_APP_MAP_YX}/{z}/{x}/{reverseY}.png`, |
| | | url: `/qp/{AZ}/{y}/{x}.png`, |
| | | customTags: { |
| | | AZ (imageryProvider, x, y, level) { |
| | | return 'Z' + level |
| | | }, |
| | | }, |
| | | minimumLevel: 0, |
| | | maximumLevel: 25, |
| | | tilingScheme: new global.DC.Namespace.Cesium.GeographicTilingScheme(), |
| | | }) |
| | | ) |
| | | |
| | | // const fileArray = ['A', 'B', 'C', 'D', 'E', 'F'] |
| | | // let subdomains = [] |
| | | qp.contrast = 0.8 |
| | | |
| | | // fileArray.forEach(item => { |
| | | // for (let i = 1; i < 6; i++) { |
| | | // subdomains.push(`${item}${i}`) |
| | | // } |
| | | // }) |
| | | baseLayers.push(qp) |
| | | |
| | | // baseLayers = global.viewer.imageryLayers.addImageryProvider( |
| | | // new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({ |
| | | // url: `${window.BASE_URL_CONFIG.VUE_APP_MAP_YX}/{fileName}/{AZ}/{y}/{x}.png`, |
| | | // customTags: { |
| | | // AZ (imageryProvider, x, y, level) { |
| | | // return 'Z' + level |
| | | // }, |
| | | yxLayerJson.forEach(item => { |
| | | let rectangle = {} |
| | | |
| | | // fileName (imageryProvider, x, y, level) { |
| | | // console.log(imageryProvider, x, y, level) |
| | | // } |
| | | // }, |
| | | // enablePickFeatures: false |
| | | // // minimumLevel: 0, |
| | | // // maximumLevel: 25, |
| | | // // tilingScheme: new global.DC.Namespace.Cesium.GeographicTilingScheme(), |
| | | // }) |
| | | // ) |
| | | if (item.west != 0 && item.south != 0 && item.east != 0 && item.north != 0) { |
| | | rectangle = { rectangle: global.DC.Namespace.Cesium.Rectangle.fromDegrees(Number(item.west), Number(item.south), Number(item.east), Number(item.north)) } |
| | | } else { |
| | | return |
| | | } |
| | | |
| | | const layer = global.viewer.imageryLayers.addImageryProvider( |
| | | new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({ |
| | | url: `${window.BASE_URL_CONFIG.VUE_APP_MAP_YX}/${item.name}/{AZ}/{y}/{x}.png`, |
| | | customTags: { |
| | | AZ (imageryProvider, x, y, level) { |
| | | return 'Z' + level |
| | | }, |
| | | }, |
| | | minimumLevel: 0, |
| | | maximumLevel: 25, |
| | | ...rectangle |
| | | }) |
| | | ) |
| | | |
| | | layer.contrast = 0.8 |
| | | |
| | | baseLayers.push(layer) |
| | | }) |
| | | |
| | | // baseLayers = global.viewer.imageryLayers.addImageryProvider( |
| | | // new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({ |
| | |
| | | // }) |
| | | // ) |
| | | |
| | | baseLayers.contrast = 0.8 |
| | | }, |
| | | |
| | | switchElec () { |
| | | // 天地图 矢量 |
| | | this.imgtype = 1 |
| | | baseLayers != null && global.viewer.imageryLayers.remove(baseLayers) |
| | | baseLayers = global.viewer.imageryLayers.addImageryProvider( |
| | | new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({ |
| | | url: `${window.BASE_URL_CONFIG.VUE_APP_MAP_SL}/MapTileService/wmts?STORETYPE=merged-dat&PROJECTION=4326`, |
| | | layer: "wmts_4326_361100", |
| | | style: "default", |
| | | format: "image/png", |
| | | tileMatrixSetID: "c", |
| | | tileMatrixLabels: new Array(20).fill(0).map((v, i) => i + 1), |
| | | tilingScheme: new global.DC.Namespace.Cesium.GeographicTilingScheme(), |
| | | }) |
| | | |
| | | baseLayers.length && baseLayers.forEach(item => { |
| | | item && global.viewer.imageryLayers.remove(item) |
| | | }) |
| | | |
| | | baseLayers = [] |
| | | |
| | | baseLayers.push( |
| | | global.viewer.imageryLayers.addImageryProvider( |
| | | new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({ |
| | | url: `${window.BASE_URL_CONFIG.VUE_APP_MAP_SL}/MapTileService/wmts?STORETYPE=merged-dat&PROJECTION=4326`, |
| | | layer: "wmts_4326_361100", |
| | | style: "default", |
| | | format: "image/png", |
| | | tileMatrixSetID: "c", |
| | | tileMatrixLabels: new Array(20).fill(0).map((v, i) => i + 1), |
| | | tilingScheme: new global.DC.Namespace.Cesium.GeographicTilingScheme(), |
| | | }) |
| | | ) |
| | | ) |
| | | |
| | | baseLayers.contrast = 1.0 |
| | | }, |
| | | |
| | | addTerrain () { |
| | | projectTerrain = global.DC.TerrainFactory.createUrlTerrain({ |
| | | // url: `http://data.marsgis.cn/terrain` |
| | | url: `${window.BASE_URL_CONFIG.VUE_APP_MAP_DX}` |
| | | }) |
| | | |
| | | global.viewer.addTerrain(projectTerrain) |
| | | }, |
| | | |
| | | removeTerrain () { |
| | | global.viewer.removeTerrain(projectTerrain) |
| | | }, |
| | | |
| | | /** |
| | |
| | | } |
| | | }, |
| | | |
| | | // 切换首页显示隐藏 |
| | | switchShowHomeContent () { |
| | | this.$store.commit('SET_ISSHOWHOMECONTENT', !this.$store.state.popupParams.isShowHomeContent) |
| | | console.log(document.querySelector('.screen-full-btn'), 1111222) |
| | | console.log(document.querySelector('.dc-container'), 3333444) |
| | | 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('.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('.screen-full-btn').classList.remove('homebottom') |
| | | document.querySelector('.over-look-btn').classList.remove('homebottom') |
| | | document.querySelector('.image-switch-icon-btn').classList.remove('iconbottom') |
| | | } |
| | | |
| | | }, |
| | | |
| | | /** |
| | | * 在图层中添加实体(点) |
| | | * @param {*} item 图标 |
| | |
| | | * @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]) |
| | | }, |
| | | |
| | | /** |
| | |
| | | * @param {*} material 颜色 |
| | | * @param {*} distanceDisplayCondition 可见距离 |
| | | */ |
| | | layerPolygonAdd (layerName, positions, material, distanceDisplayCondition, polygonName, params, incident = (e) => { }, setStyle = {}) { |
| | | layerPolygonAdd (layerName, positions, material, distanceDisplayCondition, polygonName, params, incident = (e) => { }, mouseOverIncident = (e) => { }, |
| | | mouseOutIncident = (e) => { }, setStyle = {}) { |
| | | if (!layersObjcect[layerName] || layersObjcect[layerName] == null) { |
| | | this.mapAddLayer(layerName, 'VectorLayer') |
| | | |
| | |
| | | // layersObjcect[layerName].addOverlay(polygon) |
| | | polygonObj[polygonName].attrParams = params |
| | | polygonObj[polygonName].on(global.DC.MouseEventType.CLICK, incident) |
| | | polygonObj[polygonName].on(global.DC.MouseEventType.MOUSE_OVER, mouseOverIncident) |
| | | polygonObj[polygonName].on(global.DC.MouseEventType.MOUSE_OUT, mouseOutIncident) |
| | | layersObjcect[layerName].addOverlay(polygonObj[polygonName]) |
| | | }, |
| | | |
| | |
| | | wall.setStyle({ |
| | | material: new global.DC.WallTrailMaterialProperty({ |
| | | color: global.DC.Namespace.Cesium.Color.fromBytes(255, 0, 0, 180), |
| | | speed: 10 |
| | | }) |
| | | }) |
| | | 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 |
| | | }) |
| | | }) |
| | |
| | | addMxTileset (titlesetName, titlesetUrl) { |
| | | if (!tilesetObject[titlesetName]) tilesetObject[titlesetName] = null |
| | | |
| | | if (this.$route) |
| | | tilesetObject[titlesetName] = new global.DC.Tileset(titlesetUrl, { |
| | | luminanceAtZenith: 0.4, |
| | | // cullWithChildrenBounds: false, |
| | | // cullRequestsWhileMoving: false, |
| | | // skipLevelOfDetail: false, |
| | | shadows: global.DC.Namespace.Cesium.ShadowMode.DISABLED |
| | | }) |
| | | |
| | | tilesetObject[titlesetName] = new global.DC.Tileset(titlesetUrl, { |
| | | luminanceAtZenith: 0.4, |
| | | // cullWithChildrenBounds: false, |
| | | // cullRequestsWhileMoving: false, |
| | | // skipLevelOfDetail: false, |
| | | shadows: global.DC.Namespace.Cesium.ShadowMode.DISABLED |
| | | }) |
| | | |
| | | tilesetObject[titlesetName].setHeight(-72) |
| | | // 地形数据添加 |
| | | // tilesetObject[titlesetName].setHeight(-73) |
| | | |
| | | tilesetLayer.addOverlay(tilesetObject[titlesetName]) |
| | | |
| | |
| | | * @param {*} |
| | | */ |
| | | showThreeDimensions (positions, minHeight, maxHeight) { |
| | | if (floorEntitysLayers != null) { |
| | | floorEntitysLayers.remove() |
| | | floorEntitysLayers = new global.DC.VectorLayer('floorEntitysLayers') |
| | | global.viewer.addLayer(floorEntitysLayers) |
| | | console.log('showThreeDimensions--map') |
| | | if (curPolygon != null) { |
| | | global.viewer.scene.primitives.remove(curPolygon) |
| | | curPolygon = null |
| | | } |
| | | |
| | | floorEntitysLayers.clear() |
| | | |
| | | let housePositions = JSON.parse(positions).coordinates[0] |
| | | |
| | | let floorPositions = housePositions.reduce((prev, curr) => { |
| | | prev.push([curr[0], curr[1]]) |
| | | prev.push(curr[0]) |
| | | prev.push(curr[1]) |
| | | |
| | | return prev |
| | | }, []) |
| | | |
| | | let polygonStr = floorPositions.join(';') |
| | | curPolygon = new global.DC.Namespace.Cesium.ClassificationPrimitive({ |
| | | geometryInstances: new global.DC.Namespace.Cesium.GeometryInstance({ |
| | | geometry: new global.DC.Namespace.Cesium.PolygonGeometry({ |
| | | polygonHierarchy: new global.DC.Namespace.Cesium.PolygonHierarchy( |
| | | global.DC.Namespace.Cesium.Cartesian3.fromDegreesArray(floorPositions), |
| | | ), |
| | | extrudedHeight: maxHeight,//分层顶部海拔 |
| | | height: minHeight,//分层底部海拔 |
| | | }), |
| | | |
| | | let polygon = new global.DC.Polygon(polygonStr) |
| | | attributes: { |
| | | color: global.DC.Namespace.Cesium.ColorGeometryInstanceAttribute.fromColor(global.DC.Namespace.Cesium.Color.RED.withAlpha(0.5)), |
| | | show: new global.DC.Namespace.Cesium.ShowGeometryInstanceAttribute(true) |
| | | }, |
| | | }), |
| | | |
| | | polygon.setStyle({ |
| | | material: global.DC.Namespace.Cesium.Color.RED.withAlpha(0.5), |
| | | extrudedHeight: maxHeight, |
| | | height: minHeight, |
| | | extrudedHeightReference: global.DC.Namespace.Cesium.HeightReference.RELATIVE_TO_GROUND, |
| | | heightReference: global.DC.Namespace.Cesium.HeightReference.RELATIVE_TO_GROUND |
| | | classificationType: global.DC.Namespace.Cesium.ClassificationType.CESIUM_3D_TILE |
| | | }) |
| | | |
| | | floorEntitysLayers.addOverlay(polygon) |
| | | global.viewer.scene.primitives.add(curPolygon) |
| | | }, |
| | | |
| | | floorEntitysLayers.show = true |
| | | // 建筑高亮切换显示隐藏 |
| | | switchThreeDimensions (boolean) { |
| | | if (!curPolygon) return |
| | | curPolygon.show = boolean |
| | | }, |
| | | |
| | | // 清除建筑3D |
| | | clearHouse3D () { |
| | | floorEntitysLayers.clear() |
| | | global.viewer.scene.primitives.remove(curPolygon) |
| | | |
| | | curPolygon = null |
| | | }, |
| | | |
| | | registerMxClick (event) { |
| | | this.unbindMxClick() |
| | | label.forEach(item => { |
| | | if (tilesetObject[`sdTilesetLayer${item}`] && tilesetObject[`sdTilesetLayer${item}`] != null) { |
| | | tilesetObject[`sdTilesetLayer${item}`].on(global.DC.MouseEventType.CLICK, event) |
| | |
| | | } |
| | | }) |
| | | } |
| | | }, |
| | | |
| | | 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> |