二十八、openlayers官网示例Data Tiles解析——自定义绘制DataTile源数据

官网demo地址：

 

https://openlayers.org/en/latest/examples/data-tiles.html

这篇示例讲解的是自定义加载DataTile源格式的数据。

先来看一下什么是DataTile，这个源是一个数组，与我们之前XYZ切片源有所不同。DataTile主要适用于需要动态生成、处理或渲染瓦片数据的复杂场景。

先新建一个canvas，设置一下画布参数。

   //256x256 像素是瓦片图层的常见尺寸
    const size = 256;

    const canvas = document.createElement("canvas");
    canvas.width = size;
    canvas.height = size;

    const context = canvas.getContext("2d");
    //设置描边颜色为白色。
    context.strokeStyle = "white";
    //设置文本对齐方式为居中
    context.textAlign = "center";
    //设置字体为 24 像素的无衬线字体。
    context.font = "24px sans-serif";
    //用于控制文本行高
    const lineHeight = 30;

 l