2024-10-21 绘制mars3d版本
This commit is contained in:
parent
2efa7755d1
commit
c303eb4192
BIN
src/assets/images/mapbox/Group 1000015865.png
Normal file
BIN
src/assets/images/mapbox/Group 1000015865.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 214 B |
BIN
src/assets/images/mapbox/Group 1000015866.png
Normal file
BIN
src/assets/images/mapbox/Group 1000015866.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 390 B |
BIN
src/assets/images/mapbox/Group 31.png
Normal file
BIN
src/assets/images/mapbox/Group 31.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
BIN
src/assets/images/mapbox/Rectangle 22.png
Normal file
BIN
src/assets/images/mapbox/Rectangle 22.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 414 B |
BIN
src/assets/images/mapbox/Rectangle 24.png
Normal file
BIN
src/assets/images/mapbox/Rectangle 24.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
BIN
src/assets/images/mapbox/Rectangle 34624274.png
Normal file
BIN
src/assets/images/mapbox/Rectangle 34624274.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 455 B |
@ -41,7 +41,7 @@
|
||||
|
||||
<div class="mars3d-item">
|
||||
<div class="mar3d-title">边框颜色：</div>
|
||||
<div class="mar3d-con">
|
||||
<div class="mar3d-con distinction">
|
||||
<el-color-picker v-model="itemdata.fillColor" size="small" />
|
||||
<input v-model="itemdata.fillColor" placeholder="边框颜色" />
|
||||
</div>
|
||||
@ -49,7 +49,7 @@
|
||||
|
||||
<div class="mars3d-item">
|
||||
<div class="mar3d-title">填充颜色：</div>
|
||||
<div class="mar3d-con">
|
||||
<div class="mar3d-con distinction">
|
||||
<el-color-picker v-model="itemdata.collColor" size="small" />
|
||||
<input v-model="itemdata.collColor" placeholder="填充色" />
|
||||
</div>
|
||||
@ -57,7 +57,7 @@
|
||||
|
||||
<div class="mars3d-item">
|
||||
<div class="mar3d-title">文字颜色：</div>
|
||||
<div class="mar3d-con">
|
||||
<div class="mar3d-con distinction">
|
||||
<el-color-picker v-model="itemdata.textColor" size="small" />
|
||||
<input v-model="itemdata.textColor" placeholder="文字颜色" />
|
||||
</div>
|
||||
@ -75,7 +75,7 @@
|
||||
<div class="mars3d-item">
|
||||
<div class="mar3d-title">是否虚线：</div>
|
||||
<div class="mar3d-con">
|
||||
<el-switch v-model="itemdata.swtichitem" active-color="#13ce66" inactive-color="#ccc"></el-switch>
|
||||
<el-switch v-model="itemdata.swtichitem" active-color="#34c759" inactive-color="#ccc"></el-switch>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -125,7 +125,7 @@
|
||||
@click="onmapitem(item)"
|
||||
>{{item.name}}</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -846,15 +846,20 @@ export default {
|
||||
position: relative;
|
||||
|
||||
.mars-3d-deleter {
|
||||
width: 296px;
|
||||
width: 300px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 15px;
|
||||
height: 42px;
|
||||
border-left: 5px solid #52a3de;
|
||||
border-bottom: 2px solid #52a3de;
|
||||
background: #3c444f;
|
||||
// border-left: 5px solid linear-gradient(180deg, #3170e2 0%, #52b2ee 100%);
|
||||
// border-bottom: 2px solid #4faced;
|
||||
background: rgba(11, 22, 51, 0.3);
|
||||
background-image: url("~@/assets/images/mapbox/Group 31.png");
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
background-size: 100% 100%;
|
||||
color: #ffffff;
|
||||
// box-sizing: border-box;
|
||||
|
||||
@ -870,7 +875,11 @@ export default {
|
||||
|
||||
width: 300px;
|
||||
height: 420px;
|
||||
background: #3c444f;
|
||||
// background: #3c444f;
|
||||
background-image: url("~@/assets/images/mapbox/Rectangle 24.png");
|
||||
// background-position: center center;
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
z-index: 1000;
|
||||
padding: 0 15px 15px;
|
||||
display: flex;
|
||||
@ -886,8 +895,12 @@ export default {
|
||||
line-height: 45px;
|
||||
padding-left: 15px !important;
|
||||
padding-right: 15px !important;
|
||||
background: #2a3653;
|
||||
border: 1px solid #344c7b;
|
||||
// background: #2a3653;
|
||||
|
||||
// border: 1px solid #344c7b;
|
||||
background-image: url("~@/assets/images/mapbox/Rectangle 22.png");
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
padding: 0;
|
||||
@ -925,6 +938,24 @@ export default {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.distinction {
|
||||
// background: skyblue;
|
||||
display: flex;
|
||||
// align-items: flex-start;
|
||||
align-items: center;
|
||||
|
||||
input {
|
||||
width: 140px !important;
|
||||
}
|
||||
|
||||
::v-deep .el-color-picker--small .el-color-picker__trigger {
|
||||
width: 23px !important;
|
||||
height: 23px !important;
|
||||
margin-right: 8px !important;
|
||||
margin-top: 5px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mar3d-con {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
@ -933,7 +964,25 @@ export default {
|
||||
// background: skyblue;
|
||||
|
||||
.block {
|
||||
width: 200px;
|
||||
width: 180px;
|
||||
|
||||
::v-deep .el-slider__runway {
|
||||
background-image: url("~@/assets/images/mapbox/Rectangle 34624274.png") !important;
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
.el-slider__bar {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.el-slider__button {
|
||||
// background: yellow !important;
|
||||
background-image: url("~@/assets/images/mapbox/Group 1000015866.png") !important;
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
border: 0px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -949,7 +998,7 @@ export default {
|
||||
top: 30px;
|
||||
left: 20px;
|
||||
|
||||
background: skyblue;
|
||||
// background: skyblue;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@ -957,9 +1006,10 @@ export default {
|
||||
// background: red !important;
|
||||
|
||||
input {
|
||||
border: 1px solid #516182;
|
||||
background: #4a5261 !important;
|
||||
color: #ffffff;
|
||||
border: 1px solid #3e62a6;
|
||||
background: #778098;
|
||||
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
i {
|
||||
@ -979,8 +1029,10 @@ export default {
|
||||
.sea-list {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
background: #434447 !important;
|
||||
border: 1px solid rgba(66, 70, 78 / 0.1);
|
||||
background-image: url("~@/assets/images/mapbox/Rectangle 24.png");
|
||||
// background-position: center center;
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
box-sizing: border-box;
|
||||
color: #ffffff;
|
||||
|
||||
|
||||
@ -2,7 +2,17 @@
|
||||
<div class="mars3d-com">
|
||||
<div class="mars3d-com" ref="mars3dContainer" style="width: 100%; height: 100%"></div>
|
||||
<!-- 绘制区域 -->
|
||||
<div class="mars3d-box">
|
||||
|
||||
<div class="mars-3d-deleter">
|
||||
{{ !latlntswtich ? '绘制面' : '获取经纬度'}}
|
||||
<i
|
||||
@click="onclonemap"
|
||||
class="el-icon-close"
|
||||
style="font-size:'16px'; cursor: pointer;"
|
||||
></i>
|
||||
</div>
|
||||
|
||||
<div class="mars3d-box" v-if="!latlntswtich">
|
||||
<div class="mars-3d-header">
|
||||
<el-radio-group v-model="marsheader">
|
||||
<el-radio :label="1">多边形面</el-radio>
|
||||
@ -22,14 +32,14 @@
|
||||
|
||||
<div class="mars3d-item">
|
||||
<div class="mar3d-title">区域名称：</div>
|
||||
<div class="mar3d-con" style="margin-left: 24px;">
|
||||
<div class="mar3d-con">
|
||||
<input v-model="itemdata.texttitle" placeholder="填充文字" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mars3d-item">
|
||||
<div class="mar3d-title">边框颜色：</div>
|
||||
<div class="mar3d-con">
|
||||
<div class="mar3d-con distinction">
|
||||
<el-color-picker v-model="itemdata.fillColor" size="small" />
|
||||
<input v-model="itemdata.fillColor" placeholder="填充色" />
|
||||
</div>
|
||||
@ -37,7 +47,7 @@
|
||||
|
||||
<div class="mars3d-item">
|
||||
<div class="mar3d-title">填充颜色：</div>
|
||||
<div class="mar3d-con">
|
||||
<div class="mar3d-con distinction">
|
||||
<el-color-picker v-model="itemdata.collColor" size="small" />
|
||||
<input v-model="itemdata.collColor" placeholder="填充色" />
|
||||
</div>
|
||||
@ -45,7 +55,7 @@
|
||||
|
||||
<div class="mars3d-item">
|
||||
<div class="mar3d-title">文字颜色：</div>
|
||||
<div class="mar3d-con">
|
||||
<div class="mar3d-con distinction">
|
||||
<el-color-picker v-model="itemdata.textColor" size="small" />
|
||||
<input v-model="itemdata.textColor" placeholder="文字颜色" />
|
||||
</div>
|
||||
@ -63,7 +73,7 @@
|
||||
<div class="mars3d-item">
|
||||
<div class="mar3d-title">是否虚线：</div>
|
||||
<div class="mar3d-con">
|
||||
<el-switch v-model="itemdata.swtichitem" active-color="#13ce66" inactive-color="#ccc"></el-switch>
|
||||
<el-switch v-model="itemdata.swtichitem" active-color="#34c759" inactive-color="#ccc"></el-switch>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -74,12 +84,7 @@
|
||||
</div>
|
||||
|
||||
<!-- 经纬度数据 -->
|
||||
<div class="mars3d-box" v-if="latlntswtich">
|
||||
<div class="mars-3d-header">
|
||||
<el-radio v-model="marsheader" label="1">经纬度数据</el-radio>
|
||||
<!-- <i @click="onclonemap" class="el-icon-circle-close" style="font-size:'16px'"></i> -->
|
||||
</div>
|
||||
|
||||
<div class="mars3djinwie-box" v-if="latlntswtich">
|
||||
<div class="mars3d-Controls">
|
||||
<div class="mars3d-item" style="margin-top: 50px;">
|
||||
<div class="mar3d-title">当前经度：</div>
|
||||
@ -699,14 +704,49 @@ export default {
|
||||
.mars3d-com {
|
||||
position: relative;
|
||||
|
||||
.mars3d-box {
|
||||
.mars-3d-deleter {
|
||||
width: 300px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 15px;
|
||||
height: 42px;
|
||||
// border-left: 5px solid linear-gradient(180deg, #3170e2 0%, #52b2ee 100%);
|
||||
// border-bottom: 2px solid #4faced;
|
||||
background: rgba(11, 22, 51, 0.3);
|
||||
background-image: url("~@/assets/images/mapbox/Group 31.png");
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
background-size: 100% 100%;
|
||||
color: #ffffff;
|
||||
// box-sizing: border-box;
|
||||
|
||||
position: absolute;
|
||||
right: 50px;
|
||||
top: 50px;
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
.mars3d-jinwei {
|
||||
height: 220px !important;
|
||||
}
|
||||
|
||||
.mars3djinwie-box {
|
||||
height: 220px !important;
|
||||
}
|
||||
|
||||
.mars3d-box,
|
||||
.mars3djinwie-box {
|
||||
position: absolute;
|
||||
right: 50px;
|
||||
top: 70px;
|
||||
|
||||
width: 300px;
|
||||
height: 420px;
|
||||
background: #3c444f;
|
||||
background-image: url("~@/assets/images/mapbox/Rectangle 24.png");
|
||||
// background-position: center center;
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
z-index: 1000;
|
||||
padding: 0 15px 15px;
|
||||
display: flex;
|
||||
@ -722,7 +762,9 @@ export default {
|
||||
line-height: 45px;
|
||||
padding-left: 15px !important;
|
||||
padding-right: 15px !important;
|
||||
background: #2a3653;
|
||||
background-image: url("~@/assets/images/mapbox/Rectangle 22.png");
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
border: 1px solid #344c7b;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
@ -761,13 +803,49 @@ export default {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.distinction {
|
||||
// background: skyblue;
|
||||
display: flex;
|
||||
// align-items: flex-start;
|
||||
align-items: center;
|
||||
|
||||
input {
|
||||
width: 140px !important;
|
||||
}
|
||||
|
||||
::v-deep .el-color-picker--small .el-color-picker__trigger {
|
||||
width: 23px !important;
|
||||
height: 23px !important;
|
||||
margin-right: 8px !important;
|
||||
margin-top: 5px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mar3d-con {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.block {
|
||||
width: 200px;
|
||||
width: 180px;
|
||||
|
||||
::v-deep .el-slider__runway {
|
||||
background-image: url("~@/assets/images/mapbox/Rectangle 34624274.png") !important;
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
.el-slider__bar {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.el-slider__button {
|
||||
// background: yellow !important;
|
||||
background-image: url("~@/assets/images/mapbox/Group 1000015866.png") !important;
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
border: 0px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -443,12 +443,13 @@
|
||||
<!-- <div class="dialog-map" v-if="MarsBoxSwtich">
|
||||
<MarsBoxarea ref="MarsBoxarea" />
|
||||
</div>-->
|
||||
|
||||
<el-dialog :title="maptypetitle" :visible.sync="MarsBoxSwtich" :fullscreen="true">
|
||||
<div v-if="MarsBoxSwtich">
|
||||
<MarsBoxarea ref="MarsBoxarea" />
|
||||
</div>
|
||||
</el-dialog>
|
||||
<div class="projectareaadmin">
|
||||
<el-dialog :title="maptypetitle" :visible.sync="MarsBoxSwtich" :fullscreen="true">
|
||||
<div v-if="MarsBoxSwtich">
|
||||
<MarsBoxarea ref="MarsBoxarea" />
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
@ -1122,6 +1123,26 @@ export default {
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.projectareaadmin {
|
||||
::v-deep .el-dialog {
|
||||
// background: skyblue !important;
|
||||
// width: 1750px !important;
|
||||
// height: 600px !important;
|
||||
// margin-top: 50px !important;
|
||||
|
||||
.el-dialog__wrapper {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.el-dialog__header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
@ -1240,7 +1261,7 @@ export default {
|
||||
i {
|
||||
font-size: 21px;
|
||||
color: #9ea0a5;
|
||||
cursor: pointer;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user