Vue中使用geoserver中得wmts

Posted 2023-03-18

参考技术A import TileLayer from "ol/layer/Tile"

import WMTS from 'ol/source'

import getWidth, getTopLeft from 'ol/extent.js';

import get as getProjection from 'ol/proj.js';

import WMTSTileGrid from 'ol/tilegrid/WMTS.js';

 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", "EPSG:4326:19", "EPSG:4326:20", "EPSG:4326:21"

    ];

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

let projection = getProjection('EPSG:4326'); // 获取web墨卡托投影坐标系

    let projectionExtent = projection.getExtent(); // web墨卡托投影坐标系的四至

    let wmtsTileGrid = new WMTSTileGrid(

        origin: getTopLeft(projectionExtent), // 原点（左上角）

        resolutions: resolutions, // 分辨率数组

        matrixIds: matrixIds // 矩阵ID，就是瓦片坐标系z维度各个层级的标识

    );

    var maplayer = new TileLayer(

        source: new WMTS(

            url: "http://127.0.0.1:8090/geoserver/gwc/service/wmts",

            matrixSet: 'EPSG:4326',

            layer: 'qds:dom_full', //图层名称

            format: 'image/png',

            projection: projection,

            tileGrid: wmtsTileGrid,

            wrapX: true

        )

    );

let view = new View(

      projection: "EPSG:4326", //使用这个坐标系

      zoom: 15,

      center: [115.10365, 30.16098],

      duration: 1000,

    );

    this.map = new Map(

      target: "map",

      layers: maplayer ,

      view: view,

    );

Geoserver WMTS 瓦片元数据

【中文标题】Geoserver WMTS 瓦片元数据

【英文标题】：Geoserver WMTS Tile Metadata

【发布时间】：2018-06-07 13:15:29

【问题描述】：

我正在使用 Geoserver 在现有 WMS 服务的帮助下部署 WMTS 服务。总的来说效果很好，但我需要添加一些“使用条款”。有没有办法将类似的内容添加到平铺图像 (png) 的元数据或给平铺加水印？

【参考方案1】：

WMTS 并没有真正与图块相关联的元数据的概念，您可以做的最好的事情是在层摘要中添加一个注释，该注释将出现在功能文档中（并且不太可能被人类阅读）。

添加水印的一种可能性是创建一个大于现有 WMS 图层的多边形图层，然后使用您的水印为其创建图形填充，并在必要时使用 graphic-margin 将其展开。然后将两个图层组合到一个图层组中，以便在瓷砖中适当地添加水印。确保将 WMS 图层标记为非 Advertised，以防止人们在没有标记的情况下请求它。