suerprisePlus
2024-09-30 703703929e97b94ca1c1c5e35a578e5fe9d4cfea
src/views/visual/mapView/index.vue
@@ -13,7 +13,8 @@
                            </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>
@@ -28,40 +29,161 @@
                    <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() {
@@ -75,9 +197,7 @@
            this.setPopCloseAll();
            const obj = menuManager.init(command);
            if (obj) {
                this.setPopShow(obj);
            }
        },
        setPopCloseAll() {
@@ -86,6 +206,7 @@
            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();
@@ -95,6 +216,21 @@
                    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;
@@ -114,7 +250,7 @@
    .menuBox {
        position: absolute;
        z-index: 99999;
        z-index: 40;
        top: 20px;
        right: 2px;
        border-radius: 0 6px 6px 0;
@@ -136,7 +272,7 @@
        .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;
@@ -148,7 +284,7 @@
        .closeMenu {
            width: 30px;
            height: 100%;
            background: rgba(245, 245, 245, 1);
            background: rgb(255, 255, 255);
            color: #4ab1fc;
            display: flex;
            position: relative;
@@ -158,7 +294,7 @@
        .menuItemBox {
            color: #7a7a7a;
            background: rgba(245, 245, 245, 1);
            background: rgb(255, 255, 255);
            line-height: 40px;
            padding: 0px 10px;
            font-size: 14px;