openlayers加载天地图及天地图地形图影像图

openlayer加载天地图、天地图地形图、天地图影像图，相关代码有注释。

加载效果：

天地图底图

天地图地形图

天地图影像图

相关代码：

import {XYZ,TileImage} from 'ol/source';

export function tianditu(map) {
  // T=vec_c表示请求的是路网数据，x 表示切片的 x 轴坐标，y 表示切片的y轴坐标，z表示切片所在的缩放级别。
  // 使用 ol.source.XYZ 加载切片，并将获取的数据初始化一个切片图层 ol.layer.Tile：
  //天地图底图
  var source = new XYZ({
    url: "http://t4.tianditu.com/DataServer?T=vec_w&tk=申请的天地图key&x={x}&y={y}&l={z}"
  });
  var tileLayer = new TileLayer({
    id: "tileLayer",
    title: "天地图",
    layerName:"baseMap",
    source: source
  });
  //标注图层
  var sourceMark = new XYZ({
    url: 'http://t3.tianditu.com/DataServer?T=cva_w&tk=申请的天地图key&x={x}&y={y}&l={z}'
  });
  var tileMark = new TileLayer({
    id: "tileMark",
    title: "标注图层",
    layerName:"baseMap",
    source: sourceMark,

  });
  //卫星图像
  var sourceSatellite = new XYZ({
    url: 'http://t3.tianditu.com/DataServer?T=img_w&tk=申请的天地图key&x={x}&y={y}&l={z}'
  });
  var tileSatellite = new TileLayer({
    id: "tileSatellite",
    title: "卫星图",
    layerName:"baseMap",
    source: sourceSatellite

  });
  //天地图地形地图
  var map_ter = new TileLayer({
    id: "map_ter",
    title: "天地图地形",
    layerName:"baseMap",
    source: new XYZ({
      url: "http://t4.tianditu.com/DataServer?T=ter_w&tk=申请的天地图key&x={x}&y={y}&l={z}"
    })
  })
  var map_cta = new TileLayer({
    id: "map_cta",
    title: "天地图标注",
    layerName:"baseMap",
    source: new XYZ({
      url: "http://t4.tianditu.com/DataServer?T=cva_w&tk=申请的天地图key&x={x}&y={y}&l={z}"
    })
  });

  return {
    "tileLayer": tileLayer,
    "tileMark": tileMark,
    "tileSatellite": tileSatellite,
    "map_ter": map_ter,
    "map_cta": map_cta
  };
}