使用cesium库引入geoserver发布的图片，以及GDAL的安装

前端文文想做前百分之20
629 阅读2分钟

1. 需求

我这个需求是一个可视化页面，要在cesium的地图上贴一个3D建模渲染好的鸟瞰图。

2.分析需求和流程

因为不精通这方面的技术，所以只能一步一步去想怎么实现，最后梳理了一下，流程如下：
1.图片准备阶段
我们拿到渲染出的图片之前，一般UI先会给3D渲染出来的图片添加一些美化等操作，图片渲染质量就看他们前置准备的图片质量程度了，如果分辨率太低，放大看就特别糊

2.使用GDAL给图片添加地理信息
这块下面单开一块细说流程：ps(geoserver在发布细节选项时可以指定x,y轴的最大最小值，也就是图片的地理信息；但是在设置grid的配置那块我没有研究，所以我用的gdal)

3.上传图片到geoserver服务器上
具体geoserver服务器怎么搭到线上环境大家需要自己摸索，我只是用tomcat本地起了一个服务
第一步：登录geoserver创建工作区，添加工作区

1.png

第二步：添加数据储存-》然后选择栅格数据源geotiff格式-》连接参数渲染gdal处理好的tif文件-》发布

2.png

第三步：找到layer Preview 预览图层，浏览器开发者调试之后查看network，查看相关参数

第四步：使用cesium的WebMapServiceImageryProvider接收geoserver发布的地图服务，因为cesium的地理坐标系默认是wgs84也就是EPSG:4326，所以gdal存范围的时候要制定这个地理坐标系，下面代码块的参数都能在network中查看。

var provider = new Cesium.WebMapServiceImageryProvider({
		url: '/geoserver/test2/wms',
		layers: 'test2:1',
		parameters: {
			transparent: true,
			format: 'image/png',
			srs: 'EPSG:4326',
			styles: ''
		}
	});

	viewer.imageryLayers.addImageryProvider(provider);

3.GDAL下载使用

网上的下载安装教程几乎全部都是让装paython的环境啥的，所以没啥办法。我选择了安装paython的包管理工具conda来安装gdal，流程如下 1.去Miniconda官网下载

2.打开 Anaconda Prompt，安装gdal 这里在计算机搜索 Anaconda Prompt，输入命令行

conda install -c conda-forge gdal

这里建议不用魔法下载，因为网络不稳定会重新下很多次，导致文件夹体积特别大。

3.命令行cd到你要增加地理信息的的文件夹下输入命令行

gdal_translate -of GTiff -a_ullr 121.23866646860344 39.53500847988142  121.33685146427351 39.555846723906505  -a_srs EPSG:4326 1.png 1.tif

四个经纬度参数指定的是图片地理的范围，最后两个参数是输入的图片名称，和输出的图片名称。

OK，大功告成，有什么问题可以多留言交流哈，我在这里就属于整理整理笔记。

avatar
文章
阅读
粉丝