openlayers

OpenLayer加载GeoServer发布的WMTS服务

by giser · 2019-04-03

Openlayer对加载切片地图还是很友好的，加载第三方切片地图，提供了XYZ方式加载，如果需要加载本地的切片提供了ol.source.WMTS类，该类可以满足加载利用Geoserver发布的切片服务。

效果图：
在这里插入图片描述
一、瓦片网格对象

        //切片策略
        var tilegrid = new ol.tilegrid.WMTS({
            extent: [-180.0, -90.0, 180.0, 90.0],//范围
            tileSize: [256, 256],
            origin: [-180.0, 90.0],//切片原点
            resolutions: resolutions,//分辨率
            matrixIds: matrixIds//层级标识列表，与地图级数保持一致
        });

关于上述参数在那个地方找
1、点击GridSets
在这里插入图片描述
2、选择切片时候所用的GridSet
在这里我选的EPSG：4326 3、查看参数
1对应extent，2对应tileSize，3对应resolutions，4对应matrixIds，
两外一种查找参数的好方式
1、选择tile Layers

2、选择预览方式
在这里选择png方式
3、右键查看源代码
在这里插入图片描述
需要的参数全部在这里粘贴复制即可

二、demo示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>加载切片服务</title>

    <link href="../script/ol3/ol.css" rel="stylesheet" />
    <script src="../script/ol3/ol.js"></script>
    <style type="text/css">
        #map {
            width:100%;
            height:100%;
        }
    </style>

</head>
<body>
    <div id="map"></div>
    <script>

        //切片名
        var matrixIds = ['EPSG:4326:0', 'EPSG:4326:1', 'EPSG:4326:2',
            'EPSG:4326:3', 'EPSG:4326:4', 'EPSG:4326:5', 'EPSG:4326:6',
            'EPSG:4326:7', 'EPSG:4326:8', 'EPSG:4326:9', 'EPSG:4326:10',
            'EPSG:4326:11', 'EPSG:4326:12', 'EPSG:4326:13', 'EPSG:4326:14',
            'EPSG:4326:15', 'EPSG:4326:16', 'EPSG:4326:17', 'EPSG:4326:18'];
        //分辨率
        var resolutions= [0.703125, 0.3515625, 0.17578125,
            0.087890625, 0.0439453125, 0.02197265625,
            0.010986328125, 0.0054931640625, 0.00274658203125,
            0.001373291015625, 6.866455078125E-4, 3.4332275390625E-4,
            1.71661376953125E-4, 8.58306884765625E-5, 4.291534423828125E-5,
            2.1457672119140625E-5, 1.0728836059570312E-5, 5.364418029785156E-6,
            2.682209014892578E-6]       
        var tileOSM = new ol.layer.Tile({
            source:new ol.source.OSM()
        });
        //切片策略
        var tilegrid = new ol.tilegrid.WMTS({
            extent: [-180.0, -90.0, 180.0, 90.0],//范围
            tileSize: [256, 256],
            origin: [-180.0, 90.0],//切片原点
            resolutions: resolutions,//分辨率
            matrixIds: matrixIds//层级标识列表，与地图级数保持一致
        });
        //设置地图投影
        var projection = new ol.proj.Projection({
            code: 'EPSG:4326',
            units: 'degrees',
            axisOrientation: 'neu'
        });
        var tileSource = new ol.source.WMTS({
            url: 'http://localhost:8080/geoserver/gwc/service/wmts',
            layer:"cite:bou2_4p",
            format: "image/png",
            matrixSet:"EPSG:4326",
            projection: projection,
            tileGrid: tilegrid 

        });
        var tileLayer = new ol.layer.Tile({
            opacity:0.7,
            source: tileSource,
            wrapX:false,
        });
        var View = new ol.View({
            center: [116.46, 39.92],
            projection: "EPSG:4326",
            zoom: 5,
            maxZoom: 8,
            minZoom:2

        })
        var map = new ol.Map({          
            layers: [tileOSM, tileLayer],
            view: View,
            target: 'map',
        });
    </script>
</body>
</html>

Note：

url:请求WMTS服务的url地址参数，即为WMTS服务的基地址。
format：请求WMTS服务的瓦片图像文件格式，一般用png格式，因为用png没有白色的背景。
projection:WNTS瓦片的投影系参数。
tileGrid:瓦片格网信息参数对象，此参数最为关键，使用ol.tilegrid.WMTS对象进行设置。

转载自：https://blog.csdn.net/weixin_40184249/article/details/84615192

相关推荐

Tags: openlayers

You may also like...