Skip to content

任超 / js.CadastralSystem

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

工具条编辑

1 parent 249e134b
Expand all
Inline Side-by-side
Showing 30 changed files with 980 additions and 310 deletions
1
2 @font-face {font-family: "iconfont";
3 src: url('//at.alicdn.com/t/font_8d5l8fzk5b87iudi.eot?t=1501489744354'); /* IE9*/
4 src: url('//at.alicdn.com/t/font_8d5l8fzk5b87iudi.eot?t=1501489744354#iefix') format('embedded-opentype'), /* IE6-IE8 */
5 url('//at.alicdn.com/t/font_8d5l8fzk5b87iudi.woff?t=1501489744354') format('woff'), /* chrome, firefox */
6 url('//at.alicdn.com/t/font_8d5l8fzk5b87iudi.ttf?t=1501489744354') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
7 url('//at.alicdn.com/t/font_8d5l8fzk5b87iudi.svg?t=1501489744354#iconfont') format('svg'); /* iOS 4.1- */
8 }
9
10 .iconfont {
11 font-family:"iconfont" !important;
12 font-size:16px;
13 font-style:normal;
14 -webkit-font-smoothing: antialiased;
15 -moz-osx-font-smoothing: grayscale;
16 }
17
18 .icon-tuichu:before { content: "\e604"; }
19
20 .icon-fanhui:before { content: "\e608"; }
21
22 .icon-facebook:before { content: "\e60e"; }
23
24 .icon-twitter:before { content: "\e60f"; }
25
26 .icon-xiangyou:before { content: "\e609"; }
27
28 .icon-right:before { content: "\e60a"; }
29
30 .icon-fanhui1:before { content: "\e60b"; }
31
32 .icon-fenxiang:before { content: "\e632"; }
33
34 .icon-xiangxia:before { content: "\e605"; }
35
36 .icon-xiangxia1:before { content: "\e606"; }
37
38 .icon-xiangxia2:before { content: "\e607"; }
39
40 .icon-suofang:before { content: "\e677"; }
41
42 .icon-chexiao:before { content: "\e688"; }
43
44 .icon-esc:before { content: "\e629"; }
45
46 .icon-chexiao1:before { content: "\e675"; }
47
48 .icon-iconfont:before { content: "\e631"; }
49
50 .icon-suoding:before { content: "\e633"; }
51
52 .icon-bianji:before { content: "\e636"; }
53
54 .icon-shoucang2:before { content: "\e638"; }
55
56 .icon-xinjian:before { content: "\e639"; }
57
58 .icon-shoucang1:before { content: "\e63a"; }
59
60 .icon-gongkai:before { content: "\e63b"; }
61
62 .icon-gouwuche1:before { content: "\e63c"; }
63
64 .icon-zhongwen:before { content: "\e63f"; }
65
66 .icon-shangchuan:before { content: "\e640"; }
67
68 .icon-yingwen:before { content: "\e641"; }
69
70 .icon-gouwuche2:before { content: "\e642"; }
71
72 .icon-shanchu:before { content: "\e643"; }
73
74 .icon-xiazai:before { content: "\e644"; }
75
76 .icon-sousuo:before { content: "\e645"; }
77
78 .icon-dashang:before { content: "\e634"; }
79
80 .icon-xiangmu:before { content: "\e635"; }
81
82 .icon-fuzhidaima1:before { content: "\e646"; }
83
84 .icon-wofaqi:before { content: "\e647"; }
85
86 .icon-xiangmuchengyuan:before { content: "\e648"; }
87
88 .icon-gengduo:before { content: "\e649"; }
89
90 .icon-wocanyu:before { content: "\e64a"; }
91
92 .icon-lishi:before { content: "\e64b"; }
93
94 .icon-piliang:before { content: "\e64c"; }
95
96 .icon-shijian:before { content: "\e64d"; }
97
98 .icon-gonggao:before { content: "\e652"; }
99
100 .icon-weixin:before { content: "\e653"; }
101
102 .icon-weibo:before { content: "\e654"; }
103
104 .icon-gerenzhanghu:before { content: "\e637"; }
105
106 .icon-tianjiachengyuan:before { content: "\e63d"; }
107
108 .icon-soutubiao:before { content: "\e63e"; }
109
110 .icon-souren:before { content: "\e655"; }
111
112 .icon-yuzhanghao:before { content: "\e656"; }
113
114 .icon-biaoqing:before { content: "\e657"; }
115
116 .icon-qq:before { content: "\e658"; }
117
118 .icon-weibo1:before { content: "\e659"; }
119
120 .icon-zuoxuan:before { content: "\e65a"; }
121
122 .icon-fangda2:before { content: "\e65b"; }
123
124 .icon-zuo2:before { content: "\e65c"; }
125
126 .icon-suoxiao:before { content: "\e65d"; }
127
128 .icon-you2:before { content: "\e65e"; }
129
130 .icon-suoxiao2:before { content: "\e65f"; }
131
132 .icon-youxuan2:before { content: "\e660"; }
133
134 .icon-zuo:before { content: "\e661"; }
135
136 .icon-zuoxuan2:before { content: "\e662"; }
137
138 .icon-shang:before { content: "\e663"; }
139
140 .icon-shang2:before { content: "\e664"; }
141
142 .icon-youxuan:before { content: "\e665"; }
143
144 .icon-xia2:before { content: "\e666"; }
145
146 .icon-fangda:before { content: "\e667"; }
147
148 .icon-xia:before { content: "\e668"; }
149
150 .icon-you:before { content: "\e669"; }
151
152 .icon-zhuanrang:before { content: "\e66a"; }
153
154 .icon-dianzan:before { content: "\e66b"; }
155
156 .icon-huifu:before { content: "\e66c"; }
157
158 .icon-saoyisao:before { content: "\e66d"; }
159
160 .icon-shuoming:before { content: "\e600"; }
161
162 .icon-jinggao:before { content: "\e601"; }
163
164 .icon-jieshi:before { content: "\e602"; }
165
166 .icon-youxiang:before { content: "\e603"; }
167
168 .icon-guanbi:before { content: "\e60c"; }
169
170 .icon-qunzhu:before { content: "\e60d"; }
171
172 .icon-fuzhichenggong:before { content: "\e611"; }
173
174 .icon-weijiaru:before { content: "\e612"; }
175
176 .icon-daishenhe:before { content: "\e613"; }
177
178 .icon-shenhetongguo:before { content: "\e614"; }
179
180 .icon-shenhejujue:before { content: "\e615"; }
181
182 .icon-xinjiantubiaoku:before { content: "\e616"; }
183
184 .icon-tubiaoku:before { content: "\e617"; }
185
186 .icon-gouwuche:before { content: "\e618"; }
187
188 .icon-huidingbu:before { content: "\e619"; }
189
190 .icon-dianzan1:before { content: "\e61a"; }
191
192 .icon-morentouxiang:before { content: "\e610"; }
193
194 .icon-paixu:before { content: "\e61b"; }
195
196 .icon-wenjian:before { content: "\e61c"; }
197
198 .icon-github:before { content: "\e61d"; }
199
200 .icon-yuzhanghao1:before { content: "\e61e"; }
201
202 .icon-weibo2:before { content: "\e61f"; }
203
204 .icon-you1:before { content: "\e620"; }
205
206 .icon-zuo1:before { content: "\e621"; }
207
208 .icon-shang1:before { content: "\e622"; }
209
210 .icon-iconfont1:before { content: "\e623"; }
211
212 .icon-gonggaodayi:before { content: "\e625"; }
213
214 .icon-gongnengjieshao:before { content: "\e626"; }
215
216 .icon-tubiaohuizhi:before { content: "\e627"; }
217
218 .icon-daimayingyong:before { content: "\e628"; }
219
220 .icon-zhifubao:before { content: "\e624"; }
221
222 .icon-alibaba:before { content: "\e62a"; }
223
224 .icon-xiaomi:before { content: "\e62b"; }
225
226 .icon-zhongguodianxin:before { content: "\e62c"; }
227
228 .icon-tianmao:before { content: "\e62d"; }
229
230 .icon-alimama:before { content: "\e62e"; }
231
232 .icon-zhubajie:before { content: "\e62f"; }
233
234 .icon-tengxunwang:before { content: "\e630"; }
235
236 .icon-aliyun:before { content: "\e64e"; }
237
238 .icon-taobaowang:before { content: "\e64f"; }
239
240 .icon-anzhuo:before { content: "\e650"; }
241
242 .icon-ios:before { content: "\e651"; }
243
244 .icon-pcduan:before { content: "\e670"; }
245
246 .icon-qingchu:before { content: "\e673"; }
247
248 .icon-huizhiguize:before { content: "\e66e"; }
249
250 .icon-zhizuoliucheng:before { content: "\e66f"; }
251
252 .icon-fuzhidaima:before { content: "\e671"; }
253
254 .icon-fankui1:before { content: "\e672"; }
255
256 .icon-weitijiao:before { content: "\e674"; }
257
258 .icon-chexiao2:before { content: "\e676"; }
259
...\ No newline at end of file ...\ No newline at end of file
This diff could not be displayed because it is too large.
...@@ -6,11 +6,102 @@ ...@@ -6,11 +6,102 @@
6 "description": "", 6 "description": "",
7 "glyphs": [ 7 "glyphs": [
8 { 8 {
9 "icon_id": "554437", 9 "icon_id": "19104781",
10 "name": "查询",
11 "font_class": "chaxun",
12 "unicode": "e78a",
13 "unicode_decimal": 59274
14 },
15 {
16 "icon_id": "19104783",
17 "name": "展开",
18 "font_class": "zhankai1",
19 "unicode": "e78b",
20 "unicode_decimal": 59275
21 },
22 {
23 "icon_id": "19104784",
24 "name": "缓冲分析",
25 "font_class": "huanchongfenxi",
26 "unicode": "e78c",
27 "unicode_decimal": 59276
28 },
29 {
30 "icon_id": "19104785",
31 "name": "位置",
32 "font_class": "weizhi",
33 "unicode": "e78d",
34 "unicode_decimal": 59277
35 },
36 {
37 "icon_id": "19104786",
38 "name": "重叠分析",
39 "font_class": "zhongdiefenxi",
40 "unicode": "e78e",
41 "unicode_decimal": 59278
42 },
43 {
44 "icon_id": "19104787",
45 "name": "专题树",
46 "font_class": "zhuantishu",
47 "unicode": "e78f",
48 "unicode_decimal": 59279
49 },
50 {
51 "icon_id": "19104791",
52 "name": "收缩",
53 "font_class": "shousuo",
54 "unicode": "e790",
55 "unicode_decimal": 59280
56 },
57 {
58 "icon_id": "19104774",
59 "name": "不动产单元号",
60 "font_class": "budongchandanyuanhao",
61 "unicode": "e788",
62 "unicode_decimal": 59272
63 },
64 {
65 "icon_id": "19104775",
66 "name": "宗地代码",
67 "font_class": "zongdidaima",
68 "unicode": "e789",
69 "unicode_decimal": 59273
70 },
71 {
72 "icon_id": "19104764",
73 "name": "多屏对比",
74 "font_class": "duopingduibi",
75 "unicode": "e784",
76 "unicode_decimal": 59268
77 },
78 {
79 "icon_id": "19104765",
80 "name": "坐标定位",
81 "font_class": "zuobiaodingwei",
82 "unicode": "e785",
83 "unicode_decimal": 59269
84 },
85 {
86 "icon_id": "19104766",
87 "name": "空间查询",
88 "font_class": "kongjianchaxun",
89 "unicode": "e786",
90 "unicode_decimal": 59270
91 },
92 {
93 "icon_id": "19104767",
94 "name": "行政区导航",
95 "font_class": "hangzhengqudaohang",
96 "unicode": "e787",
97 "unicode_decimal": 59271
98 },
99 {
100 "icon_id": "19073499",
10 "name": "地球", 101 "name": "地球",
11 "font_class": "iconset0403", 102 "font_class": "diqiu",
12 "unicode": "e71a", 103 "unicode": "e783",
13 "unicode_decimal": 59162 104 "unicode_decimal": 59267
14 }, 105 },
15 { 106 {
16 "icon_id": "19005628", 107 "icon_id": "19005628",
......
1 { 1 {
2 "pointSymbol": { 2 "pointSymbol": {
3 3 "bufferSymbol": {
4 "type": "simple-marker",
5 "style": "circle",
6 "color": "black",
7 "size": "8px",
8 "outline": {
9 "color": [ 255, 255, 0 ],
10 "width": 1
11 }
12 }
4 }, 13 },
5 "lineSymbol": { 14 "lineSymbol": {
6 15
...@@ -32,6 +41,24 @@ ...@@ -32,6 +41,24 @@
32 "color": "#006cff", 41 "color": "#006cff",
33 "width": 2 42 "width": 2
34 } 43 }
44 },
45 "bufferSymbol": {
46 "type": "simple-fill",
47 "color": [ 86,81, 81, 0.5 ],
48 "style": "solid",
49 "outline": {
50 "color": [45,44,44,1],
51 "width": 2
52 }
53 },
54 "bufferGeoSymbol": {
55 "type": "simple-fill",
56 "color": [ 86,81, 81, 0.5 ],
57 "style": "solid",
58 "outline": {
59 "color": [45,44,44,1],
60 "width": 0
61 }
35 } 62 }
36 } 63 }
37 } 64 }
...\ No newline at end of file ...\ No newline at end of file
......
1 [{
2 "label":"专题树",
3 "id":"1",
4 "type":"layerGroup",
5 "children":[
6 {
7 "label":"西安市阎良区",
8 "id":"1-1",
9 "type":"layerGroup",
10 "children":[{
11 "label":"行政区划",
12 "id":"1-1-1",
13 "type":"layerGroup",
14 "children":[
15 {
16 "label":"行政区界限",
17 "id":"1-1-1-1",
18 "type":"layer",
19 "layerId":20,
20 "children":null
21 },
22 {
23 "label":"行政区",
24 "id":"1-1-1-2",
25 "type":"layer",
26 "layerId":19,
27 "children":null
28 }
29 ]
30 },
31 {
32 "label":"地籍分区",
33 "id":"1-1-2",
34 "type":"layerGroup",
35 "children":[
36 {
37 "label":"地籍区",
38 "id":"1-1-2-1",
39 "type":"layer",
40 "layerId":13,
41 "children":null
42 },
43 {
44 "label":"地籍子区",
45 "id":"1-1-2-2",
46 "type":"layer",
47 "layerId":14,
48 "children":null
49 }
50 ]
51 },
52 {
53 "label":"不动产单元",
54 "id":"1-1-3",
55 "type":"layerGroup",
56 "children":[
57 {
58 "label":"线状定着物",
59 "id":"1-1-3-1",
60 "type":"layer",
61 "layerId":7,
62 "children":null
63 },
64 {
65 "label":"宗海",
66 "id":"1-1-3-2",
67 "type":"layer",
68 "layerId":9,
69 "children":null
70 },
71 {
72 "label":"宗地",
73 "id":"1-1-3-3",
74 "type":"layer",
75 "layerId":8,
76 "children":null
77 },
78 {
79 "label":"林权",
80 "id":"1-1-3-4",
81 "type":"layer",
82 "layerId":5,
83 "children":null
84 },
85 {
86 "label":"构筑物",
87 "id":"1-1-3-5",
88 "type":"layer",
89 "layerId":2,
90 "children":null
91 },
92 {
93 "label":"面状定着物",
94 "id":"1-1-3-6",
95 "type":"layer",
96 "layerId":6,
97 "children":null
98 },
99 {
100 "label":"界址线",
101 "id":"1-1-3-7",
102 "type":"layer",
103 "layerId":4,
104 "children":null
105 },
106 {
107 "label":"点状定着物",
108 "id":"1-1-3-8",
109 "type":"layer",
110 "layerId":1,
111 "children":null
112 },
113 {
114 "label":"自然幢",
115 "id":"1-1-3-9",
116 "type":"layer",
117 "layerId":10,
118 "children":null
119 },
120 {
121 "label":"界址点",
122 "id":"1-1-3-10",
123 "type":"layer",
124 "layerId":4,
125 "children":null
126 }
127 ]
128 },
129 {
130 "label":"自然地理",
131 "id":"1-1-4",
132 "type":"layerGroup",
133 "children":[
134 {
135 "label":"辅助面",
136 "id":"1-1-4-1",
137 "type":"layer",
138 "layerId":15,
139 "children":null
140 },
141 {
142 "label":"植被",
143 "id":"1-1-4-2",
144 "type":"layer",
145 "layerId":17,
146 "children":null
147 },
148 {
149 "label":"水系",
150 "id":"1-1-4-3",
151 "type":"layer",
152 "layerId":16,
153 "children":null
154 }
155 ]
156 }
157 ]
158 }]
159 }]
...\ No newline at end of file ...\ No newline at end of file
...@@ -151,9 +151,6 @@ ol, ul { list-style:none; } ...@@ -151,9 +151,6 @@ ol, ul { list-style:none; }
151 border-bottom: 1px solid #F1F1F1; 151 border-bottom: 1px solid #F1F1F1;
152 background: #6f94f5; 152 background: #6f94f5;
153 } 153 }
154 .el-dialog__headerbtn:focus .el-dialog__close, .el-dialog__headerbtn:hover .el-dialog__close{
155 color: #fff;
156 }
157 .el-dialog__title{ 154 .el-dialog__title{
158 line-height: 24px; 155 line-height: 24px;
159 font-size: 18px; 156 font-size: 18px;
...@@ -227,6 +224,34 @@ ol, ul { list-style:none; } ...@@ -227,6 +224,34 @@ ol, ul { list-style:none; }
227 right: 6px; 224 right: 6px;
228 top: 4px; 225 top: 4px;
229 } 226 }
227 // 增删操作按钮样式
228 .addMinus{
229 border-radius:50%;
230 width: 30px !important;
231 height: 30px !important;
232 font-size: 22px!important;
233 padding: 4px 6px;
234 }
235 .outAdd,.outAdd:hover:focus{
236 background-color: #2FA5FF!important;
237 border: 1px solid #2FA5FF!important;
238 color: #fff!important;
239 }
240 .inAdd,.inAdd:hover:focus{
241 border: 1px solid #2FA5FF!important;
242 background-color: #fff!important;
243 color: #2FA5FF!important;
244 }
245 .outMinus,.outMinus:hover:focus{
246 background-color: #FA6400!important;
247 border: 1px solid #FA6400!important;
248 color: #fff!important;
249 }
250 .inMinus,.inMinus:hover:focus{
251 border: 1px solid #FA6400!important;
252 background-color: #fff!important;
253 color: #FA6400!important;
254 }
230 .import{ 255 .import{
231 background-color: #00CACD!important; 256 background-color: #00CACD!important;
232 border-color: #00CACD!important; 257 border-color: #00CACD!important;
......
...@@ -137,6 +137,7 @@ export default { ...@@ -137,6 +137,7 @@ export default {
137 }, 137 },
138 methods: { 138 methods: {
139 itemClick(item) { 139 itemClick(item) {
140 debugger;
140 let self = this; 141 let self = this;
141 // 开启延时器，300ms的间隔区分单击和双击，解决双击时执行两次单击事件 142 // 开启延时器，300ms的间隔区分单击和双击，解决双击时执行两次单击事件
142 clearTimeout(self.time); 143 clearTimeout(self.time);
...@@ -160,9 +161,7 @@ export default { ...@@ -160,9 +161,7 @@ export default {
160 case '/search': 161 case '/search':
161 source = '0,1,2' 162 source = '0,1,2'
162 break; 163 break;
163 case '/manage': 164
164 source = '0,1,2'
165 break;
166 default: 165 default:
167 break; 166 break;
168 } 167 }
......
...@@ -523,7 +523,7 @@ export default { ...@@ -523,7 +523,7 @@ export default {
523 //当确定导入图形是 跳转到图形界面 523 //当确定导入图形是 跳转到图形界面
524 this.queryGeoByBsm(BSM,type,function (features){ 524 this.queryGeoByBsm(BSM,type,function (features){
525 if(features && features.length > 0){ 525 if(features && features.length > 0){
526 if(features[0].geometry){ 526 if(features[0].geometry && features[0].geometry.rings.length > 0){
527 self.$confirm('该条数据有地块信息，是否继续导入?', '提示', { 527 self.$confirm('该条数据有地块信息，是否继续导入?', '提示', {
528 confirmButtonText: '继续', 528 confirmButtonText: '继续',
529 cancelButtonText: '取消', 529 cancelButtonText: '取消',
......
...@@ -165,7 +165,9 @@ export default { ...@@ -165,7 +165,9 @@ export default {
165 if(layer){ 165 if(layer){
166 var graphics = layer.graphics; 166 var graphics = layer.graphics;
167 if(graphics.length > 0 && graphics.items[0].attributes.BSM == bsm){ 167 if(graphics.length > 0 && graphics.items[0].attributes.BSM == bsm){
168 view.extent = graphics.items[0].geometry.extent; 168 // view.extent = graphics.items[0].geometry.extent;
169 view.center = graphics.items[0].geometry.extent.center;
170 view.zoom = 15;
169 } 171 }
170 }else { 172 }else {
171 this.$message.warning("暂无图形信息！！！"); 173 this.$message.warning("暂无图形信息！！！");
...@@ -323,7 +325,9 @@ export default { ...@@ -323,7 +325,9 @@ export default {
323 layer.add(graphic); 325 layer.add(graphic);
324 var extent = new Extent(JSON.parse(JSON.stringify(graphic.geometry.extent))) 326 var extent = new Extent(JSON.parse(JSON.stringify(graphic.geometry.extent)))
325 extent.spatialReference = view.spatialReference; 327 extent.spatialReference = view.spatialReference;
326 view.extent = extent; 328 // view.extent = extent;
329 view.center = extent.center;
330 view.zoom = 15;
327 }).catch(err => { 331 }).catch(err => {
328 console.log(err); 332 console.log(err);
329 333
...@@ -493,7 +497,9 @@ export default { ...@@ -493,7 +497,9 @@ export default {
493 var graphic = features[0]; 497 var graphic = features[0];
494 graphic.symbol = symbol; 498 graphic.symbol = symbol;
495 layer.add(graphic); 499 layer.add(graphic);
496 view.extent = graphic.geometry.extent; 500 // view.extent = graphic.geometry.extent;
501 view.center = graphic.geometry.extent.center;
502 view.zoom = 15;
497 }).catch( err => { 503 }).catch( err => {
498 thow(err); 504 thow(err);
499 }) 505 })
......
1 <template>
2 <div>
3 <div id="changemap">
4 <div v-for="(n,i) in layerArr" :key="i">
5 <div :title="n.text" @click="change(i,n.basemap)">
6 <img :src="require('../../assets/images/map/'+n.img)" />
7 <span></span>
8 <span></span>
9 <span></span>
10 <span></span>
11 <span>{{n.text}}</span>
12 </div>
13 </div>
14 </div>
15 </div>
16 </template>
17 <script>
18 export default {
19 props:{
20 viewId:{
21 type:String,
22 default:""
23 }
24 },
25 data() {
26 return {
27 layerArr: [
28 {
29 img: "shiliang.png",
30 text: "矢量图",
31 basemap: '' //hybrid img
32 },
33 {
34 img: "yingxiang.png",
35 text: "影像图",
36 basemap: 'hybrid' //hybrid img
37 }
38 ]
39 };
40 },
41 methods: {
42 change(index, basemap) {
43 debugger
44 /*var view = maps.threeDView,map = null;
45 if(view){
46 map = view.map;
47 }else {
48 console.log("mapView不存在");
49 }
50 map.basemap = basemap; // streets
51 index > 0 && this.layerArr.unshift(this.layerArr.splice(index, 1)[0]);*/
52 }
53 }
54 };
55 </script>
56 <style scoped>
57 #changemap {
58 /* background-color: #0ff; */
59 display: flex;
60 flex-wrap: wrap-reverse;
61 flex-direction: row-reverse;
62 align-content: flex-start;
63 max-width: 75px;
64 max-height: 75px;
65 overflow: auto;
66 }
67 #changemap > div {
68 width: 75px;
69 height: 75px;
70 box-sizing: border-box;
71 padding: 5px;
72 }
73 #changemap:hover {
74 max-width: 300px;
75 max-height: 300px;
76 transition: max-height 0.3s linear 0s;
77 }
78 #changemap > div > div {
79 height: 100%;
80 width: 100%;
81 border: 1px solid #ccc;
82 display: flex;
83 justify-content: center;
84 align-items: center;
85 position: relative;
86 overflow: hidden;
87 cursor: pointer;
88 }
89 #changemap > div > div > img {
90 height: 100%;
91 width: 100%;
92 display: block;
93 }
94 #changemap > div > div > span {
95 transition: all 0.4s linear 0s;
96 position: absolute;
97 height: 50%;
98 width: 50%;
99 background-color: rgba(0, 0, 0, 0.4);
100 }
101 #changemap > div > div > span:nth-of-type(1) {
102 top: 0px;
103 left: 0px;
104 }
105 #changemap > div > div > span:nth-of-type(2) {
106 top: 0px;
107 right: 0px;
108 }
109 #changemap > div > div > span:nth-of-type(3) {
110 bottom: 0px;
111 left: 0px;
112 }
113 #changemap > div > div > span:nth-of-type(4) {
114 bottom: 0px;
115 right: 0px;
116 }
117 #changemap > div > div > span:nth-of-type(5) {
118 width: 100%;
119 height: 30%;
120 bottom: 0px;
121 left: 0px;
122 color: #fafafa;
123 overflow: hidden;
124 /* text-align: center; */
125 font-size: 12px;
126 display: flex;
127 justify-content: center;
128 align-items: center;
129 }
130 #changemap > div > div:hover span:nth-of-type(1) {
131 left: -50%;
132 top: -50%;
133 }
134 #changemap > div > div:hover span:nth-of-type(2) {
135 top: -50%;
136 right: -50%;
137 }
138 #changemap > div > div:hover span:nth-of-type(3) {
139 bottom: -50%;
140 left: -50%;
141 }
142 #changemap > div > div:hover span:nth-of-type(4) {
143 bottom: -50%;
144 right: -50%;
145 }
146 </style>
...@@ -32,7 +32,7 @@ export default{ ...@@ -32,7 +32,7 @@ export default{
32 }else if(typeof parames[i].value == 'number'){ 32 }else if(typeof parames[i].value == 'number'){
33 where += parames[i].name + " =" + parames[i].value ; 33 where += parames[i].name + " =" + parames[i].value ;
34 }else{ 34 }else{
35 where += parames[i].name + " =" + "'" + parames[i].value +"'"; 35 where += parames[i].name + " like " + "'%" + parames[i].value +"%'";
36 } 36 }
37 } 37 }
38 } else { 38 } else {
......
...@@ -325,17 +325,18 @@ ...@@ -325,17 +325,18 @@
325 /*border: 1px solid red;*/ 325 /*border: 1px solid red;*/
326 } 326 }
327 .log-search{ 327 .log-search{
328 margin-top: 10px;
329 padding-left: 15px;
330 padding-top: 20px;
328 width: 100%; 331 width: 100%;
329 border: 1px solid #E6E6E6; 332 border: 1px solid #a8adad;
330 height: 80px; 333 height: 60px;
331 background-color: white; 334 background-color: white;
332 box-sizing: border-box;
333 padding: 20px 15px;
334 } 335 }
335 .log-detail{ 336 .log-detail{
336 margin-top: 10px; 337 margin-top: 10px;
337 width: 100%; 338 width: 100%;
338 border: 1px solid #E6E6E6; 339 border: 1px solid #a8adad;
339 height: 900px; 340 height: 900px;
340 overflow: scroll; 341 overflow: scroll;
341 background-color: white; 342 background-color: white;
...@@ -346,7 +347,7 @@ ...@@ -346,7 +347,7 @@
346 float: left; 347 float: left;
347 height: 900px; 348 height: 900px;
348 overflow: scroll; 349 overflow: scroll;
349 border-right: 1px solid #E6E6E6; 350 border-right: 1px solid #a8adad;
350 } 351 }
351 352
352 .log-table{ 353 .log-table{
......
...@@ -181,17 +181,18 @@ ...@@ -181,17 +181,18 @@
181 /*border: 1px solid red;*/ 181 /*border: 1px solid red;*/
182 } 182 }
183 .log-search{ 183 .log-search{
184 margin-top: 10px;
185 padding-left: 15px;
186 padding-top: 20px;
184 width: 100%; 187 width: 100%;
185 border: 1px solid #E6E6E6; 188 border: 1px solid #a8adad;
186 height: 80px; 189 height: 60px;
187 background-color: white; 190 background-color: white;
188 box-sizing: border-box;
189 padding: 20px 15px;
190 } 191 }
191 .log-table{ 192 .log-table{
192 margin-top: 10px; 193 margin-top: 10px;
193 width: 100%; 194 width: 100%;
194 border: 1px solid #E6E6E6; 195 border: 1px solid #a8adad;
195 } 196 }
196 .el-button { 197 .el-button {
197 width: 100px; 198 width: 100px;
......
...@@ -506,6 +506,7 @@ export default { ...@@ -506,6 +506,7 @@ export default {
506 }, 506 },
507 //切换房屋状态 507 //切换房屋状态
508 handleChoosedH(bsms,color) { 508 handleChoosedH(bsms,color) {
509 debugger
509 //每次切换房屋状态，将之前高亮的户边框颜色重置为默认 510 //每次切换房屋状态，将之前高亮的户边框颜色重置为默认
510 this.$refs.lpbContent.choosedList = []; 511 this.$refs.lpbContent.choosedList = [];
511 this.$refs.lpbContent.$refs.hBsm.forEach((item) => { 512 this.$refs.lpbContent.$refs.hBsm.forEach((item) => {
......
...@@ -5,8 +5,21 @@ ...@@ -5,8 +5,21 @@
5 </div> 5 </div>
6 <EsriMap :viewId = "viewId" :afterLoaderFunction="addLayer"></EsriMap> 6 <EsriMap :viewId = "viewId" :afterLoaderFunction="addLayer"></EsriMap>
7 <div class="searchDiv"> 7 <div class="searchDiv">
8 <el-input placeholder="请输入标识码" clearable v-model="inputBsm"> <el-button slot="append" type="primary" icon="el-icon-search" @click="doSearch"></el-button> </el-input> 8 <el-input placeholder="请输入宗地代码或不动产单元号" clearable @focus = "isShowCondition = true" v-model="inputBsm"> <el-button slot="append" type="primary" icon="el-icon-search" @click="doSearch"></el-button> </el-input>
9 <!--搜索弹出框--> 9 <!-- 搜索条件选择 -->
10 <div class="searchCondition" v-if="isShowCondition">
11 <ul>
12 <li @click="fieldName = 'ZDDM'">
13 <i class="iconfont iconzongdidaima"></i>
14 <span>宗地代码</span>
15 </li>
16 <li @click="fieldName = 'BDCDYH'">
17 <i class="iconfont iconbudongchandanyuanhao"></i>
18 <span>不动产单元号</span>
19 </li>
20 </ul>
21 </div>
22 <!--搜索弹出框-->
10 <div class="searchResult" v-show="dialogVisible"> 23 <div class="searchResult" v-show="dialogVisible">
11 <div class="-header"> 24 <div class="-header">
12 <span class="title">地块信息</span> 25 <span class="title">地块信息</span>
...@@ -15,7 +28,7 @@ ...@@ -15,7 +28,7 @@
15 </span> 28 </span>
16 </div> 29 </div>
17 <el-card class="box-card"> 30 <el-card class="box-card">
18 <div slot="header" class="clearfix"> 31 <div slot="header" class="clearfix" v-show="resultLayers.length > 1">
19 <!-- 图层选择--> 32 <!-- 图层选择-->
20 <span class="formTitle">图层选择:</span> 33 <span class="formTitle">图层选择:</span>
21 <el-select v-model="selectResLayerId" size="mini" @change="selectLayerChange" placeholder="请选择"> 34 <el-select v-model="selectResLayerId" size="mini" @change="selectLayerChange" placeholder="请选择">
...@@ -35,15 +48,45 @@ ...@@ -35,15 +48,45 @@
35 <a href="#" @click="toMap(item)">缩放至</a> 48 <a href="#" @click="toMap(item)">缩放至</a>
36 </P> 49 </P>
37 <hr /> 50 <hr />
38 <div class="contentItem" v-for="(value,key,index) in item.attributes" :key="index"> 51 <!-- <div class="contentItem" v-for="(value,key,index) in item.attributes" :key="index">
39 <span class="key">{{key}}：</span> 52 <span class="key">{{key}}：</span>
40 <span class="value" :title="value">{{value == 'Null' ?"":value}}</span> 53 <span class="value" :title="value">{{value == 'Null' ?"":value}}</span>
41 </div> 54 </div> -->
55 <div class="contentItem">
56 <span class="key">宗地代码：</span>
57 <span class="value" :title="item.attributes['宗地代码']">{{item.attributes['宗地代码'] == 'Null'?"":item.attributes['宗地代码']}}</span>
58 </div>
59 <div class="contentItem">
60 <span class="key">不动产单元号：</span>
61 <span class="value" :title="item.attributes['不动产单元号']">{{item.attributes['不动产单元号'] == 'Null'?"":item.attributes['不动产单元号']}}</span>
62 </div>
63 <div class="contentItem">
64 <span class="key">项目名称：</span>
65 <span class="value" :title="item.attributes['项目名称']">{{item.attributes['项目名称'] == 'Null'?"":item.attributes['项目名称']}}</span>
66 </div>
67 <div class="contentItem">
68 <span class="key">不动产证号：</span>
69 <span class="value" :title="item.attributes['不动产证号']">{{item.attributes['不动产证号'] == 'Null'?"":item.attributes['不动产证号']}}</span>
70 </div>
71 <div class="contentItem">
72 <span class="key">权利人：</span>
73 <span class="value" :title="item.attributes['权利人']">{{item.attributes['权利人'] == 'Null'?"":item.attributes['权利人']}}</span>
74 </div>
75 <div class="contentItem">
76 <span class="key">坐落：</span>
77 <span class="value" :title="item.attributes['坐落']">{{item.attributes['坐落'] == 'Null'?"":item.attributes['坐落']}}</span>
78 </div>
42 </div> 79 </div>
43 </el-card> 80 </el-card>
44 </div> 81 </div>
45 </div> 82 </div>
46 83 <!-- 侧边栏 -->
84 <div class="rightSide">
85 <side-tools :viewId="viewId"></side-tools>
86 </div>
87 <div class="changeMap">
88 <ChangeMap :viewId="viewId"></ChangeMap>
89 </div>
47 </div> 90 </div>
48 </template> 91 </template>
49 <script> 92 <script>
...@@ -54,12 +97,17 @@ import {maps} from '@/libs/map/mapUtils' ...@@ -54,12 +97,17 @@ import {maps} from '@/libs/map/mapUtils'
54 import mapLayerManager from "./mapWeight/js/mapLayerManager"; 97 import mapLayerManager from "./mapWeight/js/mapLayerManager";
55 import layers from '@/assets/json/layers.json' 98 import layers from '@/assets/json/layers.json'
56 import findTask from '@/libs/map/findTask' 99 import findTask from '@/libs/map/findTask'
100 import ChangeMap from "@/components/map/ChangeMap";
101
102 import sideTools from "./mapWeight/sideTools.vue"
57 103
58 export default { 104 export default {
59 inject:['getRightTree','getTreeByBsm'], 105 inject:['getRightTree','getTreeByBsm'],
60 components:{ 106 components:{
61 EsriMap, 107 EsriMap,
62 MapTools 108 MapTools,
109 ChangeMap,
110 sideTools
63 }, 111 },
64 data(){ 112 data(){
65 return{ 113 return{
...@@ -71,7 +119,9 @@ export default { ...@@ -71,7 +119,9 @@ export default {
71 resultLayers:[], 119 resultLayers:[],
72 results:[], 120 results:[],
73 inputBsm:"", 121 inputBsm:"",
74 heighGraphic:null 122 fieldName:"BDCDYH",
123 heighGraphic:null,
124 isShowCondition:false
75 } 125 }
76 }, 126 },
77 mixins:[mapLayerManager,findTask], 127 mixins:[mapLayerManager,findTask],
...@@ -96,7 +146,9 @@ export default { ...@@ -96,7 +146,9 @@ export default {
96 addLayer(){ 146 addLayer(){
97 var self = this; 147 var self = this;
98 var view = maps[this.viewId]; 148 var view = maps[this.viewId];
99 view.ui.remove('zoom'); 149 // view.ui.remove('zoom');
150 view.ui.remove("attribution");
151 view.ui.move(["zoom"], "bottom-right");
100 loadModules([ 152 loadModules([
101 "esri/layers/MapImageLayer" 153 "esri/layers/MapImageLayer"
102 ]).then(([ 154 ]).then(([
...@@ -153,15 +205,31 @@ export default { ...@@ -153,15 +205,31 @@ export default {
153 }, 205 },
154 //属性查询 206 //属性查询
155 doSearch(){ 207 doSearch(){
208 this.closeResultDialog();
156 var self = this; 209 var self = this;
157 if(!this.inputBsm){ 210 if(!this.fieldName){
158 this.$message.warning(" 请输入标识码!!!"); 211 this.$message.warning(" 请选择要查询的字段!!!");
159 return; 212 return;
160 }else if(this.inputBsm.length != 32){ 213 }
161 this.$message.warning("标识码格式输入有误!!!"); 214 if(this.fieldName == 'ZDDM'){
162 return; 215 if(!this.inputBsm){
163 } 216 this.$message.warning("请输入宗地代码!!!");
164 this.findByPro(this.layerUrl,[8,10],'BSM',this.inputBsm,true,function (res) { 217 return;
218 }else if(this.inputBsm.length != 19){
219 this.$message.warning("输入宗地代码有误，请重新输入!!!");
220 return;
221 }
222 } else if(this.fieldName == 'BDCDYH'){
223 if(!this.inputBsm){
224 this.$message.warning("请输入不动产单元号!!!");
225 return;
226 }else if(this.inputBsm.length != 28){
227 this.$message.warning("输入不动产单元有误，请重新输入!!!");
228 return;
229 }
230 }
231 this.isShowCondition = false;
232 this.findByPro(this.layerUrl,[8,10],this.fieldName,this.inputBsm,true,function (res) {
165 var resultes = res.results; 233 var resultes = res.results;
166 if(resultes && resultes.length > 0){ 234 if(resultes && resultes.length > 0){
167 self.delIdentifyData(resultes); 235 self.delIdentifyData(resultes);
...@@ -193,6 +261,9 @@ export default { ...@@ -193,6 +261,9 @@ export default {
193 self.features = []; 261 self.features = [];
194 self.resultLayers = []; 262 self.resultLayers = [];
195 this.heighGraphic = null; 263 this.heighGraphic = null;
264 //清除查询图层
265 this.clearSearchLayer(this.viewId);
266
196 for(var i = 0;i < data.length;i++){ 267 for(var i = 0;i < data.length;i++){
197 var layerId = data[i].layerId; 268 var layerId = data[i].layerId;
198 var layer = self.getLayerById(layerId); 269 var layer = self.getLayerById(layerId);
...@@ -232,6 +303,8 @@ export default { ...@@ -232,6 +303,8 @@ export default {
232 } 303 }
233 } 304 }
234 } 305 }
306 self.selectResLayerId = self.resultLayers.length > 0 ? self.resultLayers[0].id : null;
307 this.selectLayerChange();
235 this.addSearchResultToMap(this.results,this.viewId); 308 this.addSearchResultToMap(this.results,this.viewId);
236 }, 309 },
237 getLayerById(layerId){ 310 getLayerById(layerId){
...@@ -259,18 +332,52 @@ export default { ...@@ -259,18 +332,52 @@ export default {
259 position: absolute; 332 position: absolute;
260 top: 12px; 333 top: 12px;
261 z-index: 99; 334 z-index: 99;
262 right: 5px; 335 right: 21px;
263 } 336 }
264 .searchDiv{ 337 .searchDiv{
265 position: absolute; 338 position: absolute;
266 top: 12px; 339 top: 12px;
267 left: 7px; 340 left: 7px;
268 width: 30%; 341 width: 25%;
269 max-height: 100%; 342 max-height: 100%;
270 /deep/ .el-input-group__append{ 343 /deep/ .el-input-group__append{
271 background-color: #409eff; 344 background-color: #409eff;
272 color: white; 345 color: white;
273 } 346 }
347 .searchCondition{
348 width: 100%;
349 line-height: 60px;
350 background-color: #FFFFFF;;
351 border-radius: 4px;
352 margin-top: 6px;
353 box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.12);
354 ul{
355 //height: 40px;
356 display: inline-flex;
357 width: 100%;
358 li{
359 width: 50%;
360 text-align: center;
361 }
362 li :hover{
363 cursor:pointer
364 }
365 }
366 i{
367 font-size: 24px;
368 margin-right: 3px;
369 }
370 span{
371 font-size: 14px;
372 color: #4A4A4A;
373 }
374 .iconzongdidaima{
375 color: #44AEFF;
376 }
377 .iconbudongchandanyuanhao{
378 color: #F39835;
379 }
380 }
274 .searchResult{ 381 .searchResult{
275 margin-top: 3px; 382 margin-top: 3px;
276 background: white; 383 background: white;
...@@ -319,12 +426,14 @@ export default { ...@@ -319,12 +426,14 @@ export default {
319 display: flex; 426 display: flex;
320 font-size: 14px; 427 font-size: 14px;
321 width: 100%; 428 width: 100%;
322 line-height: 23px; 429 line-height: 30px;
323 align-items: center; 430 align-items: center;
431 font-weight: 400;
324 .key{ 432 .key{
325 width: 30%; 433 width: 30%;
326 margin: 5px 3px; 434 margin: 5px 3px;
327 text-align: right; 435 text-align: right;
436 color: #505050;
328 } 437 }
329 .value{ 438 .value{
330 width: 70%; 439 width: 70%;
...@@ -332,6 +441,7 @@ export default { ...@@ -332,6 +441,7 @@ export default {
332 text-overflow:ellipsis; 441 text-overflow:ellipsis;
333 white-space:nowrap; 442 white-space:nowrap;
334 word-break:keep-all; 443 word-break:keep-all;
444 color: #999999;
335 } 445 }
336 } 446 }
337 447
...@@ -342,5 +452,18 @@ export default { ...@@ -342,5 +452,18 @@ export default {
342 } 452 }
343 } 453 }
344 } 454 }
455 .changeMap{
456 position: absolute;
457 bottom: 8px;
458 right: 52px;
459 }
460 .rightSide{
461 position: absolute;
462 top: 10%;
463 right: 21px;
464 }
465 /deep/ .esri-ui-bottom-right{
466 bottom: -17px;
467 }
345 } 468 }
346 </style> 469 </style>
...\ No newline at end of file ...\ No newline at end of file
......
1 import layers from '@/assets/json/layers.json' 1 import layers from '@/assets/json/layers.json'
2 import graphicSymbol from '@/assets/json/graphicSymbol.json' 2 import graphicSymbol from '@/assets/json/graphicSymbol.json'
3 import queryUtils from "@libs/map/queryUtils"; 3 import queryUtils from "@libs/map/queryUtils";
4 import {loadModules} from "esri-loader" 4 import {loadModules} from "esri-loader"
...@@ -56,7 +56,9 @@ export default { ...@@ -56,7 +56,9 @@ export default {
56 var graphic = features[0]; 56 var graphic = features[0];
57 graphic.symbol = symbol; 57 graphic.symbol = symbol;
58 layer.add(graphic); 58 layer.add(graphic);
59 view.extent = graphic.geometry.extent; 59 // view.extent = graphic.geometry.extent;
60 view.center = graphic.geometry.extent.center;
61 view.zoom = 15;
60 }).catch( err => { 62 }).catch( err => {
61 thow(err); 63 thow(err);
62 }) 64 })
...@@ -124,6 +126,37 @@ export default { ...@@ -124,6 +126,37 @@ export default {
124 item.removeAll(); 126 item.removeAll();
125 } 127 }
126 }); 128 });
127 } 129 },
130 //给默认加载矢量图形中添加或者移除图层
131 addSublayers(viewId,layers){
132 var view = maps[viewId],
133 layer = view.map.findLayerById("testLayer");
134 for(var i = 0;i < layers.length;i++){
135 var sublayer = layer.findSublayerById(layers[i].layerId);
136 if(sublayer){
137 sublayer.visible = true;
138 }else{
139 sublayer = {
140 id:layers[i].layerId,
141 visible:true
142 }
143 layer.sublayers.push(sublayer);
144 }
145 }
146 },
147 removeSublayer(viewId,layers){
148 var view = maps[viewId],
149 layer = view.map.findLayerById("testLayer");
150 var items = layer.sublayers.items;
151 for(var i = 0;i < layers.length;i++){
152 for (var k = 0;k<items.length;k++) {
153 if(layers[i].layerId == items[k].id){
154 items.splice(k, 1);
155 break;
156 }
157 }
158 }
159 layer.sublayers = items;
160 }
128 } 161 }
129 } 162 }
...\ No newline at end of file ...\ No newline at end of file
......
1 import {loadModules} from 'esri-loader'
2 import {maps} from '@/libs/map/mapUtils'
3 import graphicSymbol from '@/assets/json/graphicSymbol.json'
4 import point from "shapefile/shp/point";
5 import queryUtils from "@libs/map/queryUtils";
6 import layers from '@/assets/json/layers.json'
7 import arcgisParser from 'terraformer-arcgis-parser'
8 import wktParse from 'terraformer-wkt-parser'
9
10 export default {
11 methods:{
12 getLayerByName(name) {
13 for (var i = 0; i < layers.length; i++) {
14 if (layers[i].layerName == name) {
15 return layers[i];
16 }
17 }
18 return null;
19 },
20 //创建buffer图形
21 createBuffer(geometry,distance,viewId,callBackFunction){
22 loadModules([
23 "esri/geometry/geometryEngine",
24 "esri/Graphic",
25 "esri/layers/GraphicsLayer"
26 ]).then(([
27 geometryEngine,
28 Graphic,
29 GraphicsLayer
30 ])=>{
31 var view = maps[viewId];
32 var bufferGeometry = geometryEngine.buffer(geometry,distance,'meters',true);
33 var layer = view.map.findLayerById("identifyLayer");
34 if(layer){
35 layer.removeAll();
36 }else {
37 layer = new GraphicsLayer({
38 id:"identifyLayer"
39 })
40 view.map.add(layer);
41 }
42 var symbol = geometry.type == 'point' ? graphicSymbol.pointSymbol.bufferSymbol : graphicSymbol.fillSymbol.bufferSymbol;
43 var oldGraphic = new Graphic({
44 geometry:geometry,
45 symbol:symbol
46 })
47 layer.add(oldGraphic);
48 var graphic = new Graphic({
49 geometry:bufferGeometry,
50 symbol:graphicSymbol.fillSymbol.bufferGeoSymbol
51 })
52 layer.add(graphic);
53 if(callBackFunction && typeof callBackFunction == 'function'){
54 callBackFunction(bufferGeometry);
55 }
56 }).catch(err => {
57 console.log(err);
58 })
59 },
60 queryAttributes(url,where,callbackFunction){
61 queryUtils.methods.queryByWhere(url,where,null,false,"",null,function (res) {
62 var features = res.features;
63 if(callbackFunction && typeof callbackFunction == 'function'){
64 callbackFunction(features);
65 }
66 })
67 },
68 //清除缓冲图层
69 clearBufferLayer(viewId){
70 var view = maps[viewId];
71 var layer = view.map.findLayerById("identifyLayer");
72 if(layer){
73 layer.removeAll();
74 }
75 },
76 //查询地籍区/地籍子区根据区域代码
77 queryDjqByDm(url,type,dm,callBackFunction){
78 var where = "";
79 if(type == 'djq'){
80 where = {"DJQDM":dm}
81 }else if(type == 'djzq'){
82 where = {"DJZQDM":dm}
83 }
84 queryUtils.methods.queryByWhere(url,where,null,true,"","",function (res) {
85 var features = res.features;
86 if(callBackFunction && typeof callBackFunction == 'function'){
87 callBackFunction(features);
88 }
89 });
90 },
91 parseWktToArc(wkt){
92 var primitive = wktParse.parse(wkt);
93 /*if(primitive.type == "MultiPolygon"){
94 primitive.type = "Polygon"
95 }*/
96 return arcgisParser.convert(primitive)
97 },
98 //添加添加元素和覆盖的元素到地图上
99 addOverLayer(geometry){
100 var view = maps["testMap"];
101 loadModules([
102 "esri/Graphic",
103 "esri/geometry/Polygon",
104 "esri/layers/GraphicsLayer",
105 "esri/geometry/geometryEngineAsync",
106 "esri/geometry/Extent"
107 ]).then(([
108 Graphic,
109 Polygon,
110 GraphicsLayer,
111 geometryEngineAsync,
112 Extent
113 ])=>{
114 var graphic = new Graphic({
115 geometry:geometry
116 })
117 var layer = view.map.findLayerById("identifyLayer");
118 if(layer){
119 layer.removeAll();
120 }else {
121 layer = new GraphicsLayer({
122 id:"overLayer"
123 })
124 view.map.add(layer);
125 }
126 var impotSymbol = graphicSymbol.fillSymbol.importSymbol;
127 graphic.symbol = impotSymbol;
128 layer.add(graphic);
129 var extent = new Extent(JSON.parse(JSON.stringify(graphic.geometry.extent)))
130 extent.spatialReference = view.spatialReference;
131 // view.extent = extent;
132 view.center = extent.center;
133 view.zoom = 15;
134 }).catch(err => {
135 console.log(err);
136
137 })
138 },
139 }
140 }
...\ No newline at end of file ...\ No newline at end of file
1 <template>
2 <div>
3 <div class="sideTools">
4 <ul>
5 <li @click="sidePanelShow = false;currentActivate = ''">
6 <i class="iconfont iconshousuo"></i>
7 </li>
8 <li @click="clickSideTools('zhuantishu')" :class="currentActivate == 'zhuantishu'?'active':''">
9 <i class="iconfont iconzhuantishu"></i>
10 <span>专题树</span>
11 </li>
12 <li @click="clickSideTools('huanchongqu')" :class="currentActivate == 'huanchongqu'?'active':''">
13 <i class="iconfont iconhuanchongfenxi"></i>
14 <span>缓冲区分析</span>
15 </li>
16 <li @click="clickSideTools('chongdiefenxi')" :class="currentActivate == 'chongdiefenxi'?'active':''">
17 <i class="iconfont iconzhongdiefenxi"></i>
18 <span>重叠分析</span>
19 </li>
20 </ul>
21 </div>
22 <div class="sidePanel" v-show="sidePanelShow">
23 <div class="content" v-show="currentActivate == 'zhuantishu'">
24 <el-tree
25 show-checkbox
26 :data="layerTreeData"
27 node-key="id"
28 highlight-current
29 @check="checkTreeNode"
30 >
31 <span class="custom-tree-node" slot-scope="{ node, data }">
32 <span>{{ node.label }}</span>
33 <span class="setOpacity" v-if="data.type == 'layerGroup'">
34 <el-slider v-model="data.alpha" ref="data.id" :format-tooltip="formatTooltip" @change="alphaChange(data)"></el-slider>
35 </span>
36 </span>
37 </el-tree>
38 </div>
39 </div>
40 </div>
41 </template>
42
43 <script>
44 import layerTree from '@/assets/json/layerTreeData.json'
45 import mapLayerManager from './js/mapLayerManager.js'
46 export default{
47 props:{
48 viewId:{
49 type:String,
50 default:""
51 }
52 },
53 mixins:[mapLayerManager],
54 data(){
55 return{
56 currentActivate:"",
57 layerTreeData:[],
58 defaultSelectNodes:[19,8,10],
59 layerUrl:"http://192.168.2.201:6080/arcgis/rest/services/%E4%BA%92%E8%81%94%E7%BD%91%E5%8A%A0%E4%B8%8D%E5%8A%A8%E4%BA%A7/XA_%E4%B8%8D%E5%8A%A8%E4%BA%A7/MapServer",
60 sidePanelShow:false
61 }
62 },
63 mounted(){
64 this.layerTreeData = layerTree;
65 },
66 methods:{
67 checkTreeNode(treeNode,checkNodeList){
68 var self = this;
69 //先判断是选中还是取消选中
70 var flag = false;
71 for (var i = 0; i < checkNodeList.checkedNodes.length; i++) {
72 if (checkNodeList.checkedNodes[i].id == treeNode.id) {
73 flag = true;
74 }
75 }
76 if(flag){
77 if(treeNode && treeNode.children){
78 var ids = [];
79 this.getChildrens(treeNode,ids);
80 this.addSublayers(this.viewId,ids);
81 }else{
82 this.addSublayers(this.viewId,[treeNode]);
83 }
84 }else{
85 if(treeNode && treeNode.children){
86 var ids = [];
87 this.getChildrens(treeNode,ids);
88 this.removeSublayer(this.viewId,ids);
89 }else{
90 this.removeSublayer(this.viewId,[treeNode]);
91 }
92 }
93 },
94 //获取树节点选中的子节点
95 getChildrens(data, childrens) {
96 if (data.children) {
97 for (var i = 0; i < data.children.length; i++) {
98 if (data.children[i].children) {
99 childrens = this.getChildrens(data.children[i], childrens);
100 } else {
101 if(data.children[i].type == 'layer'){
102 childrens.push(data.children[i]);
103 }
104 }
105 }
106 }
107 return childrens;
108 },
109 clickSideTools(currentName){
110 this.currentActivate = currentName;
111 this.sidePanelShow = true;
112 },
113 formatTooltip(val){
114 return val+"%";
115 },
116 alphaChange(nodeData){
117
118 }
119 }
120 }
121 </script>
122
123 <style scoped lang="less">
124 .sideTools{
125 width: 35px;
126 background-color: #FFFFFF;
127 text-align: center;
128 padding: 3px 0px;
129 box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.18);
130 border-radius: 2px;
131 li{
132 padding: 10px 0px;
133 border-bottom: 1px dashed #CBCBCB;
134 width: 25px;
135 margin-left: 5px;
136 }
137 li:last-child{
138 border: 0;
139 }
140 li :hover{
141 cursor:pointer
142 }
143 span{
144 font-size: 14px;
145 color: #6D7278;
146 }
147 i{
148 font-size: 1rem;
149 color: #8C8E91;
150 }
151 .active{
152 span,i{
153 color: #0091FF;
154 }
155 }
156 }
157 .sidePanel{
158 height: 500px;
159 width: 300px;
160 position: absolute;
161 background-color: #FFFFFF;
162 top: 0px;
163 right: 37px;
164 border-radius: 4px;
165 .content {
166 height:100%;
167 overflow:auto;
168 }
169 }
170 .custom-tree-node{
171 display: inline-flex;
172 }
173 .setOpacity{
174 width: 100px;
175 }
176 </style>
...@@ -18,6 +18,7 @@ module.exports = { ...@@ -18,6 +18,7 @@ module.exports = {
18 .set('@libs', resolve('src/libs')) 18 .set('@libs', resolve('src/libs'))
19 .set('@router', resolve('src/router')) 19 .set('@router', resolve('src/router'))
20 .set('@components', resolve('src/components')) 20 .set('@components', resolve('src/components'))
21 .set('@assets', resolve('src/assets'))
21 }, 22 },
22 pluginOptions: { 23 pluginOptions: {
23 'style-resources-loader': { 24 'style-resources-loader': {
...@@ -43,7 +44,7 @@ module.exports = { ...@@ -43,7 +44,7 @@ module.exports = {
43 // ] 44 // ]
44 }, 45 },
45 devServer: { 46 devServer: {
46 host: "127.0.0.1", 47 host: "0.0.0.0",
47 port: 8008, 48 port: 8008,
48 https: false, 49 https: false,
49 hotOnly: false, 50 hotOnly: false,
......