vue+openlayers地图上实现网格线信息显示（附源码）

1.示例效果图

2.示例简介

瓦片地图都是基于金字塔策略裁剪后的图片集，因此瓦片地图由级数、行列号对应的单张图片按照网格划分组织而成。在瓦片地图中显示当前的网格信息，有助于我们了解当前地图的瓦片组成情况。OpenLayers 框架封装了一个显示瓦片地图网格的数据源（ol.source.TileDebug），与加载瓦片地图类似，使用ol.layer.Tile+ol.source.TileDebug方式加载并显示当前网格信息。

3.示例完整源码

<template>
  <div id="map" class="imap">
  </div>
</template>
<script setup>
  // 显示地图网格
  import {
    onMounted,
    ref
  } from 'vue'
  import 'ol/ol.css';
  import {
    Map,
    View
  } from 'ol';
  import TileLayer from 'ol/layer/Tile';
  import WMTS from 'ol/source/WMTS';
  import {get} from 'ol/proj.js';
  import {getTopLeft,getWidth} from 'ol/extent.js';
  import WMTSTileGrid from 'ol/tilegrid/WMTS.js'
  import TileDebug from 'ol/source/TileDebug'

  var map = null
  onMounted(() => {
    var projection = get('EPSG:3857')  //根据投影获取投影对象
    var projectionExtent = projection.getExtent() //获取视图投影（或用户投影，如果设置）中当前绘制的范围
    var size = getWidth(projectionExtent) / 256
    var resolutions = new Array(18)
    var matrixIds = new Array(18)
    for (let z = 0; z < 19; z++) {
      resolutions[z] = size / Math.pow(2, z) 
      matrixIds[z] = z
    }
    var WMTSTile = new WMTSTileGrid({
              origin: getTopLeft(projectionExtent),  
              resolutions: resolutions, 
              matrixIds: matrixIds
            })
     map = new Map({
      target: 'map',
      layers: [
        new TileLayer({
          source: new WMTS({
            url: "http://t0.tianditu.gov.cn/vec_w/wmts?tk=你的tk",
            layer: "vec",
            matrixSet: "w",
            format: 'tiles',
            style: 'default',
            projection: projection,
            tileGrid: WMTSTile,
            wrapX: false
          })
        }),
        // 网格图层
        new TileLayer({
          source: new TileDebug({
            projection:projection,
            tileGrid:WMTSTile
          })
        }),
      ],
      view: new View({
        //地图初始中心点
        center: [0, 0],
        zoom: 2
      })
    });
    window.olmap = map
  })
</script>
<style scoped>
  .imap {
    height: 100%;
    width: 100%;
  }
</style>