模型加载的更改

shuishen

2023-02-28 a1c2fecb75c9c8fef3345dee6d071faae6d3dccd

 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-09 14:52:36
 * @LastEditTime: 2023-02-28 14:16:16
 * @FilePath: \srs-police-affairs\src\components\map\index.vue
 * @Description: 公用地图组件
 * 
@@ -15,51 +15,104 @@
        <!-- 全屏控制按钮 -->
        <div class="screen-full-btn">
            <el-tooltip v-if="isFullscreen" content="缩放" placement="bottom" effect="dark">
                <i
                    class="fa fa-compress"
                    style="vertical-align: middle; cursor: pointer"
                    @click="fullscreenchange"
                ></i>
                <i class="fa fa-compress" style="vertical-align: middle; cursor: pointer" @click="fullscreenchange"></i>
            </el-tooltip>
            <el-tooltip v-if="!isFullscreen" content="全屏" placement="bottom" effect="dark">
                <i
                    class="fa fa-expand"
                    style="vertical-align: middle; cursor: pointer"
                    @click="fullscreenchange"
                ></i>
                <i class="fa fa-expand" style="vertical-align: middle; cursor: pointer" @click="fullscreenchange"></i>
            </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>

        <map-popup></map-popup>

        <assemble-box></assemble-box>
    </div>
</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

@@ -102,6 +155,7 @@
    'EPSG:4490_test:16',
    'EPSG:4490_test:17',
    'EPSG:4490_test:18',
    'EPSG:4490_test:19',
    'EPSG:4490_test:20',
    'EPSG:4490_test:21',
    'EPSG:4490_test:22',
@@ -128,6 +182,7 @@
            carTotal: 0,
            showImgBtn: false,
            imgtype: 0,
            tilesetLayerType: ''
        }
    },

@@ -153,6 +208,8 @@
                    }
                }
            })

            global.viewer.setPitchRange(-90, -45)

            // global.viewer.scene.globe.depthTestAgainstTerrain = false

@@ -218,15 +275,21 @@
            that.switchImg()

            // 外网
            // global.viewer.imageryLayers.addImageryProvider(
            //     new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
            //         url: 'http://t{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=e45274b0235bb913eceb393aabbf9c9c',
            //         subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
            //         format: 'image/jpeg',
            //         show: true,
            //         maximumLevel: 18
            //     })
            // )
            global.viewer.imageryLayers.addImageryProvider(
                new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
                    url: 'http://t{s}.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=e45274b0235bb913eceb393aabbf9c9c',
                    subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
                    format: 'image/jpeg',
                    show: true,
                    maximumLevel: 18
                })
            )

            global.viewer.imageryLayers.addImageryProvider(
                new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
                    url: '/sryx/{z}/{x}/{y}.png',
                })
            )

            // 设置地图初始位置，角度等
            global.viewer.camera.setView({
@@ -242,23 +305,6 @@
                    pitch: global.DC.Namespace.Cesium.Math.toRadians(-90),
                    roll: 0.0
                }
            })

            let sqTitleLayer = new global.DC.TilesetLayer('sqTitleLayer')
            global.viewer.addLayer(sqTitleLayer)
            let sqTileset = new global.DC.Tileset(
                // 内网
                // 'http://10.141.11.11:18080/sf3d/361102/model/wanda/tileset.json'
                // 外网
                'http://192.168.0.112:18080/sf3d/361102/model/wanda/tileset.json'
            )

            sqTileset.setHeight(-72)
            sqTitleLayer.addOverlay(sqTileset)

            sqTileset.on(global.DC.MouseEventType.CLICK, (e) => {
                // console.log(e, e.wgs84Position.alt, 989999)
                that.$EventBus.$emit('stdgetAoiByPt', { lng: e.wgs84Position.lng, lat: e.wgs84Position.lat, height: e.wgs84Position.alt })
            })

            let positions = [[117.951478782, 28.447896798, 0], [117.951469798, 28.447894686, 0], [117.951397357, 28.447698099, 0], [117.951505114, 28.447674695, 0], [117.951485465, 28.447619271, 0], [117.951706955, 28.447558541, 0], [117.951722755, 28.447611995, 0], [117.951834021, 28.447588427, 0], [117.951896863, 28.447789523, 0], [117.951478782, 28.447896798, 0]]
