模型切换

shuishen

2023-02-28 7a7760afd043a00e2bb4bca1a3130c8fd4056e40

 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-02-27 15:23:37
 * @LastEditTime: 2023-02-28 10:21:15
 * @FilePath: \srs-police-affairs\src\components\map\index.vue
 * @Description: 公用地图组件
 * 
@@ -22,17 +22,38 @@
            </el-tooltip>
        </div>
        <!-- 切换矢量图按钮 -->
        <div class="image-switch-icon-btn" title="切换影像" @click="showImgBtn = !showImgBtn">
            <div class="icon-box">
        <div class="image-switch-icon-btn">
            <div class="icon-box" @click.stop="showImgBtn = !showImgBtn">
                <img src="/img/base_map.png" alt />
            </div>

            <div class="image-switch-img-btn" v-show="showImgBtn">
                <div class="img" @click="switchImg">
                    <span :class="{ on: imgtype == 0 }">影像</span>
                <div class="layer-change-box">
                    <div class="title">
                        底图
                        <div class="close" @click.stop="showImgBtn = false" title="关闭"></div>
                    </div>
                    <div class="content">
                        <div class="img" @click="switchImg">
                            <span :class="{ on: imgtype == 0 }">影像</span>
                        </div>
                        <div class="elec" @click="switchElec">
                            <span :class="{ on: imgtype == 1 }">矢量</span>
                        </div>
                    </div>
                </div>
                <div class="elec" @click="switchElec">
                    <span :class="{ on: imgtype == 1 }">矢量</span>
                <div class="layer-change-box">
                    <div class="title">
                        模型
                    </div>
                    <div class="content">
                        <div class="img light" @click="highOrLightChange('light')">
                            <span :class="{ on: tilesetLayerType == 'light' }">轻量</span>
                        </div>
                        <div class="elec high" @click="highOrLightChange('high')">
                            <span :class="{ on: tilesetLayerType == 'high' }">高精</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
@@ -44,6 +65,54 @@
</template>

<script>


let tile3DUrl = ''

if (process.env.NODE_ENV == 'development') {
    // 开发
    tile3DUrl = window.BASE_URL_CONFIG.VUE_APP_OUTER_NET_TILEURL
} else {
    // 部署
    tile3DUrl = window.BASE_URL_CONFIG.VUE_APP_INTRANET_TILEURL
}

let label = [
    '01',
    '02',
    '03',
    '04',
    '05',
    '06',
    '07',
    '08',
    '09',
    '10',
    '11',
    '12',
    '13',
    '14',
    '15',
    '16',
    '17',
    '18',
    '19',
    '20',
    '21',
    '22',
    '23',
    '24',
    '25',
    '26',
    '27',
    '28',
    '29',
    '30',
    '31',
    '32',
    '33',
    '34'
]

var siteEntitylayers = null

@@ -113,6 +182,7 @@
            carTotal: 0,
            showImgBtn: false,
            imgtype: 0,
            tilesetLayerType: ''
        }
    },

@@ -356,7 +426,7 @@
        })

        this.$EventBus.$on('mapRemovePolygonLayer', (params) => {
            that.mapRemovePolygonLayer(params.layerName, params.polygonName,params.type)
            that.mapRemovePolygonLayer(params.layerName, params.polygonName, params.type)
        })

        this.$EventBus.$on('mapClearLayer', (params) => {
@@ -431,6 +501,42 @@
    },

    methods: {
        /**
         * @description: 高精度模型和轻量模型切换
         * @param {*} type
         * @return {*}
         */
        highOrLightChange (type) {
            this.removeMxTileset('sdTilesetLayer')

            if (this.tilesetLayerType == type) {
                this.tilesetLayerType = ''

            } else {
                this.tilesetLayerType = type

                type == 'light' ?
                    label.forEach(item => {
                        this.addMxTileset('sdTilesetLayer', `${tile3DUrl}/sf3d/361102/model/all/${item}/tileset.json`, this.housingIndent)
                    }) :
                    label.forEach(item => {
                        this.addMxTileset('sdTilesetLayer', `${tile3DUrl}/sf3d/361102/model/all1/${item}/tileset.json`, this.housingIndent)
                    })
            }

            this.showImgBtn = false
        },

        /**
         * @description: 社区感知下，模型的点击事件
         * @param {*} e
         * @return {*}
         */
        housingIndent (e) {
            console.log(this.$route.path, 456)
            // if(this.$route.path == ' ')
        },

        // 模型的点击事件
        tilesetClick (e) {
            if (this.$route.path != "/layout/house") {
@@ -574,9 +680,9 @@
         * @param {*} polygonName 面名称
         * @param {*} type 图层类型
         */
         mapRemovePolygonLayer (layerName,polygonName, type) {
        mapRemovePolygonLayer (layerName, polygonName, type) {
            if (type == 'VectorLayer' || type == 'ClusterLayer' || type == 'HeatLayer') {
                if (layersObjcect[layerName] && layersObjcect[layerName] != null&&polygonObj[polygonName]&&polygonObj[polygonName]!=null) {
                if (layersObjcect[layerName] && layersObjcect[layerName] != null && polygonObj[polygonName] && polygonObj[polygonName] != null) {
                    layersObjcect[layerName].removeOverlay(polygonObj[polygonName])
                }
            }