Skip to content

任超 / js.CadastralSystem

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

地图定位及其样式功能

1 parent 89928441
Inline Side-by-side
Showing 6 changed files with 111 additions and 12 deletions
1 <template> 1 <template>
2 <div> 2 <div>
3 <div id="changemap"> 3 <div id="changemap">
4 <div v-for="(n,i) in layerArr" :key="i"> 4 <div v-for="(n,i) in layerArr" :key="i">
...@@ -15,6 +15,7 @@ ...@@ -15,6 +15,7 @@
15 </div> 15 </div>
16 </template> 16 </template>
17 <script> 17 <script>
18 import {maps} from '@/libs/map/mapUtils'
18 export default { 19 export default {
19 props:{ 20 props:{
20 viewId:{ 21 viewId:{
...@@ -28,7 +29,7 @@ ...@@ -28,7 +29,7 @@
28 { 29 {
29 img: "shiliang.png", 30 img: "shiliang.png",
30 text: "矢量图", 31 text: "矢量图",
31 basemap: '' //hybrid img 32 basemap: 'osm' //hybrid img
32 }, 33 },
33 { 34 {
34 img: "yingxiang.png", 35 img: "yingxiang.png",
...@@ -40,15 +41,14 @@ ...@@ -40,15 +41,14 @@
40 }, 41 },
41 methods: { 42 methods: {
42 change(index, basemap) { 43 change(index, basemap) {
43 debugger 44 var view = maps[this.viewId],map = null;
44 /*var view = maps.threeDView,map = null;
45 if(view){ 45 if(view){
46 map = view.map; 46 map = view.map;
47 }else { 47 }else {
48 console.log("mapView不存在"); 48 console.log("mapView不存在");
49 } 49 }
50 map.basemap = basemap; // streets 50 map.basemap = basemap; // streets
51 index > 0 && this.layerArr.unshift(this.layerArr.splice(index, 1)[0]);*/ 51 index > 0 && this.layerArr.unshift(this.layerArr.splice(index, 1)[0]);
52 } 52 }
53 } 53 }
54 }; 54 };
......
...@@ -10,12 +10,16 @@ ...@@ -10,12 +10,16 @@
10 <div class="searchCondition" v-if="isShowCondition"> 10 <div class="searchCondition" v-if="isShowCondition">
11 <ul> 11 <ul>
12 <li @click="fieldName = 'ZDDM'"> 12 <li @click="fieldName = 'ZDDM'">
13 <span :class="fieldName == 'ZDDM'?'active':''">
13 <i class="iconfont iconzongdidaima"></i> 14 <i class="iconfont iconzongdidaima"></i>
14 <span>宗地代码</span> 15 <span>宗地代码</span>
16 </span>
15 </li> 17 </li>
16 <li @click="fieldName = 'BDCDYH'"> 18 <li @click="fieldName = 'BDCDYH'">
19 <span :class="fieldName == 'BDCDYH'?'active':''">
17 <i class="iconfont iconbudongchandanyuanhao"></i> 20 <i class="iconfont iconbudongchandanyuanhao"></i>
18 <span>不动产单元号</span> 21 <span>不动产单元号</span>
22 </span>
19 </li> 23 </li>
20 </ul> 24 </ul>
21 </div> 25 </div>
...@@ -386,7 +390,6 @@ export default { ...@@ -386,7 +390,6 @@ export default {
386 } 390 }
387 } 391 }
388 layerAndResult.features.push(feature); 392 layerAndResult.features.push(feature);
389 debugger
390 self.results.push(layerAndResult); 393 self.results.push(layerAndResult);
391 } 394 }
392 } 395 }
...@@ -439,6 +442,7 @@ export default { ...@@ -439,6 +442,7 @@ export default {
439 border-radius: 4px; 442 border-radius: 4px;
440 margin-top: 6px; 443 margin-top: 6px;
441 box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.12); 444 box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.12);
445 position: relative;
442 ul{ 446 ul{
443 //height: 40px; 447 //height: 40px;
444 display: inline-flex; 448 display: inline-flex;
...@@ -454,6 +458,8 @@ export default { ...@@ -454,6 +458,8 @@ export default {
454 i{ 458 i{
455 font-size: 24px; 459 font-size: 24px;
456 margin-right: 3px; 460 margin-right: 3px;
461 position: relative;
462 top: 2px;
457 } 463 }
458 span{ 464 span{
459 font-size: 14px; 465 font-size: 14px;
...@@ -465,6 +471,10 @@ export default { ...@@ -465,6 +471,10 @@ export default {
465 .iconbudongchandanyuanhao{ 471 .iconbudongchandanyuanhao{
466 color: #F39835; 472 color: #F39835;
467 } 473 }
474 .active{
475 border-bottom: 1.5px solid #409eff;
476 padding-bottom: 5px;
477 }
468 } 478 }
469 .searchResult{ 479 .searchResult{
470 margin-top: 3px; 480 margin-top: 3px;
......
1 import {loadModules} from 'esri-loader' 1 import {loadModules} from 'esri-loader'
2 import {maps} from '@/libs/map/mapUtils' 2 import {maps} from '@/libs/map/mapUtils'
3 import graphicSymbol from '@/assets/json/graphicSymbol.json' 3 import graphicSymbol from '@/assets/json/graphicSymbol.json'
4 import point from "shapefile/shp/point"; 4 import point from "shapefile/shp/point";
...@@ -136,5 +136,45 @@ export default { ...@@ -136,5 +136,45 @@ export default {
136 136
137 }) 137 })
138 }, 138 },
139 //定位到一个点上
140 postionToPoint(viewId,x,y){
141 var self = this;
142 loadModules([
143 "esri/geometry/Point",
144 "esri/symbols/PictureMarkerSymbol",
145 "esri/geometry/coordinateFormatter",
146 "esri/Graphic"
147 ]).then(([
148 Point,
149 PictureMarkerSymbol,
150 coordinateFormatter,
151 Graphic
152 ])=>{
153 var point = new Point({
154 x:x,
155 y:y,
156
157 });
158 var view = maps[viewId];
159 var symbol = new PictureMarkerSymbol({
160 url:require('@assets/images/map/postion.png'),
161 width:"32px",
162 height:'32px'
163 });
164 view.graphics.removeAll();
165 view.graphics.add(new Graphic({
166 geometry:point,
167 symbol:symbol
168 }));
169 view.center = point;
170 }).catch(err => {
171 console.log(err);
172 })
173 },
174 //清除定位图层
175 clearPostionLayer(viewId){
176 var view = maps[viewId];
177 view.graphics.removeAll();
178 }
139 } 179 }
140 } 180 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
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 @click="pointPostion">
13 <i class="iconfont iconzuobiaodingwei"></i> 13 <i class="iconfont iconzuobiaodingwei"></i>
14 <span>定位</span> 14 <span>定位</span>
15 </li> 15 </li>
...@@ -46,7 +46,19 @@ ...@@ -46,7 +46,19 @@
46 <span>清除</span> 46 <span>清除</span>
47 </li> 47 </li>
48 </ul> 48 </ul>
49 49 <div class="postionDialog" v-if="isPostion">
50 <el-form :inline="true" :model="postionParams" size="small">
51 <el-form-item label="经度:">
52 <el-input v-model="postionParams.x" placeholder="请输入经度"></el-input>
53 </el-form-item>
54 <el-form-item label="纬度:">
55 <el-input v-model="postionParams.y" placeholder="请输入经度"></el-input>
56 </el-form-item>
57 <el-form-item>
58 <el-button type="primary" @click="toPostion">定位</el-button>
59 </el-form-item>
60 </el-form>
61 </div>
50 </div> 62 </div>
51 </template> 63 </template>
52 <script> 64 <script>
...@@ -73,7 +85,12 @@ export default { ...@@ -73,7 +85,12 @@ export default {
73 selectResLayerId:"", 85 selectResLayerId:"",
74 features:[], 86 features:[],
75 resultLayers:[], 87 resultLayers:[],
76 results:[] 88 results:[],
89 postionParams:{
90 x:"",
91 y:""
92 },
93 isPostion:false
77 } 94 }
78 }, 95 },
79 methods:{ 96 methods:{
...@@ -91,6 +108,10 @@ export default { ...@@ -91,6 +108,10 @@ export default {
91 clear(){ 108 clear(){
92 this.measure(this.viewId,null); 109 this.measure(this.viewId,null);
93 this.$parent.closeResultDialog(); 110 this.$parent.closeResultDialog();
111 this.$parent.closeBufferDialog();
112 //清除定位 关闭定位
113 this.clearPostionLayer(this.viewId);
114 this.isPostion = false;
94 }, 115 },
95 info(){ 116 info(){
96 var view = maps[this.viewId]; 117 var view = maps[this.viewId];
...@@ -140,6 +161,25 @@ export default { ...@@ -140,6 +161,25 @@ export default {
140 throw (err); 161 throw (err);
141 }) 162 })
142 }); 163 });
164 },
165 //定位
166 pointPostion(){
167 //清除参数 清除图层
168 this.clearPostionLayer(this.viewId);
169 for(var key in this.postionParams){
170 this.postionParams[key] = "";
171 }
172 this.isPostion = true;
173 },
174 toPostion(){
175 if(!this.postionParams.x){
176 this.$message.warning("请输入经度!!!!");
177 return;
178 }else if(!this.postionParams.y){
179 this.$message.warning("请输入纬度!!!!");
180 return;
181 }
182 this.postionToPoint(this.viewId,this.postionParams.x,this.postionParams.y);
143 } 183 }
144 } 184 }
145 185
...@@ -151,7 +191,6 @@ export default { ...@@ -151,7 +191,6 @@ export default {
151 position: relative; 191 position: relative;
152 display: flex; 192 display: flex;
153 justify-content: space-around; 193 justify-content: space-around;
154 line-height: 48px;
155 background-color: #FFFFFF; 194 background-color: #FFFFFF;
156 box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.18); 195 box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.18);
157 border-radius: 4px; 196 border-radius: 4px;
...@@ -165,7 +204,7 @@ export default { ...@@ -165,7 +204,7 @@ export default {
165 height: 24px; 204 height: 24px;
166 line-height: 24px; 205 line-height: 24px;
167 i{ 206 i{
168 font-size:16px; 207 font-size:20px;
169 color: #8C8E91; 208 color: #8C8E91;
170 position: relative; 209 position: relative;
171 top: 2px; 210 top: 2px;
...@@ -182,6 +221,11 @@ export default { ...@@ -182,6 +221,11 @@ export default {
182 cursor:pointer 221 cursor:pointer
183 } 222 }
184 } 223 }
224
225 .postionDialog{
226 position: absolute;
227 top: 58px;
228 }
185 } 229 }
186 230
187 </style> 231 </style>
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -113,6 +113,7 @@ ...@@ -113,6 +113,7 @@
113 :value="item.dm"> 113 :value="item.dm">
114 </el-option> 114 </el-option>
115 </el-select> 115 </el-select>
116 <div class="towSelect">
116 <el-select v-model="bufferParams.selectDjzq" filterable size="small" placeholder="请选择地籍子区"> 117 <el-select v-model="bufferParams.selectDjzq" filterable size="small" placeholder="请选择地籍子区">
117 <el-option 118 <el-option
118 v-for="(item,index) in djzqList" 119 v-for="(item,index) in djzqList"
...@@ -122,6 +123,7 @@ ...@@ -122,6 +123,7 @@
122 </el-option> 123 </el-option>
123 </el-select> 124 </el-select>
124 </div> 125 </div>
126 </div>
125 <div class="contentItem"> 127 <div class="contentItem">
126 <span>缓冲距离：</span> 128 <span>缓冲距离：</span>
127 <el-input-number :min="0" v-model="bufferParams.distance" size="small"></el-input-number> 米 129 <el-input-number :min="0" v-model="bufferParams.distance" size="small"></el-input-number> 米
...@@ -529,6 +531,9 @@ ...@@ -529,6 +531,9 @@
529 cursor:pointer 531 cursor:pointer
530 } 532 }
531 } 533 }
534 .towSelect{
535 margin-left: 100px;
536 }
532 } 537 }
533 .buttonDiv{ 538 .buttonDiv{
534 text-align: center; 539 text-align: center;
......