在geoserver发布图层并叠加入天地图_geoserver 天地图-CSDN博客

本文链接：https://blog.csdn.net/WhynLight/article/details/94553734

发布图层（tif）：

1.把地图数据放入geoserver安装目录的data_dir目录下。

2.创建工作区

点击工作区----》填写工作区名字-----》填写URI-----》提交

3.创建数据存储

数据存储-----》添加新的数据存储

选择Geo TIFF

选择工作区---》填写数据源名称---》点击浏览从数据存储中选择数据---》保存

4.发布图层

图层---》添加新的资源

选择图层---》发布

查找4326---》选择EPSG:4326---》点击Compute from SRS bounds---》Compute from native bounds---》保存

4.获取服务url

进入Layer Preview

找到发布的图层，点select one，选择png

可以打开一个页面，这个地址就是访问图层服务的url

5.在天地图中叠加发布的图层，参数可以对照前面获取到的服务url填写

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content="天地图"/>
    <title>天地图－地图API－范例－叠加其它wms服务图层</title>
    <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=秘钥"></script>
    <style type="text/css">
    body, html {
        width: 100%;
        height: 100%;
        margin: 0;
        font-family: "Microsoft YaHei"
    }

    #mapDiv {
        width: 100%;
        height: 400px
    }

    input, b, p {
        margin-left: 15px;
        font-size: 14px
    }
    </style>
    <script type="text/javascript">
        var map;
        var zoom = 6;
        var wmsLayer;
        function onLoad() {
            map = new T.Map('mapDiv');
            map.centerAndZoom(new T.LngLat(116.40769, 39.89945), zoom);
            map.setMinZoom(1);
            map.setMaxZoom(16);
        }

        function getWMS(url, config) {
            if (wmsLayer) {
                map.removeLayer(wmsLayer);
            }
            wmsLayer = new T.TileLayer.WMS(url, config);
            map.addLayer(wmsLayer);
        }

        function addWmsLayer(layers, url) {
            var config = {
                version: "1.1.0",	//请求服务的版本
                layers: layers,
                transparent: true,	//输出图像背景是否透明
                styles: "",			//每个请求图层的用","分隔的描述样式
                format: "image/png",	//输出图像的类型
                srs: "EPSG:4326"
            };
            getWMS(url, config);
        }

    </script>
</head>
<body onLoad="onLoad()">
<div id="mapDiv"></div>
<p>本示例演示如何叠加其它WMS服务图层。</p>
<div style="position:absolute;">
    <p>叠加一个WMS图层，服务地址为：http://gisserver.tianditu.com/tiandituService/wms</p>
    <input type="button" value="叠加WMS服务图层" onClick="addWmsLayer('works:Night','http://localhost:8080/geoserver/works/wms')"/>
    <input type="button" value="删除WMS服务图层" onClick="map.removeLayer(wmsLayer);"/>
</div>
</body>
</html>