openlayers7的WebGLPointsLayer图层textureCoord生成工具

概要

小工具（TypeScript+Vue3），可生成openlayers7的WebGLPointsLayer图层textureCoord属性对应的match表达式数据。

---

/**
 * @description>>>>>>获得图标编码-纹理坐标映射数据
 * @param {Coordinate} numRows 纵向图标数量
 * @param {Coordinate} numCols 横向图标数量
 */
export function getTextureCoord(numRows: number = 50, numCols: number = 50) {
  let arr: any = [];
  // 生成纹理坐标
  Array(numRows * numCols).fill(0).map((_, index) => {
      // 行标
      const row = Math.floor(index / numCols);
      // 列标
      const col = index % numCols;
      //在字符串的开头添加指定字符，直到字符串达到指定的长度
      const id = String(row).padStart(2, "0") + String(col).padStart(2, "0"); // 生成编码
      const x1 = col / numCols; // 左上角 x 坐标
      const y1 = row / numRows; // 左上角 y 坐标
      const x2 = (col + 1) / numCols; // 右下角 x 坐标
      const y2 = (row + 1) / numRows; // 右下角 y 坐标
      arr.push(id, [x1, y1, x2, y2]); // 将编码和纹理坐标添加到数组
    });
  let groupSize = ((numRows * numCols) / (numRows / 2)) * 2; // 分组大小
  let numGroups = Math.ceil(arr.length / groupSize); // 计算分组数
  let obj: any = {};
  // 生成分组数据
  for (let i = 0; i < numGroups; i++) {
    let group = arr.slice(i * groupSize, (i + 1) * groupSize); // 分组数据
    let key = String.fromCharCode(97 + i); // 生成键名，从 'a' 到 'y'
    let value = ["match", ["get", "name"], ...group]; // 生成值数组，包含 'match'、['get', 'name'] 和分组数据
    value.push([(numRows - 1) / numRows, (numCols - 1) / numCols, 1, 1]); // 每组的默认数据
    obj[key] = value; // 将键和值添加到对象
    // 默认值
    if (i == numGroups - 1) {
      // 默认纹理坐标
      obj[String.fromCharCode(97 + i + 1)] = [(numRows - 1) / numRows,(numCols - 1) / numCols,1, 1,];
    }
  }
  let jsonString = JSON.stringify(obj)
  // 按钮点击事件处理程序
  // 创建一个 Blob 对象
  var blob = new Blob([jsonString], { type: "application/json" });
  // 创建一个下载链接
  var downloadLink = document.createElement("a");
  downloadLink.href = URL.createObjectURL(blob);
  downloadLink.download = "textureCoord.json";
  // 点击链接进行下载
  document.body.appendChild(downloadLink);
  downloadLink.click();
  // 清理下载链接
  document.body.removeChild(downloadLink);
}

数据样例：

  textureCoord: {
    "a": [
      "match",
      ["get", "name"],
      "0000",
      [0, 0, 0.02, 0.02],
      // "0001",
      // [0.02, 0, 0.04, 0.02],
      // ......略
      // "0049",
      // [0.98, 0, 1, 0.02],
      "0100",
      [0, 0.02, 0.02, 0.04],
      // "0101",
      // [0.02, 0.02, 0.04, 0.04],
      // "0102",
      // ......略
      // "0149",
      // [0.98, 0.02, 1, 0.04],
      // 默认值
      [0.98, 0.98, 1, 1]
    ],
    "b": [
      "match",
      ["get", "name"],
      "0200",
      [0, 0.04, 0.02, 0.06],
      // ......略
      // 默认值
      [0.98, 0.98, 1, 1]
      ],
      // ......略
      // 默认值
       "z": [0.98, 0.98, 1, 1]
    }

下载链接：https://download.csdn.net/download/qq_40236953/88628208