Article directory
foreword
Slice the map data directly, and then publish it as a static service through nginx .
use tools:
- Map New Earth Extraction code: oznv————————————————————————————————————————————————————————————————————————Used to download the map
- Red bean earth Extraction code: 2thg—————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————— TO DOWNLOAD THE MAP
- Nginx extraction code: wnjl—————————————— proxy server, used for tile data release
- Cesiumlab extraction code: iey3————————————for data slicing
- MapBox image extraction code: 48dt—————————————— used to load images
- Test source code Extraction code: 1cpt——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————, all files in the Test directory
- Topographic data of Qixing District, Guilin City Extraction code: ee1k————————— Raw topographic data and processed data of Qixing District, Guilin City
1. Cesium loads offline maps
1.1 Download data
Open the red bean earth and drag it directly to load the MapBox image
Click to download global
new download
Since the download speed is very slow without paying, you have to find a software with a faster download speed, which is proposed in 2.4 improvement.
2.2 Data processing
Output Data
2.3 Map release
First download nginx on the official website (there is a Baidu cloud link in the preface), and download the stable version for windows.
After downloading, unzip it, do not run nginx.exe directly, but run it through the command line.
Use the cd command to reach the decompressed directory of nginx
cd C:UsersLenovoDesktop ginx-1.22.0
Use the start command to start the nginx service, and a window will flash past.
start nginx
Check whether the task process exists, dos input:
tasklist /fi “imagename eq nginx.exe”
Finally, visit http://localhost/ with a browser to see the successful deployment page.
Then modify the configuration file. The functions of each folder in the configuration directory are shown in the figure below. Only the files in the conf directory are modified here.
Find nginx.conf in the conf directory and open it with vscode. Find the server node and modify it as follows (delete all the original server functions).
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;
}
}
Save after the modification is complete, use the following command to check whether the configuration file is correct, followed by the path of the nginx.conf file, successful means it is correct.
nginx -t -c /Users/Lenovo/Desktop/nginx-1.22.0/conf/nginx.conf
Use the following command to reload nginx, note: every time you modify the configuration file, you must reload it with the command
nginx -s reload
Here, create two new folders in the desktop Test to store Cesium and data
Put the file of the first Cesium APP (hello world) in CesiumDemo
Put the exported data in the data folder
Try to access http://localhost/map/ through the browser to see the files under the data path
Finally, introduce the tile map service code in index.html in the CesiumDemo folder
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.htmlfull code
<!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>
Open Cesium by visiting http://localhost/ to get the image
2.4 Download speed improvement
The improvement method is to download data faster by using the map new earth, here is a demo to download the map data of Hunan Province
First decompress and double-click to open the map New Earth
Drag the MapBox.lrc layer directly into Map New Earth
Search Hunan Province in the search bar
click to download
Select the plane surrounded by Hunan Province on the map, and then configure the download. Here, download 11 levels of 391.5MB (it can be downloaded in two minutes).
Set the path to download
After downloading, use the official website tool Cesiumlab to slice the image
Choose Hash after choosing 11 levels
Wait for the data to be processed
After processing, delete all the original data in the data folder, then replace all the processed data, and finally revisit http://localhost/ to get a map with only images of Hunan Province.
Tuxin Earth has not yet found a way to download global images, but he can download multiple layers, and will add it later.
References:
2. Cesium loads offline terrain
This is the terrain effect of the official website . The following loads the local offline terrain. The method is the same as loading the offline map. First download the data slice and then publish it through nginx.
2.1 Download data
First download the data on the Geospatial Data Cloud . http://www.gscloud.cn/search ( Qixing District, Guilin City terrain data extraction code: ee1k)
Select the data level to be downloaded, here select the GDEMV3 30M resolution digital elevation data in the DEM digital elevation data.
Then retrieve the data of Qixing district in Guilin, Guangxi.
The actual downloaded data is the data in the larger box in the picture, which is much larger than the Qixing District.
Click on the download tab to download
2.2 Data processing
After downloading, unzip it and open CesiumLab to select terrain slices.
After the configuration is complete, submit it, and also choose hash here .
It actually took half an hour to process (to save time, the terrain has been uploaded to Baidu Cloud: Guilin Qixing District terrain data extraction code: ee1k)
2.3 Terrain Publishing
After processing, create a new terrain folder under the Test folder to store terrain data, and create a new map folder to save the original map data. The files in the terrain folder are shown in the figure.
Find nginx.conf in the conf directory of nginx to modify the configuration file and add it to the server function
ocation /terrain {
alias C:/Users/Lenovo/Desktop/Test/data/terrain;
autoindex on;
autoindex_localtime on;
}
The complete server code is as follows:
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;
}
}
Use the following command to reload nginx, note: every time you modify the configuration file, you must reload it with the command
nginx -s reload
Visit http://localhost/terrain/ in the browser to see that the files in the directory in the terrain have been successfully published.
Finally, introduce the terrain service code in index.html in the CesiumDemo folder
var terrainProvider = new Cesium.CesiumTerrainProvider({
url: 'http://localhost:80/terrain'
});
viewer.terrainProvider = terrainProvider;
Full code:
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;
The local image effect is as shown in the figure
Compare the official image data to find the problem.
References:
2.4 Problems encountered
- Problem: Poor effect, low accuracy, and many small terrains are not displayed
- Reason: It may be because the resolution and accuracy of the downloaded terrain data are low
- Improved: Find terrain data with higher accuracy resolution
Let me introduce myself first. The editor graduated from Jiaotong University in 2013. He used to work in a small company, went to big factories such as Huawei, OPPO, and joined Alibaba in 2018. Until now. I know that most junior and intermediate java engineers want to upgrade their skills, they often need to explore and grow by themselves or enroll in classes, but the tuition fee of nearly 10,000 yuan for training institutions is really stressful. My unsystematic self-study is very inefficient and long, and it is easy to hit the ceiling and the technology stops. Therefore, I collected a copy of "A Complete Set of Learning Materials for Java Development" and gave it to everyone. The original intention is also very simple, that is, I hope to help friends who want to learn by themselves but don't know where to start, and at the same time reduce everyone's burden. Add the business card below to get a full set of learning materials