Skip to content

Commit 3695ec3

Browse files
killer1992killer1992
committed
【website】【杨琨】【新增Cesium-vue测量组件示例】
1 parent 5ae9f95 commit 3695ec3

File tree

5 files changed

+242
-0
lines changed

5 files changed

+242
-0
lines changed

‎website/public/static/demo/config/config-vue-cesium.json‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -184,6 +184,22 @@
184184
"detail": "",
185185
"icon": "compare.png",
186186
"update": "最后更新时间：2021-06-07"
187+
},
188+
{
189+
"name": "测量组件",
190+
"file": "measure",
191+
"diffcult": "1",
192+
"detail": "",
193+
"icon": "measure.png",
194+
"update": "最后更新时间：2021-06-10"
195+
},
196+
{
197+
"name": "测量组件-多屏",
198+
"file": "measureTwo",
199+
"diffcult": "1",
200+
"detail": "",
201+
"icon": "measurescene.png",
202+
"update": "最后更新时间：2021-06-10"
187203
}
188204
]
189205
},

‎website/public/static/demo/vue-cesium/example/control/measure.htm‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
7+
<title>Vue-测量</title>
8+
<script include="vue,antd" exclude="plugin,cesium" src="./static/libs/include-cesium-local.js"></script>
9+
<style type="text/css">
10+
#app {
11+
height: 100vh;
12+
width: 100vw;
13+
}
14+
#toolbar-wrapper {
15+
position: absolute;
16+
z-index: 9999;
17+
display: inline-flex;
18+
overflow-x: hidden;
19+
overflow-y: visible;
20+
top: 20px;
21+
left: 20px;
22+
}
23+
.toolbar-item {
24+
background: #ffffff;
25+
border: 1px dashed #666666;
26+
text-align: center;
27+
font-size: 20px;
28+
line-height: 20px;
29+
height: fit-content;
30+
padding: 6px 16px;
31+
cursor: pointer;
32+
}
33+
</style>
34+
</head>
35+
36+
<body>
37+
<div id="app">
38+
<mapgis-web-scene
39+
lib-path="./static/libs/cdn/cesium/Cesium.js"
40+
plugin-path="./static/libs/cdn/zondyclient/webclient-cesium-plugin.min.js"
41+
v-bind:animation="false"
42+
v-bind:timeline="false"
43+
>
44+
<mapgis-3d-raster-layer :url="url"></mapgis-3d-raster-layer>
45+
<mapgis-3d-igs-m3d
46+
:auto-reset="autoReset"
47+
:maximum-screen-space-error="maximumScreenSpaceError"
48+
:url="m3dUrl">
49+
</mapgis-3d-igs-m3d>
50+
<mapgis-3d-measure
51+
@load="handleLoad"
52+
@measured="measured"
53+
>
54+
<div id="toolbar-wrapper">
55+
<div class="toolbar-item" v-on:click="measureLength">直线测量</div>
56+
<div class="toolbar-item" v-on:click="measureArea">面积测量</div>
57+
<div class="toolbar-item" v-on:click="measureTriangle">三角测量</div>
58+
<div class="toolbar-item" v-on:click="measureSlope">坡度测量</div>
59+
<div class="toolbar-item" v-on:click="deleteMeasure">删除</div>
60+
</div>
61+
</mapgis-3d-measure>
62+
</mapgis-web-scene>
63+
</div>
64+
65+
<script>
66+
new Vue({
67+
el: "#app",
68+
data() {
69+
return {
70+
url:
71+
"http://t0.tianditu.com/DataServer?T=vec_w&L={z}&Y={y}&X={x}&tk=9c157e9585486c02edf817d2ecbc7752",
72+
m3dUrl: "http://develop.smaryun.com:6163/igs/rest/g3d/ZondyModels",
73+
autoReset: true,
74+
maximumScreenSpaceError: 8
75+
};
76+
},
77+
methods: {
78+
handleLoad(measure) {
79+
console.log('地图加初始化完毕！', measure);
80+
this.measure = measure;
81+
},
82+
measured(result){
83+
console.log("result",result)
84+
},
85+
measureLength() {
86+
this.measure && this.measure.enableMeasureLength();
87+
},
88+
measureArea() {
89+
this.measure && this.measure.enableMeasureArea();
90+
},
91+
measureTriangle() {
92+
this.measure && this.measure.enableMeasureTriangle();
93+
},
94+
measureSlope() {
95+
this.measure && this.measure.enableMeasureSlope();
96+
},
97+
deleteMeasure() {
98+
this.measure && this.measure.deleteMeasure();
99+
}
100+
}
101+
})
102+
</script>
103+
</body>
104+
105+
</html>

