|
|
@@ -0,0 +1,401 @@
|
|
|
+<script setup>
|
|
|
+ import {
|
|
|
+ inject
|
|
|
+ } from "vue";
|
|
|
+
|
|
|
+ const getMapInstance = inject("getMapInstance");
|
|
|
+ jt3d = getMapInstance();
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <div class="jt-weather-effects">
|
|
|
+ <el-collapse v-model="activeName" accordion>
|
|
|
+ <el-collapse-item name="特效效果">
|
|
|
+ <template #title>
|
|
|
+ <span class='iconfont icon-tianqizitiku43' />天气特效
|
|
|
+ </template>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="8" v-for="(item,index) in weather" @click="handleWeatherEffects(item.type,index)">
|
|
|
+ <el-avatar shape="circle" style="width:70rem;height: 70rem;" :class="currentIndex===index?'selectStyle':'defaultStyle'">
|
|
|
+ <i :class="[item.icon,currentIndex===index?'selectFontStyle':'']" />
|
|
|
+ </el-avatar>
|
|
|
+ <div style="margin-top: 5rem; font-size: 14rem;" :class="currentIndex===index?'selectFontStyle':''">{{item.label}}</div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-collapse-item>
|
|
|
+ <el-collapse-item name="天空样式">
|
|
|
+ <template #title>
|
|
|
+ <span class='iconfont icon-tianqizitiku43' />天空样式
|
|
|
+ </template>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="8" v-for="(item,index) in skybox" @click="handleSkybox(item.type,index)">
|
|
|
+ <!-- <el-avatar :src="item.url" /> -->
|
|
|
+ <el-avatar shape="circle" src="https://empty" style="width:70rem;height: 70rem;">
|
|
|
+ <img :src="item.url" />
|
|
|
+ </el-avatar>
|
|
|
+ <div style="margin-top: 5rem; font-size: 14rem;" :class="currentIndex===index?'selectFontStyle':''">{{item.label}}</div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-collapse-item>
|
|
|
+ <el-collapse-item name="粒子效果">
|
|
|
+ <template #title>
|
|
|
+ <span class='iconfont icon-tianqizitiku43' />粒子效果
|
|
|
+ </template>
|
|
|
+ <div class="el-collapse-item__content">
|
|
|
+ <el-button color="rgb(20 136 255)" @click="ParticleSystem('add')">加载粒子效果</el-button>
|
|
|
+ <el-button color="rgb(255 100 100)" @click="ParticleSystem('remove')"><span style="color: #fff;">清除粒子效果</span></el-button>
|
|
|
+ </div>
|
|
|
+ </el-collapse-item>
|
|
|
+ <el-collapse-item name="热力图">
|
|
|
+ <template #title>
|
|
|
+ <span class='iconfont icon-tianqizitiku43' />热力图
|
|
|
+ </template>
|
|
|
+ <div class="el-collapse-item__content">
|
|
|
+ <el-button color="rgb(20 136 255)" @click="HeatMap('add')">添加热力图</el-button>
|
|
|
+ <el-button color="rgb(255 100 100)" @click="HeatMap('remove')"><span style="color: #fff;">清除热力图</span></el-button>
|
|
|
+ </div>
|
|
|
+ </el-collapse-item>
|
|
|
+ </el-collapse>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ let jt3d = undefined;
|
|
|
+
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ activeName: "特效效果",
|
|
|
+ currentIndex: -1,
|
|
|
+ weather: [{
|
|
|
+ label: '雨天',
|
|
|
+ type: 'rain',
|
|
|
+ number: 0,
|
|
|
+ icon: 'iconfont icon-yu'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '雪天',
|
|
|
+ type: 'snow',
|
|
|
+ number: 1,
|
|
|
+ icon: 'iconfont icon-huaban'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '雾天',
|
|
|
+ type: 'fog',
|
|
|
+ number: 2,
|
|
|
+ icon: 'iconfont icon-tianqizitiku43'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '关闭天气',
|
|
|
+ type: 'remove',
|
|
|
+ number: 3,
|
|
|
+ icon: 'iconfont icon-cloudofftianqiguanbi'
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ skybox: [{
|
|
|
+ label: '晚霞',
|
|
|
+ type: '晚霞',
|
|
|
+ number: 0,
|
|
|
+ url: 'jt3dSDK/imgs/skybox/01/py.png'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '蓝天',
|
|
|
+ type: '蓝天',
|
|
|
+ number: 1,
|
|
|
+ url: 'jt3dSDK/imgs/skybox/03/py.jpg'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '阴天',
|
|
|
+ type: '阴天',
|
|
|
+ number: 2,
|
|
|
+ url: 'jt3dSDK/imgs/skybox/02/py.jpg'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '蓝色星空',
|
|
|
+ type: '蓝色星空',
|
|
|
+ number: 3,
|
|
|
+ url: 'jt3dSDK/imgs/skybox/05/pz.jpg'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '紫色星空',
|
|
|
+ type: '紫色星空',
|
|
|
+ number: 4,
|
|
|
+ url: 'jt3dSDK/imgs/skybox/04/ny.jpg'
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ props: {},
|
|
|
+ watch: {},
|
|
|
+
|
|
|
+ /* 方法 */
|
|
|
+ methods: {
|
|
|
+ /**
|
|
|
+ * 天空盒子事件
|
|
|
+ * @param {Object} type 天空盒子类型
|
|
|
+ * @param {Object} index 第几个被选中
|
|
|
+ */
|
|
|
+ handleSkybox(type, index) {
|
|
|
+ this.currentIndex = index;
|
|
|
+
|
|
|
+ jt3d.SceneEffects.SkyBox.setGroundSkyBox({
|
|
|
+ type: type
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 天气特效事件
|
|
|
+ * @param {Object} type 天气类型
|
|
|
+ * @param {Object} index 第几个被选中
|
|
|
+ */
|
|
|
+ handleWeatherEffects(type, index) {
|
|
|
+ this.currentIndex = index;
|
|
|
+ switch (type) {
|
|
|
+ case "rain": //雨天
|
|
|
+ jt3d.SceneEffects.Weather.removeEffect();
|
|
|
+ jt3d.SceneEffects.Weather.addRainEffect({
|
|
|
+ tiltAngle: 0.3,
|
|
|
+ rainSize: 0.5,
|
|
|
+ rainSpeed: 70
|
|
|
+ });
|
|
|
+ break;
|
|
|
+ case "snow": //雪天
|
|
|
+ jt3d.SceneEffects.Weather.removeEffect();
|
|
|
+ jt3d.SceneEffects.Weather.addSnowEffect();
|
|
|
+ break;
|
|
|
+ case "fog": //雾天
|
|
|
+ jt3d.SceneEffects.Weather.removeEffect();
|
|
|
+ jt3d.SceneEffects.Weather.addFogEffect();
|
|
|
+ break;
|
|
|
+ case "remove": //移除天气特效
|
|
|
+ this.currentIndex = -1;
|
|
|
+ jt3d.SceneEffects.Weather.removeEffect()
|
|
|
+ break;
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 粒子效果
|
|
|
+ */
|
|
|
+ ParticleSystem(type) {
|
|
|
+ let options = {};
|
|
|
+ // 初始化参数默认值
|
|
|
+ options.duration = Cesium.defaultValue(options.duration, 2);
|
|
|
+ options.heading = Cesium.defaultValue(options.heading, 0.5); //指向，默认值0.0（北）
|
|
|
+ options.pitch = Cesium.defaultValue(options.pitch, -40); //俯仰角， 垂直向下。默认值-90(向下看)。
|
|
|
+ options.range = Cesium.defaultValue(options.range, 150); //距目标点距离
|
|
|
+
|
|
|
+ const position = {
|
|
|
+ x: 121.554042,
|
|
|
+ y: 37.395186,
|
|
|
+ z: 25.60
|
|
|
+ };
|
|
|
+
|
|
|
+ // 定位到点
|
|
|
+ let flyToPoint = jt3d.LocateUtil.flyToPoint({
|
|
|
+ longitude: position.x,
|
|
|
+ latitude: position.y,
|
|
|
+ height: position.z,
|
|
|
+ duration: options.duration,
|
|
|
+ heading: options.heading,
|
|
|
+ pitch: options.pitch,
|
|
|
+ range: options.range,
|
|
|
+ });
|
|
|
+ flyToPoint.then(function() {
|
|
|
+ // alert(1111)
|
|
|
+ });
|
|
|
+
|
|
|
+ if (type === "add") {
|
|
|
+
|
|
|
+ const positionF = {
|
|
|
+ x: 121.554042,
|
|
|
+ y: 37.395186,
|
|
|
+ z: 25.60
|
|
|
+ };
|
|
|
+
|
|
|
+ this.fireArr = [];
|
|
|
+ this.waterArr = [];
|
|
|
+
|
|
|
+ let fireEntity = jt3d.SceneEffects.ParticleSystem.createParticleFire([positionF.x, positionF.y, positionF.z])
|
|
|
+ this.fireArr.push(fireEntity)
|
|
|
+
|
|
|
+ const positionW = {
|
|
|
+ x: 121.553975,
|
|
|
+ y: 37.395075,
|
|
|
+ z: 18.10
|
|
|
+ };
|
|
|
+
|
|
|
+ let waterEntity = jt3d.SceneEffects.ParticleSystem.createParticleWater([positionW.x, positionW.y, positionW.z])
|
|
|
+ this.waterArr.push(waterEntity)
|
|
|
+
|
|
|
+ }
|
|
|
+ if (type === "remove") {
|
|
|
+ for (var i = 0; i < this.fireArr.length; i++) {
|
|
|
+ this.fireArr[i].remove()
|
|
|
+ }
|
|
|
+ for (var i = 0; i < this.waterArr.length; i++) {
|
|
|
+ this.waterArr[i].remove()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 热力图
|
|
|
+ */
|
|
|
+ HeatMap(type) {
|
|
|
+
|
|
|
+ if (type === "add") {
|
|
|
+ let viewer = this.viewer = window["viewer"];
|
|
|
+
|
|
|
+ // 矩形坐标
|
|
|
+ var bounds = {
|
|
|
+ west: 121.563298,
|
|
|
+ south: 37.284514,
|
|
|
+ east: 121.565298,
|
|
|
+ north: 37.286514,
|
|
|
+ };
|
|
|
+
|
|
|
+ // 初始化CesiumHeatmap
|
|
|
+ var heatMap = this.heatMap = CesiumHeatmap.create(
|
|
|
+ viewer, // 视图层
|
|
|
+ bounds, // 矩形坐标
|
|
|
+ // heatmap相应参数
|
|
|
+ {
|
|
|
+ backgroundColor: "rgba(0, 0, 0, 0)",
|
|
|
+ radius: 50,
|
|
|
+ maxOpacity: .5,
|
|
|
+ minOpacity: 0,
|
|
|
+ blur: .75
|
|
|
+ }
|
|
|
+ );
|
|
|
+
|
|
|
+ //加载数据，生成热力图
|
|
|
+ // 添加数据 最小值，最大值，数据集
|
|
|
+ heatMap.setWGS84Data(0, 100, getData(300));
|
|
|
+ viewer.zoomTo(viewer.entities);
|
|
|
+
|
|
|
+ if (this._layer) {
|
|
|
+ //移除热力图
|
|
|
+ this.viewer.entities.remove(this.heatMap._layer);
|
|
|
+ } else {
|
|
|
+ this._layer = this.heatMap._layer;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 数据格式：动态数据 [{x: -97.6433525165054, y: 45.61443064377248, value: 11.409122369106317}]
|
|
|
+ function getData(length) {
|
|
|
+ var data = [];
|
|
|
+ for (var i = 0; i < length; i++) {
|
|
|
+ var x = 121.563298 + Math.random() * (121.565298 - 121.563298);
|
|
|
+ var y = 37.284514 + Math.random() * (37.286514 - 37.284514);
|
|
|
+ var value = Math.random() * 100;
|
|
|
+ data.push({
|
|
|
+ x: x,
|
|
|
+ y: y,
|
|
|
+ value: value
|
|
|
+ });
|
|
|
+ }
|
|
|
+ return data;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (type === "remove") {
|
|
|
+
|
|
|
+ //移除热力图
|
|
|
+ this.viewer.entities.remove(this.heatMap._layer);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ mounted() {
|
|
|
+
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .el-avatar{
|
|
|
+ width: 70rem !important;
|
|
|
+ height: 70rem !important;
|
|
|
+ font-size: 14px !important;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep .el-collapse-item__content {
|
|
|
+ padding: 10rem;
|
|
|
+ // padding-bottom: 0rem;
|
|
|
+ overflow-y: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep .el-collapse-item__header {
|
|
|
+ background: url(@/assets/images/bg_collapse_title.png) no-repeat;
|
|
|
+ background-size: 350rem 40rem;
|
|
|
+ // background-color: rgb(22 90 190);
|
|
|
+ // background-color: rgb(5 45 100 /60%);
|
|
|
+ background-color: rgb(30 130 255);
|
|
|
+ border-bottom: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-col {
|
|
|
+ padding: 10rem;
|
|
|
+ // color: rgba(90, 172, 255, 1.0);
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .jt-weather-effects {
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .iconfont {
|
|
|
+ padding: 0 10rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-collapse {
|
|
|
+ --el-collapse-border-color: rgb(0 44 126 / 0%);
|
|
|
+
|
|
|
+ --el-collapse-header-text-color: #ffffff;
|
|
|
+ --el-collapse-header-font-size: 13rem;
|
|
|
+ --el-collapse-content-bg-color: rgb(0 44 126 / 0%);
|
|
|
+ --el-collapse-content-font-size: 13rem;
|
|
|
+ --el-collapse-content-text-color: rgb(216 240 255);
|
|
|
+
|
|
|
+ --el-collapse-header-height: 40rem;
|
|
|
+ --el-collapse-header-bg-color: rgb(30 130 255);
|
|
|
+
|
|
|
+ --el-fill-color-blank: rgb(0 44 126 / 68%);
|
|
|
+ --el-text-color-regular: rgb(216 240 255);
|
|
|
+ --el-border-color: rgb(35 135 255);
|
|
|
+
|
|
|
+ .el-collapse-item__content {
|
|
|
+ padding: 10rem;
|
|
|
+ // padding-bottom: 0rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ i {
|
|
|
+ display: inline-block;
|
|
|
+ width: 100%;
|
|
|
+ height: 36rem;
|
|
|
+ line-height: 36rem;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 5rem;
|
|
|
+ font-size: 40rem;
|
|
|
+ // color: rgba(90, 172, 255, 1.0);
|
|
|
+ color: #fff;
|
|
|
+ transition: all .3s;
|
|
|
+ -webkit-transition: all .3s
|
|
|
+ }
|
|
|
+
|
|
|
+ .selectStyle {
|
|
|
+ // background: rgba(135, 182, 254, 0.5);
|
|
|
+ background: rgb(0 44 126);
|
|
|
+ }
|
|
|
+
|
|
|
+ .defaultStyle {
|
|
|
+ background: #ffffff00;
|
|
|
+ }
|
|
|
+
|
|
|
+ .selectFontStyle {
|
|
|
+ // color: #fff;
|
|
|
+ color: #55ffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
DESKTOP-GBVU60Q\dell
