2. Openlayers加载天地图、百度、高德、ArcGIS、Bing、OSM、Google地图 （结合Vue 详细教程）

目录

Openlayers加载天地图、百度、高德、ArcGIS、Bing、OSM、Google地图

1.地图数据源类型及其使用方法

        1.XYZ (ol/source/XYZ)

        2.OSM (ol/source/OSM)

        3.WMS (ol/source/TileWMS)

2.如何在地图中使用数据源

        1.使用 XYZ 数据源（Stamen Maps 服务）

        2.使用 OSM 数据源

        3.使用 WMS 数据源（以 Geoserver 服务为例）

3.加载天地图、百度、高德、ArcGIS、Bing、OSM、Google

        1.天地图（使用 WMTS 服务）

        2.百度地图（使用 XYZ 服务）

        3.高德地图（使用 XYZ 服务）

        4.ArcGIS（使用 XYZ 服务）

        5.Bing Maps（使用专用的 BingMaps 服务）

        6.OpenStreetMap（OSM）

        7.Google Maps（使用 XYZ 服务）

---

Openlayers加载天地图、百度、高德、ArcGIS、Bing、OSM、Google地图

1.地图数据源类型及其使用方法

本篇文章将介绍 OpenLayers 中地图数据源的类型以及如何在地图中使用它们。

常见的地图数据源类型

        1.XYZ (ol/source/XYZ)

XYZ 数据源是一种基于经纬度划分的 Web 地图瓦片服务。这是一种广泛使用的地图数据源类型，在许多免费或商业地图服务上都可以找到。例如：Stamen Maps，ArcGIS 地图服务。

        2.OSM (ol/source/OSM)

OpenStreetMap（OSM）数据源是基于开源的全球地图数据。这种类型的底图广泛应用于个人项目、企业级应用等场合，因为它可以提供充足的地理信息数据和免费无限制的访问权限。

        3.WMS (ol/source/TileWMS)

Web 地图服务（WMS）是 OGC（Open Geospatial Consortium）定义的基于网络的地图服务规范。WMS 数据源通常用于访问矢量数据、栅格数据等地图图层。例如：地理空间数据存储在 Geoserver 上时，可以通过 WMS 来访问。

2.如何在地图中使用数据源

以下代码将演示如何在地图中使用前述介绍的三种不同类型的数据源：

        1.使用 XYZ 数据源（Stamen Maps 服务）

import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";

// 创建 Stamen Maps 图层
const stamenLayer = new TileLayer({
  source: new XYZ({
    // 设置图层的 URL 模板
    url: "https://stamen-tiles-{a-d}.a.ssl.fastly.net/toner/{z}/{x}/{y}.png"
  })
});

        2.使用 OSM 数据源

import TileLayer from "ol/layer/Tile";
import OSM from "ol/source/OSM";

// 创建 OpenStreetMap 图层
const osmLayer = new TileLayer({
  source: new OSM()
});

        3.使用 WMS 数据源（以 Geoserver 服务为例）

import TileLayer from "ol/layer/Tile";
import TileWMS from "ol/source/TileWMS";

// 创建 WMS 图层（从 Geoserver 获取数据）
const wmsLayer = new TileLayer({
  source: new TileWMS({
    // 设置 Geoserver 服务的 URL
    url: "https://your-geoserver-url/wms",
    // 设置请求参数
    params: {
      // 指定要获取的图层名称
      LAYERS: "your-layer-name",
      // 设置为平铺模式获取
      TILED: true
    }
  })
});

在上述代码创建好对应图层后，您可以将它们添加到 OpenLayers 地图实例中：

const map = new ol.Map({
  target: "map-container",
  layers: [stamenLayer, osmLayer, wmsLayer],
  view: view
});

这样，您就可以在地图中看到绘制好的图层了。

3.加载天地图、百度、高德、ArcGIS、Bing、OSM、Google