首页布局调整

guanqb

2022-10-12 2a3bfbc64a74f3afaeced0756fcb2e4f60b94a24

 src/pcviews/homee/Map/index.vue

@@ -1,21 +1,288 @@
<template>
    <div class="container"></div>
    <div id="viewer-container" style="width:100%;height:100%">
        <div class="mapBtnList">
            <div class="btn1 mapBtn" @click.stop="fullImg">全图</div>
            <div class="btn2 mapBtn" @click.stop="ranging">距离</div>
            <div class="btn3 mapBtn" @click.stop="area">面积</div>
            <div class="btn4 mapBtn" @click.stop="ranging">全景</div>
            <div class="btn5 mapBtn" @click.stop="clear">清除</div>
        </div>
    </div>
</template>

<script>
export default {
import {
    getSceneList
} from '@/api/pc/leftNav/index'
const sceneLayer = null

let baseLayer = []

let tilesetLayer, tileset

import baseLayerImgUrl from '@/assets/baseUrl'

export default {
    mounted () {
        const that = this
        function initViewer () {
            global.viewer = new DC.Viewer('viewer-container')

            // 天地图 影像
            global.viewer.imageryLayers.addImageryProvider(
                new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
                    url: 'https://t{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=789e558be762ff832392a0393fd8a4f1',
                    subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
                    format: 'image/jpeg',
                    show: true,
                    maximumLevel: 18
                })
            )
            global.viewer.camera.setView({
                // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
                // fromDegrees()方法，将经纬度和高程转换为世界坐标
                destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
                    116.027429, 28.681978, 800
                ),
                orientation: {
                    // 指向
                    heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0),
                    // 视角
                    pitch: global.DC.Namespace.Cesium.Math.toRadians(-90),
                    roll: 0.0
                }
            })
            // that.addBaseLayer()

            global.viewer.use(new global.DC.Measure())

            that.addMxTileset()
        }

        global.DC.ready(initViewer)
    },

    methods: {

        addMxTileset () {
            const that = this
            tilesetLayer = new global.DC.TilesetLayer('tilesetLayer')
            global.viewer.addLayer(tilesetLayer)
            tileset = new global.DC.Tileset('/zhxy/mx/tileset.json', {
                luminanceAtZenith: 0.4,
                // cullWithChildrenBounds: false,
                // cullRequestsWhileMoving: false,
                // skipLevelOfDetail: false,
                shadows: global.DC.Namespace.Cesium.ShadowMode.DISABLED
            })
            tileset.setHeight(5)
            tilesetLayer.addOverlay(tileset)
            global.viewer.flyTo(tileset)
            // tileset.on(global.DC.MouseEventType.CLICK, that.tilesetClick)
        },

        getViewExtend () {
            const params = {}
            const extend = global.viewer.camera.computeViewRectangle()
            if (typeof extend === 'undefined') {
                // 2D下会可能拾取不到坐标，extend返回undefined,所以做以下转换
                const canvas = global.viewer.scene.canvas
                const upperLeft = new global.DC.Namespace.Cesium.Cartesian2(0, 0)// canvas左上角坐标转2d坐标
                const lowerRight = new global.DC.Namespace.Cesium.Cartesian2(
                    canvas.clientWidth,
                    canvas.clientHeight
                )// canvas右下角坐标转2d坐标

                const ellipsoid = global.viewer.scene.globe.ellipsoid
                const upperLeft3 = global.viewer.camera.pickEllipsoid(
                    upperLeft,
                    ellipsoid
                )// 2D转3D世界坐标

                const lowerRight3 = global.viewer.camera.pickEllipsoid(
                    lowerRight,
                    ellipsoid
                )// 2D转3D世界坐标

                const upperLeftCartographic = global.viewer.scene.globe.ellipsoid.cartesianToCartographic(
                    upperLeft3
                )// 3D世界坐标转弧度
                const lowerRightCartographic = global.viewer.scene.globe.ellipsoid.cartesianToCartographic(
                    lowerRight3
                )// 3D世界坐标转弧度

                const minx = global.DC.Namespace.Cesium.Math.toDegrees(upperLeftCartographic.longitude)// 弧度转经纬度
                const maxx = global.DC.Namespace.Cesium.Math.toDegrees(lowerRightCartographic.longitude)// 弧度转经纬度

                const miny = global.DC.Namespace.Cesium.Math.toDegrees(lowerRightCartographic.latitude)// 弧度转经纬度
                const maxy = global.DC.Namespace.Cesium.Math.toDegrees(upperLeftCartographic.latitude)// 弧度转经纬度

                params.minx = minx
                params.maxx = maxx
                params.miny = miny
                params.maxy = maxy
            } else {
                // 3D获取方式
                params.maxx = global.DC.Namespace.Cesium.Math.toDegrees(extend.east)
                params.maxy = global.DC.Namespace.Cesium.Math.toDegrees(extend.north)

                params.minx = global.DC.Namespace.Cesium.Math.toDegrees(extend.west)
                params.miny = global.DC.Namespace.Cesium.Math.toDegrees(extend.south)
            }
            return params // 返回屏幕所在经纬度范围
        },

        addBaseLayer () {
            if (baseLayer.length > 0) {
                baseLayer.forEach(item => {
                    global.viewer.imageryLayers.remove(
                        item.layer
                    )
                })
            }

            baseLayer = []

            this.updateBaseLayer(false)
        },

        updateBaseLayer (flag) {
            const extent = this.getViewExtend()

            const array = baseLayerImgUrl.filter(item => {
                return item[1000]
            })

            array[0][1000].forEach(sm => {
                let startFlag = false
                if (flag == true) {
                    startFlag = baseLayer.some(dt => {
                        return dt.id == sm.id
                    })
                }

                if (startFlag == true) return

                if (
                    (
                        sm.rectangle[0] > extent.minx &&
                        sm.rectangle[1] > extent.miny &&
                        sm.rectangle[2] < extent.maxx &&
                        sm.rectangle[3] < extent.maxy
                    ) ||
                    (
                        sm.rectangle[0] < extent.minx &&
                        sm.rectangle[1] < extent.maxy &&
                        sm.rectangle[2] > extent.minx &&
                        sm.rectangle[3] > extent.maxy
                    ) ||
                    (
                        sm.rectangle[0] < extent.maxx &&
                        sm.rectangle[1] < extent.maxy &&
                        sm.rectangle[2] > extent.maxx &&
                        sm.rectangle[3] > extent.maxy
                    ) ||
                    (
                        sm.rectangle[0] < extent.maxx &&
                        sm.rectangle[1] < extent.miny &&
                        sm.rectangle[2] > extent.maxx &&
                        sm.rectangle[3] > extent.miny
                    ) ||
                    (
                        sm.rectangle[0] < extent.minx &&
                        sm.rectangle[1] < extent.miny &&
                        sm.rectangle[2] > extent.minx &&
                        sm.rectangle[3] > extent.miny
                    ) ||
                    (
                        sm.rectangle[0] > extent.minx &&
                        sm.rectangle[1] < extent.maxy &&
                        sm.rectangle[2] < extent.maxx &&
                        sm.rectangle[3] > extent.maxy
                    ) ||
                    (
                        sm.rectangle[0] > extent.minx &&
                        sm.rectangle[1] > extent.miny &&
                        sm.rectangle[2] > extent.maxx &&
                        sm.rectangle[3] < extent.maxy
                    ) ||
                    (
                        sm.rectangle[0] > extent.minx &&
                        sm.rectangle[1] < extent.miny &&
                        sm.rectangle[2] < extent.maxx &&
                        sm.rectangle[3] > extent.miny
                    ) ||
                    (
                        sm.rectangle[0] < extent.minx &&
                        sm.rectangle[1] > extent.miny &&
                        sm.rectangle[2] > extent.minx &&
                        sm.rectangle[3] < extent.maxy
                    )
                ) {
                    var layer = global.viewer.imageryLayers.addImageryProvider(new global.DC.Namespace.Cesium.SingleTileImageryProvider({
                        url: sm.url,
                        rectangle: global.DC.Namespace.Cesium.Rectangle.fromDegrees(sm.rectangle[0], sm.rectangle[1], sm.rectangle[2], sm.rectangle[3])
                    }))

                    baseLayer.push({ layer, id: sm.id })
                }
            })
        },
        ranging () {
            global.viewer.measure.distanceSurface()
        },
        area () {
            global.viewer.measure.area()
        },
        clear () {
            global.viewer.measure.deactivate()
        },
        fullImg () {
            this.addMxTileset()
        },
    }
}

</script>

<style lang="scss" scoped>
.container {
    width: 1020px;
    height: 600px;
    background: url(/zhxy/img/home/map.png) no-repeat;
    background-size: contain;
    border: 1px solid #28f2ff;
<style lang="scss">
.mapBtnList {
    position: absolute;
    bottom: 10px;
    left: 50%;
    margin-left: -128px;
    display: flex;
    box-sizing: border-box;
    // display: none;
    .mapBtn {
        width: 44px;
        height: 44px;
        background-position: -6px -6px;
        z-index: 2;
        margin-left: 5px;
        color: #28f2ff;
        text-align: center;
        line-height: 68px;
        font-size: 14px;
        cursor: default;
        border: 1px solid transparent;
    }
    .btn1 {
        background-image: url(/zhxy/img/home/full-img.png);
    }
    .btn2 {
        background-image: url(/zhxy/img/home/ranging.png);
    }
    .btn3 {
        background-image: url(/zhxy/img/home/area.png);
    }
    .btn4 {
        background-image: url(/zhxy/img/home/panorama.png);
    }
    .btn5 {
        background-image: url(/zhxy/img/home/clear.png);
    }
}
.mapBtnList :hover {
    border: 1px solid white !important;
}
</style>