Foreword: Novice Xiaobai, preliminary exploration process.
One. Java and Tomcat environment configuration
tomcat8.0.47 version, JAVA 8
1. Install JAVA and set environment variables
JAVA can be installed normally without changing the installation directory.
Configure environment variables JAVA_HOME and PATH:
enter where java to check the java installation directory, if it is the installation directory just now, it means the installation is correct:
2. Install tomcat green version
Unzip it and place it in the specified directory, and then set the environment variables.
New environment variable:
CATALINA_BASE C:\tomcat\apache-tomcat-8.0.47
CATALINA_HOME C:\tomcat\apache-tomcat-8.0.47
PATH %CATALINA_HOME%\lib;%CATALINA_HOME%\bin; add to the end
Set tomcat service and automatic start
Installation service---- install.bat
Create install.bat file in C:\tomcat\apache-tomcat-8.0.47 directory, and then copy the intermediate code of the following line segment to this file and save it.
@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
After the copy is complete, right-click to run install.bat in administrator mode. If the installation is successful, you should be able to view the tomcat service in the service list.
Uninstall service----delete.bat
If the installation is unsuccessful, you can create a delete.bat file to uninstall the service. Copy the code in the middle of the following line segment to the delete.bat file.
@echo off
echo "开始执行卸载"
echo 停止Tomcat8服务
net stop Tomcat8
echo 删除Tomcat8服务
call %~dp0%bin/service.bat remove
echo "卸载完成"
pause
Run the delete.bat file as an administrator to delete the generated tomcat service.
Then right-click to run install.bat in administrator mode. If the installation is successful, you should be able to view the tomcat service in the service list.
Tomcat access interface: http://localhost:8080/
3. Cross-domain issues
(1) Modify and add code in the web.xml file:
<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) Add the corresponding cross-domain processing package:
download address: https://download.csdn.net/download/caozl1132/11759866
two. Cesium installation and deployment
Official website download address: https://cesium.com/downloads/
Download the program and place it under Tomcat Webapp:
you can create your own project folder and create your own HTML file in the folder. The test folder is created here, you can copy the original HelloWorld files to the test, and modify it on the basis:
view the application through the following address:
three. Publish 3dTiles model
1. Copy and publish 3D model
Copy the 3D model Scene folder to the webapp folder: When
loading, load the json file of the corresponding test3d model:
Load part of the model code:
2. Model position adjustment
The model may not be in line with the current sphere's coordinate system when it is produced, causing it to float in the air. The position of the model can be adjusted by adjusting the parameters of the model's translation:
four. Add Shapefile data
(1) Copy the data.
Load through the CesiumVectorTile.js library provided by the Internet. Download address: https://download.csdn.net/download/suntongxue100/12715639
Then copy the road shapefile data to the Cesium folder:
(2) Code
Add reference:
Display effect:
Remaining problem: At present, the shapefile data display will be covered by the 3D model, and we are still looking for a way to fit the 3D model display.
Fives. Increase terrain
To make dem slice data, use the gdal2srtmtiles tool, and refer to the blog for the tool download address: https://blog.csdn.net/qq_36377037/article/details/86300330
The tool usage documentation is very complete, but there seems to be some problems at present, and the front-end loading will lose tiles.
Placement of the prepared slice:
code loading:
overall effect:
complete code:
<!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>