949 lines
30 KiB
Vue
949 lines
30 KiB
Vue
<template>
|
||
<div class="map-content" id="map-content">
|
||
<div id="mars3dContainer" class="mars3d-container"></div>
|
||
<div class="layer-config" v-if="props.type == '底图'">
|
||
<div class="property-column-item">
|
||
<span>透明度：{{ formData.opacity ? formData.opacity : 1 }}</span>
|
||
<el-slider v-model="formData.opacity" :step="0.1" :max="1" :min="0" @change="e => layerOperate(e, 'opacity')" />
|
||
</div>
|
||
<div class="property-column-item">
|
||
<span>饱和度：{{ formData.saturation ? formData.saturation : 0 }}</span>
|
||
<el-slider v-model="formData.saturation" :step="0.5" :max="5" :min="-5" @change="e => layerOperate(e, 'saturation')" />
|
||
</div>
|
||
<div class="property-column-item">
|
||
<span>亮度：{{ formData.brightness ? formData.brightness : 0 }}</span>
|
||
<el-slider v-model="formData.brightness" :step="0.5" :max="10" :min="-10" @change="e => layerOperate(e, 'brightness')" />
|
||
</div>
|
||
<div class="property-column-item">
|
||
<span>对比度：{{ formData.contrast ? formData.contrast : 0 }}</span>
|
||
<el-slider v-model="formData.contrast" :step="0.5" :max="10" :min="-10" @change="e => layerOperate(e, 'contrast')" />
|
||
</div>
|
||
<div class="property-column-item">
|
||
<span>色调：{{ formData.hue ? formData.hue : 0 }}</span>
|
||
<el-slider v-model="formData.hue" :step="0.5" :max="2" :min="-2" @change="e => layerOperate(e, 'hue')" />
|
||
</div>
|
||
<div class="property-column-item">
|
||
<span>伽马校正：{{ formData.gamma ? formData.gamma : 0 }}</span>
|
||
<el-slider v-model="formData.gamma" :step="0.5" :max="5" :min="-5" @change="e => layerOperate(e, 'gamma')" />
|
||
</div>
|
||
<!-- <div class="property-row-item">
|
||
<span>是否反色：</span>
|
||
<el-switch v-model="formData.invertColor" @change="e => layerOperate(e, 'invertColor')" />
|
||
</div> -->
|
||
<div class="property-row-item">
|
||
<span>滤镜颜色：{{ formData.filterColor ? formData.filterColor : "" }}</span>
|
||
<el-color-picker v-model="formData.filterColor" @change="e => layerOperate(e, 'filterColor')" />
|
||
</div>
|
||
<div class="operate-btn">
|
||
<el-button @click="editBaseMapsConfig">保存当前配置</el-button>
|
||
</div>
|
||
</div>
|
||
<div class="layer-config" v-if="props.type == '白膜'">
|
||
<div class="property-column-item">
|
||
<span>经度：</span>
|
||
<el-input-number
|
||
v-model="formData.lng"
|
||
:step="0.0001"
|
||
controls-position="right"
|
||
style="margin: 5px 0"
|
||
@change="e => albugineaOperate(e, 'lng')"
|
||
/>
|
||
</div>
|
||
<div class="property-column-item">
|
||
<span>纬度：</span>
|
||
<el-input-number
|
||
v-model="formData.lat"
|
||
:step="0.0001"
|
||
controls-position="right"
|
||
style="margin: 5px 0"
|
||
@change="e => albugineaOperate(e, 'lat')"
|
||
/>
|
||
</div>
|
||
<div class="property-column-item">
|
||
<span>高度(米)：</span>
|
||
<el-input-number
|
||
v-model="formData.alt"
|
||
:step="10"
|
||
controls-position="right"
|
||
style="margin: 5px 0"
|
||
@change="e => albugineaOperate(e, 'alt')"
|
||
/>
|
||
</div>
|
||
<!-- <div class="property-row-item">
|
||
<span>是否反色：</span>
|
||
<el-switch v-model="formData.invertColor" @change="e => layerOperate(e, 'invertColor')" />
|
||
</div> -->
|
||
<!-- <div class="property-row-item">
|
||
<span>白膜颜色：{{ formData.color ? formData.color : "" }}</span>
|
||
<el-color-picker v-model="formData.color" @change="e => albugineaOperate(e, 'color')" />
|
||
</div> -->
|
||
<div class="bimModel-operate">
|
||
<div class="select-operate">
|
||
<span>模型构件操作：</span>
|
||
<el-select v-model="selectedFormData.type" placeholder="请选择" @change="modelStatusOperate">
|
||
<el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
|
||
</el-select>
|
||
</div>
|
||
<div class="data-show">
|
||
<div class="property-row-item" v-show="selectedFormData.type == 2">
|
||
<span>选中的颜色值：{{ formData.color ? formData.color : "" }}</span>
|
||
<el-color-picker v-model="selectedFormData.color" color-format="rgb" style="margin-right: 15px"></el-color-picker>
|
||
</div>
|
||
<span>选中的数据值：</span>
|
||
<div class="selected-box" v-if="selectedFormData.type == 1">
|
||
<div v-for="(item, index) in selectedHideList" :key="index" :title="item">
|
||
<span>{{ item.substring(0, 5) }}</span>
|
||
<el-icon @click="deleteSelected(1, index)"><Close /></el-icon>
|
||
</div>
|
||
</div>
|
||
<div class="selected-box" v-if="selectedFormData.type == 2">
|
||
<div v-for="(item, index) in selectedColorList" :key="index" :title="item">
|
||
<span>{{ item.name.substring(0, 5) }}：{{ item.color }}</span>
|
||
<el-icon @click="deleteSelected(2, index)"><Close /></el-icon>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="operate-btn">
|
||
<el-button @click="editAlbugineaConfig">保存当前配置</el-button>
|
||
</div>
|
||
</div>
|
||
<div class="tree-config" v-if="props.type == '白膜'">
|
||
<div class="tree-config-content">
|
||
<el-tree
|
||
ref="modelComponentTree"
|
||
:data="treeData"
|
||
:props="treeProps"
|
||
show-checkbox
|
||
node-key="eleid"
|
||
@check="handleCheckChange"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="layer-config" v-if="props.type == '点坐标效果'">
|
||
<div class="property-row-item">
|
||
<span>效果颜色：{{ formData.color ? formData.color : "" }}</span>
|
||
<el-color-picker v-model="formData.color" @change="e => pointPositionOperate(e, 'color')" />
|
||
</div>
|
||
<div class="property-column-item">
|
||
<span>经度：</span>
|
||
<el-input-number
|
||
v-model.number="formData.lng"
|
||
controls-position="right"
|
||
style="margin: 5px 0px"
|
||
@blur="e => pointPositionOperate(e, 'lng')"
|
||
/>
|
||
</div>
|
||
<div class="property-column-item">
|
||
<span>纬度：</span>
|
||
<el-input-number
|
||
v-model.number="formData.lat"
|
||
controls-position="right"
|
||
style="margin: 5px 0px"
|
||
@blur="e => pointPositionOperate(e, 'lat')"
|
||
/>
|
||
</div>
|
||
<!-- <div class="property-column-item">
|
||
<span>高度：</span>
|
||
<el-input-number v-model.number="formData.alt" controls-position="right" @change="e => pointPositionOperate(e, 'alt')" />
|
||
</div> -->
|
||
<div class="property-column-item">
|
||
<span>半径：{{ formData.radius ? formData.radius : 0 }}米</span>
|
||
<el-slider
|
||
v-model.number="formData.radius"
|
||
:step="200"
|
||
:max="10000"
|
||
:min="200"
|
||
@change="e => pointPositionOperate(e, 'radius')"
|
||
/>
|
||
</div>
|
||
<div class="property-column-item" v-if="formData.type != 'CircleScan'">
|
||
<span>速度值：{{ formData.speed ? formData.speed : 0 }}</span>
|
||
<el-slider
|
||
v-model.number="formData.speed"
|
||
:step="1"
|
||
:max="100"
|
||
:min="1"
|
||
@change="e => pointPositionOperate(e, 'speed')"
|
||
/>
|
||
</div>
|
||
<div class="operate-btn">
|
||
<el-button @click="editPointPositionConfig">保存当前配置</el-button>
|
||
</div>
|
||
</div>
|
||
<div class="layer-config" v-if="props.type == '线效果'">
|
||
<div class="property-column-item">
|
||
<span>宽度：{{ formData.width ? formData.width : 0 }}</span>
|
||
<el-slider v-model.number="formData.width" :step="1" :max="100" :min="1" @change="e => lineEffectOperate(e, 'width')" />
|
||
</div>
|
||
<div class="property-row-item">
|
||
<span>颜色：{{ formData.color ? formData.color : "" }}</span>
|
||
<el-color-picker v-model="formData.color" @change="e => lineEffectOperate(e, 'color')" />
|
||
</div>
|
||
<div class="property-row-item" v-if="formData.type == 'ODLine'">
|
||
<span>线的背景颜色：{{ formData.bgColor ? formData.bgColor : "" }}</span>
|
||
<el-color-picker v-model="formData.bgColor" @change="e => lineEffectOperate(e, 'bgColor')" />
|
||
</div>
|
||
<div class="property-column-item">
|
||
<span>速度值：{{ formData.speed ? formData.speed : 0 }}</span>
|
||
<el-slider v-model.number="formData.speed" :step="1" :max="100" :min="1" @change="e => lineEffectOperate(e, 'speed')" />
|
||
</div>
|
||
<div class="operate-btn">
|
||
<el-button @click="editLineEffectConfig">保存当前配置</el-button>
|
||
</div>
|
||
</div>
|
||
<div class="layer-config" v-if="props.type == '模型'">
|
||
<div class="property-column-item">
|
||
<span>比例：{{ formData.scale ? formData.scale : 0 }}</span>
|
||
<el-slider v-model.number="formData.scale" :step="1" :max="100" :min="1" @change="e => modelOperate(e, 'scale')" />
|
||
</div>
|
||
<div class="property-column-item">
|
||
<span>方向角：{{ formData.heading ? formData.heading : 0 }}</span>
|
||
<el-slider v-model.number="formData.heading" :step="1" :max="360" :min="0" @change="e => modelOperate(e, 'heading')" />
|
||
</div>
|
||
<div class="property-column-item">
|
||
<span>俯仰角：{{ formData.pitch ? formData.pitch : 0 }}</span>
|
||
<el-slider v-model.number="formData.pitch" :step="1" :max="360" :min="0" @change="e => modelOperate(e, 'pitch')" />
|
||
</div>
|
||
<div class="property-column-item">
|
||
<span>翻滚角：{{ formData.roll ? formData.roll : 0 }}</span>
|
||
<el-slider v-model.number="formData.roll" :step="1" :max="360" :min="0" @change="e => modelOperate(e, 'roll')" />
|
||
</div>
|
||
<div class="property-row-item" v-if="formData.silhouette">
|
||
<span>轮廓颜色：{{ formData.silhouetteColor ? formData.silhouetteColor : "" }}</span>
|
||
<el-color-picker v-model="formData.silhouetteColor" @change="e => modelOperate(e, 'silhouetteColor')" />
|
||
</div>
|
||
<div class="property-column-item" v-if="formData.silhouette">
|
||
<span>轮廓宽度：{{ formData.silhouetteSize ? formData.silhouetteSize : 0 }}</span>
|
||
<el-slider
|
||
v-model.number="formData.silhouetteSize"
|
||
:step="1"
|
||
:max="100"
|
||
:min="1"
|
||
@change="e => modelOperate(e, 'silhouetteSize')"
|
||
/>
|
||
</div>
|
||
<div class="operate-btn">
|
||
<el-button @click="editModelConfig">保存当前配置</el-button>
|
||
</div>
|
||
</div>
|
||
<div class="close-btn" @click="$emit('confirm')">
|
||
<el-icon color="#fff" size="18"><CircleClose /></el-icon>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { ref, onMounted, onUnmounted, onBeforeUnmount, watch } from "vue";
|
||
//引入cesium基础库
|
||
import "mars3d-cesium/Build/Cesium/Widgets/widgets.css";
|
||
import * as Cesium from "mars3d-cesium";
|
||
//导入mars3d主库
|
||
import "mars3d/dist/mars3d.css";
|
||
import * as mars3d from "mars3d";
|
||
import {
|
||
baseMapDetails,
|
||
baseMapEdit,
|
||
albugineaMapDetails,
|
||
albugineaMapEdit,
|
||
diffuseWallDetails,
|
||
diffuseWallEdit,
|
||
polylineCombineDetails,
|
||
polylineCombineEdit,
|
||
gltfModelDetails,
|
||
gltfModelEdit
|
||
} from "@/api/modules/mapCommon";
|
||
import { ElMessage } from "element-plus";
|
||
const props = defineProps({
|
||
testMapVisible: Boolean,
|
||
relativeId: String,
|
||
type: String
|
||
});
|
||
const emits = defineEmits(["confirm"]);
|
||
const modelComponentTree = ref();
|
||
const selectedFormData = ref({
|
||
type: 1,
|
||
color: ""
|
||
});
|
||
const selectedHideList = ref<any>([]); // 选中要隐藏的构件
|
||
const selectedColorList = ref<any>([]); // 选中要着色的构件
|
||
const typeOptions = ref([
|
||
{ label: "隐藏", value: 1 },
|
||
{ label: "着色", value: 2 }
|
||
]);
|
||
const treeProps = {
|
||
label: "name",
|
||
children: "children"
|
||
};
|
||
const treeData = ref<any>([]);
|
||
const formData: any = ref({});
|
||
const configJson = ref<any>({
|
||
scene: {
|
||
center: { lat: 26.502888, lng: 106.174716, alt: 1961.1, heading: 25.1, pitch: -50 }
|
||
},
|
||
control: {
|
||
baseLayerPicker: false, // basemaps底图切换按钮
|
||
homeButton: true, // 视角复位按钮
|
||
sceneModePicker: true, // 二三维切换按钮
|
||
navigationHelpButton: true, // 帮助按钮
|
||
fullscreenButton: true, // 全屏按钮
|
||
contextmenu: { hasDefault: true } // 右键菜单
|
||
},
|
||
terrain: {
|
||
url: "//data.mars3d.cn/terrain",
|
||
show: true
|
||
},
|
||
basemaps: [
|
||
{
|
||
name: "天地图影像",
|
||
icon: "img/basemaps/tdt_img.png",
|
||
type: "tdt",
|
||
layer: "img_d",
|
||
show: true
|
||
}
|
||
]
|
||
});
|
||
let map: any;
|
||
let graphicLayer: any;
|
||
let thisLayer: any; // 选中的图层
|
||
let thisAlbuginea: any; // 选中的白膜
|
||
let tiles3dLayer: any;
|
||
// 模型状态操作状态切换
|
||
const modelStatusOperate = () => {
|
||
// if (selectedFormData.value.type == 1) {
|
||
// modelComponentTree.value.setCheckedKeys(selectedHideList.value);
|
||
// } else {
|
||
// let checkArr: any = [];
|
||
// selectedColorList.value.map(item => {
|
||
// checkArr.push(item.name);
|
||
// });
|
||
// modelComponentTree.value.setCheckedKeys(checkArr);
|
||
// }
|
||
};
|
||
// 删除选中数据
|
||
const deleteSelected = (type: any, index: any) => {
|
||
if (type == 1) {
|
||
selectedHideList.value.splice(index, 1);
|
||
} else if (type == 2) {
|
||
selectedColorList.value.splice(index, 1);
|
||
}
|
||
};
|
||
// 处理构件着色的方法
|
||
const handleCheckChange = (e: any, obj: any) => {
|
||
console.log(e);
|
||
console.log(obj);
|
||
if (selectedFormData.value.type == 1) {
|
||
selectedHideList.value = obj.checkedKeys;
|
||
console.log(selectedHideList.value.length);
|
||
} else {
|
||
if (obj.checkedKeys.length > 0) {
|
||
let selectedIndex = -1;
|
||
if (e.children) {
|
||
e.children.map(item => {
|
||
selectedIndex = selectedColorList.value.findIndex(item2 => item2.name == item.eleid);
|
||
if (obj.checkedKeys.includes(item.eleid) && selectedIndex == -1) {
|
||
selectedColorList.value.push({ name: item.eleid, color: selectedFormData.value.color });
|
||
} else if (!obj.checkedKeys.includes(e.eleid) && selectedIndex != -1) {
|
||
selectedColorList.value.splice(selectedIndex, 1);
|
||
}
|
||
});
|
||
} else {
|
||
selectedIndex = selectedColorList.value.findIndex(item2 => item2.name == e.eleid);
|
||
console.log(selectedIndex);
|
||
if (obj.checkedKeys.includes(e.eleid) && selectedIndex == -1) {
|
||
selectedColorList.value.push({ name: e.eleid, color: selectedFormData.value.color });
|
||
} else if (!obj.checkedKeys.includes(e.eleid) && selectedIndex != -1) {
|
||
selectedColorList.value.splice(selectedIndex, 1);
|
||
}
|
||
}
|
||
// selectedColorList.value = selectedColorList.value.filter((item: any, index: any, arr: any) => {
|
||
// let eleIndex = obj.checkedKeys.findIndex((item2: any) => {
|
||
// return item.name === item2;
|
||
// });
|
||
// return eleIndex != -1;
|
||
// });
|
||
} else {
|
||
selectedColorList.value = [];
|
||
}
|
||
}
|
||
};
|
||
// 修改模型当前配置
|
||
const editModelConfig = async () => {
|
||
let requestData = {
|
||
id: props.relativeId,
|
||
...formData.value
|
||
};
|
||
const res: any = await gltfModelEdit(requestData);
|
||
if (res.code == 200) {
|
||
ElMessage.success("操作成功");
|
||
}
|
||
};
|
||
// 修改线效果当前配置
|
||
const editLineEffectConfig = async () => {
|
||
let requestData = {
|
||
id: props.relativeId,
|
||
...formData.value
|
||
};
|
||
const res: any = await polylineCombineEdit(requestData);
|
||
if (res.code == 200) {
|
||
ElMessage.success("操作成功");
|
||
}
|
||
};
|
||
// 修改点坐标当前配置
|
||
const editPointPositionConfig = async () => {
|
||
let requestData = {
|
||
id: props.relativeId,
|
||
...formData.value
|
||
};
|
||
const res: any = await diffuseWallEdit(requestData);
|
||
if (res.code == 200) {
|
||
ElMessage.success("操作成功");
|
||
}
|
||
};
|
||
// 修改白膜当前配置
|
||
const editAlbugineaConfig = async () => {
|
||
let requestData = {
|
||
id: props.relativeId,
|
||
...formData.value,
|
||
hiddenComponentId: JSON.stringify(selectedHideList.value),
|
||
componentColorJson: JSON.stringify(selectedColorList.value)
|
||
};
|
||
const res: any = await albugineaMapEdit(requestData);
|
||
if (res.code == 200) {
|
||
ElMessage.success("操作成功");
|
||
operateComponentStatus();
|
||
}
|
||
};
|
||
// 修改白膜构件状态
|
||
const operateComponentStatus = () => {
|
||
let dataArr: any = [];
|
||
selectedHideList.value.map(item => {
|
||
dataArr.unshift(["${id} ==='" + item + "'", "rgba(255, 255, 255,0)"]);
|
||
});
|
||
selectedColorList.value.map(item => {
|
||
if (item.color) {
|
||
dataArr.unshift(["${id} ==='" + item.name + "'", `${item.color}`]);
|
||
}
|
||
});
|
||
tiles3dLayer.style = {
|
||
color: {
|
||
conditions: dataArr
|
||
}
|
||
};
|
||
};
|
||
// 修改底图当前配置
|
||
const editBaseMapsConfig = async () => {
|
||
let requestData = {
|
||
id: props.relativeId,
|
||
...formData.value
|
||
};
|
||
const res: any = await baseMapEdit(requestData);
|
||
if (res.code == 200) {
|
||
ElMessage.success("操作成功");
|
||
}
|
||
};
|
||
// 模型操作
|
||
const modelOperate = (e: any, label: any) => {
|
||
console.log(e);
|
||
console.log(formData.value);
|
||
if (graphicLayer) {
|
||
let graphic = graphicLayer.getGraphicById(formData.value.id);
|
||
let loadJson = {
|
||
scale: formData.value.scale,
|
||
heading: formData.value.heading,
|
||
pitch: formData.value.pitch,
|
||
roll: formData.value.roll,
|
||
silhouette: formData.value.silhouette,
|
||
silhouetteColor: formData.value.silhouetteColor,
|
||
silhouetteSize: formData.value.silhouetteSize,
|
||
hasShadows: formData.value.hasShadows,
|
||
clampToGround: formData.value.clampToGround
|
||
};
|
||
graphic.setStyle(loadJson);
|
||
// layer.style = loadJson;
|
||
}
|
||
};
|
||
// 线效果操作
|
||
const lineEffectOperate = (e: any, label: any) => {
|
||
console.log(e);
|
||
console.log(formData.value.width);
|
||
console.log(graphicLayer);
|
||
if (graphicLayer) {
|
||
let graphic = graphicLayer.getGraphicById(formData.value.id);
|
||
console.log(graphic);
|
||
let loadJson = {
|
||
width: formData.value.width,
|
||
materialType: mars3d.MaterialType[formData.value.type],
|
||
materialOptions: {
|
||
color: formData.value.color,
|
||
speed: formData.value.speed,
|
||
startTime: random(1000, 3000),
|
||
percent: 0.1,
|
||
alpha: 0.01
|
||
}
|
||
};
|
||
if (formData.value.type == "ODLine") {
|
||
loadJson.materialOptions.bgColor = formData.value.bgColor;
|
||
}
|
||
// graphic.redraw(loadJson);
|
||
graphic.setStyle(loadJson);
|
||
}
|
||
};
|
||
// 点坐标效果操作
|
||
const pointPositionOperate = (e: any, label: any) => {
|
||
console.log(formData.value);
|
||
if (graphicLayer) {
|
||
console.log(666);
|
||
let graphic = graphicLayer.getGraphicById(formData.value.id);
|
||
console.log(graphic);
|
||
let loadJson = {
|
||
radius: formData.value.radius,
|
||
materialOptions: {
|
||
// 扫描材质
|
||
color: formData.value.color,
|
||
speed: formData.value.speed
|
||
},
|
||
clampToGround: true // 是否贴地
|
||
};
|
||
graphic.position = new mars3d.LngLatPoint(formData.value.lng, formData.value.lat, formData.value.alt);
|
||
graphic.setStyle(loadJson);
|
||
}
|
||
console.log(777);
|
||
};
|
||
// 白膜图层操作
|
||
const albugineaOperate = (e: any, label: any) => {
|
||
console.log(formData.value);
|
||
thisAlbuginea = map.getLayerById(formData.value.id);
|
||
console.log(thisAlbuginea);
|
||
if (label == "color") {
|
||
console.log(e, label);
|
||
if (e) {
|
||
thisAlbuginea.style = {
|
||
color: {
|
||
conditions: [["true", "color('" + e + "')"]]
|
||
}
|
||
};
|
||
} else {
|
||
thisAlbuginea.style = {
|
||
color: {
|
||
conditions: [["true", "color('#fff')"]]
|
||
}
|
||
};
|
||
}
|
||
} else {
|
||
thisAlbuginea.position = {
|
||
lng: formData.value.lng,
|
||
lat: formData.value.lat,
|
||
alt: formData.value.alt
|
||
};
|
||
console.log(thisAlbuginea);
|
||
}
|
||
};
|
||
// 底图图层操作
|
||
const layerOperate = (e: any, label: any) => {
|
||
thisLayer = map.getLayerById(formData.value.id);
|
||
console.log(thisLayer);
|
||
if (thisLayer) {
|
||
if (label == "filterColor") {
|
||
console.log(e, label);
|
||
if (e) {
|
||
thisLayer.layer[label] = Cesium.Color.fromCssColorString(e);
|
||
// thisLayer.layer[label] = e;
|
||
} else {
|
||
thisLayer.layer[label] = Cesium.Color.fromCssColorString("#FBFBFB");
|
||
// thisLayer.layer[label] = "#FBFBFB";
|
||
}
|
||
} else {
|
||
thisLayer[label] = e;
|
||
}
|
||
}
|
||
};
|
||
// 获取模型数据详情
|
||
const getModelInfo = async () => {
|
||
let requestData = {
|
||
id: props.relativeId
|
||
};
|
||
const { result }: { result: any } = await gltfModelDetails(requestData);
|
||
console.log(result, "--------gltf模型");
|
||
if (result) {
|
||
formData.value = {
|
||
...result
|
||
};
|
||
await initMars3d(configJson.value);
|
||
}
|
||
};
|
||
// 获取线效果数据详情
|
||
const getLineEffectInfo = async () => {
|
||
let requestData = {
|
||
id: props.relativeId
|
||
};
|
||
const { result }: { result: any } = await polylineCombineDetails(requestData);
|
||
console.log(result, "--------线效果");
|
||
if (result) {
|
||
formData.value = {
|
||
...result
|
||
};
|
||
await initMars3d(configJson.value);
|
||
}
|
||
};
|
||
// 获取点坐标数据详情
|
||
const getPointPositionInfo = async () => {
|
||
let requestData = {
|
||
id: props.relativeId
|
||
};
|
||
const { result }: { result: any } = await diffuseWallDetails(requestData);
|
||
console.log(result, "--------点坐标");
|
||
if (result) {
|
||
formData.value = {
|
||
...result
|
||
};
|
||
await initMars3d(configJson.value);
|
||
}
|
||
};
|
||
// 获取白膜构件数据详情
|
||
const name2text = (o: any) => {
|
||
o.text = o.name;
|
||
|
||
// 这块为了避免tree控件里的id不统一，所以加改变一下
|
||
o.eleid = o.id;
|
||
o.id = undefined;
|
||
|
||
if ((!o.text || o.text.trim() === "") && o.type) {
|
||
o.text = o.type;
|
||
}
|
||
|
||
if (o.children) {
|
||
for (let i = 0; i < o.children.length; i++) {
|
||
name2text(o.children[i]);
|
||
}
|
||
}
|
||
};
|
||
const querySceneTreeData = (url: any) => {
|
||
const scenetree = url.substring(0, url.lastIndexOf("/") + 1) + "scenetree.json";
|
||
return mars3d.Util.fetchJson({ url: scenetree });
|
||
};
|
||
const getAlbugineaTreeData = (model: any) => {
|
||
querySceneTreeData(model)
|
||
.then(function (scene: any) {
|
||
const data = [];
|
||
if (scene.scenes) {
|
||
for (let i = 0; i < scene.scenes.length; i++) {
|
||
const node = scene.scenes[i];
|
||
name2text(node);
|
||
data.push(node);
|
||
}
|
||
} else {
|
||
name2text(scene);
|
||
data.push(scene);
|
||
}
|
||
treeData.value = data;
|
||
console.log(treeData.value);
|
||
})
|
||
.catch(function (error) {
|
||
console.log("加载JSON出错", error);
|
||
});
|
||
};
|
||
// 获取白膜数据详情
|
||
const getAlbugineaInfo = async () => {
|
||
let requestData = {
|
||
id: props.relativeId
|
||
};
|
||
const { result }: { result: any } = await albugineaMapDetails(requestData);
|
||
console.log(result, "--------白膜");
|
||
await initMars3d(configJson.value);
|
||
if (result) {
|
||
formData.value = {
|
||
...result
|
||
};
|
||
selectedHideList.value = JSON.parse(result.hiddenComponentId);
|
||
selectedColorList.value = JSON.parse(result.componentColorJson);
|
||
let showObj = {
|
||
id: result.id,
|
||
name: result.name,
|
||
url: result.url,
|
||
maximumScreenSpaceError: 16,
|
||
cacheBytes: 1073741824, // 1024MB = 1024*1024*1024
|
||
maximumCacheOverflowBytes: 2147483648, // 2048MB = 2048*1024*1024
|
||
position: { lng: result.lng, lat: result.lat, alt: result.alt },
|
||
popup: "all",
|
||
flyTo: true
|
||
};
|
||
if (+result.lng || +result.lat || +result.alt) {
|
||
showObj.position = { lng: +result.lng, lat: +result.lat, alt: +result.alt };
|
||
}
|
||
tiles3dLayer = new mars3d.layer.TilesetLayer(showObj);
|
||
map.addLayer(tiles3dLayer);
|
||
getAlbugineaTreeData(result.url);
|
||
operateComponentStatus();
|
||
// if (selectedFormData.value.type == 1) {
|
||
// modelComponentTree.value.setCheckedKeys(selectedHideList.value);
|
||
// } else {
|
||
// let checkArr: any = [];
|
||
// selectedColorList.value.map(item => {
|
||
// checkArr.push(item.name);
|
||
// });
|
||
// modelComponentTree.value.setCheckedKeys(checkArr);
|
||
// }
|
||
// configJson.value.layers = [
|
||
// {
|
||
// id: result.id,
|
||
// name: result.name,
|
||
// type: "3dtiles",
|
||
// url: result.url,
|
||
// position: { lng: formData.value.lng, lat: formData.value.lat, alt: formData.value.alt },
|
||
// maximumScreenSpaceError: 1,
|
||
// style: {
|
||
// color: {
|
||
// conditions: [["true", "color('" + result.color + "')"]]
|
||
// }
|
||
// },
|
||
// show: true,
|
||
// flyTo: true
|
||
// }
|
||
// ];
|
||
}
|
||
};
|
||
// 获取底图数据详情
|
||
const getBaseMapsInfo = async () => {
|
||
let requestData = {
|
||
id: props.relativeId
|
||
};
|
||
const { result }: { result: any } = await baseMapDetails(requestData);
|
||
console.log(result);
|
||
if (result) {
|
||
formData.value = { ...result, opacity: result.opacity && result.opacity == 0 ? result.opacity : 1 };
|
||
configJson.value.basemaps = [
|
||
{
|
||
id: result.id,
|
||
name: result.name,
|
||
...JSON.parse(result.layer),
|
||
brightness: result.brightness,
|
||
contrast: result.brightness,
|
||
filterColor: result.filterColor
|
||
? Cesium.Color.fromCssColorString(result.filterColor)
|
||
: Cesium.Color.fromCssColorString("#FBFBFB"),
|
||
briggammahtness: result.gamma,
|
||
hue: result.hue,
|
||
// invertColor: result.invertColor,
|
||
saturation: result.saturation,
|
||
opacity: result.opacity && result.opacity == 0 ? result.opacity : 1,
|
||
show: true
|
||
}
|
||
];
|
||
configJson.value.scene.center = { lat: 26.502888, lng: 106.174716, alt: 17036414, heading: 0, pitch: -90 };
|
||
initMars3d(configJson.value);
|
||
}
|
||
};
|
||
// 取区域内的随机点
|
||
const randomPoint = (position: any) => {
|
||
const jd = random(position[0].lng * 1000, position[1].lng * 1000) / 1000;
|
||
const wd = random(position[0].lat * 1000, position[1].lat * 1000) / 1000;
|
||
return new mars3d.LngLatPoint(jd, wd, 100);
|
||
};
|
||
|
||
// 取随机数字
|
||
const random = (min: any, max: any) => {
|
||
return Math.floor(Math.random() * (max - min + 1) + min);
|
||
};
|
||
const initMars3d = async (option: any) => {
|
||
console.log(666);
|
||
map = new mars3d.Map("mars3dContainer", option);
|
||
map.fixedLight = true; // 固定光照，避免gltf模型随时间存在亮度不一致。
|
||
// 固定光照时间
|
||
map.clock.currentTime = Cesium.JulianDate.fromDate(new Date("2022-11-01 12:00:00"));
|
||
// 创建矢量数据图层
|
||
graphicLayer = new mars3d.layer.GraphicLayer();
|
||
map.addLayer(graphicLayer);
|
||
if (props.type == "点坐标效果") {
|
||
let _rotation = Math.random();
|
||
let loadJson = {
|
||
id: formData.value.id,
|
||
position: new mars3d.LngLatPoint(formData.value.lng, formData.value.lat, formData.value.alt),
|
||
style: {
|
||
radius: formData.value.radius,
|
||
materialType: mars3d.MaterialType[formData.value.type],
|
||
materialOptions: {
|
||
// 扫描材质
|
||
image: formData.value.type == "CircleScan" ? formData.value.image : "",
|
||
color: formData.value.color,
|
||
speed: formData.value.speed
|
||
},
|
||
// stRotation: new Cesium.CallbackProperty(function (e) {
|
||
// _rotation += 0.1;
|
||
// return _rotation;
|
||
// }, false),
|
||
// classificationType: Cesium.ClassificationType.BOTH,
|
||
clampToGround: true // 是否贴地
|
||
},
|
||
attr: { remark: "展示" }
|
||
};
|
||
|
||
if (formData.value.type == "CircleScan") {
|
||
loadJson.style.stRotation = new Cesium.CallbackProperty(function (e) {
|
||
_rotation += 0.1;
|
||
return _rotation;
|
||
}, false);
|
||
loadJson.style.classificationType = Cesium.ClassificationType.BOTH;
|
||
}
|
||
const graphic = new mars3d.graphic.CircleEntity(loadJson);
|
||
graphicLayer.addGraphic(graphic);
|
||
graphic.flyTo();
|
||
//绑定经纬度监听事件
|
||
graphic.on(mars3d.EventType.editMovePoint, function (event) {
|
||
console.log("移动改变了矢量数据对象", event);
|
||
let graphic = graphicLayer.getGraphicById(formData.value.id);
|
||
formData.value.lng = event.target.point.lng;
|
||
formData.value.lat = event.target.point.lat;
|
||
formData.value.alt = event.target.point.alt;
|
||
formData.value.radius = event.target.radius;
|
||
// let loadJson = {
|
||
// position: new mars3d.LngLatPoint(formData.value.lng, formData.value.lat, formData.value.alt),
|
||
// style: {
|
||
// radius: formData.value.radius
|
||
// }
|
||
// };
|
||
// graphic.setStyle(loadJson);
|
||
});
|
||
// 开启编辑状态
|
||
graphic.startEditing();
|
||
}
|
||
if (props.type == "线效果") {
|
||
const arrData: any = [];
|
||
if (formData.value.type == "LineFlowColor") {
|
||
const linePositions = JSON.parse(formData.value.positions);
|
||
for (let j = 0; j < 100; ++j) {
|
||
const startPt = randomPoint(linePositions);
|
||
|
||
const endPt = startPt.clone();
|
||
endPt.alt = random(linePositions[0].alt, linePositions[1].alt);
|
||
|
||
arrData.push({
|
||
positions: [startPt, endPt],
|
||
style: {
|
||
width: formData.value.width,
|
||
materialType: mars3d.MaterialType.LineFlowColor,
|
||
materialOptions: {
|
||
color: formData.value.color,
|
||
speed: formData.value.speed,
|
||
startTime: random(1000, 3000),
|
||
percent: 0.1,
|
||
alpha: 0.01
|
||
}
|
||
}
|
||
});
|
||
}
|
||
} else {
|
||
mars3d.Util.fetchJson({ url: JSON.parse(formData.value.jsonFile).url }).then(function (data) {
|
||
const busLines: any = [];
|
||
data.forEach(function (busLine: any, idx: any) {
|
||
let prevPt: any;
|
||
const points = [];
|
||
for (let i = 0; i < busLine.length; i += 2) {
|
||
let pt = [busLine[i], busLine[i + 1]];
|
||
if (i > 0) {
|
||
pt = [prevPt[0] + pt[0], prevPt[1] + pt[1]];
|
||
}
|
||
prevPt = pt;
|
||
|
||
const longitude = pt[0] / 1e4;
|
||
const latitude = pt[1] / 1e4;
|
||
const cart = Cesium.Cartesian3.fromDegrees(longitude, latitude, 100.0);
|
||
points.push(cart);
|
||
}
|
||
|
||
busLines.push({
|
||
positions: points,
|
||
color: new Cesium.Color(Math.random() * 0.5 + 0.5, Math.random() * 0.8 + 0.2, 0.0, 1.0),
|
||
speed: 2 + 1.0 * Math.random()
|
||
});
|
||
});
|
||
busLines.forEach(function (item: any, index: any) {
|
||
arrData.push({
|
||
positions: item.positions,
|
||
style: {
|
||
width: formData.value.width,
|
||
materialType: mars3d.MaterialType.ODLine,
|
||
materialOptions: {
|
||
color: formData.value.color,
|
||
speed: formData.value.speed,
|
||
bgColor: formData.value.bgColor,
|
||
startTime: Math.random()
|
||
}
|
||
},
|
||
attr: { index: index }
|
||
});
|
||
});
|
||
});
|
||
}
|
||
setTimeout(function () {
|
||
// 多个线对象的合并渲染。
|
||
const graphic = new mars3d.graphic.PolylineCombine({
|
||
id: formData.value.id,
|
||
instances: arrData
|
||
});
|
||
console.log(graphic);
|
||
graphicLayer.addGraphic(graphic);
|
||
graphic.flyTo({ minHeight: 2000 });
|
||
}, 200);
|
||
}
|
||
if (props.type == "模型") {
|
||
// 创建gltf模型，
|
||
const model = new mars3d.graphic.ModelPrimitive({
|
||
id: formData.value.id,
|
||
name: formData.value.name,
|
||
position: [formData.value.lng, formData.value.lat, formData.value.alt],
|
||
style: {
|
||
url: formData.value.url,
|
||
scale: formData.value.scale,
|
||
heading: formData.value.heading,
|
||
pitch: formData.value.pitch,
|
||
roll: formData.value.roll,
|
||
silhouette: formData.value.silhouette,
|
||
silhouetteColor: formData.value.silhouetteColor,
|
||
silhouetteSize: formData.value.silhouetteSize,
|
||
hasShadows: formData.value.hasShadows,
|
||
clampToGround: formData.value.clampToGround
|
||
}
|
||
});
|
||
console.log(model);
|
||
graphicLayer.addGraphic(model);
|
||
model.flyTo({ maxHeight: 200 });
|
||
}
|
||
};
|
||
onBeforeUnmount(async () => {
|
||
// if (props.type == "底图") {
|
||
// await getBaseMapsInfo();
|
||
// } else if (props.type == "白膜") {
|
||
// await getAlbugineaInfo();
|
||
// } else if (props.type == "点坐标效果") {
|
||
// await getPointPositionInfo();
|
||
// } else if (props.type == "线效果") {
|
||
// await getLineEffectInfo();
|
||
// } else if (props.type == "模型") {
|
||
// await getModelInfo();
|
||
// }
|
||
});
|
||
onMounted(async () => {
|
||
if (props.type == "底图") {
|
||
await getBaseMapsInfo();
|
||
} else if (props.type == "白膜") {
|
||
await getAlbugineaInfo();
|
||
} else if (props.type == "点坐标效果") {
|
||
await getPointPositionInfo();
|
||
} else if (props.type == "线效果") {
|
||
await getLineEffectInfo();
|
||
} else if (props.type == "模型") {
|
||
await getModelInfo();
|
||
}
|
||
});
|
||
onUnmounted(() => {
|
||
map = null;
|
||
thisLayer = null;
|
||
graphicLayer = null;
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import "./index.scss";
|
||
</style>
|