mapTools.vue
3.82 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<template>
<div class="tools">
<el-button-group>
<el-button type="primary" title="全图" icon="iconfont iconquantu" @click="fullMap"></el-button>
<el-button type="primary" title="测面" icon="iconfont iconcemianji" @click="measureMent('area')"></el-button>
<el-button type="primary" title="测距" icon="iconfont iconceju" @click="measureMent('distance')"></el-button>
<el-button type="primary" title="放大" icon="iconfont iconlakuangfangda" @click="zoomOut"></el-button>
<el-button type="primary" title="缩小" icon="iconfont iconlakuangsuoxiao" @click="zoomIn"></el-button>
<el-button type="primary" title="点选" icon="iconfont iconchaxunshuxing" @click="info"></el-button>
<el-button type="primary" title="清除" icon="iconfont iconqingchu" @click="clear"></el-button>
</el-button-group>
</div>
</template>
<script>
import {maps} from '@/libs/map/mapUtils'
import draw from '@/libs/map/draw'
import identifyUtils from '@/libs/map/IdentifyUtils'
import measure from '@/libs/map/measure'
import {loadModules} from "esri-loader"
export default {
props:{
viewId:{
type:String,
default:"mainView"
}
},
mixins:[draw,identifyUtils,measure],
data(){
return{
url:"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",
selectResLayerId:"",
features:[],
resultLayers:[],
results:[]
}
},
methods:{
fullMap(){
var view = maps[this.viewId];
view.zoom = 10;
view.center = [108.95,34.27]
},
measureMent(type){
this.measure(this.viewId,type);
},
clearHeightLayer(){
},
clear(){
this.measure(this.viewId,null);
},
info(){
var view = maps[this.viewId];
var self = this;
this.initDraw("point",this.viewId,null,function(geo){
self.identify(self.url,[8,10],geo,function(res){
var resultes = res.results;
if(resultes && resultes.length > 0){
self.$parent.delIdentifyData(resultes);
self.$parent.dialogVisible = true;
}
},true,'all',3,view.extent);
});
},
zoomOut(){
var view = maps[this.viewId];
this.initDraw("rectangle",this.viewId,null,function(geo){
view.extent = geo.extent;
});
},
zoomIn(){
var view = maps[this.viewId];
this.initDraw("rectangle",this.viewId,null,function(geo){
var dWidth, dHeight, dXmin, dYmin, dXmax, dYmax;
dWidth = view.extent.width * view.extent.width / geo.extent.width;
dHeight = view.extent.height * view.extent.height / geo.extent.height;
dXmin = view.extent.xmin - ((geo.extent.xmin - view.extent.xmin) * view.extent.width / geo.extent.width);
dYmin = view.extent.ymin - ((geo.extent.ymin - view.extent.ymin) * view.extent.height / geo.extent.height);
dXmax = dXmin + dWidth;
dYmax = dYmin + dHeight;
//pEnv.PutCoords(dXmin, dYmin, dXmax, dYmax);
loadModules(["esri/geometry/Extent"]).then(([Extent]) => {
view.extent = new Extent({
xmin: dXmin,
ymin: dYmin,
xmax: dXmax,
ymax: dYmax,
spatialReference: {
wkid: 102100
}
});
}).catch( err => {
throw (err);
})
});
}
}
}
</script>
<style lang="less" scoped>
</style>