（1）開發部署離線版本

MKT-porter發表於2024-06-15

1 註冊賬號

https://ion.cesium.com/tokens?page=1

10511
L4

2 獲取秘鑰

https://ion.cesium.com/tokens?page=1

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyZmVmYjIwZC01MWMwLTQ1ODMtOTgyYi01NWRlYjI5MDQzZTQiLCJpZCI6MzY5MTAsImlhdCI6MTcxODQ0MzQyM30.W67FXIW320E6hr9RLPj-I107TqSjrzEZoIB6cDXO50A

　　

3 部署python flask

pip install Flask

　　

4 部署censuim程式碼 離線庫

https://ion.cesium.com/tokens?page=1

主要依賴庫位置

呼叫工程

依賴cesuim庫程式碼位置修改

<head>
  <script src="Cesium-1.118/Build/Cesium/Cesium.js"></script>
  <link href="Cesium-1.118/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
  <link href="style.css" rel="stylesheet">
</head>

　　

5開發

5-1執行

activate py38
python gnss_show.py

　　

介面

5-2程式碼

gnss_show.py

#啟用環境
 
#!/usr/bin/env python2
# -*- coding: utf-8 -*-
import time
from flask import *
 
 
app = Flask(__name__)
 
import os
pathnow=os.getcwd()
pathnow=pathnow.replace('\\','/')
#print(pathnow) #獲取當前工作目錄路徑
#print (os.path.abspath('mainPage0.html'))
 
 
 
app = Flask(
    __name__,
    template_folder='.',  # 表示在當前目錄 (myproject/) 尋找模板檔案
    static_folder='',     # 空 表示為當前目錄 (myproject/) 開通虛擬資源入口
    static_url_path='',
)
 
  
@app.route('/')
def index():
    return render_template('index.html')
 
 
 
  
if __name__ == '__main__':
    app.run(host='0.0.0.0',port='8080')

　　

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="Cesium-1.118/Build/Cesium/Cesium.js"></script>
  <link href="Cesium-1.118/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
  
  <style>
  body {
    overflow: hidden;
    margin: 0px;
    padding: 0px;
    height: 100%;
  }
  #cesiumContainer {
    height: 100%;
  }
</style>

</head>
<body>
  <div id="cesiumContainer"></div>
  <script type="module">
    //<link href="style.css" rel="stylesheet">
    // Get your token from https://cesium.com/ion/tokens  秘鑰
   Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyZmVmYjIwZC01MWMwLTQ1ODMtOTgyYi01NWRlYjI5MDQzZTQiLCJpZCI6MzY5MTAsImlhdCI6MTcxODQ0MzQyM30.W67FXIW320E6hr9RLPj-I107TqSjrzEZoIB6cDXO50A';
 
 
   //1建立地球視覺化
   const viewer = new Cesium.Viewer('cesiumContainer', {
      terrain: Cesium.Terrain.fromWorldTerrain(),
    });

    const osmBuildings = await Cesium.createOsmBuildingsAsync();
    viewer.scene.primitives.add(osmBuildings);
    
    
   //1飛到指定地點 經緯度高度
    viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(-122.384, 37.62, 4000)
      });
 
 
 
    //2建立連續點對
    const flightData = JSON.parse(
      '[{"longitude":-122.39053,"latitude":37.61779,"height":-27.32},{"longitude":-122.39035,"latitude":37.61803,"height":-27.32},{"longitude":-122.39019,"latitude":37.61826,"height":-27.32},{"longitude":-122.39006,"latitude":37.6185,"height":-27.32},{"longitude":-122.38985,"latitude":37.61864,"height":-27.32}]');
 
    // Create a point for each.
    for (let i = 0; i < flightData.length; i++) {
       
     const dataPoint = flightData[i];
 
     const airplaneEntity= viewer.entities.add({
        //點選這個點出現的描述
        description: `Location: (${dataPoint.longitude}, ${dataPoint.latitude}, ${dataPoint.height})`,
        //點的位置
        position: Cesium.Cartesian3.fromDegrees(dataPoint.longitude, dataPoint.latitude, dataPoint.height),
        //點的型別
        point: { pixelSize: 10, color: Cesium.Color.BLUE }
      });
 
    // viewer.flyTo(airplaneEntity);
      
     
    }
 
 
  </script>
</body>
</html>

　　

相關文章