升级加s3m及加科技感

shuishen

2022-03-18 d3e857d7c56671a80f82aaf280aea15b653fc664

升级加s3m及加科技感

 package-lock.json

@@ -1116,9 +1116,9 @@
      }
    },
    "@dvgis/dc-sdk": {
      "version": "2.5.0",
      "resolved": "https://registry.nlark.com/@dvgis/dc-sdk/download/@dvgis/dc-sdk-2.5.0.tgz",
      "integrity": "sha1-rUyY9+p1GUiPr0xA8TFenQnIsIk="
      "version": "2.11.0",
      "resolved": "https://registry.npmjs.org/@dvgis/dc-sdk/-/dc-sdk-2.11.0.tgz",
      "integrity": "sha512-eX1W/ak3mmZS64y/La5Nx1YNC+5H97Ex23du1La8247bElnMfcJ6SyyPyzjEgpjyd67BtaPVe9EG26kTbNr+jQ=="
    },
    "@fullcalendar/common": {
      "version": "5.10.1",

 package.json

@@ -9,7 +9,7 @@
    },
    "dependencies": {
        "@amap/amap-vue": "^1.4.0",
        "@dvgis/dc-sdk": "^2.5.0",
        "@dvgis/dc-sdk": "^2.11.0",
        "@fullcalendar/core": "^5.10.1",
        "@fullcalendar/daygrid": "^5.10.1",
        "@fullcalendar/interaction": "^5.10.1",

 src/components/map/components/dimension.vue

@@ -1,5 +1,21 @@
<template>
    <div class="dimension-cut">
        <el-button
            v-show="btnGroupShow"
            size="mini"
            class="three-stm"
            type="primary"
            @click="locationSTM"
        >s3m</el-button>

        <el-button
            v-show="btnGroupShow"
            size="mini"
            class="sat-stm"
            type="primary"
            @click="locationSAT"
        >科技</el-button>

        <el-radio-group v-model="dimensionValue" size="medium" @change="dimensionChange">
            <el-radio-button label="三 维"></el-radio-button>
            <el-radio-button label="真三维"></el-radio-button>
@@ -26,12 +42,18 @@

let select = null

let streenMlayer = null

let layerSat = null
let layerSATtwo = null

const wallLayer = null

export default {
    name: 'dimension',
    data () {
        return {
            btnGroupShow: false,
            dimensionValue: '三 维',
            // 建筑2.5D地图
            // 建筑2.5D面数据
@@ -537,6 +559,10 @@
        }
    },
    methods: {
        locationSTM () {
            global.viewer.flyToPosition('116.45793269658417,39.92711385557482,617.5967826044838,181.95219395269424,-21.286437065473546')
        },

        mouseMoveEvent (e) {
            var that = this

@@ -801,12 +827,82 @@
            }
        },

        locationSAT () {
            global.viewer.flyToPosition('121.4941629,31.2091462,1859.56,0,-28.71')
        },

        // 科技感删除
        removeSAT () {
            global.viewer.remove(layerSat)
            global.viewer.remove(layerSATtwo)
        },

        // 科技感添加
        createSAT () {
            function generatePosition (num, isAdd) {
                const list = []
                for (let i = 0; i < num; i++) {
                    const lng = 121.49536592256028 + Math.random() * 0.04 * (isAdd ? 1 : -1)
                    const lat = 31.241616722278213 + Math.random() * 0.04 * (isAdd ? 1 : -1)
                    list.push({ lng, lat })
                }
                return list
            }

            layerSat = new global.DC.TilesetLayer('layerSat').addTo(global.viewer)

            const build = new global.DC.Tileset(
                'http://resource.dvgis.cn/data/3dtiles/ljz/tileset.json',
                { skipLevels: true }
            )

            const fs = `
                        varying vec3 v_positionEC;
                        void main(void){
                            vec4 position = czm_inverseModelView * vec4(v_positionEC,1); // 位置
                            float glowRange = 100.0; // 光环的移动范围(高度)
                            gl_FragColor = vec4(0.2,  0.5, 1.0, 1.0); // 颜色
                            gl_FragColor *= vec4(vec3(position.z / 100.0), 1.0); // 渐变
                            // 动态光环
                            float time = fract(czm_frameNumber / 360.0);
                            time = abs(time - 0.5) * 2.0;
                            float diff = step(0.005, abs( clamp(position.z / glowRange, 0.0, 1.0) - time));
                            gl_FragColor.rgb += gl_FragColor.rgb * (1.0 - diff);
                        }
                        `
            build.setCustomShader(fs)

            layerSat.addOverlay(build)

            layerSATtwo = new global.DC.PrimitiveLayer('layer').addTo(global.viewer)

            let positions = generatePosition(50, true)

            positions = positions.concat(generatePosition(50))

            positions.forEach(item => {
                const position = global.DC.Position.fromObject(item)
                const end = position.copy()
                end.alt = 5000 * Math.random()
                const line = new global.DC.FlowLinePrimitive([position, end], 0.5)
                line.setStyle({
                    speed: 6 * Math.random(),
                    color: global.DC.Color.fromCssColorString('rgb(141,172,172)'),
                    percent: 0.1,
                    gradient: 0.01
                })
                layerSATtwo.addOverlay(line)
            })
        },

        dimensionChange () {
            var that = this

            that.$store.commit('SET_TWOORTHREE', that.dimensionValue)

            if (that.dimensionValue == '真三维') {
                that.btnGroupShow = true
                that.createSAT()
                global.viewer.off(global.DC.MouseEventType.MOUSE_MOVE, that.mouseMoveEvent)
                global.viewer.off(global.DC.SceneEventType.CAMERA_CHANGED, that.mapCameraEvent)
                that.removeLayers()
@@ -827,6 +923,9 @@
                tilesetLayer.addOverlay(tileset)
                tileset.on(global.DC.MouseEventType.CLICK, that.tilesetClick)
                tilesetLayer.show = true

                streenMlayer = new global.DC.S3MLayer('streenMlayer', 'http://resource.dvgis.cn/data/3dtiles/CBD/cbd.scp')
                global.viewer.addLayer(streenMlayer)
                // 最小
                global.viewer.scene.screenSpaceCameraController.minimumZoomDistance = 1.0
                // 最大
@@ -852,6 +951,8 @@
                    }
                })
            } else {
                that.btnGroupShow = false
                that.removeSAT()
                global.viewer.on(global.DC.MouseEventType.MOUSE_MOVE, that.mouseMoveEvent)
                global.viewer.on(global.DC.SceneEventType.CAMERA_CHANGED, that.mapCameraEvent)
                tileset.off(global.DC.MouseEventType.CLICK, that.tilesetClick)
@@ -860,6 +961,8 @@
                global.viewer.removeLayer(tilesetLayer)
                tileset = null
                tilesetLayer = null
                global.viewer.removeLayer(streenMlayer)
                streenMlayer = null
                that.createdLayers()

                baseMapLayer = global.viewer.imageryLayers.addImageryProvider(new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
@@ -904,4 +1007,18 @@
    // height: 40px;
    z-index: 1;
}

.three-stm {
    position: fixed;
    top: 66px;
    right: 10px;
    z-index: 99;
}

.sat-stm {
    position: fixed;
    top: 66px;
    right: 75px;
    z-index: 99;
}
</style>

 src/components/map/index.vue

@@ -237,9 +237,9 @@
                }
            })

            const chartLayer = new global.DC.ChartLayer('busLayer').addTo(global.viewer)
            // const chartLayer = new global.DC.ChartLayer('busLayer').addTo(global.viewer)

            chartLayer.setOption(that.busPathsInit())
            // chartLayer.setOption(that.busPathsInit())

            // global.viewer.scene.backgroundColor = global.DC.Namespace.Cesium.Color.fromBytes(245, 244, 238)


 src/main.js

@@ -28,6 +28,7 @@

import DcChart from '@dvgis/dc-sdk/dist/dc.chart.min' // chart包
// import DcMapv from '@dvgis/dc-sdk/dist/dc.mapv.min' // mapv包
import DcS3M from '@dvgis/dc-sdk/dist/dc.s3m.min' // DcS3M包

import '@dvgis/dc-sdk/dist/dc.core.min.css'

@@ -62,6 +63,7 @@

DC.use(DcChart) // 安装DC图标库，使用前确保echarts为全局函数
// DC.use(DcMapv) // 安装Mapv库
DC.use(DcS3M) // 安装DcS3M库

Vue.use(ElementUI)
Vue.use(VueAxios, axios)