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+ </ style >
15+ </ head >
16+
17+ < body >
18+ < div id ="app ">
19+ < mapgis-web-scene
20+ libPath ="cesium/Cesium.js "
21+ pluginPath ="cesium/webclient-cesium-plugin.min.js "
22+ v-on:load ="handleLoad "
23+ >
24+ < mapgis-3d-ogc-wmts-layer
25+ :base-url ="urlT "
26+ :wmts-layer ="layer "
27+ :tile-matrix-set ="tileMatrixSetID "
28+ :format ="format "
29+ :tiling-scheme ="srs "
30+ :token ="token "
31+ > </ mapgis-3d-ogc-wmts-layer >
32+ < mapgis-3d-terrain-provider :url ="demUrl " :v-if ="showDem "> </ mapgis-3d-terrain-provider >
33+ < mapgis-3d-flood-no-slot
34+ :start-height ="startHeight "
35+ :min-height ="minHeight "
36+ :current-height ="currentHeight "
37+ :max-height ="maxHeight "
38+ :flood-color ="floodColor "
39+ :flood-speed ="floodSpeed "
40+ :specular-intensity ="specularIntensity "
41+ :amplitude ="amplitude "
42+ :animation-speed ="animationSpeed "
43+ :frequency ="frequency "
44+ v-on:load ="load "
45+ >
46+ </ mapgis-3d-flood-no-slot >
47+ </ mapgis-web-scene >
48+ </ div >
49+
50+ < script >
51+ new Vue ( {
52+ el : "#app" ,
53+ data ( ) {
54+ return {
55+ //地形url
56+ demUrl : undefined ,
57+ showDem : false ,
58+ //天地图参数
59+ urlT : "http://t0.tianditu.gov.cn/img_c/wmts" ,
60+ tileMatrixSetID : "c" ,
61+ srs : "EPSG:4326" ,
62+ layer : "img" ,
63+ format : "tiles" ,
64+ token : {
65+ key : "tk" ,
66+ value : "f5347cab4b28410a6e8ba5143e3d5a35"
67+ } ,
68+ //初始淹没高度，淹没总高度为currentHeight - startHeight - minHeight
69+ startHeight : 0 ,
70+ //初始淹没点
71+ minHeight : 2800 ,
72+ //当前淹没高度
73+ currentHeight : 0 ,
74+ //最大淹没高度
75+ maxHeight : 6000 ,
76+ //淹没颜色
77+ floodColor : "#4e81bb" ,
78+ //洪水上涨速度
79+ floodSpeed : 300 ,
80+ //洪水反射光线强度
81+ specularIntensity : 1 ,
82+ //洪水水波高度
83+ amplitude : 10 ,
84+ //洪水水纹速度
85+ animationSpeed : 0.01 ,
86+ //洪水水纹频率
87+ frequency : 1000 ,
88+ //洪水分析组件对象
89+ floodAnalyse : undefined
90+ } ;
91+ } ,
92+ methods : {
93+ handleLoad ( e ) {
94+ const { component, Cesium } = e ;
95+ Cesium . Ion . defaultAccessToken =
96+ 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiM2Q0ZGMxYy1iZGZkLTQ4OWItODlhMy1iOWNkMDE0M2U3YWEiLCJpZCI6NTEzNSwiaWF0IjoxNjA2MjE0OTkyfQ.2aktNrUASlLsPwSFtkgKBTQLJTAnOTyjgKDRQmnafiE' ;
97+ const { webGlobe } = component ;
98+ webGlobe . viewer . camera . setView ( {
99+ direction : { x : 0.4680575394156845 , y : - 0.8267033643312148 , z : 0.31222377744109403 } ,
100+ position : { x : - 674271.5790185562 , y : 5530042.656916835 , z : 3232882.3357299212 }
101+ } ) ;
102+ //构造视图功能管理对象（视图）
103+ var sceneManager = new CesiumZondy . Manager . SceneManager ( {
104+ viewer : webGlobe . viewer
105+ } ) ;
106+ //视点跳转（经度，纬度，视角高度，方位角，俯仰角，翻滚角）
107+ sceneManager . flyToEx ( 94.73761648879076 , 29.44177452960854 , {
108+ height : 5900 ,
109+ heading : 60 ,
110+ pitch : - 16 ,
111+ roll : 0
112+ } ) ;
113+
114+ this . demUrl = new Cesium . IonResource . fromAssetId ( 1 ) ;
115+ this . showDem = true ;
116+
117+ console . log ( '地图加初始化完毕！' , webGlobe . viewer . camera ) ;
118+ }
119+ }
120+ } )
121+ </ script >
122+ </ body >
123+
124+ </ html >
0 commit comments