矢量切片(Vector Tile)
常用坐标系
- EPSG:4326,等同于WGS84坐标系(约同于CGCS2000),单位:度(°);
- EPSG:3857,等同于900913,由Mercator投影而来,经常用于web地图,也称WebMercator,单位:米(m)。
Openlayer库引用
import { Map, View, Feature, Overlay } from "ol";
import TileLayer from "ol/layer/Tile";
import OSM from "ol/source/OSM";
import XYZ from "ol/source/XYZ";
import { ZoomSlider, MousePosition } from "ol/control";
import { VectorTile as VectorTileLayer } from "ol/layer";
import {
Vector as VectorSource,
VectorTile as VectorTileSource,
TileDebug
} from "ol/source";
import { Circle as CircleStyle, Fill, Stroke, Style } from "ol/style";
import { GeoJSON, MVT } from "ol/format";
import Projection from "ol/proj/Projection";
import * as olProj from "ol/proj";
import { createStringXY } from "ol/coordinate";
import { createXYZ } from "ol/tilegrid";
EPSG:4326坐标系
let country = new Style({
stroke: new Stroke({
color: "rgba(164, 162, 174)",
width: 2
}),
fill: new Fill({
color: "rgba(233, 229, 216)"
})
});
let vector4326 = new VectorTileLayer({
// 矢量切片的数据源
source: new VectorTileSource({
projection: "EPSG:4326",
format: new MVT({
idProperty: "iso_a3"
}),
tileGrid: createXYZ({
extent: olProj.get("EPSG:4326").getExtent(),
maxZoom: 22
}),
// 矢量切片服务地址
tileUrlFunction: function(tileCoord) {
const url =
"https://ahocevar.com/geoserver/gwc/service/tms/1.0.0/" +
"ne:ne_10m_admin_0_countries@EPSG%3A4326@pbf/" +
(tileCoord[0] - 1) +
"/" +
tileCoord[1] +
"/" +
(Math.pow(2, tileCoord[0] - 1) - 1 - tileCoord[2]) +
".pbf";
return url;
}
}),
style: country
});
let map = new Map({
target: "map",
layers: [
vector4326,
// 加载瓦片网格图层
// new TileLayer({
// //瓦片网格数据源
// source: new TileDebug({
// //获取瓦片网格信息
// // tileGrid: vector4326.getSource().getTileGrid()
// })
// })
],
controls: [
new MousePosition({
coordinateFormat: createStringXY(6) // 鼠标位置
})
],
view: new View({
projection: "EPSG:4326", // pbf4326格式需要使用4326坐标系
center: [114.1564839, 24.61548857],
zoom: 2
})
});
效果图如下:
EPSG:3857坐标系
let country = new Style({
stroke: new Stroke({
color: "rgba(164, 162, 174)",
width: 2
}),
fill: new Fill({
color: "rgba(233, 229, 216)"
})
});
let vector3857 = new VectorTileLayer({
declutter: true,
source: new VectorTileSource({
maxZoom: 22,
format: new MVT({
idProperty: "iso_a3"
}),
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: country
});
let map = new Map({
target: "map",
layers: [
vector4326,
// 加载瓦片网格图层
// new TileLayer({
// //瓦片网格数据源
// source: new TileDebug({
// //获取瓦片网格信息
// tileGrid: vector3857.getSource().getTileGrid()
// })
// })
],
controls: [
new MousePosition({
coordinateFormat: createStringXY(6) // 鼠标位置
})
],
view: new View({
center: [0, 0],
zoom: 2,
})
});
效果图如下: