模型切换

shuishen

2023-02-28 7a7760afd043a00e2bb4bca1a3130c8fd4056e40

模型切换

 pnpm-lock.yaml

New file
Diff too large

 public/img/mx.png

 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])
                }
            }

 src/styles/dc/index.scss

@@ -137,16 +137,29 @@

.image-switch-img-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: absolute;
    font-size: 20px;
    font-weight: normal;
    color: #fff;
    background: #fff;
    background: $bg-color;
    border-radius: 5px;
    z-index: 97;
    // background-color: $table-header-bg-color !important;
    cursor: pointer;
    transform: translate(0, -50%);


    .layer-change-box {
        display: flex;
        flex-direction: column;

        .title {}

        .content {
            display: flex;
        }
    }

    .img,
    .elec {
@@ -155,17 +168,17 @@
        background-size: 100% 100%;
        width: 80px;
        height: 60px;
        border: 2px solid $table-header-bg-color;

        span {
            position: absolute;
            right: 2px;
            bottom: 2px;
            padding: 0 2px;
            left: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);

        }

        &>.on {
            background-color: $table-header-bg-color;
            color: #337fe5;
        }
    }

@@ -178,4 +191,12 @@
    .elec {
        background-image: url(/img/elec.png);
    }

    .light {
        background-image: url(/img/mx.png);
    }

    .high {
        background-image: url(/img/mx.png);
    }
}

 src/styles/media/index.scss

@@ -2452,24 +2452,69 @@
                    bottom: countSizeVh(390) !important;
                }


                .image-switch-img-btn {
                    top: 0;
                    left: countSizeVw(40, 1920);
                    font-size: countSizeVh(20);
                    left: countSizeVw(46, 1920);
                    font-size: countSizeVh(16);
                    border-radius: countSizeVh(5);

                    .img,
                    .elec {
                        width: countSizeVh(80);
                        height: countSizeVh(60);
                        border: countSizeVh(2) solid $table-header-bg-color;
                    .layer-change-box {
                        .title {
                            position: relative;
                            padding: 0 countSizeVw(8, 1920);
                            height: countSizeVh(32);
                            line-height: countSizeVh(32);
                            text-align: left;

                        span {
                            right: countSizeVh(2);
                            bottom: countSizeVh(2);
                            padding: 0 countSizeVh(2);
                            .close {
                                position: absolute;
                                right: 5px;
                                top: 0;
                            }

                            .close::before {
                                font-family: element-icons;
                                content: '\e6db';
                                cursor: pointer;
                                font-size: 16px;
                            }

                            .close:hover::before {
                                color: #3d95f3;
                            }
                        }

                        .content {
                            padding: 0 countSizeVw(8, 1920);
                            height: countSizeVh(66);
                            line-height: countSizeVh(66);

                            &>div:last-child {
                                margin: 0;
                            }

                            &>div {
                                margin-right: countSizeVw(8, 1920);
                                width: countSizeVh(80);
                                height: 100%;
                                border: 2px solid #fff;
                                border-radius: countSizeVw(4, 1920);
                                overflow: hidden;

                                span {
                                    width: 100%;
                                    height: countSizeVh(24);
                                    line-height: countSizeVh(24);
                                }
                            }
                        }
                    }

                    .layer-change-box:last-child {
                        margin-bottom: countSizeVw(8, 1920);
                    }

                }

                .equiment-details-box {

 src/styles/media/index1.scss

@@ -1026,6 +1026,40 @@
                    width: countSizeVh(36);
                    height: countSizeVh(36);
                    font-size: countSizeVh(20);


                    .image-switch-img-btn {
                        left: countSizeVw(46, 1920);
                        bottom: countSizeVh(190);
                        font-size: countSizeVh(20);
                        border-radius: countSizeVh(5);


                        .layer-change-box {
                            .title {
                                height: countSizeVh(32);
                                line-height: countSizeVh(32);
                            }

                            .content {
                                padding: 0 countSizeVw(18, 1920);
                                height: countSizeVh(66);
                                line-height: countSizeVh(66);
                            }
                        }

                        .img,
                        .elec {
                            width: countSizeVh(80);
                            height: countSizeVh(60);

                            span {
                                right: countSizeVh(2);
                                bottom: countSizeVh(2);
                                padding: 0 countSizeVh(2);
                            }
                        }
                    }
                }

                .image-switch-icon-btn.iconbottom {
@@ -1041,25 +1075,6 @@
                    bottom: countSizeVh(390) !important;
                }

                .image-switch-img-btn {
                    left: countSizeVw(46, 1920);
                    bottom: countSizeVh(190);
                    font-size: countSizeVh(20);
                    border-radius: countSizeVh(5);

                    .img,
                    .elec {
                        width: countSizeVh(80);
                        height: countSizeVh(60);
                        border: countSizeVh(2) solid $table-header-bg-color;

                        span {
                            right: countSizeVh(2);
                            bottom: countSizeVh(2);
                            padding: 0 countSizeVh(2);
                        }
                    }
                }
            }
        }


 src/views/house/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-02-27 12:00:12
 * @LastEditTime: 2023-02-28 09:41:08
 * @FilePath: \srs-police-affairs\src\views\house\index.vue
 * @Description: 小区-栋-层-房屋
 * 
@@ -140,9 +140,9 @@
                                <div class="two">
                                    <div>
                                        <div>98</div>
                                                                                                                                                                                    <div>户籍人口</div>
                                                                                                                                                                                </div>
                                                                                                                                                                                <div>
                                                                                                                                                                                        <div>户籍人口</div>
                                                                                                                                                                                    </div>
                                                                                                                                                                                    <div>
                                        <div style="color:#0E88FF">20</div>
                                        <div>流动人口</div>
                                    </div>
@@ -164,17 +164,17 @@
                                <div>
                                    <div>120</div>
                                    <div>出租</div>
                                                                                                                                                                                </div>
                                                                                                                                                                                <div>
                                                                                                                                                                                    <div>160</div>
                                                                                                                                                                                    <div>自住</div>
                                                                                                                                                                                </div>
                                                                                                                                                                                <div>
                                                                                                                                                                                    <div>8</div>
                                                                                                                                                                                    <div>空置</div>
                                                                                                                                                                                </div>
                                                                                                                                                                            </div>
                                                                                                                                                                            <div>
                                                                                                                                                                                <div>160</div>
                                                                                                                                                                                <div>自住</div>
                                                                                                                                                                            </div>
                                                                                                                                                                            <div>
                                                                                                                                                                                <div>8</div>
                                                                                                                                                                                <div>空置</div>
                                                                                                                                                                            </div>
                                                                                                                                                                        </div>
                                                                                                                                                                    </div>-->
                                                                                                                                                                        </div>-->
                        <div class="house-element-info" v-if="isShowHouseBox">
                        <!-- 选择单元 -->
                        <div class="condo" v-show="isShowUnitChoose">
@@ -219,17 +219,17 @@
                                    <div>
                                        <span class="zizhu"></span>
                                        自住
                                                                                                                                                                                    </div>
                                                                                                                                                                                    <div>
                                                                                                                                                                                        <span class="kongzhi"></span>
                                                                                                                                                                                        空置
                                                                                                                                                                                    </div>
                                                                                                                                                                                    <div>
                                                                                                                                                                                        <span class="shangye"></span>
                                                                                                                                                                                        商业
                                                                                                                                                                                    </div>
                                                                                                                                                                                </div>
                                                                                                                                                                                <div>
                                                                                                                                                                                    <span class="kongzhi"></span>
                                                                                                                                                                                    空置
                                                                                                                                                                                </div>
                                                                                                                                                                                <div>
                                                                                                                                                                                    <span class="shangye"></span>
                                                                                                                                                                                    商业
                                                                                                                                                                                </div>
                                                                                                                                                                            </div>
                                                                                                                                                                        </div>-->
                                                                                                                                                                            </div>-->
                            <el-main v-loading="pictLoading" element-loading-background="rgba(17, 38, 163, .1)"
                                element-loading-text="数据正在加载中" element-loading-spinner="el-icon-loading"
                                v-show="isShowHouseBox">
@@ -266,8 +266,8 @@
                                                <!-- :class="[{ 'chuzu': value.houseType == '出租' }, { 'zizhu': value.houseType == '自住' }, { 'kongzhi': value.houseType == '空置' }, { 'shangye': value.houseType == '商业' }]" -->
                                                {{ value.properties.fojcu }}
                                                <!-- <div class="flow"></div>
                                                                                                                                                                                        <div class="focus"></div>
                                                                                                                                                                                            <div class="warning"></div>-->
                                                                                                                                                                                            <div class="focus"></div>
                                                                                                                                                                                                <div class="warning"></div>-->
                                            </div>
                                        </div>
                                    </div>
@@ -480,9 +480,6 @@
    tile3DUrl = window.BASE_URL_CONFIG.VUE_APP_INTRANET_TILEURL
}

let circleLayer = null
let timer = []

let label = [
    '01',
    '02',
@@ -517,11 +514,12 @@
    '31',
    '32',
    '33',
    '34',
    '35',
    '36'
    '34'
]

let circleLayer = null
let timer = []

import {
    getSearchExtensively, getHouses, getSearchExtensivelyBgAoiDeepdata,
    getPoliceStationLazyTree, getPoliceStationTrees, getVillageInfo,