Openlayers同时加载geoserverEPSG:3857和EPSG:4326图层WMTS服务

晚秋10

已于 2023-12-28 10:44:04 修改

阅读量784

点赞数 11

分类专栏： Geoserver 文章标签： geoserver openlayers wmts

于 2023-12-28 10:43:01 首次发布

本文链接：https://blog.csdn.net/chenguizhenaza/article/details/135263510

版权

Geoserver 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

Openlayers同时加载geoserverEPSG:3857和EPSG:4326图层WMTS服务

参数对照参考：OpenLayers加载Geoserver发布的WMTS服务，坐标系EPSG:3857-CSDN博客

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>OpenLayers-Demo</title>
        <script src="ol.js"></script>
        <link rel="stylesheet" href="index.css" />
    </head>

    <body>
        <div id="map"></div>
        <script type="text/javascript">
		 /*3857*/
        const projection = ol.proj.get('EPSG:3857');
        const projectionExtent = projection.getExtent();
        const size = ol.extent.getWidth(projectionExtent) / 256;
        const resolutions = new Array(20);
        const matrixIds = new Array(20);
        for (let z = 0; z < 20; ++z) {
            resolutions[z] = size / Math.pow(2, z);
            matrixIds[z] = "EPSG:3857_test:" + z;
        }
		
		/*4326*/
		const projection1 = ol.proj.get('EPSG:4326');
        const projectionExtent1 = projection1.getExtent();
        const size1 = ol.extent.getWidth(projectionExtent1) / 256;
        const resolutions1 = new Array(16);
        const matrixIds1 = new Array(16);
        for (let z = 0; z < 16; ++z) {
            resolutions1[z] = size1 / Math.pow(2, z);
            matrixIds1[z] = "EPSG:4326_test1:" + z;
        }
		
            const layer1 = new ol.layer.Tile({
                source: new ol.source.WMTS({
                    url: '"http://localhost:8080/geoserver/gwc/service/wmts',
					layer:"test",
					format:'image/jpeg',
                    matrixSet: 'EPSG:3857_test',
					projection: ol.proj.get('EPSG:3857'),
                    tileGrid: new ol.tilegrid.WMTS({
                    origin: ol.extent.getTopLeft(projectionExtent),
                                    resolutions: resolutions,
                                    matrixIds: matrixIds,
                    }),
					 style: '',
                     wrapX: true,
                }),
            });
			
			 var layer2 = new ol.layer.Tile({
                    source: new ol.source.WMTS({
                    url: '"http://localhost:8080/geoserver/gwc/service/wmts',
					layer:"test1",
					format:'image/png',
                    matrixSet: 'EPSG:4326_test1',
					projection: ol.proj.get('EPSG:4326'),
                    tileGrid: new ol.tilegrid.WMTS({
                    origin: ol.extent.getTopLeft(projectionExtent1),
                                    resolutions: resolutions1,
                                    matrixIds: matrixIds1,
                    }),
					 style: '',
                     wrapX: true,
                }),
            });

            const map = new ol.Map({
                layers: [layer1,layer2],
                target: 'map',
                view: new ol.View({
                    center: ol.proj.fromLonLat([126.633,45.743]),
                    projection: 'EPSG:3857',
                    zoom: 5,
                }),
            });

            map.on('click', function (e) {
                console.log(e);
            });
        </script>
    </body>
</html>