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

在WebGIS中，OpenLayers是一个用于WebGIS的开源库。以下是使用OpenLayers加载多种类型地图的示例代码：

import 'ol/ol.css';
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import { OSM, TileArcGISRest, Vector as VectorSource, BingMaps } from 'ol/source';
 
// 天地图
const tk = '您的天地图key';
const tianditu = new TileLayer({
  source: new VectorSource({
    format: new ol.format.MVT(),
    url: `http://t0.tianditu.gov.cn/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&tk=${tk}`,
    tileGrid: ol.tilegrid.createXYZ({ maxZoom: 18 }),
    wrapX: true,
  }),
});
 
// 初始化地图
const map = new Map({
  target: 'map',
  layers: [tianditu],
  view: new View({
    center: [0, 0],
    zoom: 2,
  }),
});

在这个例子中，我们首先导入了OpenLayers的必要组件，然后定义了一个天地图的TileLayer，并通过一个key（tk）来授权访问。接着，我们初始化了一个Map对象，并把天地图作为一个层添加到了地图中。

注意：天地图的服务可能需要在天地图官网上注册，并申请相应的使用权限，获取正确的key。

对于其他类型的地图，比如百度地图、高德地图、ArcGIS地图、Bing地图和OpenStreetMap，你可以使用相应的source来替换上面的天地图源。例如，使用BingMaps作为源，代码如下：

import 'ol/ol.css';
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import { BingMaps } from 'ol/source';
 
const bingMaps = new TileLayer({
  source: new BingMaps({
    key: '您的BingMapsKey',
    imagerySet: 'Aerial',
  }),
});
 
const map = new Map({
  target: 'map',
  layers: [bingMaps],
  view: new View({
    center: [0, 0],
    zoom: 2,
  }),
});

在这个例子中，我们使用BingMaps作为地图源，并通过一个key（key）来授权访问。其他地图（如高德、OpenStreetMap等）的加载方式类似，只需要替换source即可。

注意：BingMaps可能需要在BingMaps官网上注册，并申请相应的使用权限，获取正确的key。其他地图服务的key申请流程类似。

以上代码示例均基于OpenLayers的最新版本（当前是6.x版本）。如果你使用的是旧版本的OpenLayers，可能需要稍微修改代码，以适应不同版本的API变化。