Geosever发布栅格瓦片，并在vue中使用openlayer调用该瓦片（WTMS）服务

最新推荐文章于 2025-06-19 09:59:47 发布

原创最新推荐文章于 2025-06-19 09:59:47 发布 · 968 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #geosever

1.什么是栅格瓦片

栅格瓦片（Raster Tiles）是将地图以固定大小（通常为 256x256 像素）的图像块分割后存储的结果。它具有以下特点：

高效加载 地图作为几百甚至上千个小图片切片进行加载，减少了一次性加载整个大图的压力，并且用户在缩放和平移时只加载当前视图区域内的瓦片。
多层级缩放 通过为不同缩放级别预先生成不同分辨率的瓦片，使得用户在缩放时体验平滑，提供更好的交互体验。各个级别组成一个金字塔结构，每个级别的瓦片数目随缩放等级增加而急剧上升。
缓存机制 常用的地图服务（如 GeoServer 提供的 WMTS）会将生成的瓦片保存在缓存中，下次请求直接返回缓存数据，加快访问速度。

简而言之，栅格瓦片技术是 Web 地图应用中非常重要的一环，它能显著提升地图加载速度、降低网络流量和提高用户体验。

2.如何在 GeoServer 发布栅格瓦片并生成缓存切片？并在openlayer调用它

在 GeoServer 中发布栅格数据为瓦片服务主要涉及以下步骤：

数据准备和图层发布
1. 数据准备（建议将栅格文件转为WGS84（投影代码：4326）的投影，本文的所有操作均在该投影下进行）：

2.打开geosever-新建工作空间-新建存储仓库-选择GeoTIFF格式-

1.新建工作空间

2.新建存储仓库（选择tif格式）

3.选择栅格数据源

4.发布图层

这是的级别根据自己的需求选择，我选择的是4326，13级-18级。完成这一步后即可点击保存发布图层。

5.查看图层是否发布成功

6.生成缓存切片（针对较大范围的瓦片，加载会十分缓慢，可以先生成缓存切片可以加快访问速度）

设置完成后点击submit即可，等待运行完成后，即可关闭该页面。这是在按照上一步浏览地图应该会很丝滑。

系统生成的缓存切片存储在如下地址：

7.配置代理，解决跨域问题，打开vue项目-vue.config.js（没有就创建一个）

// vue.config.js
module.exports = {
  devServer: {
    port: 8081,
    proxy: {
      '/geoserver': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        pathRewrite: {
          '^/geoserver': '/geoserver'
        }
      }
    }
  }
}

8.获取先前发布的地图的相关配置信息

先打开预览该地图的网页，按F12，点击source查看源码

直接把这些源码全部丢给ai，让他帮你提取瓦片地图的相关配置（即绿框内参数）

完整的前端代码如下：

<template>
  <div id="map"></div>
</template>

<script>
import 'ol/ol.css';
import { Map, View } from 'ol';
import { Tile as TileLayer } from 'ol/layer';
import { WMTS } from 'ol/source';
import { WMTS as WMTSTileGrid } from 'ol/tilegrid';

export default {
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      const map = new Map({
        target: 'map',
        layers: [
          new TileLayer({
            source: new WMTS({
              url: '/geoserver/navigation/gwc/service/wmts?',
              
              layer: 'navigation:dxc_4326',
              matrixSet: 'EPSG:4326',
              format: 'image/png',
              projection: 'EPSG:4326',
              tileGrid: new WMTSTileGrid({
                origin: [-180, 90],
                resolutions:[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],
                matrixIds: [
                  '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'
                ],
                tileSize: [256, 256]
              }),
              wrapX: true
            })
          })
        ],
        view: new View({
          center: [113.3877, 23.0529],
          zoom: 13,
          projection: 'EPSG:4326'
        })
      });

      // 将地图实例挂载到 Vue 实例上，以便在其他方法中使用
      this.map = map;
    }
  }
};
</script>

<style>
#map {
  width: 100%;
  height: 100vh;
}
</style>

效果如下：