需要的工具:
cesiumlab :Cesium实验室官网
nginx:nginx: download
cesiumlab上一章已经讲了如何使用
简单说一下nginx
打开nginx所在的文件夹cmd进入该文件夹输入nginx -v查看版本号
nginx常用命令:
启动Nginx:start nginx 或者 nginx
快速停止或关闭Nginx:nginx -s stop
正常停止或关闭Nginx:nginx -s quit
配置文件修改重装载命令:nginx -s reload
打开nginx文件夹找到conf文件夹进入找到nginf.conf文件打开
添加代码;
箭头是需要改的地方,第一个设置你自己的端口号,第二个设置你的项目所在位置,第三个切片数据所在位置,第四个你的项目端口位置,我通过8080端口发布服务,当请求地址带有/terrain的时候反向代理8081
server {
listen 8080;
add_header Access-Control-Allow-Origin $http_origin;
add_header Access-Control-Allow-Credentials true;
add_header Access-Control-Allow-Headers Origin,X-Requested-Width,Content-Type,Accept;
add_header Access-Control-Allow-Methods *;
add_header Access-Control-Max-Age 1728000;
if ($request_method = 'OPTIONS') {
return 204;
}
location / {
alias D:/code/huanglei/cesium-demo;
index index.html index.htm;
}
location /terrain {
alias C:/Users/admin/Desktop/utils/cesium;
autoindex on;
autoindex_localtime on;
proxy_pass http://172.16.70.233:8081;
}
}
浏览器输入地址:http://localhost:8080/terrain/
出现这表示发布成功:
项目代码:
const viewer = new Cesium.Viewer("cesiumContainer", {
// 我使用高德影像地形地图
imageryProvider: new Cesium.UrlTemplateImageryProvider({
url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
}),
fullscreenButton:false,
baseLayerPicker: false, //是否显示图层选择控件
selectionIndicator: false,
animation:false,
inforbox:false,
timeline:false,
terrainProvider: new Cesium.CesiumTerrainProvider({
url: 'http://172.16.70.233:8080/terrain'
}),
sceneMode:3
});
实际效果图: