openlayers+vue实现访问天地图WMTS图像服务详解

原创

已于 2024-06-27 17:00:14 修改 · 1.3k 阅读

29 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2024-06-26 14:24:29 首次发布

文章目录

1.认识WMTS参数属性
2.附源码、效果截图

1.认识WMTS参数属性

1.1 projection，获取投影对象

	import {get} from 'ol/proj.js';
	var projection = get('EPSG:3857')  //根据投影获取投影对象

1.2 getExtent，获取视图投影范围

    var projectionExtent = projection.getExtent() //获取视图投影（或用户投影，如果设置）中当前绘制的范围

extent，图层渲染的区域，即浏览器窗口中可见的地图区域。extent 是一个矩形范围，格式是[number, number, number, number] 分别代表 [left, bottom, right, top]为了提升渲染效率和加载速度，extent范围之外的瓦片是不会请求的，当然也不会渲染；
1.角落{‘左下’} {‘右下’} {‘左上’} {‘右上’}
2.代表范围的数字数组：[minx, miny, maxx, maxy]。

1.3 ol/tilegrid/wmts，设置 WMTS 服务器的图块数据的图层源。

extent：切片网格的范围。源不会请求超出此范围的切片TileSource。当未配置origin时，将设置为范围的左上角。
origin：瓦片网格原点，即x和y轴相交的位置（[z, 0, 0]）。瓦片坐标从左到右和向下增加。如果未指定则origins必须提供。
origins：针对每个缩放级别，图块网格原点，即x和y轴相交的位置（[z, 0, 0]）。如果指定，数组长度应与数组长度匹配resolutions，即每个分辨率可以有不同的原点。图块坐标从左到右和向下增加。如果未指定，extent则o