Skip to content

Commit 99fc32c

Browse files
zhangying-zy618zhangying-zy618
committed
【vue-mapboxgl】【vue-cesium】添加六个vue：除去mappboxgl的overlay(echarts/mapv)
1 parent 97e89b9 commit 99fc32c

File tree

14 files changed

+527
-8
lines changed

14 files changed

+527
-8
lines changed

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,30 @@
7575
}
7676
]
7777
},
78+
{
79+
"name": "Vue-ArcGIS",
80+
"iconfont": "icon_ogc",
81+
"folder": "arcgis",
82+
"leaffolder": true,
83+
"childs": [
84+
{
85+
"name": "ArcGIS瓦片",
86+
"file": "arcgisTile",
87+
"diffcult": "1",
88+
"detail": "",
89+
"icon": "tile.png",
90+
"update": "最后更新时间：2021-06-07"
91+
},
92+
{
93+
"name": "ArcGIS地图",
94+
"file": "arcgisMap",
95+
"diffcult": "1",
96+
"detail": "",
97+
"icon": "map.png",
98+
"update": "最后更新时间：2021-06-07"
99+
}
100+
]
101+
},
78102
{
79103
"name": "Vue-矢量瓦片",
80104
"iconfont": "icon_features",

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

Lines changed: 33 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -190,8 +190,16 @@
190190
"file": "arcgisTile",
191191
"diffcult": "2",
192192
"detail": "",
193-
"icon": "marker.png",
193+
"icon": "ArcgisTile.png",
194194
"update": "最后更新时间：2021-06-04"
195+
},
196+
{
197+
"name": "ArcGIS地图",
198+
"file": "arcgisMap",
199+
"diffcult": "2",
200+
"detail": "",
201+
"icon": "ArcgisMap.png",
202+
"update": "最后更新时间：2021-06-07"
195203
}
196204
]
197205
},
@@ -314,6 +322,30 @@
314322
"update": "最后更新时间：2021-03-08"
315323
}
316324
]
325+
},
326+
{
327+
"name": "Vue-Overlay",
328+
"iconfont": "iconeye",
329+
"folder": "vue-overlay",
330+
"leaffolder": true,
331+
"childs": [
332+
{
333+
"name": "echarts",
334+
"file": "echarts",
335+
"diffcult": "2",
336+
"detail": "",
337+
"icon": "event-layer.png",
338+
"update": "最后更新时间：2021-06-07"
339+
},
340+
{
341+
"name": "mapv",
342+
"file": "mapv",
343+
"diffcult": "2",
344+
"detail": "",
345+
"icon": "event-layer.png",
346+
"update": "最后更新时间：2021-06-07"
347+
}
348+
]
317349
}
318350
]
319351
}

‎website/public/static/demo/vue-cesium/example/arcgis/arcgisMap.htm‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
6+
<title>Vue-arcgisMap</title>
7+
<script include="vue" exclude="plugin,cesium" src="./static/libs/include-cesium-local.js"></script>
8+
<style type="text/css">
9+
body {
10+
margin: 0px !important;
11+
}
12+
#app {
13+
margin: 0 0;
14+
width: 100vw;
15+
height: 100vh;
16+
overflow: hidden;
17+
}
18+
</style>
19+
<script src="../../../../../../../../../../productSet/mapgis-client-for-javascript-all-v10.5.4.10/site/static/libs/include-cesium-local.js"></script>
20+
</head>
21+
22+
<body>
23+
<div id="app">
24+
<mapgis-web-scene
25+
:animation="false"
26+
:timeline="false"
27+
v-on:load="handleLoad"
28+
lib-path="./static/libs/cdn/cesium/Cesium.js"
29+
plugin-path="./static/libs/cdn/zondyclient/webclient-cesium-plugin.min.js"
30+
>
31+
<mapgis-3d-arcgis-map-layer
32+
:base-url="mapurl"
33+
:layers="showlayers"
34+
:layer-style="layerStyle"
35+
:options="options"
36+
:srs="srs">
37+
</mapgis-3d-arcgis-map-layer>
38+
</mapgis-web-scene>
39+
</div>
40+
<script>
41+
new Vue({
42+
el: '#app',
43+
data() {
44+
return {
45+
mapurl:"http://219.142.81.85/arcgis/rest/services/20wanZL/MapServer",
46+
showlayers:"show:0,2,4,7,9,10,11,12",
47+
layerStyle: {
48+
visible: true,
49+
opacity: 1,
50+
zIndex: 2
51+
},
52+
options:{
53+
tileWidth:256,
54+
tileHeight:256,
55+
},
56+
srs:"EPSG:4326"
57+
};
58+
},
59+
methods: {
60+
handleLoad(e) {
61+
console.log('地图加初始化完毕！', e);
62+
}
63+
}
64+
});
65+
</script>
66+
</body>
67+
</html>

