一、天地图

      // 天地图影像
      let map_img = new TileLayer({
        source: new XYZ({
          url: "https://t6.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk="+token,
        }),
      });
      // 天地图影像文字注记
      let map_cta1 = new TileLayer({
        source: new XYZ({
          url: "http://t4.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk="+token,
        }),
      });
      // 天地图矢量
      let map_vec = new TileLayer({
        source: new XYZ({
          url: "http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk="+token,
        }),
      });
      // 天地图矢量文字注记
      let map_cta1 = new TileLayer({
        source: new XYZ({
          url: "http://t4.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk="+token,
        }),
      });

vue+arcgis api两种环境下加载天地图（1.esri-loader、2.@arcgis/core）_我有柚子茶噢的博客-CSDN博客

相比较于arcgis api openlayer加载天地图就很简单了，因为底层的切片方案是一致的

<template>
  <div id="map"></div>
</template>

<script>
import "ol/ol.css";
import Map from "ol/Map";
import View from "ol/View";
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
export default {
  mounted() {
    let layer = new TileLayer({
      source: new XYZ({
        url:
          "http://t4.tianditu.com/DataServer?T=vec_w&tk=4a76fd399e76e3e984e82953755c3410&x={x}&y={y}&l={z}",
      }),
    });
    let map = new Map({
      target: "map",
      view: new View({
        projection: "EPSG:4326",
        center: [114, 29],
        zoom: 5,
      }),
      layers: [layer],
    });
  },
};
</script>

<style>
html,body{
  height: 100%;
}
#map{
  height: 100%;
}
</style>

这边还收集整理了其他天地图底图资源，并将其模块化成 Load_tianditu.js

import { XYZ } 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
    };
}

 app.vue 代码 

<template>
  <div id="SceneView"></div>
</template>

<script>
import { loadModules } from "esri-loader";
export default {
  name: "SceneView",

  methods: {
    _createSceneView: function() {
      let options = {
        url: "https://js.arcgis.com/4.21/",
        css: "https://js.arcgis.com/4.21/esri/themes/light/main.css",
      };
      loadModules(["esri/Map", "esri/views/SceneView"], options).then(
        ([Map, SceneView]) => {
          let map = new Map({
            basemap: "streets",
            ground: "world-elevation",
          });
          let view = new SceneView({
            container: "SceneView",
            map: map,
          });
          console.log(view);
        }
      );
    },
  },
  mounted() {
    this._createSceneView();
  },
};
</script>

<style>
#SceneView {
  position: absolute;
  width: 100%;
  height: 100%;
}
</style>

安装 esri-loader指令

npm install esri-loader

 效果图