十、openlayers官网示例CanvasTiles解析——显示瓦片网格

这个一个轻松简单的示例^_^ /开心/

何为瓦片？

瓦片地图是一种通过将地图切成小块（瓦片）并在需要时动态加载这些瓦片来呈现地图的技术。OpenLayers中的瓦片通常是PNG或JPEG格式的图片，它们组合在一起形成完整的地图。 

瓦片地图的工作原理如下：

1. 切割地图： 地图数据被分成许多小块，每个小块都被称为一个瓦片。瓦片通常是正方形，具有固定的尺寸，例如256x256像素。

2. 动态加载： 当用户在地图上进行平移或缩放操作时，OpenLayers会动态加载新的瓦片。这些瓦片是根据用户当前视图的位置和缩放级别动态生成的。

3. 缓存： 为了提高性能，OpenLayers通常会在用户浏览地图时缓存已经加载的瓦片。这样，当用户再次浏览同一区域时，OpenLayers可以直接使用缓存中的瓦片，而不需要重新下载。

使用TileDebug显示瓦片网格可以看到具体的瓦片信息

     new TileLayer({
          source: new TileDebug(),
        }),

在网络请求中也可以看见瓦片请求记录，地址中的2/0/3对应着z x y  

 刚好对应着这张图片

完整代码：

<template>
  <div class="box">
    <h1>CanvasTiles</h1>
    <div id="map"></div>
  </div>
</template>
  
  <script>
import Map from "ol/Map.js";
import TileLayer from "ol/layer/Tile.js";
import View from "ol/View.js";
import { OSM, TileDebug } from "ol/source.js";
import { XYZ } from "ol/source";
export default {
  name: "",
  components: {},
  data() {
    return {
      map: null,
    };
  },
  computed: {},
  created() {},
  mounted() {
    const map = new Map({
      layers: [
        new TileLayer({
          //   source: new OSM(),
          source: new XYZ({
            url: "http://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png",
          }),
        }),
        new TileLayer({
          source: new TileDebug(),
        }),
      ],
      target: "map",
      view: new View({
        center: [0, 0],
        zoom: 1,
      }),
    });
  },
  methods: {},
};
</script>
  
  <style lang="scss" scoped>
#map {
  width: 100%;
  height: 500px;
}
.box {
  height: 100%;
}
</style>