Openlayers加载天地图

说明

在加载OpemStreeMap时访问很慢，我们可以添加一下国内的地图，比如天地图，天地图是国家地理信息公共服务平台公众版成果，是由国家测绘局主导建设的为公众、企业提供权威、可信、统一地理信息服务的大型互联网地理信息服务网站，旨在使测绘成果更好地服务大众。在使用天地图作为地图是我们需要去天地图官网申请秘钥。

加载方法

在Openlayers中可以这样来加载天地图。
1.先引入模块：

import { XYZ } from "ol/source";
import { Tile as TileLayer } from "ol/layer";

2.实例化天地图的地图图层和注记图层：

// 天地图底图
var tianMapLayer = new TileLayer({
  source: new XYZ({
    url:
      "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=秘钥key",
    wrapX: false
  })
});

// 天地图注记
var tianMapLayer2 = new TileLayer({
  source: new XYZ({
    url:
      "http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=秘钥key"
  })
});

3.在map中添加两个图层

const map = new Map({
      target: "mapDiv",
      layers: [tianMapLayer, tianMapLayer2],
      view: new View({
        projection: "EPSG:4326",
        center: [106.532322, 29.573684],
        zoom: 12,
        //最小级别
        minZoom: 4,
        //最大级别
        maxZoom: 12
      })
    });

效果