| | |
| | | </el-card> |
| | | </div> |
| | | <div |
| | | class="terrainLevelBox" |
| | | v-if="showTerrainLevelDialog" |
| | | > |
| | | <el-card class="box-card"> |
| | | <div slot="header"> |
| | | <span>地形平整</span> |
| | | <div style="float: right; cursor: pointer"> |
| | | <i |
| | | class="el-icon-close" |
| | | @click="closeBufferBox(5)" |
| | | ></i> |
| | | </div> |
| | | </div> |
| | | <div class="box-body"> |
| | | <el-form |
| | | ref="form" |
| | | :model="terrainFrom" |
| | | label-width="100px" |
| | | > |
| | | <el-form-item label="平整高度:"> |
| | | <el-input v-model="terrainFrom.height"></el-input> |
| | | </el-form-item> |
| | | |
| | | <el-form-item> |
| | | <el-button |
| | | @click="drawTerrainLevel" |
| | | type="parmary" |
| | | >绘制</el-button> |
| | | <el-button |
| | | @click="clearTerrainLevel" |
| | | type="info" |
| | | >清除</el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | </div> |
| | | </el-card> |
| | | </div> |
| | | <div |
| | | class="toponymicLocalBox" |
| | | v-if="showToponymicLocalBoxDialog" |
| | | > |
| | |
| | | type="index" |
| | | label="序号" |
| | | /> |
| | | <el-table-column prop="name" align="center" label="地名"> |
| | | <el-table-column |
| | | prop="name" |
| | | align="center" |
| | | label="地名" |
| | | > |
| | | <template slot-scope="scope"> |
| | | <el-button |
| | | @click="handleLocation(scope.$index, scope.row)" |
| | | size="small" |
| | | >{{scope.row.name}}<i class="el-icon-place" style="padding-left: 5px"></i></el-button> |
| | | @click="handleLocation(scope.$index, scope.row)" |
| | | size="small" |
| | | >{{scope.row.name}}<i |
| | | class="el-icon-place" |
| | | style="padding-left: 5px" |
| | | ></i></el-button> |
| | | </template> |
| | | </el-table-column> |
| | | <!-- <el-table-column--> |
| | | <!-- prop="name"--> |
| | | <!-- align="center"--> |
| | | <!-- label="定位"--> |
| | | <!-- >--> |
| | | <!-- <template slot-scope="scope">--> |
| | | <!-- <el-button--> |
| | | <!-- @click="handleLocation(scope.$index, scope.row)"--> |
| | | <!-- size="small"--> |
| | | <!-- icon="el-icon-place"--> |
| | | <!-- ></el-button>--> |
| | | <!-- </template>--> |
| | | <!-- </el-table-column>--> |
| | | <!-- <el-table-column--> |
| | | <!-- prop="name"--> |
| | | <!-- align="center"--> |
| | | <!-- label="地名"--> |
| | | <!-- >--> |
| | | <!-- </el-table-column>--> |
| | | <!-- <el-table-column--> |
| | | <!-- prop="name"--> |
| | | <!-- align="center"--> |
| | | <!-- label="定位"--> |
| | | <!-- >--> |
| | | <!-- <template slot-scope="scope">--> |
| | | <!-- <el-button--> |
| | | <!-- @click="handleLocation(scope.$index, scope.row)"--> |
| | | <!-- size="small"--> |
| | | <!-- icon="el-icon-place"--> |
| | | <!-- ></el-button>--> |
| | | <!-- </template>--> |
| | | <!-- </el-table-column>--> |
| | | <!-- <el-table-column--> |
| | | <!-- prop="name"--> |
| | | <!-- align="center"--> |
| | | <!-- label="地名"--> |
| | | <!-- >--> |
| | | <!-- </el-table-column>--> |
| | | </el-table> |
| | | <div class="pagination_box"> |
| | | <el-pagination |
| | |
| | | @current-change="handleCurrentChange" |
| | | :current-page="listData.pageIndex" |
| | | :page-sizes="[10, 20, 50, 100]" |
| | | :pager-count = "3" |
| | | :pager-count="3" |
| | | :page-size="listData.pageSize" |
| | | layout="total, prev, pager, next" |
| | | :total="count" |
| | |
| | | </div> |
| | | <div style="display: flex"> |
| | | <div |
| | | @click="changeMenulayer" |
| | | class="center CenDiv" |
| | | :class="{ center1: centerFlag }" |
| | | @click="changeMenulayer" |
| | | class="center CenDiv" |
| | | :class="{ center1: centerFlag }" |
| | | > |
| | | <div |
| | | id="cenBg" |
| | | v-bind:class="{ active: isActive, menuLayer: isMenuLayer }" |
| | | id="cenBg" |
| | | v-bind:class="{ active: isActive, menuLayer: isMenuLayer }" |
| | | ></div> |
| | | </div> |
| | | <div @click="changeMapType" class="changeMapType"> |
| | | <div id="cenBg" :class="show2DMap ? 'mapTypeTwo' : 'mapTypeThree'"></div> |
| | | <div |
| | | @click="changeMapType" |
| | | class="changeMapType" |
| | | > |
| | | <div |
| | | id="cenBg" |
| | | :class="show2DMap ? 'mapTypeTwo' : 'mapTypeThree'" |
| | | ></div> |
| | | </div> |
| | | </div> |
| | | <!-- <div--> |
| | | <!-- @click="changeMenulayer"--> |
| | | <!-- class="center CenDiv"--> |
| | | <!-- :class="{ center1: centerFlag }"--> |
| | | <!-- >--> |
| | | <!-- <div--> |
| | | <!-- id="cenBg"--> |
| | | <!-- v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"--> |
| | | <!-- ></div>--> |
| | | <!-- </div>--> |
| | | <div |
| | | class="lengend" |
| | | v-show="showLengendDialog" |
| | | > |
| | | <el-card class="box-card"> |
| | | <!-- <div |
| | | class="lengend_color" |
| | | style="height:205px" |
| | | > |
| | | |
| | | </div> --> |
| | | <div class="lengendBox"> |
| | | <div class="lengendSpan"> |
| | | <div style="left:10px">0°</div> |
| | | <div style="align-self: flex-end;left:10px; position: absolute; |
| | | bottom: 8%; ">70°</div> |
| | | </div> |
| | | <div |
| | | class="lengend_color" |
| | | style="height:205px; width:30px " |
| | | ></div> |
| | | </div> |
| | | </el-card> |
| | | </div> |
| | | <!-- <div--> |
| | | <!-- @click="changeMenulayer"--> |
| | | <!-- class="center CenDiv"--> |
| | | <!-- :class="{ center1: centerFlag }"--> |
| | | <!-- >--> |
| | | <!-- <div--> |
| | | <!-- id="cenBg"--> |
| | | <!-- v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"--> |
| | | <!-- ></div>--> |
| | | <!-- </div>--> |
| | | </div> |
| | | </div> |
| | | </template> |
| | |
| | | isMenuLayer: true, |
| | | selFrom: {}, |
| | | selectTree: null, |
| | | |
| | | showTerrainLevelDialog: false, |
| | | menuList: [], |
| | | defaultProps: { |
| | | children: "children", |
| | | label: "label", |
| | | }, //树绑定对象 |
| | | show2DMap:false, |
| | | show2DMap: false, |
| | | terrainFrom: { |
| | | height: '10' |
| | | }, showLengendDialog: false, |
| | | }; |
| | | }, |
| | | mounted() { |
| | |
| | | }); |
| | | }, |
| | | methods: { |
| | | drawTerrainLevel() { |
| | | this.clearTerrainLevel() |
| | | var deep = parseFloat(this.terrainFrom.height) |
| | | sgworld.Creator.createSimpleGraphic( |
| | | 'polygon', |
| | | { |
| | | clampToGround: true, |
| | | }, |
| | | function (entity) { |
| | | |
| | | var positions = entity.polygon.hierarchy.getValue().positions; |
| | | sgworld.Creator.SimpleGraphic.remove(entity.id); |
| | | |
| | | window.TerrainFlattening = sgworld.Creator.createTerrainModifier("地形压平", positions, deep, {}); |
| | | } |
| | | ); |
| | | }, |
| | | clearTerrainLevel() { |
| | | if (window.TerrainFlattening) { |
| | | window.TerrainFlattening && window.TerrainFlattening.remove(); |
| | | } |
| | | }, |
| | | init3DMap() { |
| | | var webKey = "94a34772eb88317fcbf8428e10448561"; |
| | | |
| | |
| | | this.closeBufferBox(4); |
| | | } |
| | | } |
| | | } else if (res.name == "Trrain") { |
| | | switch (res.id) { |
| | | case "d10": |
| | | this.showTerrainLevelDialog = !this.showTerrainLevelDialog; |
| | | this.clearTerrainLevel(); |
| | | break; |
| | | } |
| | | |
| | | } else if (res.name == "Lengend") { |
| | | switch (res.id) { |
| | | case "d2": |
| | | |
| | | this.showLengendDialog = res.vshow; |
| | | |
| | | break; |
| | | } |
| | | |
| | | } |
| | | }, |
| | | handleSizeChange(val) { |
| | |
| | | case 4: |
| | | this.showPathAnalysisBoxDialog = false; |
| | | this.clearPathAll(3); |
| | | |
| | | break; |
| | | case 5: |
| | | this.showTerrainLevelDialog = false; |
| | | this.clearTerrainLevel() |
| | | break; |
| | | } |
| | | }, |
| | |
| | | Altitude: 2000, |
| | | }; |
| | | this.imagePoint = sgworld.Creator.CreateLabel( |
| | | position, |
| | | "", |
| | | SmartEarthRootUrl + "Workers/image/mark.png", |
| | | { |
| | | disableDepthTestDistance: Infinity, |
| | | scale: 0.8, |
| | | }, |
| | | 0, |
| | | "巡检点" |
| | | position, |
| | | "", |
| | | SmartEarthRootUrl + "Workers/image/mark.png", |
| | | { |
| | | disableDepthTestDistance: Infinity, |
| | | scale: 0.8, |
| | | }, |
| | | 0, |
| | | "巡检点" |
| | | ); |
| | | |
| | | sgworld.Navigate.jumpTo({ |
| | | //跳转视角 |
| | | destination: new Cesium.Cartesian3.fromDegrees( |
| | | lon, |
| | | lat, |
| | | height |
| | | lon, |
| | | lat, |
| | | height |
| | | ), |
| | | }); |
| | | // sgworld.Navigate.jumpTo({ |
| | |
| | | } |
| | | }, |
| | | //二维/三维地图切换 |
| | | changeMapType(){ |
| | | changeMapType() { |
| | | // debugger |
| | | this.show2DMap = !this.show2DMap; |
| | | //二维 |
| | | if (this.show2DMap){ |
| | | if (this.show2DMap) { |
| | | this.$bus.$emit("changemap", 2); |
| | | } |
| | | //三维 |
| | |
| | | height: 450x; |
| | | z-index: 40; |
| | | position: absolute; |
| | | right: 6%; |
| | | right: 8%; |
| | | bottom: 1%; |
| | | } |
| | | .bufferBox { |
| | |
| | | height: 370px; |
| | | z-index: 40; |
| | | position: absolute; |
| | | right: 6%; |
| | | right: 8%; |
| | | bottom: 1%; |
| | | } |
| | | .terrainLevelBox { |
| | | width: 350px; |
| | | height: 370px; |
| | | z-index: 40; |
| | | position: absolute; |
| | | right: 8%; |
| | | bottom: -11%; |
| | | } |
| | | .pathAnalysisBox { |
| | | width: 412px; |
| | | |
| | | z-index: 40; |
| | | position: absolute; |
| | | right: 6%; |
| | | right: 8%; |
| | | bottom: 1%; |
| | | } |
| | | |
| | |
| | | bottom: 5%; |
| | | position: absolute; |
| | | z-index: 40; |
| | | } |
| | | .lengend { |
| | | width: 80px; |
| | | |
| | | z-index: 40; |
| | | position: absolute; |
| | | right: 8%; |
| | | bottom: 1%; |
| | | .lengendBox { |
| | | width: 100%; |
| | | height: 100%; |
| | | display: flex; |
| | | .lengendSpan { |
| | | flex-direction: column; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | } |
| | | .lengend_color { |
| | | background-image: linear-gradient( |
| | | #0055ff, |
| | | #2448da, |
| | | #483cb6, |
| | | #6d3091, |
| | | #91246d, |
| | | #b61848, |
| | | #da0c24 |
| | | ); |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | |
| | | border-radius: 5px; |
| | | } |
| | | |
| | | .changeMapType{ |
| | | .changeMapType { |
| | | position: absolute; |
| | | bottom: 1%; |
| | | left: calc(1% + 75px); |
| | |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | box-shadow: 3px 3px 6px #666; |
| | | // box-shadow: 3px 3px 6px #666; |
| | | //border: 1px solid rgba(204, 204, 204, 0.76); |
| | | border-radius: 5px; |
| | | background: #fff; |
| | | |
| | | cursor: pointer; |
| | | } |
| | | .mapTypeTwo{ |
| | | .mapTypeTwo { |
| | | width: 100%; |
| | | height: 100%; |
| | | margin-left: 10px; |
| | | background-image: url("../assets/img/3dmap.png"); |
| | | background-image: url("../assets/img/synthesis/3D.png"); |
| | | background-repeat: no-repeat; |
| | | background-size: contain; |
| | | } |
| | | .mapTypeThree{ |
| | | .mapTypeThree { |
| | | width: 100%; |
| | | height: 100%; |
| | | margin-left: 10px; |
| | | background-image: url("../assets/img/2dmap.png"); |
| | | background-image: url("../assets/img/synthesis/2D 拷贝 2.png"); |
| | | background-repeat: no-repeat; |
| | | background-size: contain; |
| | | } |