| | |
| | | </span> |
| | | <div v-if="item.children"> |
| | | <el-dropdown-menu v-show="item.children" slot="dropdown"> |
| | | <el-dropdown-item style="text-align: center" :command="res" v-for="(res, key) in item.children" :key="key">{{ res.name }}</el-dropdown-item> |
| | | <el-dropdown-item style="text-align: center" :command="res" |
| | | v-for="(res, key) in item.children" :key="key">{{ res.name }}</el-dropdown-item> |
| | | </el-dropdown-menu> |
| | | </div> |
| | | </el-dropdown> |
| | |
| | | <i :size="20" class="el-icon-d-arrow-left"></i> |
| | | </div> |
| | | </div> |
| | | <!-- 图层管理 --> |
| | | <layer-manager ref="layerManager"></layer-manager> |
| | | <!-- 坐标定位 --> |
| | | <location ref="location"></location> |
| | | <!-- 知识图谱 --> |
| | | <knowledge ref="knowledge"></knowledge> |
| | | <!-- 线路漫游 --> |
| | | <lineRoaming ref="lineRoaming"></lineRoaming> |
| | | <!-- 地下模式 --> |
| | | <undergroundMode ref="undergroundMode"></undergroundMode> |
| | | <!-- 数据分析 --> |
| | | <dataAnalysis ref="dataAnalysis"></dataAnalysis> |
| | | <!-- 数据统计 --> |
| | | <dataStatistics ref="dataStatistics"></dataStatistics> |
| | | <!-- 属性信息 --> |
| | | <attributeInfo ref="attributeInfo"></attributeInfo> |
| | | <map-info :childObj="childObj" ref="mapInfo"></map-info> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import mapInit from '@/assets/js/mapSdk/index.js'; |
| | | import mapInit from '../../../assets/js/mapSdk/index.js'; |
| | | import mapData from '@/assets/js/mapSdk/mapData.js'; |
| | | import layerManager from './layerManager.vue'; |
| | | import menuManager from '@/assets/js/mapSdk/menuManager.js'; |
| | | import location from './location.vue'; |
| | | import knowledge from './knowledge.vue'; |
| | | |
| | | import lineRoaming from './lineRoaming.vue'; |
| | | import { layer_selectAll } from '@/api/mapView/map.js'; |
| | | import configTools from '@/assets/js/configTools'; |
| | | import store from '@/store'; |
| | | import mapServer from '@/assets/js/mapSdk/mapServe'; |
| | | import undergroundMode from './undergroundMode.vue'; |
| | | import dataAnalysis from './dataAnalysis.vue'; |
| | | import dataStatistics from './dataStatistics.vue'; |
| | | import attributeInfo from './attributeInfo.vue'; |
| | | import mapInfo from './mapInfo.vue'; |
| | | export default { |
| | | name: 'mapView', |
| | | components: { layerManager, location, knowledge }, |
| | | components: { layerManager, location, knowledge, lineRoaming, undergroundMode, dataAnalysis, dataStatistics, attributeInfo, mapInfo }, |
| | | data() { |
| | | return { |
| | | menuIsShow: false, |
| | | menuOption: [], |
| | | childMenuIsShow: true, |
| | | childMenuOption: [], |
| | | childObj: [], |
| | | showEarth: false, |
| | | }; |
| | | }, |
| | | mounted() { |
| | | this.mapViewStart(); |
| | | created() { |
| | | console.log('created'); |
| | | }, |
| | | mounted() { |
| | | this.showEarth = true; |
| | | this.mapViewStart(); |
| | | this.$busEvent.$on('CHANGE_MAPINFO', (res) => { |
| | | this.setMapInfo(res); |
| | | }); |
| | | }, |
| | | beforeCreate() { |
| | | console.log('beforeCreate'); |
| | | }, |
| | | beforeDestroy() { |
| | | this.$store.dispatch('mapLayers/changeLayerTree', []); |
| | | this.$store.dispatch('mapLayers/changeDefaultLayer', []); |
| | | }, |
| | | |
| | | methods: { |
| | | setMapInfo(res) { |
| | | // console.log(res); |
| | | if (res.length > 0) { |
| | | this.childObj = res; |
| | | setTimeout(() => { |
| | | this.$refs && this.$refs.mapInfo && this.$refs.mapInfo.open(); |
| | | }, 200); |
| | | } |
| | | }, |
| | | mapViewStart() { |
| | | this.menuOption = mapData.menuData; |
| | | this.$nextTick(() => { |
| | | mapInit.Init(); |
| | | |
| | | window.earthCtrl = new SmartEarth.EarthCtrl( |
| | | 'sdkContainer', |
| | | { |
| | | // 隐藏默认底图 |
| | | defaultImagery: false, |
| | | // 隐藏logo |
| | | printLog: false, |
| | | // sceneMode: SmartEarth.Cesium.SceneMode.SCENE2D |
| | | StaticFileBaseUrl: '/CimSDK/', |
| | | }, |
| | | {}, |
| | | {}, |
| | | () => { |
| | | setTimeout(() => { |
| | | mapServer.layerList = []; |
| | | //初始化Cesium |
| | | window.Cesium = SmartEarth.Cesium; |
| | | // 初始化Viewer |
| | | window.Viewer = window.earthCtrl.viewer; |
| | | //设置地球颜色 |
| | | window.Viewer.scene.globe.baseColor = Cesium.Color.fromCssColorString('#A9A9A9'); |
| | | window.Viewer.imageryLayers.removeAll(); |
| | | const serverUrl = config.geoServer; |
| | | const layer = new Cesium.WebMapServiceImageryProvider({ |
| | | url: serverUrl.url + serverUrl.wms, |
| | | layers: serverUrl.layers[1], |
| | | parameters: { |
| | | transparent: true, |
| | | format: 'image/png', |
| | | srs: 'EPSG:4490', |
| | | styles: '', |
| | | cql_filter: '', |
| | | }, |
| | | tileWidth: 512, |
| | | tileHeight: 512, |
| | | }); |
| | | |
| | | window.Viewer.imageryLayers.addImageryProvider(layer); |
| | | this.setStart(); |
| | | |
| | | }, 500); |
| | | } |
| | | ); |
| | | }, |
| | | setStart() { |
| | | mapInit.Init(); |
| | | setTimeout(() => { |
| | | if (config.baseModel.url) { |
| | | var model = window.earthCtrl.factory.create3DTilesets({ |
| | | url: config.baseModel.url |
| | | |
| | | }); |
| | | } |
| | | this.getSelectLayers(); |
| | | }, 500); |
| | | }, |
| | | |
| | | getSelectLayers() { |
| | | layer_selectAll().then((response) => { |
| | | if (response.data.code != 200) return; |
| | | const defaultLayer = []; |
| | | const val = response.data.result.filter((item) => { |
| | | item.checked = false; |
| | | if (item.type == 2 && item.isShow == 1) { |
| | | item.checked = true; |
| | | mapServer.addLayer(item); |
| | | defaultLayer.push(item.id); |
| | | } |
| | | return item; |
| | | }); |
| | | this.$store.dispatch('mapLayers/changeDefaultLayer', defaultLayer); |
| | | var obj = configTools.getTreeData(val); |
| | | this.$store.dispatch('mapLayers/changeLayerTree', obj); |
| | | }); |
| | | }, |
| | | setMenuClose() { |
| | |
| | | this.setPopCloseAll(); |
| | | const obj = menuManager.init(command); |
| | | if (obj) { |
| | | |
| | | this.setPopShow(obj); |
| | | |
| | | } |
| | | }, |
| | | setPopCloseAll() { |
| | |
| | | this.$refs && this.$refs.knowledge && this.$refs.knowledge.close(); |
| | | }, |
| | | setPopShow(response) { |
| | | console.log(response); |
| | | switch (response) { |
| | | case '图层管理': |
| | | this.$refs && this.$refs.layerManager && this.$refs.layerManager.open(); |
| | |
| | | break; |
| | | case '知识图谱': |
| | | this.$refs && this.$refs.knowledge && this.$refs.knowledge.open(); |
| | | break; |
| | | case '线路漫游': |
| | | this.$refs && this.$refs.lineRoaming && this.$refs.lineRoaming.open(); |
| | | break; |
| | | case '地下模式': |
| | | this.$refs && this.$refs.undergroundMode && this.$refs.undergroundMode.open(); |
| | | break; |
| | | case '数据分析': |
| | | this.$refs && this.$refs.dataAnalysis && this.$refs.dataAnalysis.open(); |
| | | break; |
| | | case '属性信息': |
| | | this.$refs && this.$refs.attributeInfo && this.$refs.attributeInfo.open(); |
| | | break; |
| | | case '数据统计': |
| | | this.$refs && this.$refs.dataStatistics && this.$refs.dataStatistics.open(); |
| | | break; |
| | | default: |
| | | break; |
| | |
| | | |
| | | .menuBox { |
| | | position: absolute; |
| | | z-index: 99999; |
| | | z-index: 40; |
| | | top: 20px; |
| | | right: 2px; |
| | | border-radius: 0 6px 6px 0; |
| | |
| | | .rightMenu { |
| | | width: 30px; |
| | | height: 40px; |
| | | background: rgba(245, 245, 245, 1); |
| | | background: rgba(255, 255, 255, 1); |
| | | border: 1px solid rgb(245, 245, 245); |
| | | color: #4ab1fc; |
| | | display: flex; |
| | |
| | | .closeMenu { |
| | | width: 30px; |
| | | height: 100%; |
| | | background: rgba(245, 245, 245, 1); |
| | | background: rgb(255, 255, 255); |
| | | color: #4ab1fc; |
| | | display: flex; |
| | | position: relative; |
| | |
| | | |
| | | .menuItemBox { |
| | | color: #7a7a7a; |
| | | background: rgba(245, 245, 245, 1); |
| | | background: rgb(255, 255, 255); |
| | | line-height: 40px; |
| | | padding: 0px 10px; |
| | | font-size: 14px; |