相关示例地址
http://support.supermap.com.cn:8090/webgl/examples/webgl/editor.html#S3MTiles_jingmo
http://support.supermap.com.cn:8090/webgl/examples/webgl/editor.html#individualInformation1、在.env中配置相关地址
#天地图加载
VUE_APP_TDT_URL="http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&tk=f3c7686f9105b56ab7be92068ddb3a97"
#智慧岛3D图层
VUE_APP_ZHDSW_URL= 'http://117.160.193.41:8090/iserver/services/3D-ZHDSW/rest/realspace'
#VUE_APP_ZHDSW_URL="http://10.200.11.58:8090/iserver/services/3D-ZHDSW/rest/realspace"
#智慧岛分层图层
VUE_APP_ZHDFCFH_URL="http://117.160.193.41:8090/iserver/services/3D-ZHDFCFH/rest/realspace"
#VUE_APP_ZHDFCFH_URL="http://10.200.11.58:8090/iserver/services/3D-ZHDFCFH/rest/realspace"
2、在列表加载数据
<template>
<div class="common_contain_wrap">
<div class="flex_space_between">
<div class="title">
招商楼宇
</div>
<div>
<el-button type="primary" size="mini" @click="switchExpand">{{ expand ? '收起' : '展开' }}</el-button>
<el-button v-if="showBuildingDetail" size="mini" @click="returnBack"
>返回</el-button
>
<el-button type="primary" size="mini">导出楼宇信息</el-button>
</div>
</div>
<el-divider></el-divider>
<div class="flex_space_between main">
<div class="item_wrap" v-if="expand">
<div class="item_block">
<item-block
v-show="!showBuildingDetail"
v-for="item in itemArr"
:key="item.name"
:expand="expand"
:src="item.src"
:name="item.name"
:num="item.num"
:unit="item.unit"
>
</item-block>
</div>
<div v-if="!showBuildingDetail" class="search_area">
<div class="flex_start item">
<div class="name">
载体名称：
</div>
<el-input
type="text"
sizi="mini"
placeholder="请输入楼宇名称"
v-model="name"
></el-input>
<el-button type="primary" size="mini" @click="search"
>查询</el-button
>
</div>
<div class="flex_start item">
<div class="name">
物 业 费 ：
</div>
<div
class="wyf_item"
v-for="item in wyfArr"
@click="setwyf(item)"
:class="activedWyf === item ? 'active' : ''"
>
{{ item }}
</div>
</div>
<div class="flex_start item">
<div class="name">招商面积：</div>
<div
class="wyf_item"
v-for="item in zsmjArr"
@click="setZsmj(item)"
:class="activedZsmj === item ? 'active' : ''"
>
{{ item }}
</div>
</div>
<div class="flex_start item">
<div class="name">招商载体：</div>
<div
class="wyf_item"
v-for="item in zsztArr"
@click="setZszt(item)"
:class="activedZszt === item ? 'active' : ''"
>
{{ item }}
</div>
</div>
</div>
<div v-if="showBuildingDetail" class="info_block">
<div class="item" v-for="item in detailInfo" :key="item.label">
<div class="label">{{ item.label }}：</div>
<div class="val">{{ item.val }}</div>
</div>
</div>
<el-tabs
v-if="showBuildingDetail"
class="tab_block"
v-model="activeName"
@click="switchPageDetailsc"
>
<el-tab-pane label="房间列表" name="first"></el-tab-pane>
<el-tab-pane label="企业列表" name="second"></el-tab-pane>
</el-tabs>
<div class="table_block">
<MyTable
size="mini"
:show-header="true"
:stripe="false"
:multiple="false"
:height="'320px'"
:title-show="true"
:title="''"
:operation="operation"
:align="'left'"
:column="tableColumn"
:data="tableData"
:current-page="currentPage"
:page-size="pageSize"
:page-sizes="[10, 20, 50]"
:total="total"
@handleSizeChange="handleSizeChange"
@handleCurrentChange="handleCurrentChange"
@tomap="tomap"
@detail="viewBuilding"
>
</MyTable>
</div>
</div>
<div class="canvas_wrap" :class="expand?'':'not_expand'">
<div class="mapTools">
<el-checkbox v-model="showBuildingShell" @change="changeLayers">楼宇模型</el-checkbox>
<el-checkbox v-model="showRooms" @change="changeLayers">分层分户</el-checkbox>
<el-checkbox v-model="showLabels" @change="changeLayers">标注图层</el-checkbox>
<el-checkbox v-model="flyCircle" @change="changeFlyCircle">绕楼旋转</el-checkbox>
</div>
<div class="build_Info flex_start" v-if="!expand">
<item-block
style="margin-right:20px"
v-show="!showBuildingDetail"
v-for="item in itemArr"
:key="item.name"
:src="item.src"
:name="item.name"
:num="item.num"
:expand="expand"
:unit="item.unit"
>
</item-block>
</div>
<div id="cesiumContainer" class="cesiumContainer"></div>
<!-- <sm-viewer id="cesiumContainer" style="width:100%;height:calc(100vh)" :scene-url="testUrl"> </sm-viewer> -->
</div>
</div>
</div>
</template>
<script>
import MyTable from "@/components/MyTable";
import itemBlock from "./components/itemBlock";
import { getTableData, tableColumn, operationBtn, getRoomOperationBtn, getDetailInfo, roomColumn, roomData, coColumn,getCoOperationBtn, coData} from './tableData.js'
var viewer,buildDataSource,poiDataSource,promiseVectorLayer=null,buildingShell=null,textLayer=null;
var preEntity=null,preImage=null;
export default {
components: {
itemBlock,
MyTable
},
data() {
// 表格操作配置
var operation = {
show: true,
width: "100px",
label: "操作",
btns: operationBtn()
};
return {
expand: true, //展开详情
showBuildingShell: true,
showRooms: true,
showLabels: true,
flyCircle: true,
activeName: "first",
name: "",
wyfArr: ["不限", "0-5元/平米月", "5-8元/平米月", "8-10元/平米月", "其他"],
zsmjArr: [
"不限",
"0-300平米",
"300-500平米",
"500-800平米",
"800-1000平米",
"1000-2000平米",
"其他"
],
zsztArr: [
"不限",
"0-20元/平米月",
"20-40元/平米月",
"40-60元/平米月",
"60-80元/平米月",
"其他"
],
activedWyf: "不限",
activedZszt: "不限",
activedZsmj: "不限",
itemArr: [
{
src: require("@/assets/images/下载 (1).png"),
name: "载体数量",
num: "21",
unit: "座"
},
{
src: require("@/assets/images/下载 (2).png"),
name: "可用房源",
num: "21",
unit: "套"
},
{
src: require("@/assets/images/下载 (3).png"),
name: "租金均价",
num: "21",
unit: "元/平米天"
},
{
src: require("@/assets/images/下载 (1).png"),
name: "入驻企业",
num: "21",
unit: "座"
},
{
src: require("@/assets/images/下载 (2).png"),
name: "总入住率",
num: "21",
unit: "套"
},
{
src: require("@/assets/images/下载 (3).png"),
name: "可招商面积",
num: "21",
unit: "元/平米天"
}
],
operation: operation,
tableColumn: tableColumn(),
tableData: [],
roomResult:[],
total: 1,
currentPage: 1,
pageSize: 10,
detailInfo: [],
showBuildingDetail: false,
viewer: null,
scene: null,
camera: null,
cesiumReady: false,
currentBuildingId: null,
buildInfo: null
};
},
mounted() {
this.initMap();
this.searchBuildings();
},
methods: {
switchExpand(){
this.expand = !this.expand;
},
returnBack() {
this.showBuildingDetail = false;
this.getBuildingData()
this.tableColumn = tableColumn()
this.operation.btns = operationBtn()
},
initMap() {
viewer = this.viewer
if(!viewer){
viewer = new Cesium.Viewer("cesiumContainer");
textLayer = viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
name: 'tiandituLabel',
url: process.env.VUE_APP_TDT_URL,
layer: "cia",
style: "default",
format: "image/jpeg",
tileMatrixSetID: "w",
show: false
}));
this.viewer= viewer
var scene = viewer.scene; //获取场景
var buildingsModel = scene.open(process.env.VUE_APP_ZHDSW_URL);
buildingsModel.then(function(layers){
window.buildingShell=buildingShell=layers;
/* 当前视图初始化建筑位置笛卡尔信息
eg: console.log(333, buildDataSource.entities.getById("1").position._value)
获取当前建筑列表第一项建筑的笛卡尔位置信息 */
// let firstPosition = buildDataSource.entities.getById("800").position._value
scene.camera.flyTo({ //将相机从当前位置移动到新位置。
// destination: 相机在WGS84世界坐标系中的最终位置，或是自顶向下视图中可见的矩形区域。参数为视图点笛卡尔坐标位置
destination: new Cesium.Cartesian3(
// firstPosition.x,
// firstPosition.y,
// firstPosition.z
-2114359.69383942,
4793659.2525840225,
3638904.177806847
),
orientation: {
//包含方向和向上属性或航向，俯仰和横滚属性的对象。默认情况下，方向将指向在3D中朝向帧中心，在哥伦布视图中沿负z方向。向上方向将指向3D局部正北哥伦布视图中的y方向。在无限滚动模式下，二维不使用方向。
heading: Cesium.Math.toRadians(353), //heading:朝向 toRadians:将度转换为弧度
pitch: Cesium.Math.toRadians(-41), //俯视 倾斜度
roll: Cesium.Math.toRadians(0) //滚动度
}
});
});
this.scene = scene;
if (!buildDataSource) {
// 实现，可用于手动管理一组实体。
window.buildDataSource = buildDataSource = new Cesium.CustomDataSource();
viewer.dataSources.add(buildDataSource);
}
if (!poiDataSource) {
// 实现，可用于手动管理一组实体。
window.poiDataSource = poiDataSource = new Cesium.CustomDataSource();
viewer.dataSources.add(poiDataSource);
}
var camera = scene.camera;
this.camera = camera;
this.cesiumReady = true;
}
},
searchBuildings() {
this.getBuildingData();
this.getTotalBuildingData();
},
getBuildingData() {
// 当前页建筑
this.tableData = getTableData()
this.loading = false;
this.tableTotal = 1;
},
getTotalBuildingData() {
// 地图渲染所有建筑
this.setBuildsOnMap(
this.tableData,
"/static/images/buildico.png",
this.viewBuilding
);
},
tomap(row) {
// 楼宇模型定位按钮
let viewer = this.viewer
this.currentBuildingId = row.id;
let id = row.id;
this.setSymbolOnMap(buildDataSource, row.id, "/static/images/redico.png");
this.flyToEntity(buildDataSource, id, 200, 3, position => {
if (this.flyCircle) {
viewer.camera.stopFlyCircle();
let center = viewer.entities.getById("trackedEntity").position._value;
console.log("center== ", center);
viewer.camera.flyCircle(center);
}
});
},
flyToEntity(dataSource, id, distance, time, callback) {
let viewer = this.viewer
/*添加定位实体*/
console.log("88888888888viewer===", viewer, viewer.entities);
viewer.entities.removeById("trackedEntity");
console.log("id:" + id);
var position = this.C3TODegrees(
dataSource.entities.getById(id).position._value
);
var radius = 0.1;
// 添加实体对象到当前视图
var sphere = viewer.entities.add({
id: "trackedEntity",
position: Cesium.Cartesian3.fromDegrees(
position.lon,
position.lat,
position.height - 80
),
ellipsoid: {
radii: new Cesium.Cartesian3(radius, radius, radius),
fill: false,
outline: true,
outlineColor: Cesium.Color.YELLOW.withAlpha(0.8),
slicePartitions: 1, //24,36
stackPartitions: 1
//show:false
}
});
var pp = viewer.flyTo(sphere, {
duration: time ? time : 3,
// maximumHeight:100,
offset: {
heading: viewer.camera.heading,
pitch: Cesium.Math.toRadians(-25),
range: distance
}
});
pp.then(function() {
if (callback) {
callback(position);
}
});
},
setBuildsOnMap(points, imageUrl, clicked) {
console.log("0000000000 cesiumReady===", this.cesiumReady);
if (!this.cesiumReady) {
setTimeout(() => {
this.setBuildsOnMap(points, imageUrl, clicked);
console.log("cesium加载等待……");
}, 400);
return;
}
// entities:获取 Entity 实例的集合。并从集合中删除所有实体。
buildDataSource.entities.removeAll();
// 获取此实体集合是否应为显示。如果为true，则仅在以下情况下显示每个实体:它自己的show属性也是如此。
buildDataSource.show = true;
// points：循环数据列表，将每一项add到
for (let build of points) {
let height = build.height;
if (!height) {
height = 200;
} else {
height += 85;
}
console.log('build==',build)
//自动获取模型高度，存在加载延迟bug，暂停@wxp
// height=viewer.scene.getHeight(Number(build.lngt),Number(build.latt));
// console.log(height);
let cartesian = Cesium.Cartesian3.fromDegrees(
Number(build.lngt),
Number(build.latt),
height
);
let desc = ''
desc = '<div style="display:flex;justify-content: flex-start;margin-top: 8px;">载体名称：<div style="color:#4296FD;">'+ build.smid+'</div></div>'+
'<div style="display:flex;justify-content: flex-start;margin-top: 8px;">招商面积：<div style="color:#4296FD;">'+build.investmentarea+'</div></div>'+
'<div style="display:flex;justify-content: flex-start;margin-top: 8px;">入驻企业：<div style="color:#4296FD;">'+build.enterprises+'</div></div>'+
'<div style="display:flex;justify-content: flex-start;margin-top: 8px;">可用房源：<div style="color:#4296FD;">'+build.empty_rooms+'</div></div>'+
'<div style="display:flex;justify-content: flex-start;margin-top: 8px;">租金：<div style="color:#4296FD;">'+build.property_cost+'</div></div>'+
'<div style="display:flex;justify-content: flex-start;margin-top: 8px;">物业费：<div style="color:#4296FD;">'+build.wyf+'</div></div>'
let entity = buildDataSource.entities.add({
id: build.id,
name: build.name,
position: cartesian,
// 广告牌
billboard: {
// 图标
image: imageUrl,
// 图标大小
width: 20,
height: 25,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM, //图标相对对象的位置：底部。
//heightReference:Cesium.HeightReference.CLAMP_TO_GROUND,
disableDepthTestDistance: 100
},
label: {
text: build.name,
showBackground: true,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
pixelOffset: new Cesium.Cartesian2(0, -25),
font: "normal 16px MicroSoft YaHei",
fillColor: Cesium.Color.WHITE,
backgroundColor: Cesium.Color.BLACK.withAlpha(0.8),
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
0.0,
400
),
disableDepthTestDistance: 500
},
description:'<div class="desc_box" style="color:#2c2c2c;">'+desc+'</div>'
// description: {
// name: build.name,
// uuid: build.id,
// attrs: build,
// click: () => {
// clicked(build);
// }
// }
});
}
},
setSymbolOnMap(dataSource, uuid, currentImage) {
// 获取具有指定ID的实体。
var currenEntity = dataSource.entities.getById(uuid);
// 如果没有选中实体对象
if (preEntity == null) {
preEntity = currenEntity.billboard;
preImage = preEntity.image.getValue();
currenEntity.billboard.image = currentImage;
} else if (uuid != preEntity.id) {
preEntity.image = preImage;
preEntity = currenEntity.billboard;
preImage = preEntity.image.getValue();
currenEntity.billboard.image = currentImage;
}
},
// cesium3笛卡尔坐标转换为经纬度地理坐标
C3TODegrees(c3) {
let viewer = this.viewer
// globe:获取或设置深度测试椭球。ellipsoid：确定尺寸和形状地球。
// 获取描述此地球形状的椭圆体。
var ellipsoid = viewer.scene.globe.ellipsoid //
// 3D笛卡尔点。
var cartesian3 = new Cesium.Cartesian3(c3.x,c3.y,c3.z);
// cartesianToCartographic：将提供的笛卡尔转换为制图表达。笛卡尔在椭球的中心是不确定的。
var cartographic = ellipsoid.cartesianToCartographic(cartesian3);
return {
lon: Cesium.Math.toDegrees(cartographic.longitude), // 将弧度转换为度
lat: Cesium.Math.toDegrees(cartographic.latitude),
height: cartographic.height
};
},
viewBuilding(build) {
console.log('333', this.showBuildingDetail, this.activeName)
// 详情页定位按钮
if(this.showBuildingDetail && this.activeName === 'first'){
this.pantoRoom(build)
return
}
// 建筑列表点击查看，跳转详情页
this.roomResult = [];
this.currentBuildingId = build.id;
this.currentBuildingName = build.name;
this.activeName = "first";
this.getBuildInfo(); //获取当前建筑详情
this.getRoomData(); //获取房间列表数据
this.operation.btns = getRoomOperationBtn()
this.showBuildingDetail = true; //显示详情信息
this.switchPageDetailsc(); //切换
this.setSymbolOnMap( //设置当前选中建筑图标
buildDataSource,
this.currentBuildingId,
"/static/images/redico.png"
);
this.flyToEntity( //飞入当前选中实体
buildDataSource,
this.currentBuildingId,
200,
3,
position => {
this.showBuildingShell = false; //点击查看，不显示建筑模型，可以显示分层图层，进行分层查看
this.changeLayers(); //手动激活值改变函数
}
);
viewer.scene.layers.remove("buildingRooms");
// 添加当前查看建筑分层分户图层 三维切片缓存图层（S3M、S3MB）。
let url = process.env.VUE_APP_ZHDFCFH_URL //分层分户属性表
var promise = viewer.scene.addS3MTilesLayerByScp(url + '/datas/'+build.smid+'/config',{
name:'buildingRooms' //指定图层名称
});
promise.then((vectorLayer)=> {
// 设置房间3dt图层
window.promiseVectorLayer = promiseVectorLayer = vectorLayer;
window.vectorLayer = vectorLayer;
vectorLayer.cullEnabled = false; //cullEnabled:是否剔除背面，默认不剔除，双面渲染
vectorLayer.selectionFiltrateByTransparency = 0; // 不过滤透明度为0的物体，当前图层就不会被过滤
vectorLayer.selectedColor = Cesium.Color.RED; //选中图层颜色
vectorLayer.selectColorType = 0; //选中对象的显示风格：模型纯色显示。
vectorLayer.style3D.fillForeColor = new Cesium.Color(1.0, 1.0, 1.0, 0.5);
//暂时二次加载
this.setRoomsColor(this.roomResult,Cesium.Color.BLUE);
});
},
pantoRoom(room) {
let viewer = this.viewer
viewer.entities.removeById('trackedEntity');
// 当前房间的经纬度不存在
if(!room.lngt){
promiseVectorLayer.removeAllObjsColor();
promiseVectorLayer.removeAllObjsOffset();
promiseVectorLayer.setSelection([]);
this.setRoomColor(this.roomResult,room.smid,Cesium.Color.BLUE,Cesium.Color.RED);
return;
}
// 当前房间经纬度存在
var radius=0.1;
var distance=100;
var sphere = viewer.entities.add({
id:'trackedEntity',
position : Cesium.Cartesian3.fromDegrees(Number(room.lngt),Number(room.latt), Number(room.height)+2),
ellipsoid : {
radii : new Cesium.Cartesian3(radius,radius,radius), //
fill : false, //是否填充
outline : true,
outlineColor : Cesium.Color.YELLOW.withAlpha(0.8), //外边线颜色
slicePartitions : 1,//分割切片
stackPartitions : 1, //分割堆
//show:false
}
});
var pp=viewer.flyTo(sphere,{
duration:3,
// maximumHeight:100,
offset: {
//toRadians: 将度转换为弧度。
heading: room.towards?Cesium.Math.toRadians(room.towards-180):viewer.camera.heading,//后期加上朝向@wxp
pitch: Cesium.Math.toRadians(-25),
range: distance
}
}).then(()=>{
promiseVectorLayer.removeAllObjsColor();
promiseVectorLayer.removeAllObjsOffset();
promiseVectorLayer.setSelection([]);
console.log(8888888, this.roomResult,'room.smid,Cesium.Color.BLUE=========',room.smid,Cesium.Color.BLUE,Cesium.Color.RED)
this.setRoomColor(this.roomResult,room.smid,Cesium.Color.BLUE,Cesium.Color.RED);
});
},
setRoomColor(rooms,room,precolor,color){ /*单体设色*/
let roomArray=[];
for(let room of rooms){
roomArray.push(Number(room.smid));
}
promiseVectorLayer.setObjsColor(roomArray,precolor);
promiseVectorLayer.setObjsColor([Number(room)],color);
},
changeLayers(checked,elem){
let viewer = this.viewer
//process.env.BUILDINGSHELLNAME: ZHDBUI@ZHDHB
viewer.scene.layers.find('ZHDBUI@ZHDHB').visible=this.showBuildingShell;
if(viewer.scene.layers.find('buildingRooms'))
viewer.scene.layers.find('buildingRooms').visible=this.showRooms;
textLayer.show=this.showLabels;
},
changeFlyCircle(checked){
let viewer = this.viewer
if(!checked){
viewer.camera.stopFlyCircle();
}
},
switchPageDetailsc() {
if(this.activeName === 'first'){
this.getRoomData(); //获取房间列表数据
}else{
this.getCoData(); //获取企业列表数据
}
this.detailInfo = getDetailInfo()
},
setRoomsColor(rooms, color) {
let roomArray = [];
for (let room of rooms) {
roomArray.push(Number(room.smid));
}
promiseVectorLayer.setObjsColor(roomArray, color);
},
getBuildInfo() {
var params = {};
params.buildId = this.currentBuildingId;
let start = new Date().getTime();
// 根据id获取当前建筑详细信息
this.buildInfo = {
address: "郑州市郑东新区中道东路6号",
air_conditioning_fee: "0.44",
area: "109787.33",
build_date: "",
build_decoration: "001001000020001",
build_decorationname: "毛坯",
contact_people: "",
contact_tel: "",
electricity_fee: "",
elevators: "",
format: "001001000010002",
formatname: "商业综合体",
freight_elevators: "",
heat: "",
heating_costs: "0.38",
heatname: "",
height: 49,
investmentarea: 1901.43,
name: "创意岛大厦",
net: "",
netname: "",
park: 831,
parking_fee: "",
power: "",
property: "50",
property_cost: "9.5",
property_name: "河南创意开来物业管理有限公司",
property_qualification: "",
property_qualificationname: "",
rent: "",
total_floors: 11,
traffic: "",
water_fee: ""
};
// this.$store.dispatch('searchBuildingInfo', params).then((data) => {
// let end = new Date().getTime();
// console.log("请求列表数据用时：" + (end - start) / 1000 + "秒");
// console.log(data);
// window.cess=data[0];
// if(data.length<1){
// this.buildInfo={};
// }else{
// this.buildInfo = data[0];
// }
// this.loading = false;
// }).catch(data => {
// console.log(data);
// });
},
getRoomData() {
this.roomResult = roomData()
this.tableData = this.roomResult
this.tableColumn = roomColumn()
// 当前建筑物详情-房间列表数据
},
getCoData() {
// 当前建筑物详情-企业列表数据
this.tableColumn = coColumn()
this.tableData = coData()
this.operation.btns = getCoOperationBtn()
},
handleSizeChange(e) {
this.currentPage = 1;
this.pageSize = e;
this.fetchData();
},
handleCurrentChange(e) {
this.currentPage = e;
this.fetchData();
},
fetchData() {},
setwyf(val) {
this.activedWyf = val;
},
setZszt(val) {
this.activedZszt = val;
},
setZsmj(val) {
this.activedZsmj = val;
},
search() {}
}
};
</script>
<style lang="scss" scoped>
.common_contain_wrap {
width: 98%;
margin: 10px auto;
background: #fff;
padding: 20px;
.title {
font-size: 18px;
}
.search_area {
// text-align: left;
background: #f0f2f5;
margin: 0 2px 5px 0;
padding: 12px 10px;
.item {
font-family: PingFangSC-Regular;
font-size: 14px;
padding: 5px 1px;
.name {
display: inline-block;
min-width: 78px;
max-width: 100px;
// border:1px solid salmon;
}
.wyf_item {
cursor: pointer;
margin-right: 10px;
color: rgba(0, 0, 0, 0.65);
&.active {
color: #fff;
background: #3691ff;
border-radius: 3px;
padding: 2px 1px;
}
}
}
}
.table_block {
width: 100%;
// border:1px solid;
}
}
::v-deep.main {
width: 100%;
// border:1px solid red;
.item_wrap {
width: 49%;
display: flex;
flex-direction: column;
height: 100%;
.item_block {
display: flex;
width: 100%;
justify-content: space-between;
flex-wrap: wrap;
}
.info_block {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
text-align: left;
background: #f0f2f5;
margin: 2px 5px 0;
padding: 24px 1px;
.item {
display: flex;
width: 48%;
.label {
font-family: PingFangSC-Regular;
font-size: 14px;
color: rgba(0, 0, 0, 0.85);
line-height: 24px;
font-weight: 500;
min-width: 100px;
text-align: right;
width: fit-content;
}
.val {
font-family: PingFangSC-Regular;
font-size: 14px;
color: rgba(0, 0, 0, 0.65);
line-height: 24px;
height: 24px;
width: 100%;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
.tab_block {
width: 100%;
}
}
.canvas_wrap {
width: 49%;
position: relative;
&.not_expand{
width: 100%;
}
.mapTools{
position: absolute;
width: 96px;
top: 10px;
left: 10px;
z-index: 100;
color: #000;
border: 1PX solid #555;
padding: 5PX;
background: rgba(0,0,0,.6);
}
.mapTools .el-checkbox__label{
color: rgba(255, 255, 255, 0.6) !important;
}
.mapTools .el-checkbox__original{
color: rgba(255, 255, 255, 0.6) !important;
}
.build_Info{
// border:1px solid red;
position: absolute;
width: calc(100% - 180px);
top: 10px;
left: 120px;
z-index: 100;
}
// border:1px solid red;
canvas {
width: 100% !important;
height: calc(100vh - 206px) !important;
}
}
}
::v-deep.cesiumContainer{
.cesium-infoBox{
background: #fff;
right: 10px;
top: 10px;
max-width: 330px;
}
.desc_box{
}
.cesium-button{
fill:#2c2c2c;
background: transparent;
}
button.cesium-infoBox-close{
color:#2c2c2c;
&:hover{
cursor: pointer;
background: transparent;
}
}
.cesium-infoBox-title{
background:#EDF0F4;
color:#2c2c2c;
}
.cesium-viewer-navigationContainer{
display: none;
}
}
</style>
3、点击某一行楼宇，旋转展示改楼宇
<template>
<div class="xmxz_page">
<div v-if="!showBuildingDetail" class="left">
<div class="flex_start search_wrap">
<div class="label">
选址方案：
</div>
<el-select v-model="xzfaName" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
<div class="title">选址方案内容</div>
<div>
<el-button class="add_btn" @click="addyz" type="primary" size="mini">
添加因子
<i class="el-icon-circle-plus-outline el-icon--right"></i>
</el-button>
<div v-for="item in yzArr">
<div class="item_label">{{ item.label }}</div>
<div class="item_children_wrap">
<div v-for="(iitem, ind) in item.children" class="flex_start">
<div :style="{ width: ind % 2 === 0 ? '190px' : '120px' }">
{{ iitem.label }}：
</div>
<el-select
v-model="formData[iitem.name]"
placeholder="请选择"
:style="{ 'margin-right': ind % 2 === 0 ? '30px' : '0px' }"
>
<el-option
v-for="iiitem in iitem.option"
:key="iiitem"
:label="iiitem"
:value="iiitem"
>
</el-option>
</el-select>
</div>
</div>
</div>
</div>
<el-button class="xz_btn" size="mini" type="primary" @click="xzFun"
>选址</el-button
>
<div class="font-bold">为你选择以下{{ tableData.length }}个招商载体</div>
<div v-for="(item, ind) in tableData" :key="ind">
<zsztBlock :info="item" @toDetail="viewBuilding"></zsztBlock>
</div>
</div>
<div v-if="showBuildingDetail" class="left">
<div class="flex_space_between">
<div
style="text-align:center;width: calc(100% - 50px);margin-bottom:10px;"
>
{{ buildInfo.name }}
</div>
<el-button type="primary" size="mini" @click="returnBack"
>返回</el-button
>
</div>
<div class="info_block">
<div class="item" v-for="item in detailInfo" :key="item.label">
<div class="label">{{ item.label }}：</div>
<div class="val">{{ item.val }}</div>
</div>
</div>
<!-- 采纳方案 -->
<el-button type="primary" size="mini" @click="acceptSuggest">
采纳方案
</el-button>
<MyTable
size="mini"
:show-header="true"
:stripe="false"
:multiple="false"
:height="'320px'"
:title-show="true"
:title="''"
:operation="operation"
:align="'left'"
:column="tableColumn"
:data="tableData"
:current-page="currentPage"
:page-size="pageSize"
:page-sizes="[10, 20, 50]"
:total="total"
@handleSizeChange="handleSizeChange"
@handleCurrentChange="handleCurrentChange"
@tomap="tomap"
@detail="viewBuilding"
>
</MyTable>
</div>
<div class="canvas_wrap">
<div class="mapTools">
<el-checkbox v-model="showBuildingShell" @change="changeLayers"
>楼宇模型</el-checkbox
>
<el-checkbox v-model="showRooms" @change="changeLayers"
>分层分户</el-checkbox
>
<el-checkbox v-model="showLabels" @change="changeLayers"
>标注图层</el-checkbox
>
</div>
<div id="cesiumContainer2" class="cesiumContainer"></div>
</div>
<el-dialog
width="650px"
title="选择因子"
:visible.sync="innerVisible"
append-to-body
>
<el-transfer v-model="selectedYz" :data="selectedYzData"></el-transfer>
<div class="btn_group">
<el-button size="mini" @click="cancle">取消</el-button>
<el-button size="mini" type="primary">确定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
getTableData,
operationBtn,
getDetailInfo,
roomColumn,
roomData,
getRoomOperationBtn
} from "./xmxzTableData.js";
import MyTable from "@/components/MyTable";
import zsztBlock from "./components/zsztBlock";
var viewer,
buildDataSource,
poiDataSource,
promiseVectorLayer = null,
buildingShell = null,
textLayer = null;
var preEntity = null,
preImage = null;
export default {
data() {
const generateData = _ => {
const data = [];
for (let i = 1; i <= 15; i++) {
data.push({
key: i,
label: `备选项 ${i}`,
disabled: i % 4 === 0
});
}
return data;
};
return {
showBuildingShell: true,
showBuildingDetail: false,
showRooms: true,
showLabels: true,
viewer: null,
scene: null,
camera: null,
cesiumReady: false,
currentBuildingId: null,
buildInfo: null,
tableData: [], //初始化列表及详情列表均使用改字段存储数据
// 表格操作配置
total:1,
operation:{
show: true,
width: "100px",
label: "操作",
btns: []
},
tableColumn: [],
currentPage: 1, //详情列表
pageSize: 10, //详情列表
selectedYz: [],
detailInfo: [],
innerVisible: false,
selectedYzData: generateData(),
formData: {},
yzArr: [
{
label: "基本因子",
children: [
{
name: "lylx",
label: "楼宇类型",
option: ["不限", "纯写字楼", "商业综合体", "商务公寓", "商务酒店"]
},
{
name: "zxyq",
label: "装修要求",
option: ["不限", "毛坯", "简装", "精装", "豪华装修"]
}
]
}
],
xzfaName: "主打方案",
options: [
{ label: "主打方案", value: "主打方案" },
{ label: "总体方案", value: "总体方案" },
{ label: "监督中心方案", value: "监督中心方案" }
]
};
},
components: {
MyTable,
zsztBlock
},
mounted() {
this.initMap();
},
methods: {
acceptSuggest() {},
handleSizeChange(e) {
this.currentPage = 1;
this.pageSize = e;
this.fetchData();
},
handleCurrentChange(e) {
this.currentPage = e;
this.fetchData();
},
fetchData() {},
xzFun() {
this.tableData = getTableData();
// 地图渲染所有建筑
this.setBuildsOnMap(
this.tableData,
"/static/images/buildico.png",
this.viewBuilding
);
},
addyz() {
this.innerVisible = true;
},
cancle() {
this.innerVisible = false;
},
returnBack() {
this.showBuildingDetail = false;
this.searchBuildings();
this.switchPageDetails();
},
switchPageDetails() {
let viewer = this.viewer;
viewer.scene.camera.flyTo({
destination: new Cesium.Cartesian3(-2114359.69383942, 4793659.2525840225, 3638904.177806847),
orientation: {
heading: Cesium.Math.toRadians(353),
pitch: Cesium.Math.toRadians(-41),
roll: Cesium.Math.toRadians(0),
}
});
if(promiseVectorLayer){
promiseVectorLayer.removeAllObjsColor();
promiseVectorLayer.removeAllObjsOffset();
promiseVectorLayer.setSelection([]);
}
this.showBuildingShell=true;
this.changeLayers();//手动激活值改变函数
poiDataSource.entities.removeAll();
viewer.scene.layers.remove('buildingRooms')
},
// 地图相关
initMap() {
viewer = this.viewer;
if (!viewer) {
viewer = new Cesium.Viewer("cesiumContainer2");
textLayer = viewer.imageryLayers.addImageryProvider(
new Cesium.WebMapTileServiceImageryProvider({
name: "tiandituLabel",
url: process.env.VUE_APP_TDT_URL,
layer: "cia",
style: "default",
format: "image/jpeg",
tileMatrixSetID: "w",
show: false
})
);
this.viewer = viewer;
var scene = viewer.scene; //获取场景
var buildingsModel = scene.open(process.env.VUE_APP_ZHDSW_URL);
buildingsModel.then(function(layers) {
window.buildingShell = buildingShell = layers;
/* 当前视图初始化建筑位置笛卡尔信息
eg: console.log(333, buildDataSource.entities.getById("1").position._value)
获取当前建筑列表第一项建筑的笛卡尔位置信息 */
// let firstPosition = buildDataSource.entities.getById("800").position._value
scene.camera.flyTo({
//将相机从当前位置移动到新位置。
// destination: 相机在WGS84世界坐标系中的最终位置，或是自顶向下视图中可见的矩形区域。参数为视图点笛卡尔坐标位置
destination: new Cesium.Cartesian3(
// firstPosition.x,
// firstPosition.y,
// firstPosition.z
-2114359.69383942,
4793659.2525840225,
3638904.177806847
),
orientation: {
//包含方向和向上属性或航向，俯仰和横滚属性的对象。默认情况下，方向将指向在3D中朝向帧中心，在哥伦布视图中沿负z方向。向上方向将指向3D局部正北哥伦布视图中的y方向。在无限滚动模式下，二维不使用方向。
heading: Cesium.Math.toRadians(353), //heading:朝向 toRadians:将度转换为弧度
pitch: Cesium.Math.toRadians(-41), //俯视 倾斜度
roll: Cesium.Math.toRadians(0) //滚动度
}
});
});
this.scene = scene;
if (!buildDataSource) {
// 实现，可用于手动管理一组实体。
window.buildDataSource = buildDataSource = new Cesium.CustomDataSource();
viewer.dataSources.add(buildDataSource);
}
if (!poiDataSource) {
// 实现，可用于手动管理一组实体。
window.poiDataSource = poiDataSource = new Cesium.CustomDataSource();
viewer.dataSources.add(poiDataSource);
}
var camera = scene.camera;
this.camera = camera;
this.cesiumReady = true;
}
},
searchBuildings() {
this.getBuildingData();
this.getTotalBuildingData();
},
getBuildingData() {
// 当前页建筑
this.tableData = getTableData();
this.loading = false;
},
getTotalBuildingData() {
// 地图渲染所有建筑
this.setBuildsOnMap(
this.tableData,
"/static/images/buildico.png",
this.viewBuilding
);
},
tomap(row) {
// 楼宇模型定位按钮
let viewer = this.viewer;
this.currentBuildingId = row.id;
let id = row.id;
this.setSymbolOnMap(buildDataSource, row.id, "/static/images/redico.png");
this.flyToEntity(buildDataSource, id, 200, 3, position => {
});
},
flyToEntity(dataSource, id, distance, time, callback) {
let viewer = this.viewer;
/*添加定位实体*/
// console.log("88888888888viewer===", viewer, viewer.entities);
viewer.entities.removeById("trackedEntity");
var position = this.C3TODegrees(
dataSource.entities.getById(id).position._value
);
var radius = 0.1;
// 添加实体对象到当前视图
var sphere = viewer.entities.add({
id: "trackedEntity",
position: Cesium.Cartesian3.fromDegrees(
position.lon,
position.lat,
position.height - 80
),
ellipsoid: {
radii: new Cesium.Cartesian3(radius, radius, radius),
fill: false,
outline: true,
outlineColor: Cesium.Color.YELLOW.withAlpha(0.8),
slicePartitions: 1, //24,36
stackPartitions: 1
//show:false
}
});
var pp = viewer.flyTo(sphere, {
duration: time ? time : 3,
// maximumHeight:100,
offset: {
heading: viewer.camera.heading,
pitch: Cesium.Math.toRadians(-25),
range: distance
}
});
pp.then(function() {
if (callback) {
callback(position);
}
});
},
setBuildsOnMap(points, imageUrl, clicked) {
// console.log("0000000000 cesiumReady===", this.cesiumReady);
if (!this.cesiumReady) {
setTimeout(() => {
this.setBuildsOnMap(points, imageUrl, clicked);
// console.log("cesium加载等待……");
}, 400);
return;
}
// entities:获取 Entity 实例的集合。并从集合中删除所有实体。
buildDataSource.entities.removeAll();
// 获取此实体集合是否应为显示。如果为true，则仅在以下情况下显示每个实体:它自己的show属性也是如此。
buildDataSource.show = true;
// points：循环数据列表，将每一项add到
for (let build of points) {
let height = build.height;
if (!height) {
height = 200;
} else {
height += 85;
}
// console.log("build==", build);
//自动获取模型高度，存在加载延迟bug，暂停@wxp
// height=viewer.scene.getHeight(Number(build.lngt),Number(build.latt));
// console.log(height);
let cartesian = Cesium.Cartesian3.fromDegrees(
Number(build.lngt),
Number(build.latt),
height
);
let desc = "";
desc =
'<div style="display:flex;justify-content: flex-start;margin-top: 8px;">载体名称：<div style="color:#4296FD;">' +
build.smid +
"</div></div>" +
'<div style="display:flex;justify-content: flex-start;margin-top: 8px;">招商面积：<div style="color:#4296FD;">' +
build.investmentarea +
"</div></div>" +
'<div style="display:flex;justify-content: flex-start;margin-top: 8px;">入驻企业：<div style="color:#4296FD;">' +
build.enterprises +
"</div></div>" +
'<div style="display:flex;justify-content: flex-start;margin-top: 8px;">可用房源：<div style="color:#4296FD;">' +
build.empty_rooms +
"</div></div>" +
'<div style="display:flex;justify-content: flex-start;margin-top: 8px;">租金：<div style="color:#4296FD;">' +
build.property_cost +
"</div></div>" +
'<div style="display:flex;justify-content: flex-start;margin-top: 8px;">物业费：<div style="color:#4296FD;">' +
build.wyf +
"</div></div>";
let entity = buildDataSource.entities.add({
id: build.id,
name: build.name,
position: cartesian,
// 广告牌
billboard: {
// 图标
image: imageUrl,
// 图标大小
width: 20,
height: 25,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM, //图标相对对象的位置：底部。
//heightReference:Cesium.HeightReference.CLAMP_TO_GROUND,
disableDepthTestDistance: 100
},
label: {
text: build.name,
showBackground: true,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
pixelOffset: new Cesium.Cartesian2(0, -25),
font: "normal 16px MicroSoft YaHei",
fillColor: Cesium.Color.WHITE,
backgroundColor: Cesium.Color.BLACK.withAlpha(0.8),
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
0.0,
400
),
disableDepthTestDistance: 500
},
description:
'<div class="desc_box" style="color:#2c2c2c;">' + desc + "</div>"
});
}
},
setSymbolOnMap(dataSource, uuid, currentImage) {
// 获取具有指定ID的实体。
var currenEntity = dataSource.entities.getById(uuid);
// 如果没有选中实体对象
if (preEntity == null) {
preEntity = currenEntity.billboard;
preImage = preEntity.image.getValue();
currenEntity.billboard.image = currentImage;
} else if (uuid != preEntity.id) {
preEntity.image = preImage;
preEntity = currenEntity.billboard;
preImage = preEntity.image.getValue();
currenEntity.billboard.image = currentImage;
}
},
// cesium3笛卡尔坐标转换为经纬度地理坐标
C3TODegrees(c3) {
let viewer = this.viewer;
// globe:获取或设置深度测试椭球。ellipsoid：确定尺寸和形状地球。
// 获取描述此地球形状的椭圆体。
var ellipsoid = viewer.scene.globe.ellipsoid; //
// 3D笛卡尔点。
var cartesian3 = new Cesium.Cartesian3(c3.x, c3.y, c3.z);
// cartesianToCartographic：将提供的笛卡尔转换为制图表达。笛卡尔在椭球的中心是不确定的。
var cartographic = ellipsoid.cartesianToCartographic(cartesian3);
return {
lon: Cesium.Math.toDegrees(cartographic.longitude), // 将弧度转换为度
lat: Cesium.Math.toDegrees(cartographic.latitude),
height: cartographic.height
};
},
viewBuilding(build) {
// console.log("333", this.showBuildingDetail);
// 详情页定位按钮
if (this.showBuildingDetail) {
this.pantoRoom(build);
return;
}
// 建筑列表点击查看，跳转详情页
this.roomResult = [];
this.currentBuildingId = build.id;
this.currentBuildingName = build.name;
this.getBuildInfo(); //获取当前建筑详情
this.getRoomData(); //获取房间列表数据
this.operation.btns = getRoomOperationBtn();
this.showBuildingDetail = true; //显示详情信息
this.switchPageDetailsc(); //切换
this.setSymbolOnMap(
//设置当前选中建筑图标
buildDataSource,
this.currentBuildingId,
"/static/images/redico.png"
);
this.flyToEntity(
//飞入当前选中实体
buildDataSource,
this.currentBuildingId,
200,
3,
position => {
this.showBuildingShell = false; //点击查看，不显示建筑模型，可以显示分层图层，进行分层查看
this.changeLayers(); //手动激活值改变函数
}
);
viewer.scene.layers.remove("buildingRooms");
// 添加当前查看建筑分层分户图层 三维切片缓存图层（S3M、S3MB）。
let url = process.env.VUE_APP_ZHDFCFH_URL //分层分户属性表
var promise = viewer.scene.addS3MTilesLayerByScp(
url + "/datas/" + build.smid + "/config",
{
name: "buildingRooms" //指定图层名称
}
);
promise.then(vectorLayer => {
// 设置房间3dt图层
window.promiseVectorLayer = promiseVectorLayer = vectorLayer;
window.vectorLayer = vectorLayer;
vectorLayer.cullEnabled = false; //cullEnabled:是否剔除背面，默认不剔除，双面渲染
vectorLayer.selectionFiltrateByTransparency = 0; // 不过滤透明度为0的物体，当前图层就不会被过滤
vectorLayer.selectedColor = Cesium.Color.RED; //选中图层颜色
vectorLayer.selectColorType = 0; //选中对象的显示风格：模型纯色显示。
vectorLayer.style3D.fillForeColor = new Cesium.Color(
1.0,
1.0,
1.0,
0.5
);
//暂时二次加载
this.setRoomsColor(this.roomResult, Cesium.Color.BLUE);
});
},
pantoRoom(room) {
let viewer = this.viewer;
viewer.entities.removeById("trackedEntity");
// 当前房间的经纬度不存在
if (!room.lngt) {
promiseVectorLayer.removeAllObjsColor();
promiseVectorLayer.removeAllObjsOffset();
promiseVectorLayer.setSelection([]);
this.setRoomColor(
this.roomResult,
room.smid,
Cesium.Color.BLUE,
Cesium.Color.RED
);
return;
}
// 当前房间经纬度存在
var radius = 0.1;
var distance = 100;
var sphere = viewer.entities.add({
id: "trackedEntity",
position: Cesium.Cartesian3.fromDegrees(
Number(room.lngt),
Number(room.latt),
Number(room.height) + 2
),
ellipsoid: {
radii: new Cesium.Cartesian3(radius, radius, radius), //
fill: false, //是否填充
outline: true,
outlineColor: Cesium.Color.YELLOW.withAlpha(0.8), //外边线颜色
slicePartitions: 1, //分割切片
stackPartitions: 1 //分割堆
//show:false
}
});
var pp = viewer
.flyTo(sphere, {
duration: 3,
// maximumHeight:100,
offset: {
//toRadians: 将度转换为弧度。
heading: room.towards
? Cesium.Math.toRadians(room.towards - 180)
: viewer.camera.heading, //后期加上朝向@wxp
pitch: Cesium.Math.toRadians(-25),
range: distance
}
})
.then(() => {
promiseVectorLayer.removeAllObjsColor();
promiseVectorLayer.removeAllObjsOffset();
promiseVectorLayer.setSelection([]);
this.setRoomColor(
this.roomResult,
room.smid,
Cesium.Color.BLUE,
Cesium.Color.RED
);
});
},
setRoomColor(rooms, room, precolor, color) {
/*单体设色*/
let roomArray = [];
for (let room of rooms) {
roomArray.push(Number(room.smid));
}
promiseVectorLayer.setObjsColor(roomArray, precolor);
promiseVectorLayer.setObjsColor([Number(room)], color);
},
changeLayers(checked, elem) {
let viewer = this.viewer;
//process.env.BUILDINGSHELLNAME: ZHDBUI@ZHDHB
viewer.scene.layers.find("ZHDBUI@ZHDHB").visible = this.showBuildingShell;
if (viewer.scene.layers.find("buildingRooms"))
viewer.scene.layers.find("buildingRooms").visible = this.showRooms;
textLayer.show = this.showLabels;
},
switchPageDetailsc() {
this.getRoomData(); //获取房间列表数据
this.detailInfo = getDetailInfo();
},
setRoomsColor(rooms, color) {
let roomArray = [];
for (let room of rooms) {
roomArray.push(Number(room.smid));
}
promiseVectorLayer.setObjsColor(roomArray, color);
},
getBuildInfo() {
var params = {};
params.buildId = this.currentBuildingId;
let start = new Date().getTime();
// 根据id获取当前建筑详细信息(创意岛大厦)
this.buildInfo = {
address: "郑州市郑东新区中道东路6号",
air_conditioning_fee: "0.44",
area: "109787.33",
build_date: "",
build_decoration: "001001000020001",
build_decorationname: "毛坯",
contact_people: "",
contact_tel: "",
electricity_fee: "",
elevators: "",
format: "001001000010002",
formatname: "商业综合体",
freight_elevators: "",
heat: "",
heating_costs: "0.38",
heatname: "",
height: 49,
investmentarea: 1901.43,
name: "创意岛大厦",
net: "",
netname: "",
park: 831,
parking_fee: "",
power: "",
property: "50",
property_cost: "9.5",
property_name: "河南创意开来物业管理有限公司",
property_qualification: "",
property_qualificationname: "",
rent: "",
total_floors: 11,
traffic: "",
water_fee: ""
};
// this.$store.dispatch('searchBuildingInfo', params).then((data) => {
// let end = new Date().getTime();
// console.log("请求列表数据用时：" + (end - start) / 1000 + "秒");
// console.log(data);
// window.cess=data[0];
// if(data.length<1){
// this.buildInfo={};
// }else{
// this.buildInfo = data[0];
// }
// this.loading = false;
// }).catch(data => {
// console.log(data);
// });
},
getRoomData() {
this.roomResult = roomData();
this.tableData = this.roomResult;
this.tableColumn = roomColumn();
// 当前建筑物详情-房间列表数据
}
}
};
</script>
<style lang="scss" scoped>
.xmxz_page {
// border: 1px solid red;
display: flex;
width: 100%;
height: calc(100vh - 60px);
color: #333;
.left {
background: #fff;
width: 50%;
height: calc(100%);
padding: 10px 20px;
.search_wrap {
width: 80%;
margin: 20px auto;
display: flex;
align-content: center;
align-self: center;
align-items: center;
.label {
width: 90px;
}
}
.title {
text-align: center;
font-weight: bold;
font-size: 14px;
}
}
.canvas_wrap {
width: 49%;
position: relative;
height: 100%;
&.not_expand {
width: 100%;
}
.mapTools {
position: absolute;
width: 96px;
top: 10px;
left: 10px;
z-index: 100;
color: #000;
border: 1px solid #555;
padding: 5px;
background: rgba(0, 0, 0, 0.6);
.el-checkbox {
color:#fff;
}
}
.mapTools .el-checkbox__label {
color: rgba(255, 255, 255, 0.6) !important;
}
.mapTools .el-checkbox__original {
color: rgba(255, 255, 255, 0.6) !important;
}
.build_Info {
// border:1px solid red;
position: absolute;
width: calc(100% - 180px);
top: 10px;
left: 120px;
z-index: 100;
}
// border:1px solid red;
canvas {
width: 100% !important;
height: calc(100vh - 206px) !important;
}
}
}
.item_label {
text-align: left;
vertical-align: middle;
font-size: 14px;
color: #606266;
padding: 0 12px 0 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-weight: bold;
margin-top: 200px;
// margin-bottom: 10px;
&:first-child {
margin-top: 0px;
}
}
.add_btn {
float: right;
}
.item_children_wrap {
display: flex;
margin: 20px auto;
}
.btn_group {
text-align: right;
margin-top: 20px;
}
.xz_btn {
margin-left: calc(50% - 60px);
border-radius: 20px;
padding: 6px 80px;
}
.font-bold {
font-weight: bold;
color: #333;
font-family: MicrosoftYaHei !important;
font-size: 14px;
}
::v-deep.cesiumContainer {
height: calc(100% - 100px);
.cesium-infoBox {
background: #fff;
right: 10px;
top: 10px;
max-width: 330px;
}
.cesium-button {
fill: #2c2c2c;
background: transparent;
}
button.cesium-infoBox-close {
color: #2c2c2c;
&:hover {
cursor: pointer;
background: transparent;
}
}
.cesium-infoBox-title {
background: #edf0f4;
color: #2c2c2c;
}
.cesium-viewer-navigationContainer {
display: none;
}
}
.info_block {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
text-align: left;
background: #f0f2f5;
margin: 2px 5px 0;
padding: 24px 1px;
.item {
display: flex;
width: 48%;
.label {
font-family: PingFangSC-Regular;
font-size: 14px;
color: rgba(0, 0, 0, 0.85);
line-height: 24px;
font-weight: 500;
min-width: 100px;
text-align: right;
width: fit-content;
}
.val {
font-family: PingFangSC-Regular;
font-size: 14px;
color: rgba(0, 0, 0, 0.65);
line-height: 24px;
height: 24px;
width: 100%;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
</style>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。