右下角定位样式 及缓冲区分析结果样式 及分析数据展示
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