geoserver發布tif矢量數據圖層

cesium加載上傳至geoserver的tif矢量數據_cesium加載tiff-CSDN博客

geoserver安裝及跨域問題解決方案：geoserver安裝及跨域問題解決方案_geoserver 跨域_1 + 1=王的博客-CSDN博客

將TIF上傳至geoserver

啟動geoserver服務，并進入geoserver主頁。

1. 新建工作區

點擊工作區，再點擊添加新的工作區。

?? 2.填入工作區名稱以及命名空間URI，點擊保存。

2. 新建數據源

點擊數據存儲，再點擊添加新的數據存儲。

2. 選擇GeoTIFF

3.填入數據源信息

3. 新建圖層

點擊圖層，再點擊添加新的資源。

2.選擇剛剛創建的數據源，點擊發布

3.設置相關信息

點擊Tile Caching

4. 查看發布的tif

點擊Layer Preview ，找到剛才新建的圖層，點擊OpenLayers。

即可預覽，上傳的tif。

Cesium

cesium官網：Cesium: The Platform for 3D Geospatial。

通過geoserver加載tif

直接上代碼：

引入cesium并創建一個地球

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>九寨溝影像可視化</title><script src="../lib/Cesium/Cesium.js"></script><link href="../lib/Cesium/Widgets/widgets.css" rel="stylesheet"><style>html,body{margin: 0px;padding: 0px;}</style>
</head>
<body><div id="cesiumContainer"></div><script>//Viewer第一個參數容器就是需要上面的div容器承載var viewer = new Cesium.Viewer('cesiumContainer');</script>
</body>
</html>

新建一個圖層

var provider = new Cesium.WebMapServiceImageryProvider({        //創建一個圖層（geoserver中的tif）url:'http://localhost:8080/geoserver/test/wms',         // geoserver服務地址layers: 'test:img05',                                // 工作區名：圖層名parameters: {service : 'WMS',format: 'image/png',srs: 'EPSG:4326',                                 // 坐標系transparent: true,}});

在地圖上顯示

    <script>//Viewer第一個參數容器就是需要上面的div容器承載var viewer = new Cesium.Viewer('cesiumContainer');viewer.terrainProvider = Cesium.createWorldTerrain();       // 加入地形viewer.imageryLayers.remove(viewer.imageryLayers.get(0))        //去掉初始圖層var provider = new Cesium.WebMapServiceImageryProvider({        //創建一個圖層（geoserver中的tif）url:'http://localhost:8080/geoserver/test/wms',         // geoserver服務地址layers: 'test:img05',                                // 工作區名：圖層名parameters: {service : 'WMS',format: 'image/png',srs: 'EPSG:4326',                                 // 坐標系transparent: true,}});viewer.imageryLayers.addImageryProvider(provider); </script>

這時會發現地球上仍然什么都沒有，這是由于我們還沒有設置相機的位置。

//設置相機位置
viewer.camera.setView({destination:Cesium.Cartesian3.fromDegrees(104.14,33.16,200000.0),   // 經緯度和高度});

這樣就看到了想要的效果。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Cesium Start</title><script src="../lib/Cesium/Cesium.js"></script><link href="../lib/Cesium/Widgets/widgets.css" rel="stylesheet"><style>html,body{margin: 0px;padding: 0px;}</style>
</head>
<body><div id="cesiumContainer"></div><script>//Viewer第一個參數容器就是需要上面的div容器承載var viewer = new Cesium.Viewer('cesiumContainer');viewer.terrainProvider = Cesium.createWorldTerrain();       // 加入地形viewer.imageryLayers.remove(viewer.imageryLayers.get(0))        //去掉初始圖層var provider = new Cesium.WebMapServiceImageryProvider({        //創建一個圖層（geoserver中的tif）url:'http://localhost:8080/geoserver/test/wms',         // geoserver服務地址layers: 'test:img05',                                // 工作區名：圖層名parameters: {service : 'WMS',format: 'image/png',srs: 'EPSG:4326',                                 // 坐標系transparent: true,}});viewer.imageryLayers.addImageryProvider(provider); viewer.camera.setView({destination:Cesium.Cartesian3.fromDegrees(104.14,33.16,200000.0),   // 經緯度和高度});</script>
</body>
</html>