@@ -379,6 +425,10 @@
            that.mapRemoveLayer(params.layerName, params.type)
        })

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

        this.$EventBus.$on('mapClearLayer', (params) => {
            that.mapClearLayer(params.layerName, params.type)
        })
@@ -398,6 +448,10 @@

        this.$EventBus.$on('layerPolylineAdd', (params) => {
            that.layerPolylineAdd(params.layerName, params.positions, params.material, params.width, params.params, params.incident)
        })

        this.$EventBus.$on('getOverLayerID', (params) => {
            that.getOverLayerID(params.layerName, params.ids, params.cb)
        })

        this.$EventBus.$on('layerShow', (params) => {
@@ -447,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") {
@@ -460,7 +554,7 @@
            baseLayers != null && global.viewer.imageryLayers.remove(baseLayers)
            baseLayers = global.viewer.imageryLayers.addImageryProvider(
                new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
                    url: "http://10.141.11.11:80/ysapi/geoserver/gwc/service/wmts",
                    url: `${window.BASE_URL_CONFIG.VUE_APP_MAP_YX}/geoserver/gwc/service/wmts`,
                    layer: "test",
                    style: "",
                    format: "image/png",
@@ -481,7 +575,7 @@
            baseLayers != null && global.viewer.imageryLayers.remove(baseLayers)
            baseLayers = global.viewer.imageryLayers.addImageryProvider(
                new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
                    url: "http://10.141.11.11:8090/MapTileService/wmts?STORETYPE=merged-dat&PROJECTION=4326",
                    url: `${window.BASE_URL_CONFIG.VUE_APP_MAP_SL}/MapTileService/wmts?STORETYPE=merged-dat&PROJECTION=4326`,
                    layer: "wmts_4326_361100",
                    style: "default",
                    format: "image/png",
@@ -556,7 +650,9 @@
            } else if (type == 'ClusterLayer') {
                if (!layersObjcect[layerName]) layersObjcect[layerName] = null

                layersObjcect[layerName] = new global.DC.ClusterLayer(layerName)
                layersObjcect[layerName] = new global.DC.ClusterLayer(layerName, {
                    pixelRange: 4
                })

                layersObjcect[layerName].addTo(global.viewer)
            } else if (type == 'HeatLayer') {
@@ -578,6 +674,20 @@
                if (layersObjcect[layerName] && layersObjcect[layerName] != null) {
                    layersObjcect[layerName].remove()
                    layersObjcect[layerName] = null
                }
            }
        },

        /**
         * 删除图层指定面
         * @param {*} layerName 图层名称
         * @param {*} polygonName 面名称
         * @param {*} type 图层类型
         */
        mapRemovePolygonLayer (layerName, polygonName, type) {
            if (type == 'VectorLayer' || type == 'ClusterLayer' || type == 'HeatLayer') {
                if (layersObjcect[layerName] && layersObjcect[layerName] != null && polygonObj[polygonName] && polygonObj[polygonName] != null) {
                    layersObjcect[layerName].removeOverlay(polygonObj[polygonName])
                }
            }
        },
@@ -611,6 +721,7 @@
            }

            let pointElement
            let labelElement

            if (type == "billboard") {
                pointElement = new global.DC.Billboard(new global.DC.Position(Number(params.lng), Number(params.lat), Number(params.alt)), params.url)
@@ -619,19 +730,38 @@
                layersObjcect[layerName].addOverlay(pointElement)
                pointElement.on(global.DC.MouseEventType.CLICK, incident)
            } else if (type == "label") {
                pointElement = new global.DC.Label(new global.DC.Position(Number(params.lng), Number(params.lat), Number(params.alt)), params.text)
                pointElement.setStyle({
                labelElement = new global.DC.Label(new global.DC.Position(Number(params.lng), Number(params.lat), Number(params.alt)), params.text)
                labelElement.setStyle({
                    fillColor: global.DC.Color.CRIMSON,
                    style: global.DC.Namespace.Cesium.LabelStyle.FILL_AND_OUTLINE,
                    outlineColor: global.DC.Color.WHITE, // 边框颜色
                    outlineWidth: params.outW || 4, // 边框大小，
                    font: '16px sans-serif',
                    pixelOffset: { x: 0, y: -30 },
                    distanceDisplayCondition: distanceDisplayCondition
                })
                labelElement.attrParams = params
                layersObjcect[layerName].addOverlay(labelElement)
                labelElement.on(global.DC.MouseEventType.CLICK, incident)
            } else if (type == "billboardOrLabel") {
                pointElement = new global.DC.Billboard(new global.DC.Position(Number(params.lng), Number(params.lat), Number(params.alt)), params.url)
                pointElement.size = [32, 32]
                pointElement.attrParams = params
                layersObjcect[layerName].addOverlay(pointElement)
                pointElement.on(global.DC.MouseEventType.CLICK, incident)

                labelElement = new global.DC.Label(new global.DC.Position(Number(params.lng), Number(params.lat), Number(params.alt)), params.text)
                labelElement.setStyle({
                    fillColor: global.DC.Color.CRIMSON,
                    style: global.DC.Namespace.Cesium.LabelStyle.FILL_AND_OUTLINE,
                    outlineColor: global.DC.Color.WHITE, // 边框颜色
                    outlineWidth: 4, // 边框大小，
                    font: '16px sans-serif',
                    pixelOffset: { x: 0, y: -30 },
                    distanceDisplayCondition: distanceDisplayCondition
                    pixelOffset: { x: 0, y: -30 }
                })
                pointElement.attrParams = params
                layersObjcect[layerName].addOverlay(pointElement)
                pointElement.on(global.DC.MouseEventType.CLICK, incident)
                labelElement.attrParams = params
                layersObjcect[layerName].addOverlay(labelElement)
                labelElement.on(global.DC.MouseEventType.CLICK, incident)
            } else if (type == 'HeatPoint') {
                layersObjcect[layerName].setPositions(params.positions)
            }
@@ -691,6 +821,36 @@
            polyline.on(global.DC.MouseEventType.CLICK, incident)

            layersObjcect[layerName].addOverlay(polyline)
        },

        /**
         * @description: 通过ID获取图层
         * @return {*}
         */
        getOverLayerID (layerName, ids = [], cb) {

            const data = ids.reduce((pre, cur) => {

                if (
                    layersObjcect[layerName].getOverlay(cur.overlayId)
                    && layersObjcect[layerName].getOverlay(cur.overlayId) != undefined
                    && layersObjcect[layerName].getOverlay(cur.overlayId) != null
                    && layersObjcect[layerName].getOverlay(cur.overlayId) != ''
                ) {
                    pre.push(layersObjcect[layerName].getOverlay(cur.overlayId).attrParams)
                } else {
                    layersObjcect[layerName].eachOverlay(item => {
                        if (item.overlayId == cur.overlayId)
                            pre.push(item.attrParams)
                    })
                }

                return pre

            }, [])

            cb(data)

        },

        /**
@@ -754,8 +914,7 @@
                shadows: global.DC.Namespace.Cesium.ShadowMode.DISABLED
            })

            tilesetObject[titlesetName].setHeight(5)

            tilesetObject[titlesetName].setHeight(-72)

            tilesetLayer.addOverlay(tilesetObject[titlesetName])