OpenLayers es una biblioteca de desarrollo de mapas para clientes WebGIS que admite una variedad de mapas. Cuando utilice mosaicos, primero descargue los mosaicos que necesita y los mosaicos descargados se superpondrán en capas. Cuanto mayor sea el nivel, mayor será el número de mosaicos.
Puede importar el archivo ol.js y el archivo ol.css, o usar el comando npm install ol para descargar.
Sitio web oficial de Openlayers: https://openlayers.org/
Descarga de archivos: https://openlayers.org/download/
1. Mapa de Baidu
<div style="border: 1px solid red" id="olMap"></div>Crea un contenedor para poner el mapa y, por cierto, fíjate en el tamaño.
var resolutions = [];
var maxZoom = 18;
// 重新计算百度使用的分辨率
for (var i = 0; i <= maxZoom; i++) {
resolutions[i] = Math.pow(2, maxZoom - i);
}
// 设置分辨率
var tilegrid = new ol.tilegrid.TileGrid({
origin: [0, 0],
resolutions: resolutions,
});
// 创建百度地图的数据源
var baiduSource = new ol.source.TileImage({
projection: "EPSG:3857",
tileGrid: tilegrid,
// 对瓦片的请求路径进行处理
tileUrlFunction: function (tileCoord, pixelRatio, proj) {
console.log(tileCoord);
var z = tileCoord[0];
var x = tileCoord[1];
var y = tileCoord[2];
if (x < 0) {
x = -x;
}
if (y < 0) {
y = -y;
}
return "map/" + z + "/" + x + "/" + y + ".png";
},
});
// 百度地图层
var baiduMapLayer2 = new ol.layer.Tile({ source: baiduSource });
// 创建地图
var map = new ol.Map({
layers: [baiduMapLayer2],
view: new ol.View({
// 经纬度设置中心点
center: ol.proj.transform(
[123.405161, 41.791039],
"EPSG:4326",
"EPSG:3857"
),
zoom: 14,
}),
target: "olMap",
});La regla de disposición de mosaicos del mapa de Baidu es que el origen de las coordenadas está en la esquina inferior izquierda, el eje x aumenta de izquierda a derecha y el eje y aumenta de abajo hacia arriba. Igual que los mosaicos descargados.
debajo del tercer piso
Cargar dichos mosaicos requiere ajustes en TileGrid, y los mosaicos de Baidu Maps son esos mosaicos.
ol.source.TileImage carga la fuente de datos y proporciona los datos de imagen de los sectores.
Hay un pequeño problema, el mapa de Baidu no puede usar ol.source.XYZ, espero que los grandes que lo saben puedan decirme. Usar ol.source.XYZ se vería así:
TileCoord puede determinar qué mosaico cargar. después de la salida
El primero es el nivel cargado, el segundo es el eje x y el tercero es el eje y.
Zoom establece qué capa de mosaicos mostrar al inicializar.
La configuración minZoom muestra el número mínimo de capas; por ejemplo, si se establece en 9, no se puede alejar cuando se alcanza la novena capa.
Hay muchas herramientas para descargar mosaicos en Internet y los nombres de los mosaicos descargados son diferentes. El mapa de Baidu descargado se ve así.
Después de eso, descargué los mosaicos del mapa de Gaode, que es así.
Por lo tanto, al unir trazados, la unión debe realizarse de acuerdo con el formato de los mosaicos descargados.
Segundo, mapa de Gaode
var map = new ol.Map({
layers: [
new ol.layer.Tile({
// 使用xyz来定位一张瓦片，XY相当于横纵坐标，Z表示图层层级
source: new ol.source.XYZ({
url: "teils/" + "L{z}/R{y}/C{x}" + ".png",
tileUrlFunction: function (tileCoord, pixelRatio, projection) {
console.log(tileCoord); // [9, 366, -215]
if (!tileCoord) {
return undefined;
} else {
var z = tileCoord[0];
if (z < 10) {
z = "0" + z;
}
var tempX = "00000000" + tileCoord[1].toString(16).toUpperCase();
var tempY =
"00000000" + (-tileCoord[2] - 1).toString(16).toUpperCase();
console.log(tempX, tempY);
// 要加载瓦片的存放地址
console.log(
this.getUrls()[0]
.replace("{x}", tempX.substring(tempX.length - 8))
.replace("{y}", tempY.substring(tempY.length - 8))
.replace("{z}", z)
);
return this.getUrls()[0]
.replace("{x}", tempX.substring(tempX.length - 8))
.replace("{y}", tempY.substring(tempY.length - 8))
.replace("{z}", z);
}
},
projection: ol.proj.get("EPSG:3857"),
}),
}),
],
target: "olMap",
view: new ol.View({
projection: "EPSG:3857",
center: ol.proj.transform(
[123.405161, 41.791039],
"EPSG:4326",
"EPSG:3857"
),
zoom: 10,
minZoom: 3,
}),
});
let pointLayer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [],
}),
});Salida de TileCoord
La URL para cargar mosaicos debe configurarse de acuerdo con el método de descarga de la imagen.