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>