index.html 2.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. <!DOCTYPE html>
  2. <html lang="">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width,initial-scale=1.0">
  7. <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  8. <link rel="preconnect" href="https://services.arcgisonline.com">
  9. <link rel="preconnect" href="https://cdnjs.cloudflare.com">
  10. <title><%= htmlWebpackPlugin.options.title %></title>
  11. <script src="https://cdnjs.cloudflare.com/ajax/libs/cesium/1.105.1/Cesium.js"></script>
  12. <link href="https://cdnjs.cloudflare.com/ajax/libs/cesium/1.105.1/Widgets/widgets.min.css" rel="stylesheet">
  13. </head>
  14. <body>
  15. <noscript>
  16. <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
  17. </noscript>
  18. <div id="app"></div>
  19. <!-- 瓦片预加载:页面打开即执行,早于 Vue 初始化 -->
  20. <div id="cesium-preload" style="position:fixed;width:1px;height:1px;opacity:0;pointer-events:none;z-index:-1;"></div>
  21. <script>
  22. (function() {
  23. // 预加载宏观和中观瓦片(微观用本地静态图,不需要预加载)
  24. var views = [
  25. {destination:Cesium.Cartesian3.fromDegrees(-15,35.86,45000000)},
  26. {destination:Cesium.Cartesian3.fromDegrees(104.19,35.86,14000000)}
  27. ];
  28. var idx = 0;
  29. var viewer = new Cesium.Viewer('cesium-preload', {
  30. animation:false, timeline:false, baseLayerPicker:false, geocoder:false,
  31. homeButton:false, sceneModePicker:false, navigationHelpButton:false, infoBox:false,
  32. fullscreenButton:false, selectionIndicator:false,
  33. imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
  34. url:'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
  35. })
  36. });
  37. viewer.cesiumWidget.creditContainer.style.display='none';
  38. viewer.camera.setView(views[0]);
  39. function check(){
  40. if(viewer.isDestroyed())return;
  41. if(viewer.scene.globe.tilesLoaded){
  42. idx++;
  43. if(idx < views.length){
  44. viewer.camera.setView(views[idx]);
  45. requestAnimationFrame(check);
  46. }else{
  47. viewer.destroy();
  48. var el=document.getElementById('cesium-preload');
  49. if(el)el.remove();
  50. }
  51. }else{requestAnimationFrame(check);}
  52. }
  53. requestAnimationFrame(check);
  54. })();
  55. </script>
  56. <!-- built files will be auto injected -->
  57. </body>
  58. </html>