<template>
|
<el-collapse v-model="activeName" accordion>
|
<el-collapse-item title="底图设置" name="1">
|
<!-- <div style="color: white; margin: 10px; width: 100%">
|
选择底图：
|
<el-select size="mini" placeholder="请选择" style="width: 200px" value-key="id" v-model="currentMap"
|
@change="mapSelectedChange">
|
<el-option v-for="item in mapTypes" :key="item.id" :label="item.mapname" :value="item">
|
</el-option>
|
</el-select>
|
</div> -->
|
|
<div style="padding:5px 14px; text-align: left;">
|
<div class="opt_imgButton" @click="clickChangeMap('tdtmap')">
|
<img src="../../../assets/img/icon/u886.svg" />
|
<span> 影像图 </span>
|
</div>
|
<div class="opt_imgButton" @click="clickChangeMap('txmap')">
|
<img src="../../../assets/img/icon/u880.svg" />
|
<span> 腾讯地图 </span>
|
</div>
|
<div class="opt_imgButton" @click="clickChangeMap('gdmap')">
|
<img src="../../../assets/img/icon/u881.svg" />
|
<span> 高德地图 </span>
|
</div>
|
<div class="opt_imgButton" @click="clickChangeMap('BaiduMap')">
|
<img src="../../../assets/img/icon/u883.svg" />
|
<span> 百度地图 </span>
|
</div>
|
</div>
|
</el-collapse-item>
|
<el-collapse-item title="二三维" name="5">
|
<div style="width: 100%; text-align: center">
|
<!-- <div class="opt_button" @click="setSceneEffect(1)">
|
<div><i class="el-icon-film"></i></div>
|
<span>三维</span>
|
</div>
|
<div class="opt_button" @click="setSceneEffect(2)">
|
<div><i class="el-icon-film"></i></div>
|
<span>二维</span>
|
</div> -->
|
<div class="opt_button" style="width: 80px" @click="setSceneEffect(3)">
|
<div><i class="el-icon-film"></i></div>
|
<span>二三维联动</span>
|
</div>
|
<div class="opt_button" style="width: 80px" @click="setSceneEffect(2)">
|
<div><i class="el-icon-film"></i></div>
|
<span>双屏对比</span>
|
</div>
|
</div>
|
</el-collapse-item>
|
<el-collapse-item title="卷帘对比" name="3">
|
<el-form style="padding: 10px">
|
<el-form-item label="对比图层：">
|
<el-select :disabled="isDisabled" size="mini" placeholder="请选择" style="width: 200px" value-key="id"
|
v-model="currentLayer1" @change="layer1SelectedChange">
|
<el-option v-for="item in mapLayers" :key="item.id" :label="item.mapname" :value="item">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="参考图层：">
|
<el-select :disabled="isDisabled" size="mini" placeholder="请选择" style="width: 200px" value-key="id"
|
v-model="currentLayer2" @change="layer2SelectedChange">
|
<el-option :disabled="isDisabled" v-for="item in mapLayers" :key="item.id" :label="item.mapname"
|
:value="item">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="卷帘开关：">
|
<el-switch v-model="turnon" active-color="#13ce66" inactive-color="#a9a9a9" @change="turnonChange"
|
:disabled="juanlianDisabled">
|
</el-switch>
|
</el-form-item>
|
</el-form>
|
</el-collapse-item>
|
<el-collapse-item title="场景特效" name="2">
|
<el-row v-for="(item, idx) in texiao" :key="idx" style="padding: 15px;color: white;">
|
<el-col :span="6">
|
<el-checkbox style="margin: 8px" v-model="item.checked" @change="checkedChange(item)">{{ item.tag }}
|
</el-checkbox>
|
</el-col>
|
<el-col :span="18">
|
<el-slider size="mini" v-model="item.value" @change="valueChange(item)" :disabled="item.disabled"></el-slider>
|
</el-col>
|
</el-row>
|
<el-divider></el-divider>
|
<div style="width: 100%; text-align: center">
|
<div class="opt_button" @click="setSceneEffect(4)">
|
<div><i class="el-icon-film"></i></div>
|
<span>烟特效</span>
|
</div>
|
<div class="opt_button" @click="setSceneEffect(5)">
|
<div><i class="el-icon-film"></i></div>
|
<span>喷泉特效</span>
|
</div>
|
|
</div>
|
<div style="width: 100%; text-align: center">
|
<div class="opt_button" @click="setSceneEffect(6)">
|
<div><i class="el-icon-film"></i></div>
|
<span>火焰特效</span>
|
</div>
|
<div class="opt_button" @click="setSceneEffect(7)">
|
<div><i class="el-icon-film"></i></div>
|
<span>烟花特效</span>
|
</div>
|
</div>
|
<div style="width: 100%; text-align: center">
|
<div class="opt_button" @click="setSceneEffect(8)">
|
<div><i class="el-icon-film"></i></div>
|
<span>动态水面</span>
|
</div>
|
<div class="opt_button" @click="setSceneEffect(9)">
|
<div><i class="el-icon-film"></i></div>
|
<span>爆炸特效</span>
|
</div>
|
</div>
|
<div class="buttongroups">
|
<el-button size="small" @click="clearTxObjs">清除</el-button>
|
</div>
|
</el-collapse-item>
|
<el-collapse-item title="漫游工具" name="6">
|
<roaming-keyboard> </roaming-keyboard>
|
<roaming-path> </roaming-path>
|
</el-collapse-item>
|
<el-collapse-item title="场景书签" name="7">
|
<bookmark-scene></bookmark-scene>
|
</el-collapse-item>
|
<el-collapse-item title="批注工具" name="8">
|
<annotations-tool></annotations-tool>
|
</el-collapse-item>
|
<!--<el-collapse-item title="淹没分析" name="6">
|
<el-form :inline="true" style="font-color: 0; text-align: center" label-position="right">
|
<el-form-item label="水位上涨高度:" class="input-item">
|
<el-input size="small" placeholder="请输入内容" v-model="ymMaxHeight" clearable>
|
</el-input>
|
</el-form-item>
|
<el-form-item label="淹没速度m/s:" class="input-item">
|
<el-input size="small" placeholder="请输入内容" v-model="ymSpeed" clearable>
|
</el-input>
|
</el-form-item>
|
</el-form>
|
<el-button size="small" @click="startFlood">淹没分析</el-button>
|
<el-button size="small" @click="clearFlood">清除</el-button>
|
</el-collapse-item>-->
|
</el-collapse>
|
</template>
|
<script>
|
import { getAll } from "@/api/usercenter.js"
|
import * as SmartEarth from "../../../../public/CimSDK/index.js"
|
let leftItem = null;
|
let rightItem = null;
|
let changjing = null
|
let Cesium = SmartEarth.Cesium;
|
import WaterImg from "../../../assets/img/waterNormals.jpg";
|
import RoamingKeyboard from "./roam/RoamingKeyBoard.vue"
|
import RoamingPath from "./roam/RoamingPath.vue"
|
import bookmarkScene from "./bookmarkScene/bookmarkScene.vue"
|
import AnnotationsTool from "./AnnotationsTool/AnnotationsTool.vue"
|
import { WaterPrimitive } from "../../../api/WaterPrimitive.js";
|
import View from 'ol/View.js';
|
export default {
|
components: {
|
RoamingKeyboard,
|
RoamingPath,
|
bookmarkScene,
|
AnnotationsTool
|
},
|
data() {
|
this.txObjs = [];
|
this.ksyObjs = [];
|
return {
|
handler: null,
|
activeName: "1",
|
flogOn: false,
|
snowOn: false,
|
rainOn: false,
|
activeColor: "red",
|
currentMap: null,
|
mapTypes: null,
|
currentLayer1: null,
|
isDisabled: false,
|
currentLayer2: null,
|
mapLayers: null,
|
turnon: false,
|
texiao: [
|
{
|
id: 0,
|
tag: "雪",
|
type: "snow",
|
value: 0,
|
disabled: true,
|
checked: false,
|
defaultratio: {
|
test1: 10.0, //雪速
|
test2: 5.0, //占屏幕
|
test3: 1, //雪花大小
|
test4: 0.5, //场景亮度
|
},
|
},
|
{
|
id: 1,
|
tag: "雨",
|
type: "rain",
|
value: 0,
|
disabled: true,
|
checked: false,
|
defaultratio: {
|
test1: 8.0, //雨速
|
test2: 0.5, //雨滴大小
|
test3: 0.5, //方向
|
test4: 0.5,
|
},
|
},
|
{
|
id: 2,
|
tag: "雾",
|
type: "fog",
|
value: 0,
|
disabled: true,
|
checked: false,
|
defaultratio: {
|
test1: 1,
|
color: "rgba(255,255,255,0.9)",
|
},
|
},
|
],
|
isldOn: false, //二三维开启
|
is3dOn: false, //双球开启
|
//淹没分析
|
ymSpeed: 0,
|
ymMaxHeight: 0,
|
ymfxlist: { entities: [], primitives: [] },
|
CurtainContrast: null,
|
rightIndex: null,
|
leftIndex: null,
|
hfeffectarr: [],
|
waterPlane:[],
|
maps: [
|
{
|
id: 0,
|
mapname: "天地图",
|
maptype: "tdtmap",
|
urls: {
|
img: {
|
url: "https://{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=4b1ea889c4fbb9867bc0bc9ade6d3195",
|
subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
|
minimumLevel: 0, // 最小级别
|
maximumLevel: 18, // 最大级别
|
},
|
},
|
},
|
],
|
ChangjingMaps: [
|
{
|
id: 0,
|
mapname: "天地图",
|
maptype: "tdtmap",
|
urls: {
|
img: {
|
url: "https://{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=4b1ea889c4fbb9867bc0bc9ade6d3195",
|
subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
|
minimumLevel: 0, // 最小级别
|
maximumLevel: 18, // 最大级别
|
},
|
label: {
|
url: "http://{s}.tianditu.gov.cn/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&tk=4b1ea889c4fbb9867bc0bc9ade6d3195",
|
subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
|
minimumLevel: 0, // 最小级别
|
maximumLevel: 18,
|
},
|
},
|
},
|
{
|
id: 1,
|
mapname: "腾讯地图",
|
maptype: "txmap",
|
urls: {
|
url: "https://p2.map.gtimg.com/sateTiles/{z}/{sx}/{sy}/{x}_{reverseY}.jpg?version=229",
|
customTags: {
|
sx: function (imageryProvider, x, y, level) {
|
return x >> 4;
|
},
|
sy: function (imageryProvider, x, y, level) {
|
return ((1 << level) - y) >> 4;
|
},
|
},
|
},
|
},
|
{
|
id: 2,
|
mapname: "高德地图",
|
maptype: "gdmap",
|
urls: {
|
url: "https://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
|
},
|
},
|
{
|
id: 3,
|
mapname: "百度地图",
|
maptype: "BaiduMap",
|
urls: {
|
url: "http://online{s}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=pl&scaler=1&p=1",
|
},
|
},
|
],
|
valGroup: {
|
left: "",
|
right: ""
|
}
|
};
|
},
|
methods: {
|
clickChangeMap(maptype) {
|
if (sgworld) {
|
let val = this.ChangjingMaps.find((item) => item.maptype === maptype);
|
if (val) this.changJingLoadLayer(val);
|
}
|
},
|
checkedChange(item) {
|
item.disabled = !item.checked;
|
sgworld.Analysis.createWeather(item.type, false);
|
if (item.checked === true) {
|
if (item.value === 0) {
|
sgworld.Analysis.createWeather(item.type, false);
|
return;
|
}
|
let value = {};
|
let r = item.value / 100;
|
for (let i in item.defaultratio) {
|
if (item.type == "snow" && i + "" === "test4") {
|
value[i] = 1 - item.defaultratio[i] * r;
|
} else if (item.type == "rain" && i + "" === "test2") {
|
value[i] = 1 - item.defaultratio[i] * r;
|
} else if (item.type == "fog" && i + "" === "color") {
|
value[i] = "rgba(255,255,255," + r + ")";
|
} else {
|
value[i] = item.defaultratio[i] * r;
|
}
|
}
|
sgworld.Analysis.createWeather(item.type, item.checked, value);
|
}
|
},
|
valueChange(item) {
|
if (item.checked === true) {
|
if (item.value === 0) {
|
sgworld.Analysis.createWeather(item.type, false);
|
return;
|
}
|
let value = {};
|
let r = item.value / 100;
|
for (let i in item.defaultratio) {
|
if (item.type == "snow" && i + "" === "test4") {
|
value[i] = 1 - item.defaultratio[i] * r;
|
} else if (item.type == "rain" && i + "" === "test2") {
|
value[i] = 1 - item.defaultratio[i] * r;
|
} else if (item.type == "fog" && i + "" === "color") {
|
value[i] = "rgba(255,255,255," + r * 0.8 + ")";
|
} else {
|
value[i] = item.defaultratio[i] * r;
|
}
|
}
|
sgworld.Analysis.createWeather(item.type, item.checked, value);
|
}
|
},
|
turnonChange(val) {
|
//this.isDisabled = val;
|
if (val === true) {
|
this.CurtainContrast = sgworld.analysis.createCurtainContrast({ leftIndex: leftItem._layerIndex, rightIndex: rightItem._layerIndex });
|
} else {
|
window.Viewer.imageryLayers.remove(leftItem)
|
window.Viewer.imageryLayers.remove(rightItem)
|
if (!this.CurtainContrast) return
|
this.CurtainContrast.removeFromMap()
|
this.CurtainContrast = null
|
}
|
},
|
mapSelectedChange(val) {
|
if (sgworld) {
|
this._myJuanlianLoadLayer(val, "底图");
|
}
|
},
|
layer1SelectedChange(val) {
|
leftItem = this._myJuanlianLoadLayer(val, "卷帘对比1");
|
if (this.turnon === true) {
|
if (!this.CurtainContrast) return
|
this.CurtainContrast.removeFromMap()
|
this.CurtainContrast = null
|
this.$nextTick(() => {
|
this.CurtainContrast = sgworld.analysis.createCurtainContrast({ leftIndex: leftItem._layerIndex, rightIndex: rightItem._layerIndex });
|
});
|
}
|
},
|
layer2SelectedChange(val) {
|
rightItem = this._myJuanlianLoadLayer(val, "卷帘对比2");
|
if (this.turnon === true) {
|
if (!this.CurtainContrast) return
|
this.CurtainContrast.removeFromMap()
|
this.CurtainContrast = null
|
this.$nextTick(() => {
|
this.CurtainContrast = sgworld.analysis.createCurtainContrast({ leftIndex: leftItem._layerIndex, rightIndex: rightItem._layerIndex });
|
});
|
}
|
},
|
changJingLoadLayer(val) {
|
if (changjing != null) window.Viewer.imageryLayers.remove(changjing)
|
let data;
|
if (val.maptype === "tdtmap") {
|
data = Viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({
|
"url": val.urls.img.url,
|
"subdomains": ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
|
}))
|
changjing = data
|
} else if (val.maptype === "BaiduMap") {
|
data = sgworld.factory.createImageryLayer({
|
sourceType: "baidu",
|
url: val.urls.url,
|
});
|
changjing = data._primitive
|
} else if (val.maptype === "gdmap") {
|
data = sgworld.factory.createImageryLayer({
|
sourceType: "gaode",
|
url: val.urls.url,
|
});
|
changjing = data._primitive
|
} else if (val.maptype === "txmap") {
|
data = Viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({
|
url: val.urls.url,
|
customTags: val.urls.customTags
|
}));
|
changjing = data
|
}
|
},
|
_myJuanlianLoadLayer(val, groupname) {
|
let valOld = {}
|
if (groupname == "卷帘对比1") valOld = leftItem
|
else valOld = rightItem
|
window.Viewer.imageryLayers.remove(valOld)
|
console.log("indexla", window.Viewer.imageryLayers)
|
let data;
|
if (val.maptype === "tdtmap") {
|
data = window.Viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({
|
"url": val.urls.img.url,
|
"subdomains": ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
|
"minimumLevel": 0,
|
"maximumLevel": 18
|
}))
|
data.name = val.mapname
|
} else if (val.maptype === "XYZ") {
|
data = window.Viewer.scene.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({ url: val.urls.url }))
|
data.name = val.mapname
|
} else {
|
data = sgworld.Creator.createImageryProvider(
|
val.mapname,
|
val.maptype,
|
val.urls,
|
jlid,
|
undefined,
|
true,
|
val.mapname
|
);
|
}
|
return data;
|
},
|
setSceneEffect(tag) {
|
let handler = null;
|
if (sgworld)
|
switch (tag) {
|
// case 1:
|
// Viewer.scene.morphTo3D();
|
// break;
|
case 2:
|
this.is3dOn = !this.is3dOn;
|
this.$emit("ldcontrol", {
|
title: "",
|
id: 3,
|
isOn: this.is3dOn,
|
showtag: "3d",
|
});
|
this.isldOn = false;
|
break;
|
case 3:
|
this.isldOn = !this.isldOn;
|
this.$emit("ldcontrol", {
|
title: "",
|
id: 3,
|
isOn: this.isldOn,
|
showtag: "2d",
|
});
|
this.is3dOn = false;
|
break;
|
case 4:
|
this.onmousedownCreateParticleEffect("smog", 100);
|
break;
|
case 5:
|
this.onmousedownCreateParticleEffect("fountain", 100);
|
break;
|
case 6:
|
this.onmousedownCreateParticleEffect("fire", 100);
|
break;
|
case 7:
|
this.onmousedownCreateParticleEffect("fireworks", 300);
|
break;
|
case 8:
|
this.onmousedownCreateParticleEffect("water", 0);
|
// let that = this;
|
// var lon = 118.82103909242193, lat = 31.870929674929533;
|
// sgworld.Core.setDepthTest("open", sgworld._Viewer);
|
// let handler = new Cesium.ScreenSpaceEventHandler(Viewer.scene.canvas);
|
// handler.setInputAction((event) => {
|
// var _cartesian = Viewer.scene.pickPosition(event.position);
|
// if (_cartesian) {
|
// let cartographic = Cesium.Cartographic.fromCartesian(_cartesian);
|
// let l = Cesium.Math.toDegrees(cartographic.longitude);
|
// let w = Cesium.Math.toDegrees(cartographic.latitude);
|
// let h = cartographic.height < 0 ? 0 : cartographic.height;
|
// sgworld.Navigate.flyToPosition(l, w, h + 30000);
|
// let ksy = sgworld.Analysis.createCircleScan({ lon: l, lat: w }, 6000);
|
// that.ksyObjs.push(ksy);
|
// }
|
// handler && handler.destroy();
|
// }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
break;
|
case 9:
|
this.onmousedownCreateParticleEffect("Explosion", 200);
|
break;
|
default:
|
break;
|
}
|
},
|
onmousedownCreateParticleEffect(type, destinationheight) {
|
this.handler && this.handler.destroy();
|
let that = this;
|
if (type != "water") {
|
this.handler = new Cesium.ScreenSpaceEventHandler(Viewer.scene.canvas);
|
this.handler.setInputAction((event) => {
|
var _cartesian = Viewer.scene.pickPosition(event.position);
|
if (_cartesian) {
|
let cartographic = Cesium.Cartographic.fromCartesian(_cartesian);
|
let l = Cesium.Math.toDegrees(cartographic.longitude);
|
let w = Cesium.Math.toDegrees(cartographic.latitude);
|
let h = cartographic.height < 0 ? 0 : cartographic.height;
|
// debugger
|
switch (type) {
|
case "smog":
|
var smoke = sgworld.factory.createSmoke({
|
lon: l,
|
lat: w,
|
alt: h + 0.5
|
});
|
that.txObjs.push(smoke);
|
break;
|
case "fountain":
|
sgworld.Analysis.createParticleEffect(
|
type,
|
{
|
x: l,
|
y: w,
|
z: h + 0.5,
|
},
|
{
|
translation: Cesium.Cartesian3.fromElements(0, 0, 0), //平移
|
},
|
function (data) {
|
if (data)
|
that.hfeffectarr.push(data[data.length - 1]);
|
}
|
);
|
break;
|
case "fire":
|
var fire = sgworld.factory.createFire({
|
lon: l,
|
lat: w,
|
alt: h + 0.2,
|
particleSize: 30
|
});
|
that.txObjs.push(fire);
|
break;
|
case "fireworks":
|
var fireworksa = sgworld.factory.createFireworks({
|
lon: l,
|
lat: w,
|
alt: h + 0.2,
|
emitHeight: 120
|
});
|
that.txObjs.push(fireworksa);
|
break;
|
case "Explosion":
|
var Explosiona = sgworld.factory.createExplosion({
|
lon: l,
|
lat: w,
|
alt: h + 0.2,
|
particleSize: 50
|
});
|
that.txObjs.push(Explosiona)
|
break;
|
}
|
}
|
that.handler && that.handler.destroy();
|
that.handler = null;
|
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
} else {
|
sgworld.Creator.createSimpleGraphic('polygon', { showSize: false }, function (entity) {
|
let res = entity.polygon.hierarchy.getValue().positions;
|
let positions = [];
|
for (let i = 0; i < res.length; i++) {
|
let ellipsoid = sgworld.coreMap.scene.globe.ellipsoid
|
let cartographic = ellipsoid.cartesianToCartographic(res[i])
|
let lon = SmartEarth.Cesium.Math.toDegrees(cartographic.longitude) // 经度
|
let lat = SmartEarth.Cesium.Math.toDegrees(cartographic.latitude) // 纬度
|
let height = Viewer.scene.globe.getHeight(cartographic) // 纬度
|
positions.push(...[lon, lat, height])
|
}
|
var myWater = new Water({
|
baseWaterColor: new Cesium.Color(0.2, 0.3, 0.6, 1),
|
blendColor: new Cesium.Color(0.5, 0.5, 0.5, 0.8),
|
animationSpeed: 0.05,
|
amplitude: 2,
|
frequency: 500,
|
specularIntensity: 0.3,
|
fadeFactor: 1,
|
sizeAndVelocity: new Cesium.Cartesian4(100, 100, 10, 0),
|
width: 1000,
|
height: 1000
|
}, Viewer.scene);
|
|
let pos = Cesium.Cartesian3.fromDegreesArrayHeights(positions);
|
let option = {
|
center: Cesium.Cartesian3.fromDegrees(108.960482, 34.220953, 428),
|
positions: pos,
|
type: 1,
|
width: 200,
|
height: 280,
|
};
|
var waterPrimitive = myWater.createWaterPolygonPrimitive(option);
|
that.waterPlane.push(waterPrimitive);
|
// createWaterPlane(positions)
|
sgworld.Creator.SimpleGraphic.remove(entity.id);
|
// console.log(Viewer.scene.primitives._primitives);
|
// for(let i =0;i<Viewer.scene.primitives._primitives.length;i++){
|
// console.log(Cesium.);
|
// console.log(waterPrimitive == Viewer.scene.primitives._primitives[i]);
|
// }
|
});
|
}
|
},
|
startFlood() {
|
// var min = this.ymMinHeight;
|
// var max = this.ymMaxHeight;
|
// var spood = this.ymSpeed;
|
// var method = {
|
// waterHeight: min,
|
// targetHeight: max,
|
// spood: spood,
|
// url: WaterImg,
|
// };
|
// sgworld.Core.setDepthTest("open", sgworld._Viewer);
|
// var ymfx = sgworld.Command.execute(2, 2, method, function (value) {});
|
var max = this.ymMaxHeight;
|
var spood = this.ymSpeed;
|
if (max === 0 || spood === 0) {
|
this.$alert("请设置海拔高度和淹没速度!");
|
} else {
|
let that = this;
|
this.drawpolygon(function (e) {
|
console.log(e);
|
let waterFace = e.positions;
|
let waterEntity = e.enitity;
|
let minheight = e.minheight;
|
waterEntity.polygon.height = minheight;
|
|
that.ymfxlist.entities.push(waterEntity); //记录一下方便清除
|
var currentHeight = 0;
|
var maxHeight = parseFloat(max);
|
var speed = parseFloat(spood);
|
var setFlood = setInterval(() => {
|
if (currentHeight < maxHeight) {
|
currentHeight += speed / 10;
|
waterEntity.polygon.extrudedHeight = new Cesium.CallbackProperty(
|
function (time, result) {
|
return minheight + currentHeight;
|
},
|
false
|
);
|
if (currentHeight >= maxHeight) {
|
// waterEntity.polygon.extrudedHeight =
|
// new Cesium.CallbackProperty(() => 0, false);
|
var waterPrimitive = new Cesium.Primitive({
|
show: true, // 默认隐藏
|
allowPicking: false,
|
geometryInstances: new Cesium.GeometryInstance({
|
geometry: new Cesium.PolygonGeometry({
|
polygonHierarchy: new Cesium.PolygonHierarchy(waterFace),
|
extrudedHeight: minheight + currentHeight, //注释掉此属性可以只显示水面
|
height: minheight,
|
//perPositionHeight: true, //注释掉此属性水面就贴地了
|
}),
|
}),
|
// 可以设置内置的水面shader
|
appearance: new Cesium.EllipsoidSurfaceAppearance({
|
translucent: true,
|
material: new Cesium.Material({
|
fabric: {
|
type: "Water",
|
uniforms: {
|
baseWaterColor: new Cesium.Color(0.0, 0.0, 1.0, 0.5),
|
blendColor: new Cesium.Color(0.0, 0.0, 1.0, 0.5),
|
normalMap: WaterImg,
|
frequency: 1000.0,
|
animationSpeed: 0.01,
|
amplitude: 10.0,
|
},
|
},
|
}),
|
}),
|
});
|
Viewer.scene.primitives.add(waterPrimitive);
|
that.ymfxlist.primitives.push(waterPrimitive); //记录一下方便清除
|
clearInterval(setFlood);
|
}
|
}
|
}, 1000 / 10);
|
});
|
}
|
},
|
clearFlood() {
|
for (var i = 0; i < this.ymfxlist.entities.length; i++) {
|
let ymfObj = this.ymfxlist.entities[i];
|
if (ymfObj) {
|
Viewer.entities.remove(ymfObj);
|
}
|
}
|
for (var i = 0; i < this.ymfxlist.primitives.length; i++) {
|
let ymfObj = this.ymfxlist.primitives[i];
|
if (ymfObj) {
|
Viewer.scene.primitives.remove(ymfObj);
|
}
|
}
|
},
|
|
drawpolygon(callback) {
|
if (sgworld) {
|
const viewer = sgworld.Viewer;
|
function createPoint(worldPosition) {
|
const point = viewer.entities.add({
|
position: worldPosition,
|
point: {
|
color: Cesium.Color.GREEN,
|
pixelSize: 5,
|
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
},
|
});
|
return point;
|
}
|
let drawingMode = "polygon";
|
function drawShape(positionData, height) {
|
let shape;
|
shape = viewer.entities.add({
|
polygon: {
|
hierarchy: positionData,
|
material: new Cesium.Color.fromCssColorString(
|
"rgba(55,94,255,0.5)"
|
),
|
},
|
});
|
return shape;
|
}
|
let activeShapePosittion = [];
|
let activePoints = [];
|
let activeShape;
|
let floatingPoint;
|
const handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
|
handler.setInputAction(function (event) {
|
const earthPosition = viewer.scene.pickPosition(event.position);
|
if (Cesium.defined(earthPosition)) {
|
if (activeShapePosittion.length === 0) {
|
floatingPoint = createPoint(earthPosition);
|
activePoints.push(floatingPoint);
|
activeShapePosittion.push(earthPosition);
|
const dynamicPositions = new Cesium.CallbackProperty(function () {
|
if (drawingMode === "polygon") {
|
return new Cesium.PolygonHierarchy(activeShapePosittion);
|
}
|
return activeShapePosittion;
|
}, false);
|
activeShape = drawShape(dynamicPositions);
|
}
|
activePoints.push(createPoint(earthPosition));
|
activeShapePosittion.push(earthPosition);
|
}
|
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
|
handler.setInputAction(function (event) {
|
if (Cesium.defined(floatingPoint)) {
|
const newPosition = viewer.scene.pickPosition(event.endPosition);
|
if (Cesium.defined(newPosition)) {
|
floatingPoint.position.setValue(newPosition);
|
activeShapePosittion.pop();
|
activeShapePosittion.push(newPosition);
|
}
|
}
|
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
|
// Redraw the shape so it's not dynamic and remove the dynamic shape.
|
function terminateShape() {
|
activeShapePosittion.pop();
|
let range = computePolygonHeightRange(activeShapePosittion);
|
let shape = drawShape(activeShapePosittion, range.minHeight);
|
|
viewer.entities.remove(floatingPoint);
|
viewer.entities.remove(activeShape);
|
if (callback) {
|
callback({
|
enitity: shape,
|
positions: activeShapePosittion,
|
minheight: range.minHeight,
|
});
|
}
|
for (var i = 0; i < activePoints.length; i++) {
|
viewer.entities.remove(activePoints[i]);
|
}
|
activeShapePosittion = [];
|
floatingPoint = undefined;
|
activeShape = undefined;
|
}
|
|
//插值计算polygon内最高海拔和最低海拔
|
function computePolygonHeightRange(points) {
|
var f = [];
|
var q = Viewer;
|
for (var i = 0; i < points.length; i++) f.push(points[i].clone());
|
var w, t, D, A, z;
|
var k = 0;
|
var C = 999;
|
var pgranularity = Math.PI / Math.pow(2, 11) / 64;
|
let v = new Cesium.PolygonGeometry.fromPositions({
|
positions: f,
|
vertexFormat: Cesium.PerInstanceColorAppearance.FLAT_VERTEX_FORMAT,
|
granularity: pgranularity,
|
});
|
let B = new Cesium.PolygonGeometry.createGeometry(v);
|
for (var j = 0; j < B.indices.length; j += 3)
|
(w = B.indices[j]),
|
(f = B.indices[j + 1]),
|
(t = B.indices[j + 2]),
|
(w = new Cesium.Cartesian3(
|
B.attributes.position.values[3 * w],
|
B.attributes.position.values[3 * w + 1],
|
B.attributes.position.values[3 * w + 2]
|
)),
|
(D = q.scene.globe.getHeight(
|
Cesium.Cartographic.fromCartesian(w)
|
)) < C && (C = D),
|
k < D && (k = D),
|
(w = new Cesium.Cartesian3(
|
B.attributes.position.values[3 * f],
|
B.attributes.position.values[3 * f + 1],
|
B.attributes.position.values[3 * f + 2]
|
)),
|
(A = q.scene.globe.getHeight(
|
Cesium.Cartographic.fromCartesian(w)
|
)) < C && (C = A),
|
k < A && (k = A),
|
(w = new Cesium.Cartesian3(
|
B.attributes.position.values[3 * t],
|
B.attributes.position.values[3 * t + 1],
|
B.attributes.position.values[3 * t + 2]
|
)),
|
(z = q.scene.globe.getHeight(
|
Cesium.Cartographic.fromCartesian(w)
|
)) < C && (C = z),
|
k < z && (k = z);
|
return { maxHeight: k, minHeight: C };
|
}
|
|
handler.setInputAction(function (event) {
|
terminateShape();
|
handler && handler.destroy();
|
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
|
}
|
},
|
clearTxObjs() {
|
this.handler && this.handler.destroy();
|
this.txObjs.forEach((obj) => {
|
obj && obj.removeFromMap();
|
});
|
this.txObjs = [];
|
this.ksyObjs.forEach((obj) => {
|
obj && obj.remove();
|
});
|
this.ksyObjs = [];
|
this.hfeffectarr.forEach(item => {
|
item && item.destroy()
|
})
|
this.hfeffectarr = [];
|
this.waterPlane.forEach(item=>{
|
Viewer.scene.primitives.remove(item)
|
})
|
},
|
},
|
computed: {
|
juanlianDisabled() {
|
return this.currentLayer1 === null || this.currentLayer2 === null;
|
},
|
},
|
mounted() {
|
this.mapTypes = this.maps;
|
this.mapLayers = this.maps;
|
getAll("西咸").then((res) => {
|
console.log(res)
|
if (res.code == 200) {
|
res.data.forEach((item) => {
|
console.log(item)
|
let map = {
|
id: item.id,
|
mapname: item.name,
|
maptype: item.type,
|
urls: {
|
url: item.url,
|
},
|
}
|
this.maps.push(map)
|
})
|
}
|
})
|
},
|
destroyed() {
|
// sgworld.Analysis.createWeather("rain", false);
|
// sgworld.Analysis.createWeather("snow", false);
|
// sgworld.Analysis.createWeather("flog", false);
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
.opt_button {
|
display: inline-block;
|
height: 50px;
|
width: 60px;
|
margin: 10px;
|
border-radius: 5px;
|
color: white;
|
border: 1px solid rgb(212, 212, 212);
|
padding: 5px;
|
cursor: pointer;
|
}
|
|
.opt_button_disabled {
|
display: inline-block;
|
height: 50px;
|
width: 60px;
|
margin: 10px;
|
border-radius: 5px;
|
color: rgb(143, 143, 143);
|
border: 1px solid rgb(212, 212, 212);
|
padding: 5px;
|
background: rgb(196, 196, 196);
|
}
|
|
.buttongroups {
|
margin: 8px auto;
|
text-align: center;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
gap: 6px;
|
|
.el-button {
|
width: 140px;
|
cursor: pointer;
|
background: transparent;
|
border: none;
|
color: #ffffff;
|
border-radius: 0px;
|
|
width: 199px;
|
height: 26px;
|
background: url("../../../assets/img/small_btn_back.png") no-repeat;
|
background-size: 100% 100%;
|
|
font-size: 11px;
|
font-family: Microsoft YaHei;
|
font-weight: 400;
|
color: #E0E5FA;
|
text-shadow: 0px 1px 4px rgba(5, 28, 55, 0.42);
|
display: flex;
|
flex-direction: row;
|
justify-content: center;
|
align-items: center;
|
margin: 0px;
|
}
|
|
.el-button:hover {
|
background: #18a4f0;
|
border: 1px solid #7596fa;
|
}
|
}
|
|
.opt_button:hover {
|
border: 1px solid rgb(224, 224, 255);
|
box-shadow: 2px 2px 3px rgb(207, 207, 207);
|
}
|
|
.opt_imgButton {
|
color: #FFF;
|
display: inline-block;
|
height: 100px;
|
width: 100%;
|
margin-top: 5px;
|
margin-bottom: 5px;
|
border-radius: 2px;
|
cursor: pointer;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
|
img {
|
height: 100%;
|
width: 100%;
|
}
|
|
span {
|
position: relative;
|
top: 2px;
|
left: 2px;
|
}
|
}
|
|
.opt_imgButton:hover {
|
color: #18a4f0;
|
box-shadow: 1px 1px 5px rgb(218, 240, 255);
|
}
|
|
/deep/.el-checkbox__label {
|
color: #FFF;
|
|
}
|
</style>
|