‎website/public/static/demo/vue-cesium/example/arcgis/arcgisTile.htm‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
6+
<title>Vue-arcgisTile</title>
7+
<script include="vue" exclude="plugin,cesium" src="./static/libs/include-cesium-local.js"></script>
8+
<style type="text/css">
9+
body {
10+
margin: 0px !important;
11+
}
12+
#app {
13+
margin: 0 0;
14+
width: 100vw;
15+
height: 100vh;
16+
overflow: hidden;
17+
}
18+
</style>
19+
</head>
20+
21+
<body>
22+
<div id="app">
23+
<mapgis-web-scene
24+
:animation="false"
25+
:timeline="false"
26+
v-on:load="handleLoad"
27+
lib-path="./static/libs/cdn/cesium/Cesium.js"
28+
plugin-path="./static/libs/cdn/zondyclient/webclient-cesium-plugin.min.js"
29+
>
30+
<mapgis-3d-arcgis-tile-layer
31+
:base-url="tileurl"
32+
:layer-style="layerStyle">
33+
</mapgis-3d-arcgis-tile-layer>
34+
</mapgis-web-scene>
35+
</div>
36+
<script>
37+
new Vue({
38+
el: '#app',
39+
data() {
40+
return {
41+
tileurl:"http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer",
42+
layerStyle: {
43+
visible: true,
44+
opacity: 1,
45+
zIndex: 2
46+
},
47+
};
48+
},
49+
methods: {
50+
handleLoad(e) {
51+
console.log('地图加初始化完毕！', e);
52+
}
53+
}
54+
});
55+
</script>
56+
</body>
57+
</html>

‎website/public/static/demo/vue-cesium/example/overlay/echarts.htm‎

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
<head>
4+
<meta charset="utf-8"/>
5+
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
6+
<title>Vue-echarts</title>
7+
<script include="jquery" src="./static/libs/include-lib-local.js"></script>
8+
<script include="vue,echarts" exclude="plugin,cesium" src="./static/libs/include-cesium-local.js"></script>
9+
<style type="text/css">
10+
body {
11+
margin: 0px !important;
12+
}
13+
14+
#app {
15+
margin: 0 0;
16+
width: 100vw;
17+
height: 100vh;
18+
overflow: hidden;
19+
}
20+
21+
.map {
22+
position: absolute; /* 只能是绝对布局 */
23+
top: 0;
24+
bottom: 0;
25+
height: 100%;
26+
width: 100%;
27+
}
28+
</style>
29+
</head>
30+
31+
<body>
32+
<div id="app">
33+
<mapgis-web-scene
34+
:animation="false"
35+
:timeline="false"
36+
:camera-view="cameraView"
37+
v-on:load="handleLoad"
38+
lib-path="./static/libs/cdn/cesium/Cesium.js"
39+
plugin-path="./static/libs/cdn/zondyclient/webclient-cesium-plugin.min.js"
40+
>
41+
<mapgis-3d-arcgis-tile-layer
42+
:base-url="baseUrl"
43+
:layer-style="layerStyle">
44+
</mapgis-3d-arcgis-tile-layer>
45+
<mapgis-3d-echarts-layer :options="option"></mapgis-3d-echarts-layer>
46+
</mapgis-web-scene>
47+
</div>
48+
<script>
49+
new Vue({
50+
el: '#app',
51+
data() {
52+
return {
53+
busLines: {},
54+
option: {},
55+
baseUrl: "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer",
56+
layerStyle: {
57+
visible: true,
58+
opacity: 1,
59+
zIndex: 2
60+
},
61+
cameraView: {
62+
destination: {
63+
x: -2409221.7854387695,
64+
y: 4705113.697479787,
65+
z: 4500333.6696071755
66+
},
67+
orientation: {
68+
heading: 3.2694614177406143,
69+
pitch: -1.4832321184766042,
70+
roll: 3.1369303868636838
71+
},
72+
}
73+
};
74+
75+
},
76+
mounted() {
77+
this.initData();
78+
},
79+
methods: {
80+
handleLoad(e) {
81+
console.log('地图加初始化完毕！', e);
82+
},
83+
initData() {
84+
var vm = this;
85+
$.get('https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data/asset/data/lines-bus.json', function (res) {
86+
var hStep = 300 / (res.length - 1);
87+
vm.busLines = [].concat.apply([], res.map(function (busLine, idx) {
88+
var prevPt;
89+
var points = [];
90+
for (var i = 0; i < busLine.length; i += 2) {
91+
var pt = [busLine[i], busLine[i + 1]];
92+
if (i > 0) {
93+
pt = [
94+
prevPt[0] + pt[0],
95+
prevPt[1] + pt[1]
96+
];
97+
}
98+
prevPt = pt;
99+
100+
points.push([pt[0] / 1e4, pt[1] / 1e4]);
101+
}
102+
return {
103+
coords: points,
104+
lineStyle: {
105+
normal: {
106+
color: echarts.color.modifyHSL('#5A94DF', Math.round(hStep * idx))
107+
}
108+
}
109+
};
110+
}))
111+
vm.initOptions(vm.busLines);
112+
})
113+
114+
},
115+
initOptions(busLines) {
116+
var echartsOptions = {
117+
cesium: {
118+
roam: true
119+
},
120+
series: [{
121+
type: 'lines',
122+
coordinateSystem: 'cesium',
123+
polyline: true,
124+
data: busLines,
125+
silent: true,
126+
lineStyle: {
127+
// color: '#c23531',
128+
// color: 'rgb(200, 35, 45)',
129+
opacity: 0.2,
130+
width: 1
131+
},
132+
progressiveThreshold: 500,
133+
progressive: 200
134+
}, {
135+
type: 'lines',
136+
coordinateSystem: 'cesium',
137+
polyline: true,
138+
data: busLines,
139+
lineStyle: {
140+
width: 0
141+
},
142+
effect: {
143+
constantSpeed: 20,
144+
show: true,
145+
trailLength: 0.1,
146+
symbolSize: 1.5
147+
},
148+
zlevel: 1
149+
}]
150+
};
151+
this.option = echartsOptions;
152+
}
153+
}
154+
});
155+
</script>
156+
</body>
157+
</html>

0 commit comments

Comments
 (0)