openlayers之天地图为底图 叠加其他底图 加载遇到的各种报错

今天以前使用天地图为底图时，map里source的定义：http://t3.tianditu.com~~~

今天突然报跨域的错误，原有地址访问受限，可是key值是有的

最后发现就是前半段的原因 将前半段地址改为 http://t3.tianditu.gov.cn即可

-------------------------------

今天又莫名的报了400的错

今天终于发现因为搬运的地图初始化方法，没有细考究如下

const kpst = {
  init: () => {
    var _op = { target: conf.target, layers: [], view: new View(conf.view) }
    kpst._this = new ol.Map(_op)
    const maps = conf.urls
    for (const index in maps) {
      const m = maps[index]
      if (!m.overlay) continue
      var layerConf = {
        source: new TileArcGISRest({
          url: m.url,
          params: { 'sessionId': localStorage.getItem('kpst-token') },
        })
      }
      if (m.extent) layerConf.extent = m.extent
      kpst._this.addLayer(new TileLayer(layerConf))
    }

conf.js

export default {
  target: 'map_container',
  view: {
    center: [88.434653, 31.559746],
    zoom: 7,
    maxZoom: 18,
    minZoom: 0,
    projection: 'EPSG:4326'
  },
  urls: [
    {
      url: 'http://arcgis.keepsoft.net:9472/arcgis/rest/services/BaseMap/MapServer',
      overlay: true
    },
    {
      url: 'http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=d0cf74b31931aab68af181d23fa23d8d',
      overlay: true
    }
  ]
}

一个是XYZ切片一个是ArcGIS切片，我居然没有注意到

JavaScript API调用

以天地图JavaScript API 4.0为例，您只要在引用的API 地址后增加授权信息即可，其余使用方法不变。例如：
http://api.tianditu.gov.cn/api?v=4.0&tk=您的密钥

地图服务调用

以天地图影像瓦片底图（球面墨卡托投影）服务为例，在原有瓦片获取请求参数中增加授权参数即可，其余使用方法不变。例如：
http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={x}&TILECOL={y}&tk=您的密钥

应用服务调用

以天地图POI搜索服务为例，在服务请求参数中增加授权参数即可，其余使用方法不变。例如：
http://api.tianditu.gov.cn/geocoder?ds={"keyWord":"延庆区北京市延庆区延庆镇莲花池村前街50夕阳红养老院"}&tk=您的密钥