模型加载的更改

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-01-07 11:09:38
 * @LastEditTime: 2023-02-28 14:16:16
 * @FilePath: \srs-police-affairs\src\components\map\index.vue
 * @Description: 公用地图组件
 * 
@@ -22,27 +22,97 @@
            </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

@@ -62,6 +132,34 @@
let tilesetObject = {
    sdTilesetLayer: null
}

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'

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

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

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

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

@@ -138,23 +239,23 @@
            global.viewer.addLayer(tilesetLayer)

            // 加载围栏
            let layer = new global.DC.VectorLayer('layer')
            global.viewer.addLayer(layer)
            // let layer = new global.DC.VectorLayer('layer')
            // global.viewer.addLayer(layer)

            let wall = new global.DC.Wall(
                '116.018142,28.688089,100.0; 116.017756,28.684648,100.0; 116.019507,28.677570,100.0; 116.033653,28.675634,100.0; 116.034223,28.681389,100.0; 116.033483,28.687265,100.0; 116.018142,28.688089,100.0'
            )
            // let wall = new global.DC.Wall(
            //     '116.018142,28.688089,100.0; 116.017756,28.684648,100.0; 116.019507,28.677570,100.0; 116.033653,28.675634,100.0; 116.034223,28.681389,100.0; 116.033483,28.687265,100.0; 116.018142,28.688089,100.0'
            // )

            wall.setStyle({
                material: new global.DC.WallTrailMaterialProperty({
                    color: global.DC.Namespace.Cesium.Color.fromBytes(
                        33, 150, 243,
                        200
                    ),
                    speed: 8
                })
            })
            layer.addOverlay(wall)
            // wall.setStyle({
            //     material: new global.DC.WallTrailMaterialProperty({
            //         color: global.DC.Namespace.Cesium.Color.fromBytes(
            //             33, 150, 243,
            //             200
            //         ),
            //         speed: 8
            //     })
            // })
            // layer.addOverlay(wall)



@@ -170,10 +271,13 @@
            // })
            // global.viewer.addTerrain(terrain)

            // 天地图 影像
            // 内网
            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',
                    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,
@@ -181,26 +285,18 @@
                })
            )


            // 上饶部署，内网使用的
            // 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(),
            //     })
            // )
            global.viewer.imageryLayers.addImageryProvider(
                new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
                    url: '/sryx/{z}/{x}/{y}.png',
                })
            )

            // 设置地图初始位置，角度等
            global.viewer.camera.setView({
                // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
                // fromDegrees()方法，将经纬度和高程转换为世界坐标
                destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
                    117.951478782, 28.447896798, 5000
                    117.951478782, 28.447896798, 20000
                ),
                orientation: {
                    // 指向
@@ -211,20 +307,7 @@
                }
            })

            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'
            )
            sqTileset.setHeight(12)
            sqTitleLayer.addOverlay(sqTileset)

            // sqTileset.on(global.DC.MouseEventType.CLICK, (e) => {
            //     console.log(e)
            // })

            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
                return item
@@ -238,25 +321,26 @@
            // 原生Cesium加载多边体
            let floorEntitysLayers = new global.DC.Namespace.Cesium.CustomDataSource("floorEntitysLayers")
            global.viewer.dataSources.add(floorEntitysLayers)
            let flootEntitysEntites = floorEntitysLayers.entities
            flootEntitysEntites = floorEntitysLayers.entities

            let floorPositions = positions.reduce((prev, curr, index, arr) => {
                curr.forEach(item => {
                    prev.push(item)
                })
                return prev
            }, [])
            // let floorPositions = positions.reduce((prev, curr, index, arr) => {
            //     curr.forEach(item => {
            //         prev.push(item)
            //     })
            //     return prev
            // }, [])

            flootEntitysEntites.add({
                polygon: {
                    hierarchy: global.DC.Namespace.Cesium.Cartesian3.fromDegreesArrayHeights(floorPositions),
                    heightReference: global.DC.Namespace.Cesium.HeightReference.RELATIVE_TO_GROUND,
                    extrudedHeightReference: global.DC.Namespace.Cesium.HeightReference.RELATIVE_TO_GROUND,
                    height: 70,
                    extrudedHeight: 80,
                    material: global.DC.Namespace.Cesium.Color.RED.withAlpha(0.5),
                }
            })
            // flootEntitysEntites.add({
            //     polygon: {
            //         hierarchy: global.DC.Namespace.Cesium.Cartesian3.fromDegreesArrayHeights(floorPositions),
            //         heightReference: global.DC.Namespace.Cesium.HeightReference.RELATIVE_TO_GROUND,
            //         extrudedHeightReference: global.DC.Namespace.Cesium.HeightReference.RELATIVE_TO_GROUND,
            //         height: 70,
            //         extrudedHeight: 80,
            //         material: global.DC.Namespace.Cesium.Color.RED.withAlpha(0.5),
            //     }
            // })


            // console.log(floorPositions)

