Skip to content

刘远 / 3d_dc

Go to a project
Toggle navigation
Toggle navigation pinning
cc8568a9 by 刘远
Options

jikai commit

1 parent 1c92db51
Inline Side-by-side
Showing 5 changed files with 690 additions and 37 deletions
......@@ -51,7 +51,7 @@
data:{username:'案件查处',password:'123'},
success:(res) => {
// window.open(`http://10.6.144.88:10001/frontweb/index.jsp?type=${label}`)
window.open(`http://192.168.5.143:80/frontweb/index.jsp?type=${label}`)
window.open(`http://192.168.3.194:80/frontweb/index.jsp?type=${label}`)
},
fail: () => {
......
// 左侧 资源目录 组件
<template>
<div>
<div class="container">
<el-card>
<div slot="header" class="clearfix">
<span>查询列表</span>
<el-button type="primary" style="float:right;" size="mini" @click="createQue">新建查询</el-button>
</div>
<div id="list">
<div v-for="o in data" :key="o.id" class="textItem" @click="showProject(o)">
<p>{{o.taskname}}</p>
<p>
{{new Date(o.starttime) | time}}
<i class="el-icon-delete"></i>
<i class="el-icon-folder"></i>
<i class="el-icon-edit-outline"></i>
<i class="el-icon-success"></i>
</p>
</div>
</div>
</el-card>
</div>
<div class="newquery" ref="newquery">
<el-card style="border:none;">
<div slot="header" class="clearfix">
<span>新建查询</span>
<i class="el-icon-close" @click="close('newquery')"></i>
</div>
<div>
<p>
<el-button type="primary" style="margin-right:16px;">导入文件</el-button>
<i class="bluecls">(仅支持shp、dxf、text格式文件)</i>
</p>
<p>
<i class="whitecls">地块: </i>
<el-select v-model="value" placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
<el-button type="primary" style="margin-left:64px;">建设项目数据</el-button>
</p>
<p>
<i class="whitecls">1. </i>
<i class="whitecls">X : </i>
<el-input v-model="input"></el-input>
<i class="whitecls">Y : </i>
<el-input v-model="input"></el-input>
<i class="el-icon-thumb redcls"></i>
<i class="el-icon-delete redcls"></i>
</p>
<p>
<i class="whitecls">2. </i>
<i class="whitecls">X : </i>
<el-input v-model="input"></el-input>
<i class="whitecls">Y : </i>
<el-input v-model="input"></el-input>
<i class="el-icon-thumb redcls"></i>
<i class="el-icon-delete redcls"></i>
</p>
<p>
<i class="whitecls">3. </i>
<i class="whitecls">X : </i>
<el-input v-model="input"></el-input>
<i class="whitecls">Y : </i>
<el-input v-model="input"></el-input>
<i class="el-icon-thumb redcls"></i>
<i class="el-icon-delete redcls"></i>
</p>
<p>
<i class="whitecls">4. </i>
<i class="whitecls">X : </i>
<el-input v-model="input"></el-input>
<i class="whitecls">Y : </i>
<el-input v-model="input"></el-input>
<i class="el-icon-thumb redcls"></i>
<i class="el-icon-delete redcls"></i>
</p>
<p>
<el-button type="primary" style="margin-right:16px;">添加</el-button>
<el-button type="info" style="margin-right:16px;">清空</el-button>
</p>
<p>
<i class="bluecls">西安市坐标范围</i>
<i class="redcls">(国家2000坐标系)</i>
</p>
<p>
</p>
<p class="foot">
<el-button type="primary" style="margin-right:16px;">提交</el-button>
<el-button type="info" style="margin-right:16px;">取消</el-button>
</p>
</div>
</el-card>
</div>
<div class="project" ref="project">
<el-card style="border:none;">
<div slot="header" class="clearfix">
<span>项目</span>
<i class="el-icon-close" @click="close('project')"></i>
</div>
<p>
<el-button type="primary" style="margin-right:16px;">
<i class="el-icon-download whitecls"></i>导出WORD
</el-button>
<el-button type="primary" style="margin-right:16px;">
<i class="el-icon-download whitecls"></i>导出PDF
</el-button>
</p><br/>
<div class="flex-container">
<div class="flex-left">
<p>
<i class="bluecls">总面积: </i>
<el-input v-model="input"></el-input>
</p>
<p v-for="o in formData" :key="o.id">
<i class="bluecls">{{ o.layername }}: </i>
<el-input v-if="['textarea']" type="textarea" :value="textareaValue(o['textresult'])"></el-input>
<el-input v-else :value="textareaValue(o['textresult'])"></el-input>
</p>
</div>
<div class="flex-right">
<div v-for="o in formData" :key="o.id">
<div class="mapTitle">{{ o.layername }}</div>
<div v-if="!o.showpicture" class="mapImage">
{{ textareaValue(o['textresult']) }}
</div>
<img v-else-if="o.pictureresult" :src="'data:image/jpg;base64,' + o.pictureresult" class="mapImage">
</div>
</div>
</div>
</el-card>
</div>
</div>
</template>
<script>
import responseData from '../assets/js/map/responseData';
import graphicAnalyze from '../assets/js/json/graphicAnalyze';
export default {
name: 'leftAssert',
components: {
},
data() {
return {
data: [],
options: [{
value: '0',
label: '地块一'
}, {
value: '1',
label: '地块二'
}],
input: '',
formData: []
}
},
filters: {
time: function time(value) {
var now = new Date(value),
y = now.getFullYear(),
m = now.getMonth() + 1,
d = now.getDate();
return y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d) + " " + now.toTimeString().substr(0, 8);
}
},
mounted() {
responseData.data ? this.data = responseData.data :
this.$http.get('http://192.168.3.194/XAYZT/analizeTask/getTaskListByUserId?userid='
+ responseData.id + '&pageIndex=' + responseData.pageIndex + '&pageSize='
+ responseData.pageSize).then(response => {
response.status === 200 && (this.data = responseData.data = response.data.data)
});
},
methods: {
createQue() {
this.$refs.newquery.style.display = 'block';
},
showProject(o) {
this.$http.get('http://192.168.3.194/XAYZT/analizeTask/layerAnalizeResult?taskid=b2098e7941f540f393884881113cb00f').then(response => {
if(response.status !== 200) return;
this.formData = [];
let data = response.data.data.analizeResultList, dataArray = [], i = 0, o;
for( ; o = data[i++] ; ) {
var layer = this.eachAnalyzeConifg('alias', o.layername);
this.formData.push({
id: o.id,
taskid: o.taskid,
textarea: !!layer.textarea,
textshow: true,
layername: o.layername,
textresult: o.textresult,
showpicture: true,
pictureresult: o.pictureresult
})
}
this.$refs.project.style.display = 'block';
});
},
close(a) {
this.$refs[a].style.display = 'none';
},
eachAnalyzeConifg: function (key, value) {
let layers = graphicAnalyze.layers;
for (var index in layers) {
if ( layers[index][key] == value ) {
return layers[index];
}
}
},
textareaValue: function (value) {
if (!value) return "";
var content = [];
try {
var valObj = JSON.parse(value);
var valObjKeys = Object.keys(valObj);
for (var key in valObj) {
var resultStr = this.contentJoin(key, valObj[key]);
if (valObjKeys.length === 1) {
content.push(resultStr);
} else {
content.push(key + ": " + resultStr);
}
}
} catch (e) {
console.error(e);
return '分析出错';
}
return content.join("\n");
},
contentJoin: function (layername, textresult) {
var totalArea = 0,
areaObject = {},
yongdixingzhiArray = [];
for (var key in textresult) {
var value = textresult[key];
if (value.status === 'error') {
return '分析出错';
}
// 用地性质
var oldyongdixingzhi = value.用地性质 + '';
var yongdixingzhi = oldyongdixingzhi.replace(/[^\u4E00-\u9FA5]/g,'');
if (yongdixingzhiArray.indexOf(yongdixingzhi) === -1) {
yongdixingzhiArray.push(yongdixingzhi);
}
// 用地面积
var area = value.area;
var oldArea = areaObject[yongdixingzhi];
areaObject[yongdixingzhi] = oldArea === undefined ? area : (area + oldArea);
// 总面积
totalArea += area;
}
// 平方米转换为亩
totalArea = this.squaremeterToAcre(totalArea);
for (var key in areaObject) {
areaObject[key] = this.squaremeterToAcre(areaObject[key]);
}
// 根据分析图层显示分析结果
var resultStr = [];
switch (layername) {
case "详细规划":
case "过渡期适用图层":
yongdixingzhiArray.forEach(function (yongdixingzh) {
var yongdixingzhArea = areaObject[yongdixingzh];
if (yongdixingzhArea > 0.001) {
resultStr.push(yongdixingzh + ', ' + yongdixingzhArea + '亩。');
}
});
if (resultStr.length == 0) {
resultStr.push("未占用");
}
break;
case "停车场规划":
let _array = [];
yongdixingzhiArray.forEach(function (yongdixingzh) {
var yongdixingzhArea = areaObject[yongdixingzh];
if (yongdixingzhArea > 0.001) {
_array.push(yongdixingzh);
}
});
if (_array.length == 0) {
resultStr.push("未涉及停车场规划");
} else {
resultStr.push("涉及" + _array.join("、"));
}
break;
case "城市快速路体系":
if (yongdixingzhiArray.length == 0) {
resultStr.push("未涉及城市快速路");
} else {
resultStr.push("涉及" + yongdixingzhiArray.join("、"));
}
break;
case "铁路南环线":
if (yongdixingzhiArray.length == 0) {
resultStr.push("未涉及铁路南环线控制区域");
} else {
resultStr.push("涉及铁路南环线控制区域");
}
break;
case "地铁控制线":
if (totalArea < 0.001) {
resultStr.push("不在地铁控制线范围内");
} else {
resultStr.push("在地铁控制线范围内");
}
break;
case "公交场站规划(2018-2021年)":
if (totalArea < 0.001) {
resultStr.push("不在公交场站选址范围内");
} else {
resultStr.push("在公交场站选址范围内");
}
break;
case "生态控制红线":
if (totalArea < 0.001) {
resultStr.push("未占用");
} else {
resultStr.push("生态控制红线，" + totalArea + "亩");
}
break;
case "基本农田保护区":
if (totalArea < 0.001) {
resultStr.push("未占用");
} else {
resultStr.push("基本农田，" + totalArea + "亩");
}
break;
case "城市紫线":
case "城市绿线":
if (totalArea < 0.001) {
resultStr.push("未占用");
} else {
resultStr.push("占用");
}
break;
case "城市蓝线":
case "道路红线":
case "城市黄线":
if (yongdixingzhiArray.length === 0) {
resultStr.push("未占用");
} else {
resultStr.push("占用");
}
break;
case "影像地图":
resultStr.push("/");
break;
default:
yongdixingzhiArray.forEach(function (yongdixingzh) {
var yongdixingzhArea = areaObject[yongdixingzh];
if (yongdixingzhArea > 0.001) {
resultStr.push(yongdixingzh + ', ' + yongdixingzhArea + '亩。');
}
});
if (resultStr.length == 0) {
resultStr.push("未占用");
}
break;
}
return resultStr.join("\n");
},
squaremeterToAcre: function (number, fixed) {
if (number === 0) return '0';
var change1 = number*0.0015; // 转为亩
var change2 = change1.toFixed(fixed === undefined ? 3 : fixed); // 取小数点后三位数字
var change3 = change2.replace(/0+$/g,''); // 舍去最后的零
return change3;
}
}
}
</script>
<style>
.textItem {
font-size: 16px;
color:#5792C4;
border-radius: 6px;
padding: 8px;
font-weight:bold;
margin-bottom: 8px;
}
.textItem:hover {
background-color: cornsilk;
}
.textItem p {
height: 26px;
}
.textItem p > i {
font-size: 22px;
float: right;
margin-right: 10px;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both
}
.clearfix i {
float: right;
font-size: 22px;
}
.container {
opacity: 0.6;
}
.container .el-card {
background-color: #010101;
color: #fff;
transition: .3s;
width: 440px;
border:none;
height:834px;
}
.newquery {
opacity: 0.6;
top: 0px;
left: 450px;
position: absolute;
z-index: 1000;
display: none;
}
.newquery .el-card {
background-color: #010101;
color: #fff;
transition: .3s;
width: 540px;
border:none;
height:556px;
}
.project {
opacity: 0.6;
top: 0px;
left: 1000px;
position: absolute;
z-index: 1000;
display: none;
}
.project .el-card {
background-color: #010101;
color: #fff;
transition: .3s;
width: 864px;
border:none;
height:810px;
}
.newquery p {
height: 48px;
}
.project p {
height: auto;
}
.el-card .el-card__header {
padding: 14px 20px;
border: none;
box-sizing: border-box;
font-size: 18px;
font-weight: bold;
}
.el-card .el-card__body {
padding: 12px 6px 10px 6px;
}
/* 字体样式 */
.bluecls {
color: #0086E7;
font-size: 16px;
font-weight: bold;
margin-right: 14px;
}
.whitecls {
color: #fff;
font-size: 16px;
font-weight: bold;
margin-right: 5px;
margin-left: 5px;
}
.redcls {
margin-left:10px;
font-size:18px;
color:red;
}
.foot {
float: right;
}
p .el-input {
position: relative;
font-size: 14px;
display: inline-block;
width: 165px;
background-color: #000;
}
.el-input .el-input__inner {
-webkit-appearance: none;
background-color: #000;
background-image: none;
border-radius: 4px;
border: 1px solid #DCDFE6;
box-sizing: border-box;
color: #ffffff;
display: inline-block;
font-size: inherit;
height: 34px;
line-height: 40px;
outline: 0;
padding: 0 15px;
transition: border-color .2s cubic-bezier(.645,.045,.355,1);
width: 100%;
}
p .el-textarea {
position: relative;
display: inline-block;
width: 240px;
vertical-align: top;
font-size: 14px;
}
.el-textarea .el-textarea__inner {
display: block;
resize: vertical;
padding: 5px 15px;
line-height: 1.5;
box-sizing: border-box;
width: 100%;
height: 70px;
font-size: inherit;
color: #fff;
background-color: #000;
background-image: none;
border: 1px solid #DCDFE6;
border-radius: 4px;
transition: border-color .2s cubic-bezier(.645,.045,.355,1);
}
.flex-container {
display: -webkit-flex;
display: flex;
height: 680px;
}
.flex-left {
margin-top: 10px;
width: 60%;
height: 100%;
overflow-y: scroll;
}
.flex-right {
width: 40%;
height: 100%;
overflow-y: scroll;
}
.flex-left .el-input {
position: relative;
font-size: 14px;
display: inline-block;
width: 240px;
background-color: #000;
}
.flex-left p {
float: right;
margin: 4px 16px 4px 10px;
}
.flex-left::-webkit-scrollbar {
width : 10px;
height: 1px;
}
.flex-left::-webkit-scrollbar-thumb {
border-radius : 10px;
background-color: skyblue;
background-image: -webkit-linear-gradient(
45deg,
rgba(255, 255, 255, 0.2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.2) 75%,
transparent 75%,
transparent
);
}
.flex-right::-webkit-scrollbar {
width : 10px;
height: 1px;
}
.flex-right::-webkit-scrollbar-thumb {
border-radius : 10px;
background-color: skyblue;
background-image: -webkit-linear-gradient(
45deg,
rgba(255, 255, 255, 0.2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.2) 75%,
transparent 75%,
transparent
);
}
#list {
height: 740px;
overflow-y: scroll;
}
#list::-webkit-scrollbar {
width : 10px;
height: 1px;
}
#list::-webkit-scrollbar-thumb {
border-radius : 10px;
background-color: skyblue;
background-image: -webkit-linear-gradient(
45deg,
rgba(255, 255, 255, 0.2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.2) 75%,
transparent 75%,
transparent
);
}
.mapTitle {
color: #0086E7;
font-size: 16px;
margin-right: 16px;
width: 100%;
text-align: center;
}
.mapImage {
/* margin: 8px auto; */
width: 100%;
height: 186px;
padding: 8px;
}
</style>
\ No newline at end of file
......@@ -31,27 +31,40 @@
}));
let scene = viewer.scene
scene.shadowMap.darkness = 1; //设置第二重烘焙纹理的效果（明暗程度）
scene.skyAtmosphere.brightnessShift=0.4;
scene.skyAtmosphere.brightnessShift = 0.4;
scene.debugShowFramesPerSecond = true;
scene.hdrEnabled = false;
scene.sun.show = true;
scene.lightSource.ambientLightColor = new Cesium.Color(0.65, 0.65, 0.65, 1);
this.$parent.draw = new createDraw(viewer);
this.$parent.viewer = viewer;
// this.$parent.viewer = viewer;
objectManage.viewer = viewer;
var promise = [];
promise[0] = scene.addS3MTilesLayerByScp(URL_CONFIG.SCP_CBD_BUILD, {
name: 'build1'
});
promise[1] = scene.addS3MTilesLayerByScp(URL_CONFIG.SCP_CBD_BUILD, {
name: 'build2'
});
promise[2] = scene.addS3MTilesLayerByScp(URL_CONFIG.SCP_CBD_GROUND1, {
name: 'ground'
});
promise[0] = scene.addS3MTilesLayerByScp(URL_CONFIG.SCP_CBD_BUILD, { name: 'build1' });
promise[1] = scene.addS3MTilesLayerByScp(URL_CONFIG.SCP_CBD_BUILD, { name: 'build2' });
promise[2] = scene.addS3MTilesLayerByScp(URL_CONFIG.SCP_CBD_GROUND1, { name: 'ground' });
promise[3] = scene.addS3MTilesLayerByScp(URL_CONFIG.SCP_CBD_LAKE, { name: 'lake' });
// promise[4] = scene.addS3MTilesLayerByScp(URL_CONFIG.SCP_CBD_ROAD, { name: 'road' });
// promise[5] = scene.addS3MTilesLayerByScp(URL_CONFIG.SCP_CBD_BRIDGE, {name: 'bridge'});
promise[4] = scene.addS3MTilesLayerByScp(URL_CONFIG.SCP_CBD_TREE, { name : 'tree'});
// promise[5] = scene.addS3MTilesLayerByScp(
// 'http://localhost:8090/iserver/services/3D-scene/rest/realspace/datas/dcdata@dataSource/config',
// { name : 'dcdata'}
// );
// promise[6] = scene.addS3MTilesLayerByScp(
// 'http://localhost:8090/iserver/services/3D-scene/rest/realspace/datas/dcdata1@dataSource/config',
// { name : 'dcdata1'}
// );
Cesium.when.all(promise, layers => {
layers[0].shadowType = 2;
layers[1].shadowType = 2;
layers[2].shadowType = 2;
layers[0].selectEnabled = false;
layers[1].selectEnabled = false;
layers[2].selectEnabled = false;
scene.camera.setView({
destination : Cesium.Cartesian3.fromDegrees(116.44621857300415, 39.899281526734555, 216.7793905027196),
orientation : {
......
......@@ -83,11 +83,11 @@
return {
step: 1,
num: 1,
direction: 1, // 方向
direction: 180, // 方向
pitch: 1, // 翻转
distance: 1, // 距离
horizontalFov: 1, // 水平视场角
verticalFov: 1, // 垂直视场角
distance: 320, // 距离
horizontalFov: 120, // 水平视场角
verticalFov: 90, // 垂直视场角
visibleAreaColor: 'red', // 可见区域颜色
hiddenAreaColor: 'rgba(255, 69, 0, 0.68)', // 不可见区域颜色
isXmbj: true,
......
......@@ -32,28 +32,20 @@
</div>
<!-- <div class="func-input">
<div class="btn-wrapper2" :class="[isCF?'add-bg2': '']" @click="handleIsXmbj('isCF')">
<span class="center">春分</span>
</div>
<div class="btn-wrapper2" :class="[isXZ?'add-bg2': '']" @click="handleIsXmbj('isXZ')">
<span class="center">夏至</span>
</div>
<div class="btn-wrapper2" :class="[isQF?'add-bg2': '']" @click="handleIsXmbj('isQF')">
<span class="center">秋分</span>
</div>
<div class="btn-wrapper2" :class="[isLD?'add-bg2': '']" @click="handleIsXmbj('isLD')">
<span class="center">立冬</span>
</div>
<div class="btn-wrapper2" :class="[isDZ?'add-bg2': '']" @click="handleIsXmbj('isDZ')">
<span class="center">冬至</span>
</div>
</div> -->
<div class="func-input">
<span>时间间隔 </span>
<el-input-number v-model="timeS" controls-position="right" :min="0" :max="1000"
style="margin:0 12px; width: 245px;"></el-input-number>
<span>分钟</span>
</div> -->
<div class="func-input">
<span>底部高程 </span>
<el-input v-model="bottomHeight" style="margin:0 12px; width: 245px;"></el-input>
</div>
<div class="func-input">
<span>拉伸高度 </span>
<el-input v-model="extrudeHeight" style="margin:0 12px; width: 245px;"></el-input>
</div>
<div class="" style="padding: 18px 24px 0px 24px;">
......@@ -82,15 +74,18 @@
<script>
let maxW = 24 * 60 * 60 * 1000 - 1 * 60 * 1000
import shadow from "../assets/js/map/shadow";
import objectManage from '../assets/js/map/maputils';
export default {
name: 'yyAnslysis',
components: {},
data() {
return {
anslysisTime: '',
anslysisTime: new Date(),
timeS: 30, // 时间间隔
time: 0 * 60 * 60 * 1000, // 滑块时间
time: new Date().getHours() * 60 * 60 * 1000, // 滑块时间
max: (24 * 60 * 60 * 1000 - 1 * 60 * 1000),
bottomHeight: 20,
extrudeHeight: 20,
marks: {
0: '0:00',
[maxW]: '23:59',
......@@ -113,6 +108,12 @@
this.$emit('closePop', 'yyAnslysis')
},
startAnalysis() {
Object.assign(this.shadow, {
anslysisTime: this.anslysisTime,
bottomHeight: Number(this.bottomHeight),
extrudeHeight: Number(this.extrudeHeight)
});
this.shadow.remove();
this.shadow.handlerPolygon.deactivate();
this.shadow.handlerPolygon.activate();
},
......@@ -133,7 +134,8 @@
})
},
EtimeChange() {
this.anslysisTime.setHours(Math.round(this.time / 1000 / 60 / 60));
objectManage.viewer.clock.currentTime = Cesium.JulianDate.fromDate(this.anslysisTime);
},
formatTooltip(val) {
let nowTime = this.commons.dateZhuan('yyyy-MM-dd 00:00:00', new Date());
......