模型加载的更改

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-08 16:49:29
 * @LastEditTime: 2023-02-28 14:16:16
 * @FilePath: \srs-police-affairs\src\components\map\index.vue
 * @Description: 公用地图组件
 * 
@@ -22,28 +22,97 @@
            </el-tooltip>
        </div>
        <!-- 切换矢量图按钮 -->
        <div style="display: none !important;" 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

@@ -66,6 +135,32 @@

let flootEntitysEntites = null

const ysLabels = [
    'EPSG:4490_test:0',
    'EPSG:4490_test:1',
    'EPSG:4490_test:2',
    'EPSG:4490_test:3',
    'EPSG:4490_test:4',
    'EPSG:4490_test:5',
    'EPSG:4490_test:6',
    'EPSG:4490_test:7',
    'EPSG:4490_test:8',
    'EPSG:4490_test:9',
    'EPSG:4490_test:10',
    'EPSG:4490_test:11',
    'EPSG:4490_test:12',
    'EPSG:4490_test:13',
    'EPSG:4490_test:14',
    'EPSG:4490_test:15',
    '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',
]

import mapPopup from './components/mapPopup.vue'

export default {
@@ -87,6 +182,7 @@
            carTotal: 0,
            showImgBtn: false,
            imgtype: 0,
            tilesetLayerType: ''
        }
    },

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

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

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

@@ -173,53 +271,25 @@
            // })
            // global.viewer.addTerrain(terrain)

            // 天地图 影像
            // 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
            //     })
            // )
            // 内网
            that.switchImg()


            // 上饶部署，内网使用的
            // 外网
            global.viewer.imageryLayers.addImageryProvider(
                new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
                    url: "http://10.141.11.11:8090/MapTileService/wmts?STORETYPE=merged-dat&PROJECTION=4326",
                    layer: "wmts_4326_361100",
                    style: "default",
                    format: "image/png",
                    tileMatrixSetID: "c",
                    tileMatrixLabels: new Array(18).fill(0).map((v, i) => i + 1),
                    tilingScheme: new global.DC.Namespace.Cesium.GeographicTilingScheme(),
                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: 'http://10.141.11.11:80/ysapi/geoserver/gwc/service/wmts/{z}/{y}/{x}.png',
                    url: '/sryx/{z}/{x}/{y}.png',
                })
            )

            // 影像图层
            // const ysWmts = global.viewer.imageryLayers.addImageryProvider(
            //     new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
            //         url: "http://10.141.11.11:80/ysapi/geoserver/gwc/service/wmts",
            //         layer: "test",
            //         style: "",
            //         format: "image/png",
            //         tileMatrixSetID: gridsetName,
            //         tileMatrixLabels: gridNames.map(item => {
            //             let arr = item.split(':')
            //             arr[2] = arr[2] - 1
            //             return arr.join(':')
            //         }),
            //         // tilingScheme: new global.DC.Namespace.Cesium.GeographicTilingScheme(),
            //     })
            // )

            // 设置地图初始位置，角度等
            global.viewer.camera.setView({
@@ -237,23 +307,6 @@
                }
            })

            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, 989999)
            })

            // let positions = [[117.9514788, 28.4478968, 0], [117.9514698, 28.4478947, 0], [117.9513974, 28.4476981, 0], [117.9515047, 28.4476748, 0], [117.9515289, 28.4476939, 0], [117.9515508, 28.447755, 0], [117.9516278, 28.4477353, 0], [117.9516623, 28.4478497, 0], [117.9514788, 28.4478968, 0]]

            // 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]]
            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]]
            let MIN_F_H = positions.map(item => {
                item[2] = 70
@@ -287,9 +340,6 @@
            //         material: global.DC.Namespace.Cesium.Color.RED.withAlpha(0.5),
            //     }
            // })





            // console.log(floorPositions)
@@ -375,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)
        })
@@ -394,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) => {
@@ -443,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") {
@@ -453,32 +551,42 @@
        switchImg () {
            // 天地图 影像
            this.imgtype = 0
            global.viewer.imageryLayers.remove(baseLayers)
            baseLayers != null && global.viewer.imageryLayers.remove(baseLayers)
            baseLayers = 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
                new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
                    url: `${window.BASE_URL_CONFIG.VUE_APP_MAP_YX}/geoserver/gwc/service/wmts`,
                    layer: "test",
                    style: "",
                    format: "image/png",
                    tileMatrixSetID: "EPSG:4490_test",
                    tileMatrixLabels: ysLabels,
                    tilingScheme: new global.DC.Namespace.Cesium.GeographicTilingScheme(),
                })
            )

            baseLayers.contrast = 0.8

            this.showImgBtn = false
        },

        switchElec () {
            // 天地图 矢量
            this.imgtype = 1
            global.viewer.imageryLayers.remove(baseLayers)
            baseLayers != null && global.viewer.imageryLayers.remove(baseLayers)
            baseLayers = 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
                new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
                    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",
                    tileMatrixSetID: "c",
                    tileMatrixLabels: new Array(18).fill(0).map((v, i) => i + 1),
                    tilingScheme: new global.DC.Namespace.Cesium.GeographicTilingScheme(),
                })
            )

            baseLayers.contrast = 1.0

            this.showImgBtn = false
        },

@@ -542,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') {
@@ -564,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])
                }
            }
        },
@@ -597,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)
@@ -605,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)
            }
@@ -677,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)

        },

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

            tilesetObject[titlesetName].setHeight(5)

            tilesetObject[titlesetName].setHeight(-72)

            tilesetLayer.addOverlay(tilesetObject[titlesetName])