@@ -291,6 +375,11 @@
            // 比例尺
            // global.viewer.distanceLegend.enable = true

            // let arr1 = [[117.9552436, 28.44500025], [117.9557116, 28.44429919], [117.9574856, 28.44444285]]

            // arr1.forEach(item => {
            //     console.log(global.DC.CoordTransform.GCJ02ToWGS84(item[0], item[1]), 2222)
            // })
        }

        global.DC.ready(initViewer)
@@ -336,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)
        })
@@ -355,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) => {
@@ -379,45 +476,120 @@
            that.flytoLayer(params.polygonName, params.duration)
        })

        this.$EventBus.$on('showHouse3D', (params) => {
            that.showHouse3D(params.positions, params.minHeight, params.maxHeight)
        })

        this.$EventBus.$on('clearHouse3D', () => {
            that.clearHouse3D()
        })

        // 重写定位方法
        const homeCenter = [117.99311892441567, 28.46938164123123]
        this.$nextTick(() => {
            document.querySelector('.dc-zoom-controller').children[1].onclick =
                function () {
                    that.$EventBus.$emit('toPosition', {
                        siteJd: homeCenter[0] + 0.046,
                        siteWd: homeCenter[1] - 0.36,
                        siteGd: 36000,
                        siteHeading: -3,
                        sitePitch: -45
                    })
                }
        })
    },

    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") {
                this.$router.push({ path: '/layout/house', query: { searchName: 'xxx小区' } })
            }
        },

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

        /**
         * @description: 全屏控制
         * @return {*} 无返回值
@@ -450,6 +622,7 @@
                this.isFullscreen = true
            }
        },

        /**
         * 在图层中添加实体(点)
         * @param {*} item 图标
@@ -477,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') {
@@ -499,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])
                }
            }
        },
@@ -532,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)
@@ -540,23 +730,41 @@
                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)
            }


        },

@@ -613,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)

        },

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

            tilesetObject[titlesetName].setHeight(5)

            tilesetObject[titlesetName].setHeight(-72)

            tilesetLayer.addOverlay(tilesetObject[titlesetName])

@@ -697,6 +934,39 @@
                tilesetObject[titlesetName] = null
            }
        },

        /**
        * 建筑高亮显示
        * @param {*} positions 建筑范围坐标
        * @param {*} 
        */
        showHouse3D (positions, minHeight, maxHeight) {
            flootEntitysEntites.removeAll()
            let housePositions = JSON.parse(positions).coordinates[0]

            let floorPositions = housePositions.reduce((prev, curr) => {
                curr.forEach(item => {
                    prev.push(item)
                })
                return prev
            }, [])

            flootEntitysEntites.add({
                polygon: {
                    hierarchy: global.DC.Namespace.Cesium.Cartesian3.fromDegreesArrayHeights(floorPositions),
                    heightReference: global.DC.Namespace.Cesium.HeightReference.RELATIVE_TO_GROUND,
                    extrudedHeightReference: global.DC.Namespace.Cesium.HeightReference.RELATIVE_TO_GROUND,
                    height: minHeight,
                    extrudedHeight: maxHeight,
                    material: global.DC.Namespace.Cesium.Color.RED.withAlpha(0.5),
                }
            })
        },

        // 清除建筑3D
        clearHouse3D () {
            flootEntitysEntites.removeAll()
        },
    },

}