序：初心者Xiaobai、予備調査プロセス。
1。JavaおよびTomcat環境の構成
tomcat8.0.47バージョン、JAVA 8
1. JAVAをインストールし、環境変数を設定します
インストールディレクトリを変更せずに、JAVAを正常にインストールできます。
環境変数JAVA_HOMEおよびPATHを構成します。java
インストールディレクトリを確認する場所javaを入力します。これが現在のインストールディレクトリである場合は、インストールが正しいことを意味します。
2.Tomcatグリーンバージョンをインストールします
解凍して指定のディレクトリに配置し、環境変数を設定します。
新しい環境変数：
CATALINA_BASE C：\ tomcat \ apache-tomcat-8.0.47 CATALINA_HOME
C：\ tomcat \ apache-tomcat-8.0.47
パス％CATALINA_HOME ％\ lib;％CATALINA_HOME％\ bin;最後に追加
Tomcatサービスを設定して
インストールサービスを自動開始---- install.bat
C：\ tomcat \ apache-tomcat-8.0.47ディレクトリにinstall.batファイルを作成し、次の線分の中間コードをこのファイルにコピーして、それを保存。
@echo off
echo "开始执行安装"
echo 注册Tomcat8为系统服务
call %~dp0%bin/service.bat install
echo 设置Tomcat8服务自动启动
sc config Tomcat8 start= auto
echo 启动Tomcat8
net start Tomcat8
echo "安装完成"
pause
コピーが完了したら、右クリックしてinstall.batを管理者モードで実行します。インストールが成功すると、サービスリストにTomcatサービスが表示されるはずです。
service ---- delete.batのアンインストール
インストールが失敗した場合は、delete.batファイルを作成してサービスをアンインストールできます。次の行セグメントの中央にあるコードをdelete.batファイルにコピーします。
@echo off
echo "开始执行卸载"
echo 停止Tomcat8服务
net stop Tomcat8
echo 删除Tomcat8服务
call %~dp0%bin/service.bat remove
echo "卸载完成"
pause
管理者としてdelete.batファイルを実行して、生成されたTomcatサービスを削除します。
次に、右クリックしてinstall.batを管理者モードで実行します。インストールが成功すると、Tomcatサービスがサービスリストに表示されるはずです。
Tomcatアクセスインターフェイス：http：// localhost：8080 /
3.クロスドメインの問題
（1）web.xmlファイルのコードを変更して追加します。
<filter>
<filter-name>CORS</filter-name>
<filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
<init-param>
<param-name>cors.allowOrigin</param-name>
<param-value>*</param-value>
</init-param>
<init-param>
<param-name>cors.supportedMethods</param-name>
<param-value>GET,POST,HEAD,PUT,DELETE</param-value>
</init-param>
<init-param>
<param-name>cors.supportedHeaders</param-name>
<param-value>Accept,Origin,X-Requested-With,Content-Type,Last-Modified</param-value>
</init-param>
<init-param>
<param-name>cors.exposedHeaders</param-name>
<param-value>Set-Cookie</param-value>
</init-param>
<init-param>
<param-name>cors.supportsCredentials</param-name>
<param-value>true</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>CORS</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
（2）対応するクロスドメイン処理パッケージを追加します：
ダウンロードアドレス：https：//download.csdn.net/download/caozl1132/11759866
二。セシウムのインストールと展開
公式ウェブサイトのダウンロードアドレス：https：//cesium.com/downloads/
プログラムをダウンロードしてTomcatWebappの下に配置し
ます。独自のプロジェクトフォルダーを作成し、そのフォルダー内に独自のHTMLファイルを作成できます。ここにテストフォルダーが作成されます。元のHelloWorldファイルをテストにコピーし、それに基づいて変更
できます。次のアドレスからアプリケーションを表示します。
三。3dTilesモデルを公開する
1.3Dモデルをコピーして公開する
3DモデルのSceneフォルダーをwebappフォルダーにコピーします。
ロードするときに、対応するtest3dモデルのjsonファイルを
ロードします。モデルコードの一部をロードします。
2.モデル位置調整
モデルは、作成時に現在の球の座標系と一致していない可能性があり、空中に浮かんでいます。モデルの位置は、モデルの平行移動のパラメータを調整することで調整できます。
四。シェープファイルデータを追加する
（1）データをコピーします。
インターネットが提供するCesiumVectorTile.jsライブラリを介してロードします。ダウンロードアドレス：https：//download.csdn.net/download/suntongxue100/12715639
次に、道路形状ファイルデータをCesiumフォルダーにコピーします：
（2 ）コード
追加参照：
表示効果：
残りの問題：現在、シェイプファイルデータの表示は3Dモデルでカバーされますが、3Dモデルの表示に合わせる方法を探しています。
ファイブ。地形を増やす
demスライスデータを作成するには、gdal2srtmtilesツールを使用し、ツールのダウンロードアドレスについてブログを参照してください：https：//blog.csdn.net/qq_36377037/article/details/86300330
ツールの使用法に関するドキュメントは非常に完成していますが、現在いくつかの問題があるようで、フロントエンドの読み込みでタイルが失われます。
準備されたスライスの配置：
コードの読み込み：
全体的な効果：
完全なコード：
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Use correct character set. -->
<meta charset="utf-8" />
<!-- Tell IE to use the latest, best version. -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
/>
<title>test</title>
<script src="../Build/Cesium/Cesium.js"></script>
<script src="../js/CesiumVectorTile.js"></script>
<style>
@import url(../Build/Cesium/Widgets/widgets.css);
html,
body,
#cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<script>
//var viewer = new Cesium.Viewer("cesiumContainer");
var terrainProvider = new Cesium.CesiumTerrainProvider({
url: "../terraintiles" });
var viewer = new Cesium.Viewer('cesiumContainer',{
terrainProvider:terrainProvider,
animation:false, //是否显示动画控件
homeButton:true, //是否显示home键
//geocoder:false, //是否显示地名查找控件 如果设置为true，则无法查询
baseLayerPicker:false, //是否显示图层选择控件
timeline:false, //是否显示时间线控件
fullscreenButton:true, //是否全屏显示
scene3DOnly:true, //如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
infoBox:true, //是否显示点击要素之后显示的信息
sceneModePicker:false, //是否显示投影方式控件 三维/二维
navigationInstructionsInitiallyVisible:false,
navigationHelpButton:false, //是否显示帮助信息控件
selectionIndicator:false, //是否显示指示器组件
//加载谷歌卫星影像
imageryProvider : new Cesium.UrlTemplateImageryProvider({
url:"http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali"})
});
viewer.scene.globe.depthTestAgainstTerrain = true; //make the vector features stick to the terrain
viewer._cesiumWidget._creditContainer.style.display = "none"; // 去除版权信息
//var tileset = new Cesium.Cesium3DTileset({ url: modeldata/3Dtilesdata(3839) });
var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
url: 'http://192.168.64.236:8080/Scene/test3d.json',
maximumScreenSpaceError: 2,
maximumNumberOfLoadedTiles: 1000
}));
//move
var translation=Cesium.Cartesian3.fromArray([20,50,-1aa0]);
m= Cesium.Matrix4.fromTranslation(translation);
//move生效
tileset._modelMatrix = m;
viewer.scene.primitives.add(tileset);
tileset.readyPromise.then(function(tileset) {
viewer.scene.primitives.add(tileset);
viewer.zoomTo(tileset, new Cesium.HeadingPitchRange(0.5, -0.2, tileset.boundingSphere.radius * 1.0));
}).otherwise(function(error) {
console.log(error);
});
//load shpfile
var VectorTileImageryProvider = Cesium.VectorTileImageryProvider;
var roadsshp = new VectorTileImageryProvider({
source: "../shp/roads.shp",
defaultStyle: {
outlineColor: "rgb(255,0,0)",
lineWidth: 5
});
roadsshp.readyPromise.then(function () {
viewer.imageryLayers.addImageryProvider(roadsshp);
});
</script>
</body>
</html>