GeoServer如何发布本地栅格数据切片

最新推荐文章于 2024-04-24 09:22:16 发布

Fosde_Kris

最新推荐文章于 2024-04-24 09:22:16 发布

阅读量2k

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/Dr_Chen_996/article/details/125970522

版权

项目开发过程中需要利用GeoServer发布本地的栅格数据切片，我这边是.png格式的世界地图，具体情况如下：
我的本地栅格图片

具体发布方式

由于目前（2022.7.15）GeoServer发布栅格数据只能用GeoWebCache切片，在网络上找的教程和方法都是将原来切好的数据复制到本地GeoServer的切片目录下，我试了一下发现结果不行，后来找到了利用GeoServer或者本地Tomcat的webapps目录下进行发布，具体方式如下：

将原来拷贝好的数据放到Tomcat或者Geoserver的Webapps目录下(需要在webapps目录下新建文件夹，我这里用map)

本地地图目录

紧接着在map目录下新建.html文件，以下是我的代码

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>世界地图服务</title>
	<link rel="stylesheet" href="css/ol.css">
</head>
<body>
	
	<div id="map" style="width: 100%;height: 900px;"></div>
</body>
</html>
<script src="js/jquery.min.js"></script>
<script src="js/ol.js"></script>
<script type="text/javascript">
    var center = ol.proj.transform([120,30], 'EPSG:4326', 'EPSG:3857');//设置中心位置

    //1、创建地图
    var map = new ol.Map({
        view: new ol.View({ 
            center: center,
            zoom: 1, //瓦片的层级-请根据自身需要
        }),
        target: 'map'
    });

    //2、添加一个使用离线瓦片地图的层
    var offlineMapLayer = new ol.layer.Tile({
        source: new ol.source.XYZ({
			tileUrlFunction: function (tileCoord) {
            var z = tileCoord[0];
            var x = Math.pow(2, z) + tileCoord[1];
            var y = Math.pow(2, z) - Math.abs(tileCoord[2]);
            return "DOM/" + z + "/" + x + "/" + y + ".png"; // 这里我是使用我自己的路径
        }
        })
    });

    //3、将瓦片层级添加到地图里面
    map.addLayer(offlineMapLayer);
</script>

注意：需要添加openlayers的css和js文件，如下图

在这里插入图片描述

ol.source.XYZ代码解释

openlayers中默认的代码切片加载模式用的加载方式和我的本地数据适用的加载模式不一样，我的本地数据如下图：
在这里插入图片描述

从上图不难看出，随着数字的增大，地图切片是由南向北的方向，分别是南极，马达加斯加岛，索马里，阿拉伯半岛，伊朗，里海，哈萨克斯坦，俄罗斯，新地岛，北极，具体对应如下图所示：

以数字02举例，0代表第二级目录(DOM/z/y中的y)，Z轴代表第一级目录(DOM/z)，x代表第三级目录(DOM/z/y/x中的x)，所以图名的加载方式显然是原点在左下角，以此类推。

OpenLayers默认加载方式

在这里插入图片描述
由此我们可以得出，需要将原来的y轴偏移，倒序加载，方法如下
var y = Math.pow(2, z) - Math.abs(tileCoord[2]);
由于我加载的地图默认只有西半球一部分，这部分原因至今依然没有了解，所以我在X轴也改动了一下，我的项目需求也只需要加载东半球部分，所以西半球对我来说无所谓
var x = Math.pow(2, z) + tileCoord[1];
这样就加载成功了，启动GeoServer或者Tomcat，当然本地html也可以打开
在这里插入图片描述