官网demo地址:
这个例子加载了MVT格式的矢量数据,并且用TileDebug显示了对应的切片网格。
什么是MVT?
MVT (Mapbox Vector Tile) 格式是一种用于存储地理数据的格式,特别适合用于在客户端渲染矢量地图。MVT 文件包含矢量数据的分块(tiles),这些块可以快速传输和渲染。
MVT和GeoServer数据源的区别
-
GeoServer:
- 通常提供 WFS (Web Feature Service) 或 WMS (Web Map Service) 数据。
- 返回的 feature 通常是 GeoJSON 格式,包含丰富的属性信息和几何数据。
- 数据交换: 适用于不同系统和平台之间的数据交换,因其简单明了的格式易于解析和生成。
- 数据存储: 适用于存储和版本控制,因为文本格式便于比较和管理。
- 简单应用: 适用于简单的 web 地图应用和静态地图展示,不需要高性能的传输和渲染。
-
Mapbox Vector Tiles (MVT):
- 使用矢量瓦片(Vector Tiles)传输地理数据,通常使用 Protocol Buffers 格式。
- 返回的 feature 经过压缩和简化,以便快速渲染。
-
MVT:
- Web 地图: 适用于需要高效传输和客户端渲染的交互式 web 地图应用,如 Mapbox GL JS 和 OpenLayers。
- 大规模数据: 适合处理大规模地理数据集,因为其分块设计允许渐进式加载和渲染。
- 性能优化: 由于其高效的压缩和二进制格式,适合带宽受限的环境。
在网络请求里看一下MVT格式的数据源
可以看到是一个文件流,具体也看不出什么。
然后,随便找一个请求复制一下网址,到浏览器新标签中打开,就可以下载当前的切片。
https://ahocevar.com/geoserver/gwc/service/tms/1.0.0/ne:ne_10m_admin_0_countries@EPSG%3A900913@pbf/3/3/5.pbf
使用QGIS打开看一下,就可以看到刚才加载的地块。
接下里来看TileDebug,它是一个伪矢量源,主要就显示每个贴图的坐标。它可以自定义一些属性,template模板中的内容可以修改。
const debugLayer = new TileLayer({
source: new TileDebug({
template: "z:{z} x:{x} y:{-y}",
projection: vtLayer.getSource().getProjection(),
tileGrid: vtLayer.getSource().getTileGrid(),
zDirection: 1,
}),
});
完整代码:
<template>
<div class="box">
<h1>CustomCanvasTiles</h1>
<div id="map"></div>
</div>
</template>
<script>
import MVT from "ol/format/MVT.js";
import Map from "ol/Map.js";
import TileDebug from "ol/source/TileDebug.js";
import TileLayer from "ol/layer/Tile.js";
import VectorTileLayer from "ol/layer/VectorTile.js";
import VectorTileSource from "ol/source/VectorTile.js";
import View from "ol/View.js";
import { Fill, Stroke, Style, Text } from "ol/style.js";
export default {
name: "",
components: {},
data() {
return {
map: null,
};
},
computed: {},
created() {},
mounted() {
const style = new Style({
fill: new Fill({
color: "rgba(255, 255, 255, 0.6)",
}),
stroke: new Stroke({
color: "#319FD3",
width: 1,
}),
text: new Text({
font: "12px Calibri,sans-serif",
fill: new Fill({
color: "#000",
}),
stroke: new Stroke({
color: "#fff",
width: 3,
}),
}),
});
const vtLayer = new VectorTileLayer({
declutter: true,
source: new VectorTileSource({
maxZoom: 15,
format: new MVT(),
url:
"https://ahocevar.com/geoserver/gwc/service/tms/1.0.0/" +
"ne:ne_10m_admin_0_countries@EPSG%3A900913@pbf/{z}/{x}/{-y}.pbf",
}),
style: function (feature) {
style.getText().setText(feature.get("name"));
return style;
},
});
const debugLayer = new TileLayer({
source: new TileDebug({
template: "z:{z} x:{x} y:{-y}",
projection: vtLayer.getSource().getProjection(),
tileGrid: vtLayer.getSource().getTileGrid(),
zDirection: 1,
}),
});
const map = new Map({
layers: [vtLayer, debugLayer],
target: "map",
view: new View({
center: [0, 6000000],
zoom: 4,
}),
});
},
methods: {},
};
</script>
<style lang="scss" scoped>
#map {
width: 100%;
height: 500px;
}
.box {
height: 100%;
}
</style>