‎website/public/static/demo/vue-cesium/example/control/measureTwo.htm‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
7+
<title>Vue-测量-多屏</title>
8+
<script include="vue,antd" exclude="plugin,cesium" src="./static/libs/include-cesium-local.js"></script>
9+
<style type="text/css">
10+
#sceneOne,#sceneTwo {
11+
height: 50vh;
12+
width: 100vw;
13+
}
14+
#toolbar-wrapper {
15+
position: absolute;
16+
z-index: 9999;
17+
display: inline-flex;
18+
overflow-x: hidden;
19+
overflow-y: visible;
20+
top: 20px;
21+
left: 20px;
22+
}
23+
.toolbar-item {
24+
background: #ffffff;
25+
border: 1px dashed #666666;
26+
text-align: center;
27+
font-size: 20px;
28+
line-height: 20px;
29+
height: fit-content;
30+
padding: 6px 16px;
31+
cursor: pointer;
32+
}
33+
</style>
34+
</head>
35+
36+
<body>
37+
<div id="app">
38+
<div id="sceneOne">
39+
<mapgis-web-scene
40+
lib-path="./static/libs/cdn/cesium/Cesium.js"
41+
plugin-path="./static/libs/cdn/zondyclient/webclient-cesium-plugin.min.js"
42+
v-bind:animation="false"
43+
v-bind:timeline="false"
44+
v-bind:vue-key="vueKey"
45+
>
46+
<mapgis-3d-raster-layer :url="url"></mapgis-3d-raster-layer>
47+
<mapgis-3d-igs-m3d
48+
:auto-reset="autoReset"
49+
:maximum-screen-space-error="maximumScreenSpaceError"
50+
:url="m3dUrl">
51+
</mapgis-3d-igs-m3d>
52+
<mapgis-3d-measure
53+
v-bind:vue-key="vueKey"
54+
@load="handleLoad"
55+
@measured="measured"
56+
>
57+
<div id="toolbar-wrapper">
58+
<div class="toolbar-item" v-on:click="measureLength">直线测量</div>
59+
<div class="toolbar-item" v-on:click="measureArea">面积测量</div>
60+
<div class="toolbar-item" v-on:click="measureTriangle">三角测量</div>
61+
<div class="toolbar-item" v-on:click="measureSlope">坡度测量</div>
62+
<div class="toolbar-item" v-on:click="deleteMeasure">删除</div>
63+
</div>
64+
</mapgis-3d-measure>
65+
</mapgis-web-scene>
66+
</div>
67+
<div id="sceneTwo">
68+
<mapgis-web-scene
69+
lib-path="./static/libs/cdn/cesium/Cesium.js"
70+
plugin-path="./static/libs/cdn/zondyclient/webclient-cesium-plugin.min.js"
71+
v-bind:animation="false"
72+
v-bind:timeline="false"
73+
>
74+
<mapgis-3d-raster-layer :base-url="rastUrl"> </mapgis-3d-raster-layer>
75+
</mapgis-web-scene>
76+
</div>
77+
</div>
78+
79+
<script>
80+
new Vue({
81+
el: "#app",
82+
data() {
83+
return {
84+
url:
85+
"http://t0.tianditu.com/DataServer?T=vec_w&L={z}&Y={y}&X={x}&tk=9c157e9585486c02edf817d2ecbc7752",
86+
m3dUrl: "http://develop.smaryun.com:6163/igs/rest/g3d/ZondyModels",
87+
autoReset: true,
88+
maximumScreenSpaceError: 8,
89+
vueKey: "scene",
90+
rastUrl: 'https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}',
91+
};
92+
},
93+
methods: {
94+
handleLoad(measure) {
95+
console.log('地图加初始化完毕！', measure);
96+
this.measure = measure;
97+
},
98+
measured(result){
99+
console.log("result",result)
100+
},
101+
measureLength() {
102+
this.measure && this.measure.enableMeasureLength();
103+
},
104+
measureArea() {
105+
this.measure && this.measure.enableMeasureArea();
106+
},
107+
measureTriangle() {
108+
this.measure && this.measure.enableMeasureTriangle();
109+
},
110+
measureSlope() {
111+
this.measure && this.measure.enableMeasureSlope();
112+
},
113+
deleteMeasure() {
114+
this.measure && this.measure.deleteMeasure();
115+
}
116+
}
117+
})
118+
</script>
119+
</body>
120+
121+
</html>

‎website/public/static/demo/vue-cesium/gallery/control/measure.png‎

972 KB
Loading

‎website/public/static/demo/vue-cesium/gallery/control/measurescene.png‎

699 KB
Loading

0 commit comments

Comments
 (0)