Skip to content

任超 / js.CadastralSystem

Go to a project
Toggle navigation
Toggle navigation pinning
89928441 by 杨威
Options

缓冲区分析功能实现

1 parent 9a157f24
Inline Side-by-side
Showing 4 changed files with 180 additions and 26 deletions
...@@ -87,6 +87,65 @@ ...@@ -87,6 +87,65 @@
87 <div class="changeMap"> 87 <div class="changeMap">
88 <ChangeMap :viewId="viewId"></ChangeMap> 88 <ChangeMap :viewId="viewId"></ChangeMap>
89 </div> 89 </div>
90 <!-- 底部数据展示区域 -->
91 <div class="bottomResult" v-if="bottomResultDialog">
92 <div class="closeButn" @click="closeBufferDialog">
93 <i class="el-icon-close"></i>
94 </div>
95 <el-tabs v-model="activeName" >
96 <el-tab-pane v-for="(item,index) in results" :label="item.label+'('+item.features.length+')个'" :name="'tab'+index" :key="index">
97 <el-table
98 :data="item.features"
99 stripe
100 border
101 highlight-current-row
102 @row-click="resultTabClick"
103 style="width: 100%">
104 <el-table-column
105 label="序号"
106 type="index"
107 width="50">
108 </el-table-column>
109 <el-table-column
110 label="宗地代码">
111 <template slot-scope="scope">
112 <span>{{ scope.row.attributes['宗地代码'] == 'Null'?'':scope.row.attributes['宗地代码'] }}</span>
113 </template>
114 </el-table-column>
115 <el-table-column
116 label="不动产单元号">
117 <template slot-scope="scope">
118 <span>{{ scope.row.attributes['不动产单元号'] == 'Null'?'':scope.row.attributes['不动产单元号'] }}</span>
119 </template>
120 </el-table-column>
121 <el-table-column
122 label="项目名称">
123 <template slot-scope="scope">
124 <span>{{ scope.row.attributes['项目名称'] == 'Null'?'':scope.row.attributes['项目名称'] }}</span>
125 </template>
126 </el-table-column>
127 <el-table-column
128 label="不动产权证号">
129 <template slot-scope="scope">
130 <span>{{ scope.row.attributes['不动产权证号'] == 'Null'?'':scope.row.attributes['不动产权证号'] }}</span>
131 </template>
132 </el-table-column>
133 <el-table-column
134 label="权利人">
135 <template slot-scope="scope">
136 <span>{{ scope.row.attributes['权利人'] == 'Null'?'':scope.row.attributes['权利人'] }}</span>
137 </template>
138 </el-table-column>
139 <el-table-column
140 label="坐落">
141 <template slot-scope="scope">
142 <span>{{ scope.row.attributes['坐落'] == 'Null'?'':scope.row.attributes['坐落'] }}</span>
143 </template>
144 </el-table-column>
145 </el-table>
146 </el-tab-pane>
147 </el-tabs>
148 </div>
90 </div> 149 </div>
91 </template> 150 </template>
92 <script> 151 <script>
...@@ -122,7 +181,9 @@ export default { ...@@ -122,7 +181,9 @@ export default {
122 fieldName:"BDCDYH", 181 fieldName:"BDCDYH",
123 heighGraphic:null, 182 heighGraphic:null,
124 isShowCondition:false, 183 isShowCondition:false,
125 totalResults:0 184 totalResults:0,
185 activeName:"tab0",
186 bottomResultDialog:false
126 } 187 }
127 }, 188 },
128 mixins:[mapLayerManager,findTask], 189 mixins:[mapLayerManager,findTask],
...@@ -195,6 +256,16 @@ export default { ...@@ -195,6 +256,16 @@ export default {
195 } 256 }
196 257
197 }, 258 },
259 resultTabClick(row,column,evt){
260 var self = this;
261 if(row.geometry){
262 this.extentToGraphic(row,this.heighGraphic,this.viewId,function () {
263 self.heighGraphic = row;
264 });
265 }else {
266 this.$message.warning("没有图形信息!!")
267 }
268 },
198 //图层选择事件 269 //图层选择事件
199 selectLayerChange(){ 270 selectLayerChange(){
200 var self = this; 271 var self = this;
...@@ -256,6 +327,18 @@ export default { ...@@ -256,6 +327,18 @@ export default {
256 this.clearSearchLayer(this.viewId); 327 this.clearSearchLayer(this.viewId);
257 this.dialogVisible = false; 328 this.dialogVisible = false;
258 }, 329 },
330 closeBufferDialog(){
331 //关闭时清除查询结果 清除数据
332 this.results = [];
333 this.selectResLayerId =null;
334 this.features = [];
335 this.resultLayers = [];
336 this.heighGraphic = null;
337 //清除查询图层
338 this.clearSearchLayer(this.viewId);
339 this.clearBufferLayer(this.viewId);
340 this.bottomResultDialog = false;
341 },
259 //处理数据 342 //处理数据
260 delIdentifyData(data){ 343 delIdentifyData(data){
261 var self = this; 344 var self = this;
...@@ -291,7 +374,8 @@ export default { ...@@ -291,7 +374,8 @@ export default {
291 }) 374 })
292 var layerAndResult = { 375 var layerAndResult = {
293 layerId:layerId, 376 layerId:layerId,
294 features:[] 377 features:[],
378 label:layer.layerLabel
295 } 379 }
296 var feature = data[i].feature, 380 var feature = data[i].feature,
297 attributes = {}, 381 attributes = {},
...@@ -302,6 +386,7 @@ export default { ...@@ -302,6 +386,7 @@ export default {
302 } 386 }
303 } 387 }
304 layerAndResult.features.push(feature); 388 layerAndResult.features.push(feature);
389 debugger
305 self.results.push(layerAndResult); 390 self.results.push(layerAndResult);
306 } 391 }
307 } 392 }
...@@ -432,13 +517,13 @@ export default { ...@@ -432,13 +517,13 @@ export default {
432 align-items: center; 517 align-items: center;
433 font-weight: 400; 518 font-weight: 400;
434 .key{ 519 .key{
435 width: 30%; 520 width: 100px;
436 margin: 5px 3px; 521 margin: 3px 0px;
437 text-align: right; 522 text-align: right;
438 color: #505050; 523 color: #505050;
439 } 524 }
440 .value{ 525 .value{
441 width: 70%; 526 width: calc(100% - 100px);
442 overflow:hidden; 527 overflow:hidden;
443 text-overflow:ellipsis; 528 text-overflow:ellipsis;
444 white-space:nowrap; 529 white-space:nowrap;
...@@ -467,5 +552,32 @@ export default { ...@@ -467,5 +552,32 @@ export default {
467 /deep/ .esri-ui-bottom-right{ 552 /deep/ .esri-ui-bottom-right{
468 bottom: -17px; 553 bottom: -17px;
469 } 554 }
555 .bottomResult{
556 position: absolute;
557 bottom: 0px;
558 height: 26%;
559 overflow: auto;
560 width: 96%;
561 background-color: #ffffff;
562 margin: 10px;
563 border-radius: 4px;
564 padding: 5px;
565 .closeButn{
566 position: relative;
567 float: right;
568 font-size: 20px;
569 color: #9B9B9B;
570 z-index: 16;
571 }
572 .closeButn :hover{
573 cursor:pointer;
574 }
575 /deep/ .el-tabs__header{
576 margin: 0 0 0px;
577 }
578 /deep/ .el-table td, .el-table th.is-leaf {
579 text-align: center;
580 }
581 }
470 } 582 }
471 </style> 583 </style>
...\ No newline at end of file ...\ No newline at end of file
......
1 <template> 1 <template>
2 <div> 2 <div>
3 <ul class="uploadDiv" v-if="!resultDialog && !txtResultDialog"> 3 <ul class="uploadDiv" v-if="!resultDialog && !txtResultDialog">
4 <li> 4 <li>
5 <el-upload 5 <el-upload
6 class="avatar-uploader" 6 class="avatar-uploader"
7 action="#" 7 action="#"
8 accept=".txt" 8 accept=".txt"
9 :auto-upload="false" 9 :auto-upload="false"
10 :on-change="txtFileChange" 10 :on-change="txtFileChange"
11 :show-file-list="false"
12 > 11 >
13 <i class="el-icon-upload"></i> 12 <i class="el-icon-upload"></i>
14 <div class="title">TXT文本格式</div> 13 <div class="title">TXT文本格式</div>
...@@ -332,12 +331,10 @@ export default { ...@@ -332,12 +331,10 @@ export default {
332 .uploadDiv{ 331 .uploadDiv{
333 display: flex; 332 display: flex;
334 justify-content:center; 333 justify-content:center;
334 align-content:center;
335 li{ 335 li{
336 margin: 5px; 336 margin: 5px;
337 width: 20%; 337 width: 20%;
338 /deep/ .el-upload--picture-card{
339 width: 100%;
340 }
341 .title{ 338 .title{
342 line-height: 1; 339 line-height: 1;
343 margin-top: -57px; 340 margin-top: -57px;
...@@ -346,7 +343,28 @@ export default { ...@@ -346,7 +343,28 @@ export default {
346 .templateDowload{ 343 .templateDowload{
347 line-height: 1; 344 line-height: 1;
348 margin-top: 7px; 345 margin-top: 7px;
346
349 } 347 }
350 } 348 }
351 } 349 }
350 /deep/ .avatar-uploader .el-upload {
351 border: 1px dashed #d9d9d9;
352 border-radius: 6px;
353 cursor: pointer;
354 position: relative;
355 overflow: hidden;
356 width: 100%;
357 height: 178px;
358 line-height: 178px;
359 }
360 /deep/ .avatar-uploader .el-upload:hover {
361 border-color: #409EFF;
362 }
363 /deep/ .el-icon-upload {
364 font-size: 28px;
365 color: #8c939d;
366 width:100%;
367 text-align: center;
368 }
369
352 </style> 370 </style>
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -5,10 +5,10 @@ ...@@ -5,10 +5,10 @@
5 <i class="iconfont iconhangzhengqudaohang"></i> 5 <i class="iconfont iconhangzhengqudaohang"></i>
6 <span>行政区导航</span> 6 <span>行政区导航</span>
7 </li> 7 </li>
8 <li> 8 <!-- <li>
9 <i class="iconfont iconkongjianchaxun"></i> 9 <i class="iconfont iconkongjianchaxun"></i>
10 <span>空间查询</span> 10 <span>空间查询</span>
11 </li> 11 </li> -->
12 <li> 12 <li>
13 <i class="iconfont iconzuobiaodingwei"></i> 13 <i class="iconfont iconzuobiaodingwei"></i>
14 <span>定位</span> 14 <span>定位</span>
...@@ -103,6 +103,7 @@ export default { ...@@ -103,6 +103,7 @@ export default {
103 self.$parent.dialogVisible = true; 103 self.$parent.dialogVisible = true;
104 }else{ 104 }else{
105 self.$message.success("暂无数据!!!"); 105 self.$message.success("暂无数据!!!");
106 self.$parent.closeResultDialog();
106 } 107 }
107 },true,'all',3,view.extent); 108 },true,'all',3,view.extent);
108 }); 109 });
......
...@@ -43,9 +43,15 @@ ...@@ -43,9 +43,15 @@
43 <div class="contentItem"> 43 <div class="contentItem">
44 <span>绘制范围：</span> 44 <span>绘制范围：</span>
45 <div class="drawTypes"> 45 <div class="drawTypes">
46 <el-button type="text" @click="bufferParams.drawType = 'point'">点</el-button> 46 <span :class="bufferParams.drawType == 'rectangle'?'active':''">
47 <el-button type="text" @click="bufferParams.drawType = 'circle'">圆</el-button> 47 <i class="iconfont iconhuizhifangshi1" @click="bufferParams.drawType = 'rectangle'"></i>
48 <el-button type="text" @click="bufferParams.drawType = 'polygon'">任意多边形</el-button> 48 </span>
49 <span :class="bufferParams.drawType == 'circle'?'active':''">
50 <i class="iconfont iconhuizhifangshi2" @click="bufferParams.drawType = 'circle'"></i>
51 </span>
52 <span :class="bufferParams.drawType == 'polygon'?'active':''">
53 <i class="iconfont iconhuizhifangshi3" @click="bufferParams.drawType = 'polygon'"></i>
54 </span>
49 </div> 55 </div>
50 </div> 56 </div>
51 <div class="contentItem"> 57 <div class="contentItem">
...@@ -154,6 +160,7 @@ ...@@ -154,6 +160,7 @@
154 import layerTree from '@/assets/json/layerTreeData.json' 160 import layerTree from '@/assets/json/layerTreeData.json'
155 import mapLayerManager from './js/mapLayerManager.js' 161 import mapLayerManager from './js/mapLayerManager.js'
156 import importGeometry from './importGeometry' 162 import importGeometry from './importGeometry'
163 import mapTools from "./js/mapTools";
157 export default{ 164 export default{
158 props:{ 165 props:{
159 viewId:{ 166 viewId:{
...@@ -161,7 +168,7 @@ ...@@ -161,7 +168,7 @@
161 default:"" 168 default:""
162 } 169 }
163 }, 170 },
164 mixins:[mapLayerManager], 171 mixins:[draw,identifyUtils,mapLayerManager,mapTools],
165 components:{ 172 components:{
166 importGeometry 173 importGeometry
167 }, 174 },
...@@ -292,13 +299,15 @@ ...@@ -292,13 +299,15 @@
292 } 299 }
293 this.initDraw(this.bufferParams.drawType,this.viewId,null,function(geo){ 300 this.initDraw(this.bufferParams.drawType,this.viewId,null,function(geo){
294 self.createBuffer(geo,self.bufferParams.distance,self.viewId,function (bufGeo) { 301 self.createBuffer(geo,self.bufferParams.distance,self.viewId,function (bufGeo) {
295 self.identify(self.url,self.bufferParams.layerId,bufGeo,function(res){ 302 self.identify(self.layerUrl,self.bufferParams.layerId,bufGeo,function(res){
296 var resultes = res.results; 303 var resultes = res.results;
297 if(resultes && resultes.length > 0){ 304 if(resultes && resultes.length > 0){
298 self.$parent.delIdentifyData(resultes); 305 self.$parent.delIdentifyData(resultes);
299 self.$parent.dialogVisible = true; 306 self.$parent.bottomResultDialog = true;
300 }else{ 307 }else{
301 self.$message.success("暂无数据!!!"); 308 self.$message.success("暂无数据!!!");
309 //清除上次的结果 关闭上次的结果 清除地图数据
310 self.$parent.closeBufferDialog();
302 } 311 }
303 },true,'all',3,view.extent); 312 },true,'all',3,view.extent);
304 }) 313 })
...@@ -330,14 +339,14 @@ ...@@ -330,14 +339,14 @@
330 type = 'djq'; 339 type = 'djq';
331 dm = this.bufferParams.selectDjq; 340 dm = this.bufferParams.selectDjq;
332 } 341 }
333 this.queryDjqByDm(this.url+"/"+layer.id,type,dm,function (features) { 342 this.queryDjqByDm(this.layerUrl+"/"+layer.id,type,dm,function (features) {
334 if(features.length > 0){ 343 if(features.length > 0){
335 self.createBuffer(features[0].geometry,self.bufferParams.distance,self.viewId,function (bufGeo) { 344 self.createBuffer(features[0].geometry,self.bufferParams.distance,self.viewId,function (bufGeo) {
336 self.identify(self.url,self.bufferParams.layerId,bufGeo,function(res){ 345 self.identify(self.layerUrl,self.bufferParams.layerId,bufGeo,function(res){
337 var resultes = res.results; 346 var resultes = res.results;
338 if(resultes && resultes.length > 0){ 347 if(resultes && resultes.length > 0){
339 self.$parent.delIdentifyData(resultes); 348 self.$parent.delIdentifyData(resultes);
340 self.$parent.dialogVisible = true; 349 self.$parent.bottomResultDialog = true;
341 }else{ 350 }else{
342 self.$message.success("暂无数据!!!"); 351 self.$message.success("暂无数据!!!");
343 } 352 }
...@@ -365,11 +374,11 @@ ...@@ -365,11 +374,11 @@
365 } 374 }
366 } 375 }
367 self.createBuffer(this.importGeo,self.bufferParams.distance,self.viewId,function (bufGeo) { 376 self.createBuffer(this.importGeo,self.bufferParams.distance,self.viewId,function (bufGeo) {
368 self.identify(self.url,self.bufferParams.layerId,bufGeo,function(res){ 377 self.identify(self.layerUrl,self.bufferParams.layerId,bufGeo,function(res){
369 var resultes = res.results; 378 var resultes = res.results;
370 if(resultes && resultes.length > 0){ 379 if(resultes && resultes.length > 0){
371 self.$parent.delIdentifyData(resultes); 380 self.$parent.delIdentifyData(resultes);
372 self.$parent.dialogVisible = true; 381 self.$parent.bottomResultDialog = true;
373 }else{ 382 }else{
374 self.$message.success("暂无数据!!!"); 383 self.$message.success("暂无数据!!!");
375 } 384 }
...@@ -396,7 +405,7 @@ ...@@ -396,7 +405,7 @@
396 getDjqList(){ 405 getDjqList(){
397 var self = this; 406 var self = this;
398 var djqLayer = this.getLayerByName("DJQ"); 407 var djqLayer = this.getLayerByName("DJQ");
399 this.queryAttributes(this.url+"/"+djqLayer.id,"",function (features) { 408 this.queryAttributes(this.layerUrl+"/"+djqLayer.id,"",function (features) {
400 //self.djqAndDjzq.concat = features; 409 //self.djqAndDjzq.concat = features;
401 if(features != null){ 410 if(features != null){
402 for(var i = 0;i < features.length;i++){ 411 for(var i = 0;i < features.length;i++){
...@@ -416,7 +425,7 @@ ...@@ -416,7 +425,7 @@
416 var self = this, 425 var self = this,
417 djzqLayer= this.getLayerByName("DJZQ"); 426 djzqLayer= this.getLayerByName("DJZQ");
418 self.djzqList = []; 427 self.djzqList = [];
419 this.queryAttributes(this.url+"/"+djzqLayer.id,{"DJZQDM":this.bufferParams.selectDjq},function (features) { 428 this.queryAttributes(this.layerUrl+"/"+djzqLayer.id,{"DJZQDM":this.bufferParams.selectDjq},function (features) {
420 if(features != null){ 429 if(features != null){
421 for(var i = 0;i < features.length;i++){ 430 for(var i = 0;i < features.length;i++){
422 var obj = { 431 var obj = {
...@@ -503,8 +512,22 @@ ...@@ -503,8 +512,22 @@
503 } 512 }
504 .contentItem{ 513 .contentItem{
505 margin: 8px 5px; 514 margin: 8px 5px;
515 line-height: 28px;
506 .drawTypes{ 516 .drawTypes{
507 display: contents; 517 display: contents;
518 span{
519 margin: 0px 5px;
520 i{
521 color: #6D7278;
522 font-size: 20px;
523 }
524 }
525 .active>i{
526 color: #0091FF;
527 }
528 span :hover{
529 cursor:pointer
530 }
508 } 531 }
509 } 532 }
510 .buttonDiv{ 533 .buttonDiv{
......