openlayer初始化自定义title瓦片图

一、openlayer介绍

OpenLayers 是一个开源的 JavaScript 库，用于在 Web 上显示和交互地图数据。它支持多种地图源（如 WMS、WMTS、XYZ、GeoJSON 等），并提供丰富的功能，如地图渲染、图层控制、矢量绘制、投影转换等。

二、安装openlayer

npm install ol

三、加载地图

我们需要了解OpenLayers 核心概念：

Map 是 OpenLayers 的核心对象，代表一个地图实例，需要绑定到 HTML 的 <div> 元素。 View 控制地图的显示范围、投影、缩放级别等。

layer（图层）支持多种图层类型：

• TileLayer（瓦片图层，如 OSM、Google Maps）
• VectorLayer（矢量图层，如 GeoJSON 数据）
• ImageLayer（静态图片图层）
• WebGLTileLayer（WebGL 加速的瓦片图层）

Source（数据源）每个 Layer 需要一个 Source 来提供数据：

• OSM（OpenStreetMap 数据）
• XYZ（标准 XYZ 瓦片服务）
• Vector（用于 GeoJSON、KML 等矢量数据）
• WMS（Web Map Service）

import { XYZ, Vector as VectorSource } from "ol/source.js";
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer.js";
import { Map, View } from "ol";
import { toLonLat, fromLonLat } from "ol/proj";
import { createXYZ } from "ol/tilegrid.js";


this.raster = new TileLayer({
  source: new XYZ({
    url: url,
    projection: "EPSG:4326",
    tileGrid: createXYZ({
      extent: [-180, -90, 180, 90],
      maxZoom: 20,
    }),
  }),
});

this.source = new VectorSource({ wrapX: false });
this.vector = new VectorLayer({
  source: this.source,
});

this.map = new Map({
  layers: [this.raster, this.vector],
  target: id,
  view: new View({
    center: fromLonLat(this.center),
    zoom: 10,
  }),
});

四、投影问题

1、加载title瓦片图时，发现我的坐标跟标准的百度地图偏移很多，后面发现是投影问题。

• openlayer 投影支持：

  • 默认支持 EPSG:3857（Web 墨卡托投影，如 Google Maps）。
  • 可切换至 EPSG:4326（WGS84 经纬度）或其他自定义投影。

因此根据瓦片服务需要配置projection: "EPSG:4326",它的范围为[-180, -90, 180, 90]

 projection: "EPSG:4326"
 tileGrid: createXYZ({
      extent: [-180, -90, 180, 90],
      maxZoom: 20,
    }),