geoserver的安装和启动在上篇
发布tif
关于geoserver发布tif 的教程是比较多的,下面是发布单个tif的步骤
新建工作空间
存储仓库
根据类型,tif 选择geotiff
浏览,弹窗选择tif文件,添加名称(推荐英文),说明。点保存。
跳转到-发布
跳转到-编辑图层
修改空间参考系
修改后,点击 从数据中计算、compute from native bounds
不切片的话,可以直接保存了。
预览:
上面的地址就是wms服务的url.
当在地图引擎加载时,需要参照官方demo,对url进行修改调整。
ps:难点在于多个tif的发布和重叠处理,切片处理。后续更新。
关于跨域
当地图引擎提示你跨域了,大致三种方法解决,nginx是比较便捷的方案,vue等框架里头也可以配置,这里讲另外一种。
将这三个文件
拷贝到 如下位置
stop geoserver
打开web.xml
解开注释
和
保存。start geoserver
如果提示无法保存,正在占用··· 可以将web.xml拷贝到桌面修改完再放进去。
现在,本机访问url应该不会提示跨域了。
antv L7访问wms
这是geoserver 图层预览 F12 network 暴露的url,复制它,再修改BBOX={bbox}
// WMS 底图 BBOX获取数据
const url =
'http://localhost:8080/geoserver/water/wms?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&FORMAT=image%2Fjpeg&TRANSPARENT=true&STYLES&LAYERS=water%3A%E5%AE%9D%E5%AE%89%E5%8C%BA16%E7%BA%A7&exceptions=application%2Fvnd.ogc.se_inimage&SRS=EPSG%3A4326&WIDTH=521&HEIGHT=768&BBOX={bbox}'
const layer = new RasterLayer({
zIndex: 3,
}).source(url, {
parser: {
type: 'rasterTile',
tileSize: 256,
zoomOffset: 0,
},
});
scene.on('loaded', () => {
scene.addLayer(layer1);
//scene.addLayer(layer2);
scene.addLayer(layer);
});