guanqb
2023-02-28 6ff9bf8cffefc6045a1a288df413aa69b59f0bbf
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-23 17:31:31
 * @LastEditTime: 2023-02-28 14:16:16
 * @FilePath: \srs-police-affairs\src\components\map\index.vue
 * @Description: 公用地图组件
 * 
@@ -22,18 +22,38 @@
            </el-tooltip>
        </div>
        <!-- 切换矢量图按钮 -->
        <div class="image-switch-icon-btn" title="切换影像" @mouseover="showImgBtn = true" @mouseleave="showImgBtn = false">
            <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" @mouseover="showImgBtn = true"
                @mouseleave="showImgBtn = false">
                <div class="img" @click="switchImg">
                    <span :class="{ on: imgtype == 0 }">影像</span>
            <div class="image-switch-img-btn" v-show="showImgBtn">
                <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>
@@ -45,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
@@ -114,6 +182,7 @@
            carTotal: 0,
            showImgBtn: false,
            imgtype: 0,
            tilesetLayerType: ''
        }
    },
@@ -357,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) => {
@@ -432,6 +501,46 @@
    },
    methods: {
        /**
         * @description: 高精度模型和轻量模型切换
         * @param {*} type
         * @return {*}
         */
        highOrLightChange (type) {
            this.removeMxTileset('sdTilesetLayer', this.housingIndent)
            // this.addMxTileset('sdTilesetLayer', `${tile3DUrl}/sf3d/361102/model/wanda/tileset.json`, this.housingIndent)
            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) {
            if (this.$route.path == '/layout/house') {
                this.$EventBus.$emit('housingIndent', e)
            }
        },
        // 模型的点击事件
        tilesetClick (e) {
            if (this.$route.path != "/layout/house") {
@@ -575,9 +684,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])
                }
            }