首页 > 其他分享 >ol 加载geoserver wms wmts mvt

ol 加载geoserver wms wmts mvt

时间：2023-07-26 15:26:41浏览次数：70  
标签：ol mvt wms EPSG projection4326 geoserver var new

  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

       

标签：ol,mvt,wms,EPSG,projection4326,geoserver,var,new
From： https://www.cnblogs.com/hjyjack9563-bk/p/17582532.html

相关文章

  • ThreadPoolExecutor
    任务类型1、java.lang.Runnable@FunctionalInterfacepublicinterfaceRunnable{/***Whenanobjectimplementinginterface<code>Runnable</code>isused*tocreateathread,startingthethreadcausestheobject's*<c......
  • 基于Hologres向量计算与大模型免费定制专属聊天机器人
    简介：本文为您介绍如何基于Hologres向量计算能力，结合大模型的阅读理解和信息整合能力，对该垂直行业的问题提供更贴切的回答，即费、快速定制专属聊天机器人。背景信息大模型可以广泛应用于各行各业。使用大模型定制聊天机器人，除了训练大模型的方式外，还可以使用提示词微调（Prompt-tuning）......
  • A Brief History of Big Data Technology Development
    ForewordBeforewritingthisarticle,Iwroteaboutthehistoryofsomebigdatacomponentsandsomeofitsevaluationsintermittently,butIfeltunsatisfactory.Historyshouldbecontinuousandhaveitsinherentlaws,soIwantedtowriteanarticleto......
  • 使用 Apache DolphinScheduler 进行 EMR 任务调度
    ByAWSTeam前言随着企业规模的扩大，业务数据的激增，我们会使用Hadoop/Spark框架来处理大量数据的ETL/聚合分析作业，⽽这些作业将需要由统一的作业调度平台去定时调度。在AmazonEMR中，可以使用AWS提供StepFunction，托管AirFlow，以及ApacheOozie或Azkaban进行作业的......
  • Drools规则引擎学习（一）
    全称为业务规则管理系统，英文名为BRMS（即BusinessRuleManagementSystem）。规则引擎的主要思想是将应用程序中的业务决策部分分离出来，并使用预定义的语义模板编写业务决策（业务规则），由用户或开发者在需要时进行配置、管理。需要注意的的规则引擎并不是一个具体的技术框架，而是指的一类......
  • vue--day44-todolist的localStorage本地存储
    添加修改删除数据发生变化，可以用watch监测来实现监测数据的变化1.App.vue  <template><divid="root"><divclass="todo-container"><divclass="todo-wrap"><!--传递函数儿子给父亲传东西,父亲偷偷传递一个函数，儿子调用这个函数--><MyHeader:addTodo=&q......
  • sql server Col_Name函数
    SQLServerCol_Name函数详解在SQLServer中，Col_Name函数用于获取指定表中的列名。它能够返回指定的列序号对应的列名，帮助我们更方便地处理数据库中的列。语法Col_Name函数的语法如下：COL_NAME(object_id,column_id)其中，object_id是要查询的表的对象ID，column_id是要查询......
  • Solon 框架，单月下载量突破 200 万了！
    Solon是什么开源项目？一个，Java新的生态型应用开发框架。它从零开始构建，有自己的标准规范与开放生态（历时五年，已有全球第二级别的生态规模）。与其他框架相比，它解决了两个重要的痛点：启动慢，费内存。关键记事：2021年1月，正式对外开源2022年7月，建立官网，发力推广2023年2月，v2.0发布......
  • 题解 CF1501B 【Napoleon Cake】
    postedon2021-03-1617:42:06|under题解|source题目可以转化一下：给一个长为\(n\)的数组\(a\)，请求出一个长为\(n\)的数组\(b\)。要求若\(a_i\)不为\(0\)，则\([b_{i-a_i+1},b_i]\)这个区间要为\(1\)。知道这个题目意思就好办了。题目说\(n\leq2\times10^5\)，......
  • terrasolid是什么？和microstation v8i的关系？
    Terrasolid这款软件需要在MicroStationV8i这个软件的运行环境下才能使用。参考：https://www.cnblogs.com/yibeimingyue/p/15589355.html参考2：https://wenku.baidu.com/view/4f5aa22e660e52ea551810a6f524ccbff121ca1b.html参考3：https://download.csdn.net/download/hhudxy2010/......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99