ol 加载geoserver wms wmts mvt

  1. ol 加载geoserver wms
    1. 代码如下
    2. <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>geoserver-wms</title>
        <link href="https://cdn.bootcdn.net/ajax/libs/openlayers/4.6.5/ol-debug.css" rel="stylesheet">
        <script src="https://cdn.bootcdn.net/ajax/libs/openlayers/4.6.5/ol-debug.js"></script>
        <style>
            html,
            body,
            #map {
                width: 100%;
                height: 100%;
                padding: 0;
                margin: 0;
            }
        </style>
    </head>
    <body>
        <div id="map"></div>
    </body>
    <script>
        var projection4326 = new ol.proj.Projection({
            // code: 'EPSG:4490',
            code: 'EPSG:4326',
            units: 'degrees',
        });

        var defaultView = new ol.View({
            projection: projection4326,
            center: [113.3939, 22.977],
            //new ol.proj.fromLonLat([114.15, 22.65]),
            zoom: 10
        });



        //wms 服务
        let testlyr = new ol.layer.Tile({
            source: new ol.source.TileWMS({
                url: "http://localhost:8880/geoserver/gwc/service/wms",
                params: {
                    'FORMAT': 'image/png',
                    'VERSION': '1.0.0',
                    tiled: true,
                    style: "",
                    layers: 'postgis:ceshi0606',
                }
            })
        })

    
        //底图
        let tileOSM = new ol.layer.Tile({
          //source: new OSM()
          source: new ol.source.OSM()
        });

        var map = new ol.Map({
            controls: ol.control.defaults().extend([
                new ol.control.ScaleLine({
                    units: 'degrees'
                })
            ]),
            layers: [testlyr],
            target: 'map',
            view: defaultView
        });
    </script>
</html>
      View Code

       

  2. ol 加载geoserver wmts
    1. 代码如下

    2.  

      <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>geoserver-wmts</title>
		<link href="https://cdn.bootcdn.net/ajax/libs/openlayers/4.6.5/ol-debug.css" rel="stylesheet">
		<script src="https://cdn.bootcdn.net/ajax/libs/openlayers/4.6.5/ol-debug.js"></script>
		<style>
			html,
			body,
			#map {
				width: 100%;
				height: 100%;
				padding: 0;
				margin: 0;
			}
		</style>
	</head>
	<body>
		<div id="map"></div>
	</body>
	<script>
		var projection4326 = new ol.proj.Projection({
			// code: 'EPSG:4490',
			code: 'EPSG:4326',
			units: 'degrees',
			extent: [-180, -90, 180, 90]
		});
		var projection4326 = ol.proj.get('EPSG:4326');

		var defaultView = new ol.View({
			projection: projection4326,
			center: [113.3939, 22.977],
			//new ol.proj.fromLonLat([114.15, 22.65]),
			zoom: 10
		});


		
		


		//wmts 服务	
		const projectionExtent = projection4326.getExtent();
		//console.log(ol.extent.getTopLeft(projectionExtent));  //[-180, 90]
		const size = ol.extent.getWidth(projectionExtent) / 256;
		// const resolutions = new Array(19);
		const matrixIds = new Array(19);
		for (let z = 0; z < 19; ++z) {
			// resolutions[z] = size / Math.pow(2, z);
			matrixIds[z] = "EPSG:4326:" + z;
		}
		
		let 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, 1.341104507446289E-6, 6.705522537231445E-7, 3.3527612686157227E-7];
		
		var wmtsSource = new ol.source.WMTS({
			url: 'http://localhost:8880/geoserver/gwc/service/wmts',
			layer: "postgis:ceshi0606",
			matrixSet: 'EPSG:4326',
			format: 'image/png', // 默认：'image/jpeg'	
			projection: projection4326,
			tileGrid: new ol.tilegrid.WMTS({
				origin: ol.extent.getTopLeft(projectionExtent),
				resolutions: resolutions,
				matrixIds: matrixIds,
			}),
			style: '',
			wrapX: true,
			// crossOrigin: 'anonymous', //解决跨域问题，不好使请走nginx
			// serverType: 'GEOSERVER', // wms 平台来源类型
			// tileLoadFunction: function (imageTile, src) { //加header头请求
			//   fetch(src, {
			//     method: 'get',
			//     headers: { "szvsud-license-key":  window.localStorage.baseMapLicenseKey?window.localStorage.baseMapLicenseKey:"b2OW+ghUXAZMQoUKUh49zT4+hmSdjlL65uCcmb+EFXbx/HntOygBZIN75AiGAGVi" },
			//     responseType: 'blob'
			//   }).then(res => {
			//     return res.blob()
			//   }).then(blob => {
			//     imageTile.getImage().src = URL.createObjectURL(blob);
			//   })
			// }
		});
		var wmtsService = new ol.layer.Tile({
			source: wmtsSource
		});
		
		
		var map = new ol.Map({
			controls: ol.control.defaults().extend([
				new ol.control.ScaleLine({
					units: 'degrees'
				})
			]),
			layers: [wmtsService],
			target: 'map',
			view: defaultView
		});
	</script>
</html>

      　　

  3. ol 加载geoserver mvt
    1. 代码如下
    2. <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>geoserver-mvt</title>
        <link href="https://cdn.bootcdn.net/ajax/libs/openlayers/4.6.5/ol-debug.css" rel="stylesheet">
        <script src="https://cdn.bootcdn.net/ajax/libs/openlayers/4.6.5/ol-debug.js"></script>
        <style>
            html,
            body,
            #map {
                width: 100%;
                height: 100%;
                padding: 0;
                margin: 0;
            }
        </style>
    </head>
    <body>
        <div id="map"></div>
    </body>
    <script>
        var projection4326 = new ol.proj.Projection({
            // code: 'EPSG:4490',
            code: 'EPSG:4326',
            units: 'degrees',
            extent: [-180, -90, 180, 90]
        });
        var projection4326 = ol.proj.get('EPSG:4326');

        var defaultView = new ol.View({
            projection: projection4326,
            center: [113.3939, 22.977],
            //new ol.proj.fromLonLat([114.15, 22.65]),
            zoom: 10
        });



        //mvt 服务    
        const projectionExtent = projection4326.getExtent();
        //console.log(ol.extent.getTopLeft(projectionExtent));  //[-180, 90]
        const size = ol.extent.getWidth(projectionExtent) / 256;
        // const resolutions = new Array(19);
        const matrixIds = new Array(19);
        for (let z = 0; z < 19; ++z) {
            // resolutions[z] = size / Math.pow(2, z);
            matrixIds[z] = "EPSG:4326:" + z;
        }

        let 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, 1.341104507446289E-6, 6.705522537231445E-7, 3.3527612686157227E-7
        ];

        //加载geoserver mvt
        var gridsetName = 'EPSG:4326'
        var params = {
            'REQUEST': 'GetTile',
            'SERVICE': 'WMTS',
            'VERSION': '1.0.0',
            'LAYER': 'postgis:ceshi0606',
            'STYLE': '',
            'TILEMATRIX': gridsetName + ':{z}',
            'TILEMATRIXSET': gridsetName,
            'FORMAT': 'application/vnd.mapbox-vector-tile',
            'TILECOL': '{x}',
            'TILEROW': '{y}'
        }

        function urlConstruct() {
            let url = "http://localhost:8880/geoserver/gwc/service/wmts" + '?';
            for (let param in this.params) {
                url = url + param + '=' + this.params[param] + '&';
            }
            url = url.slice(0, -1);
            return url;
        }

        //mvt
        var mvtvectorLayer = new ol.layer.VectorTile({
            source: new ol.source.VectorTile({
                format: new ol.format.MVT(),
                projection: projection4326,
                tilePixelRatio: 1,
                tileGrid: new ol.tilegrid.WMTS({
                    origin: ol.extent.getTopLeft(projectionExtent),
                    resolutions: resolutions,
                    matrixIds: matrixIds,
                }),
                url:urlConstruct(),
                //url: "http://localhost:8880/geoserver/gwc/service/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER=postgis:ceshi0606&STYLE=&FORMAT=application/vnd.mapbox-vector-tile&TILEMATRIX=EPSG:4326:{z}&TILEMATRIXSET=EPSG:4326&TILECOL={x}&TILEROW={y}"
            })
        })

        var map = new ol.Map({
            controls: ol.control.defaults().extend([
                new ol.control.ScaleLine({
                    units: 'degrees'
                })
            ]),
            layers: [mvtvectorLayer],
            target: 'map',
            view: defaultView
        });
    </script>
</html>
      View Code

       

posted @ 2023-07-26 15:06  小鱼写代码的过往  阅读(120)  评论(0)  编辑  收藏  举报