官網(wǎng)demo地址：

?

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

這篇示例講解的是自定義加載DataTile源格式的數(shù)據(jù)。

先來看一下什么是DataTile，這個源是一個數(shù)組，與我們之前XYZ切片源有所不同。DataTile主要適用于需要動態(tài)生成、處理或渲染瓦片數(shù)據(jù)的復(fù)雜場景。

先新建一個canvas，設(shè)置一下畫布參數(shù)。

   //256x256 像素是瓦片圖層的常見尺寸const size = 256;const canvas = document.createElement("canvas");canvas.width = size;canvas.height = size;const context = canvas.getContext("2d");//設(shè)置描邊顏色為白色。context.strokeStyle = "white";//設(shè)置文本對齊方式為居中context.textAlign = "center";//設(shè)置字體為 24 像素的無襯線字體。context.font = "24px sans-serif";//用于控制文本行高const lineHeight = 30;

?loader 是一個自定義數(shù)據(jù)加載函數(shù)，用于在需要時生成或獲取瓦片數(shù)據(jù)。它的設(shè)計目的是為了處理動態(tài)生成的或特定格式的數(shù)據(jù)，比如在運行時計算或從非標(biāo)準(zhǔn)源獲取的數(shù)據(jù)。

new TileLayer({source: new DataTile({loader: function (z, x, y) {const half = size / 2;//清除畫布內(nèi)容context.clearRect(0, 0, size, size);context.fillStyle = "rgba(100, 100, 100, 0.5)";//填充整個畫布context.fillRect(0, 0, size, size);context.fillStyle = "red";//繪制文字context.fillText(`z: ${z}`, half, half - lineHeight);context.fillText(`x: ${x}`, half, half);context.fillText(`y: ${y}`, half, half + lineHeight);context.strokeRect(0, 0, size, size);//獲取畫布內(nèi)容的像素數(shù)據(jù)const data = context.getImageData(0, 0, size, size).data;// 轉(zhuǎn)換為Uint8Array以提高瀏覽器兼容性return new Uint8Array(data.buffer);},//禁用不透明度過渡，以避免在tile加載期間重疊標(biāo)簽transition: 0,}),}),

事實上，很多源都提供loader參數(shù)方便我們把獲取的數(shù)據(jù)或地圖路徑經(jīng)過二次處理之后再加載到地圖上。而具體返回什么樣的數(shù)據(jù)格式取決于源本身所接受的數(shù)據(jù)格式。

完整代碼：

<template><div class="box"><h1>Data Tiles自定義繪制DataTile源數(shù)據(jù)</h1><div id="map"></div></div>
</template><script>
import DataTile from "ol/source/DataTile.js";
import Map from "ol/Map.js";
import TileLayer from "ol/layer/WebGLTile.js";
import View from "ol/View.js";
export default {name: "",components: {},data() {return {map: null,};},computed: {},created() {},mounted() {//256x256 像素是瓦片圖層的常見尺寸const size = 256;const canvas = document.createElement("canvas");canvas.width = size;canvas.height = size;const context = canvas.getContext("2d");//設(shè)置描邊顏色為白色。context.strokeStyle = "white";//設(shè)置文本對齊方式為居中context.textAlign = "center";//設(shè)置字體為 24 像素的無襯線字體。context.font = "24px sans-serif";//用于控制文本行高const lineHeight = 30;const map = new Map({target: "map",layers: [new TileLayer({source: new DataTile({loader: function (z, x, y) {const half = size / 2;//清除畫布內(nèi)容context.clearRect(0, 0, size, size);context.fillStyle = "rgba(100, 100, 100, 0.5)";//填充整個畫布context.fillRect(0, 0, size, size);context.fillStyle = "red";//繪制文字context.fillText(`z: ${z}`, half, half - lineHeight);context.fillText(`x: ${x}`, half, half);context.fillText(`y: ${y}`, half, half + lineHeight);context.strokeRect(0, 0, size, size);//獲取畫布內(nèi)容的像素數(shù)據(jù)const data = context.getImageData(0, 0, size, size).data;// 轉(zhuǎn)換為Uint8Array以提高瀏覽器兼容性return new Uint8Array(data.buffer);},//禁用不透明度過渡，以避免在tile加載期間重疊標(biāo)簽transition: 0,}),}),],view: new View({center: [0, 0],zoom: 0,}),});},methods: {},
};
</script><style lang="scss" scoped>
#map {width: 100%;height: 500px;
}
.box {height: 100%;
}#info {width: 100%;height: 24rem;overflow: scroll;display: flex;align-items: baseline;border: 1px solid black;justify-content: flex-start;
}
</style>