Skip to content

Commit 994c37a

Browse files
author
潘卓然 Parn Deedlit
authored
Merge pull request MapGIS#70 from MapGIS/modify_zy
【vue-mapboxgl】【vue-cesium】添加六个vue：除去mappboxgl的overlay(echarts/mapv)
2 parents 556ec81 + 99fc32c commit 994c37a

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
@@ -83,6 +83,30 @@
8383
}
8484
]
8585
},
86+
{
87+
"name": "Vue-ArcGIS",
88+
"iconfont": "icon_ogc",
89+
"folder": "arcgis",
90+
"leaffolder": true,
91+
"childs": [
92+
{
93+
"name": "ArcGIS瓦片",
94+
"file": "arcgisTile",
95+
"diffcult": "1",
96+
"detail": "",
97+
"icon": "tile.png",
98+
"update": "最后更新时间：2021-06-07"
99+
},
100+
{
101+
"name": "ArcGIS地图",
102+
"file": "arcgisMap",
103+
"diffcult": "1",
104+
"detail": "",
105+
"icon": "map.png",
106+
"update": "最后更新时间：2021-06-07"
107+
}
108+
]
109+
},
86110
{
87111
"name": "Vue-矢量瓦片",
88112
"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
@@ -214,8 +214,16 @@
214214
"file": "arcgisTile",
215215
"diffcult": "2",
216216
"detail": "",
217-
"icon": "marker.png",
217+
"icon": "ArcgisTile.png",
218218
"update": "最后更新时间：2021-06-04"
219+
},
220+
{
221+
"name": "ArcGIS地图",
222+
"file": "arcgisMap",
223+
"diffcult": "2",
224+
"detail": "",
225+
"icon": "ArcgisMap.png",
226+
"update": "最后更新时间：2021-06-07"
219227
}
220228
]
221229
},
@@ -360,6 +368,30 @@
360368
"update": "最后更新时间：2021-03-08"
361369
}
362370
]
371+
},
372+
{
373+
"name": "Vue-Overlay",
374+
"iconfont": "iconeye",
375+
"folder": "vue-overlay",
376+
"leaffolder": true,
377+
"childs": [
378+
{
379+
"name": "echarts",
380+
"file": "echarts",
381+
"diffcult": "2",
382+
"detail": "",
383+
"icon": "event-layer.png",
384+
"update": "最后更新时间：2021-06-07"
385+
},
386+
{
387+
"name": "mapv",
388+
"file": "mapv",
389+
"diffcult": "2",
390+
"detail": "",
391+
"icon": "event-layer.png",
392+
"update": "最后更新时间：2021-06-07"
393+
}
394+
]
363395
}
364396
]
365397
}

‎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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy