右下角定位样式 及缓冲区分析结果样式 及分析数据展示
Showing
3 changed files
with
37 additions
and
19 deletions
| ... | @@ -3,11 +3,11 @@ | ... | @@ -3,11 +3,11 @@ |
| 3 | <div :id="viewId" class="viewDiv"> | 3 | <div :id="viewId" class="viewDiv"> |
| 4 | </div> | 4 | </div> |
| 5 | <div class="mapViewPoint"> | 5 | <div class="mapViewPoint"> |
| 6 | <span class="key">比例尺:</span> | 6 | <!-- <span class="key">比例尺:</span> --> |
| 7 | <span class="value">{{ mapInfo.scale }}km</span> | 7 | <div class="viewScale"><span class="value">{{ mapInfo.scale }}公里</span></div> |
| 8 | <span class="key">经度:</span> | 8 | <span class="key">X坐标</span> |
| 9 | <span class="value">{{ mapInfo.x }}</span> | 9 | <span class="value">{{ mapInfo.x }}</span> |
| 10 | <span class="key">纬度:</span> | 10 | <span class="key">Y坐标</span> |
| 11 | <span class="value">{{ mapInfo.y }}</span> | 11 | <span class="value">{{ mapInfo.y }}</span> |
| 12 | </div> | 12 | </div> |
| 13 | </div> | 13 | </div> |
| ... | @@ -70,7 +70,7 @@ | ... | @@ -70,7 +70,7 @@ |
| 70 | var point = view.toMap({x: event.x, y: event.y}); | 70 | var point = view.toMap({x: event.x, y: event.y}); |
| 71 | self.mapInfo.x = point.longitude.toFixed(6); | 71 | self.mapInfo.x = point.longitude.toFixed(6); |
| 72 | self.mapInfo.y = point.latitude.toFixed(6); | 72 | self.mapInfo.y = point.latitude.toFixed(6); |
| 73 | self.mapInfo.scale = (view.scale/1000).toFixed(3); | 73 | self.mapInfo.scale = (view.scale/1000).toFixed(0); |
| 74 | 74 | ||
| 75 | }); | 75 | }); |
| 76 | }).catch(err => { | 76 | }).catch(err => { |
| ... | @@ -90,22 +90,33 @@ | ... | @@ -90,22 +90,33 @@ |
| 90 | width: 100%; | 90 | width: 100%; |
| 91 | } | 91 | } |
| 92 | .mapViewPoint{ | 92 | .mapViewPoint{ |
| 93 | display: inline-flex; | ||
| 93 | position: absolute; | 94 | position: absolute; |
| 94 | bottom: 10px; | 95 | bottom: 10px; |
| 95 | left: 5px; | 96 | left: 5px; |
| 96 | background-color: white; | 97 | line-height: 12px; |
| 97 | line-height: 36px; | ||
| 98 | font-size: 12px; | ||
| 99 | border-radius: 4px; | ||
| 100 | box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.18); | ||
| 101 | .key{ | ||
| 102 | font-weight: 600; | ||
| 103 | } | ||
| 104 | .value{ | 98 | .value{ |
| 105 | margin-left: 0px; | 99 | margin-left: 0px; |
| 106 | } | 100 | } |
| 107 | span{ | 101 | span{ |
| 108 | margin:0px 5px; | 102 | margin:0px 5px; |
| 103 | font-family: SFUIDisplay-Medium; | ||
| 104 | font-size: 12px; | ||
| 105 | color: #4A4A4A; | ||
| 106 | font-weight: bold; | ||
| 107 | letter-spacing: 0; | ||
| 108 | text-shadow: 0 -1px 0 #FFFFFF; | ||
| 109 | position: relative; | ||
| 110 | bottom: 9px; | ||
| 111 | } | ||
| 112 | .viewScale{ | ||
| 113 | width: auto; | ||
| 114 | background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANIAAAAOCAYAAABaZUIWAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAA0qADAAQAAAABAAAADgAAAAD7u0TwAAAA4ElEQVRoBe3a4QnCMBCG4UQcpKPU39kpq8UFsoObxBzVH6WeNHBQ2nsDFYlH4j3lI1QMoY/WWumXNorUMBDwKtCDUbRwyGficvOKQ98IWAqsglRrfaWUglzy3nIj1kLg7AL/8rEK0tkb5fsjcJQAQTpKnn0vJXDf0c0sD1o76ihBwK0AJ5LbW0/jlgLqiZRzniw3Yi0ELiAwaT1wImkyzCMwIECQBrAoRUAT+BUkfljQtJhHYBHYZCTK/OdvDvNSwysCCAwIPGOMj++JtEnYwEKUIuBVQHJDdrzeffq2F3gDSn1fbXNQA8oAAAAASUVORK5CYII=) top no-repeat; | ||
| 115 | background-size: contain; | ||
| 116 | background-position-y: 6px; | ||
| 117 | span{ | ||
| 118 | margin: 0px 21px; | ||
| 119 | } | ||
| 109 | } | 120 | } |
| 110 | } | 121 | } |
| 111 | } | 122 | } | ... | ... |
| ... | @@ -93,7 +93,7 @@ | ... | @@ -93,7 +93,7 @@ |
| 93 | </div> | 93 | </div> |
| 94 | <!-- 底部数据展示区域 --> | 94 | <!-- 底部数据展示区域 --> |
| 95 | <div class="bottomResult" v-if="bottomResultDialog"> | 95 | <div class="bottomResult" v-if="bottomResultDialog"> |
| 96 | <div class="closeButn" @click="closeBufferDialog"> | 96 | <div class="closeButn" @click="closeBufferDialog(false)"> |
| 97 | <i class="el-icon-close"></i> | 97 | <i class="el-icon-close"></i> |
| 98 | </div> | 98 | </div> |
| 99 | <el-tabs v-model="activeName" > | 99 | <el-tabs v-model="activeName" > |
| ... | @@ -476,8 +476,8 @@ export default { | ... | @@ -476,8 +476,8 @@ export default { |
| 476 | color: #F39835; | 476 | color: #F39835; |
| 477 | } | 477 | } |
| 478 | .active{ | 478 | .active{ |
| 479 | border-bottom: 1.5px solid #409eff; | 479 | border-bottom: 2px solid #409eff; |
| 480 | padding-bottom: 5px; | 480 | padding-bottom: 10px; |
| 481 | } | 481 | } |
| 482 | } | 482 | } |
| 483 | .searchResult{ | 483 | .searchResult{ |
| ... | @@ -575,11 +575,10 @@ export default { | ... | @@ -575,11 +575,10 @@ export default { |
| 575 | background-color: #ffffff; | 575 | background-color: #ffffff; |
| 576 | margin: 10px; | 576 | margin: 10px; |
| 577 | border-radius: 4px; | 577 | border-radius: 4px; |
| 578 | padding: 5px; | ||
| 579 | .closeButn{ | 578 | .closeButn{ |
| 580 | position: relative; | 579 | position: relative; |
| 581 | float: right; | 580 | float: right; |
| 582 | font-size: 20px; | 581 | font-size: 18px; |
| 583 | color: #9B9B9B; | 582 | color: #9B9B9B; |
| 584 | z-index: 16; | 583 | z-index: 16; |
| 585 | } | 584 | } |
| ... | @@ -592,6 +591,14 @@ export default { | ... | @@ -592,6 +591,14 @@ export default { |
| 592 | /deep/ .el-table td, .el-table th.is-leaf { | 591 | /deep/ .el-table td, .el-table th.is-leaf { |
| 593 | text-align: center; | 592 | text-align: center; |
| 594 | } | 593 | } |
| 594 | /deep/ .el-tabs__nav :first{ | ||
| 595 | margin-left: 33px; | ||
| 596 | } | ||
| 597 | |||
| 598 | /deep/ .el-tabs__item.is-active{ | ||
| 599 | color: #505050; | ||
| 600 | background-color:#ffffff; | ||
| 601 | } | ||
| 595 | } | 602 | } |
| 596 | } | 603 | } |
| 597 | </style> | 604 | </style> |
| ... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
| ... | @@ -377,7 +377,6 @@ | ... | @@ -377,7 +377,6 @@ |
| 377 | } | 377 | } |
| 378 | } | 378 | } |
| 379 | //将那个导入图层清除 | 379 | //将那个导入图层清除 |
| 380 | |||
| 381 | self.createBuffer(this.importGeo,self.bufferParams.distance,self.viewId,function (bufGeo) { | 380 | self.createBuffer(this.importGeo,self.bufferParams.distance,self.viewId,function (bufGeo) { |
| 382 | self.identify(self.layerUrl,self.bufferParams.layerId,bufGeo,function(res){ | 381 | self.identify(self.layerUrl,self.bufferParams.layerId,bufGeo,function(res){ |
| 383 | var resultes = res.results; | 382 | var resultes = res.results; |
| ... | @@ -431,6 +430,7 @@ | ... | @@ -431,6 +430,7 @@ |
| 431 | getDjzqList(){ | 430 | getDjzqList(){ |
| 432 | var self = this, | 431 | var self = this, |
| 433 | djzqLayer= this.getLayerByName("DJZQ"); | 432 | djzqLayer= this.getLayerByName("DJZQ"); |
| 433 | self.bufferParams.selectDjzq = ""; | ||
| 434 | self.djzqList = []; | 434 | self.djzqList = []; |
| 435 | this.queryAttributes(this.layerUrl+"/"+djzqLayer.id,{"DJZQDM":this.bufferParams.selectDjq},function (features) { | 435 | this.queryAttributes(this.layerUrl+"/"+djzqLayer.id,{"DJZQDM":this.bufferParams.selectDjq},function (features) { |
| 436 | if(features != null){ | 436 | if(features != null){ | ... | ... |
-
Please register or sign in to post a comment