記事ディレクトリ
序文
マップ データを直接スライスし、nginxを介して静的サービスとして公開します。
ツールを使用します。
- マップ新地球抽出コード: oznv———————————————————————————————————————— —————————————————————————————マップのダウンロードに使用
- 小豆土抽出コード：2thg———————————————————————————————————————— ————————————————————————————————————————————————— ————————————————————————————————————————————————— ————————————————————————————————————————————————— ————————————————————————————————————————————————— ——————————————————— マップをダウンロードするには
- Nginx抽出コード: wnjl—————————————— タイル データのリリースに使用されるプロキシ サーバー
- Cesiumlab抽出コード: iey3———————————— データ スライス用
- MapBox 画像抽出コード: 48dt—————————————— 画像の読み込みに使用
- テストソースコード抽出コード：1cpt———————————————————————————————————————— ————————————————————————————————————————————————— ————————————————————————————————————————————————— ————————————————————————————————————————————————— —————、Test ディレクトリ内のすべてのファイル
- 桂林市七星区の地形データ抽出コード：ee1k—————————— 桂林市七星区の生地形データと加工データ
1.セシウムはオフラインマップを読み込みます
1.1 ダウンロードデータ
小豆の地球を開き、直接ドラッグして MapBox の画像を読み込みます
クリックしてグローバルにダウンロード
新しいダウンロード
課金しないとダウンロード速度が非常に遅いため、2.4 改善で提案されているダウンロード速度の速いソフトウェアを見つける必要があります。
2.2 データ処理
出力データ
2.3 マップ公開
最初に公式 Web サイトでnginxをダウンロードし(序文に Baidu クラウドへのリンクがあります)、Windows 用の安定版をダウンロードします。
ダウンロード後、解凍し、nginx.exe を直接実行せず、コマンドラインから実行します。
cd コマンドを使用して、nginx の解凍されたディレクトリに到達します。
CD C:UsersLenovoDesktop ginx-1.22.0
start コマンドを使用して nginx サービスを開始すると、ウィンドウが点滅します。
nginxを起動
タスク プロセスが存在するかどうかを確認します。dos 入力:
tasklist /fi 「イメージ名 eq nginx.exe」
最後に、ブラウザーで http://localhost/ にアクセスして、デプロイの成功ページを表示します。
次に設定ファイルを変更します.設定ディレクトリ内の各フォルダの機能は下図のようになります.ここではconfディレクトリ内のファイルのみを変更します.
conf ディレクトリにある nginx.conf を見つけて vscode で開きます. サーバー ノードを見つけて、次のように変更します (元のサーバー関数をすべて削除します)。
server {
listen 80;
location / {
alias C:/Users/Lenovo/Desktop/Test/CesiumDemo/;
index index.html index.htm;
}
location /map {
alias C:/Users/Lenovo/Desktop/Test/data;
autoindex on;
autoindex_localtime on;
}
}
変更が完了したら保存し、次のコマンドを使用して構成ファイルが正しいかどうかを確認し、その後に nginx.conf ファイルのパスを指定します。成功した場合は正しいことを意味します。
nginx -t -c /Users/Lenovo/Desktop/nginx-1.22.0/conf/nginx.conf
次のコマンドを使用して nginx をリロードします。注: 構成ファイルを変更するたびに、コマンドでリロードする必要があります。
nginx -s リロード
ここでは、デスクトップ Test に 2 つの新しいフォルダーを作成して、Cesium とデータを保存します
最初の Cesium APP (hello world) のファイルを CesiumDemo に入れます
エクスポートしたデータを data フォルダに入れる
ブラウザから http://localhost/map/ にアクセスして、データ パスの下にあるファイルを確認してください。
最後に、CesiumDemo フォルダーの index.html にタイル マップ サービス コードを導入します。
var viewer = new Cesium.Viewer('cesiumContainer', {
animation: false,//是否显示动画控件
baseLayerPicker: true,//是否显示图层选择控件
geocoder: true,
timeline: false,
sceneModePicker: true,
navigationHelpButton: false,
infoBox: true,
imageryProvider: new Cesium.UrlTemplateImageryProvider({
url: '/map/{z}/{x}/{y}.png',
fileExtension: 'png'
})
});
index.htmlコード全体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cesium App</title>
<script src="./scripts/Cesium/Cesium.js"></script>
<link rel="stylesheet" href="./scripts/Cesium/Widgets/widgets.css">
<style>
html, body, .container{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="cesiumContainer" ></div>
<script>
var viewer = new Cesium.Viewer('cesiumContainer', {
animation: false,//是否显示动画控件
baseLayerPicker: true,//是否显示图层选择控件
geocoder: true,
timeline: false,
sceneModePicker: true,
navigationHelpButton: false,
infoBox: true,
imageryProvider: new Cesium.UrlTemplateImageryProvider({
url: '/map/{z}/{x}/{y}.png',
fileExtension: 'png'
})
});
</script>
</body>
</html>
http://localhost/ にアクセスしてセシウムを開き、画像を取得します
2.4 ダウンロード速度の向上
改善方法は、マップニューアースを使用してデータをより速くダウンロードすることです。湖南省のマップデータをダウンロードするデモは次のとおりです。
最初に解凍してダブルクリックし、マップ New Earth を開きます
MapBox.lrc レイヤーを Map New Earth に直接ドラッグします
検索バーで湖南省を検索
クリックしてダウンロード
地図上で湖南省に囲まれた平面を選択し、ダウンロードを設定します ここでは、11 レベル 391.5MB をダウンロードします (2 分でダウンロードできます)。
ダウンロードするパスを設定する
ダウンロード後、公式サイトのツールCesiumlabで画像をスライス
11 レベルを選択した後、ハッシュを選択します
データが処理されるのを待ちます
処理後、データ フォルダー内の元のデータをすべて削除し、処理されたデータをすべて置き換え、最後に http://localhost/ に再度アクセスして、湖南省の画像のみを含むマップを取得します。
Tuxin Earth は、グローバル イメージをダウンロードする方法をまだ見つけていませんが、複数のレイヤーをダウンロードでき、後で追加する予定です。
参考文献:
2.セシウムはオフラインの地形を読み込みます
公式サイトの地形効果です. 以下はローカルのオフライン地形を読み込みます. 方法はオフラインマップの読み込みと同じです. まずデータスライスをダウンロードしてからnginxで公開します.
2.1 ダウンロードデータ
最初にGeospatial Data Cloudでデータをダウンロードします。http://www.gscloud.cn/search (桂林市七星区の地形データ抽出コード: ee1k)
ダウンロードするデータ レベルを選択します。ここでは、DEM 数値標高データで GDEMV3 30M 解像度の数値標高データを選択します。
次に、広西省桂林の七星区のデータを取得します。
実際にダウンロードされたデータは、写真の大きなボックス内のデータであり、七星区よりもはるかに大きくなっています。
ダウンロードタブをクリックしてダウンロード
2.2 データ処理
ダウンロード後、解凍し、CesiumLab を開いて地形スライスを選択します。
構成が完了したら、それを送信し、さらにhash hereを選択します。
実際には処理に 30 分かかりました (時間を節約するために、地形は Baidu Cloud にアップロードされています:桂林七星区の地形データ抽出コード: ee1k)
2.3 地形の公開
処理後、Test フォルダの下に新しい Terrain フォルダを作成して地形データを保存し、新しい Map フォルダを作成して元の地図データを保存します。地形フォルダー内のファイルを図に示します。
nginx の conf ディレクトリにある nginx.conf を見つけて、構成ファイルを変更し、サーバー機能に追加します。
ocation /terrain {
alias C:/Users/Lenovo/Desktop/Test/data/terrain;
autoindex on;
autoindex_localtime on;
}
完全なサーバー コードは次のとおりです。
server {
listen 80;
location / {
alias C:/Users/Lenovo/Desktop/Test/CesiumDemo/;
index index.html index.htm;
}
location /map {
alias C:/Users/Lenovo/Desktop/Test/data/map;
autoindex on;
autoindex_localtime on;
}
location /terrain {
alias C:/Users/Lenovo/Desktop/Test/data/terrain;
autoindex on;
autoindex_localtime on;
}
}
次のコマンドを使用して nginx をリロードします。注: 構成ファイルを変更するたびに、コマンドでリロードする必要があります。
nginx -s リロード
ブラウザーで http://localhost/terrain/ にアクセスして、テレインのディレクトリ内のファイルが正常に公開されていることを確認します。
最後に、CesiumDemo フォルダーの index.html にテレイン サービス コードを導入します。
var terrainProvider = new Cesium.CesiumTerrainProvider({
url: 'http://localhost:80/terrain'
});
viewer.terrainProvider = terrainProvider;
完全なコード:
this.viewer = new Cesium.Viewer('cesiumContainer', {
selectionIndicator: false, // 不显示指示器小部件
infoBox: true, // 不显示信息框
sceneModePicker: false, // 不显示模式切换选项
baseLayerPicker: false,
navigationHelpButton: false,
animation: true,
shouldAnimate: true,
geocoder: false,
homeButton: false,
imageryProvider: new Cesium.UrlTemplateImageryProvider({
url: '/map/{z}/{x}/{y}.png',
fileExtension: 'png'
})
})
var terrainProvider = new Cesium.CesiumTerrainProvider({
url: 'http://localhost:80/terrain'
});
viewer.terrainProvider = terrainProvider;
局所画像効果は図のようになります
公式の画像データを比較して問題を見つけます。
参考文献:
2.4 遭遇した問題
- 問題: 効果が低い、精度が低い、小さい地形が多く表示されない
- 理由：ダウンロードした地形データの解像度や精度が低い可能性があります
- 改善: より精度の高い解像度で地形データを検索
最初に自己紹介をさせてください.編集者は2013年に交通大学を卒業し、小さな会社で働き、Huawei、OPPOなどの大規模な工場に行き、2018年にアリババに入社しました。ほとんどの初級および中級 Java エンジニアはスキルを向上させたいと考えており、多くの場合、自分で探求して成長したり、クラスに登録したりする必要がありますが、トレーニング機関の 10,000 元近くの授業料は本当にストレスです。私の体系化されていない独学は非常に非効率的で長く、天井にぶつかりやすく、技術が停止します。そのため、「Java 開発のための学習教材一式」を集めてみんなに配りました. 当初の意図も非常に単純です. つまり、独学で学びたいが、そうではない友人を助けたいということです.どこから始めればよいかを知ると同時に、全員の負担を軽減します。以下の名刺を追加して、学習教材の完全なセットを入手してください