Cesium加载各种常见在线底图影像

一、简介

天地图、高德地图、百度地图、腾讯地图、arcgis影像等基础底图。

对于高德、百度等地图进行纠偏，从而匹配到wgs84球儿，使坐标无偏移。

二、效果

太多了，所以仅列出部分。

1）高德电子地图

2）天地图影像

3）天地图地形

4）百度地图

5）arcgis在线影像

三、代码

export default {
  data() {
    return {
      key: "19b72f6cde5c8b49cf21ea2bb4c5b21e",
    };
  },

  components: {},

  computed: {},
  watch: {},

  created() {},

  mounted() {
    TS.ready(() => {
      window.viewer = TS.CesiumView.init("cesiumContainer");
      //   var baselayer = TS.ImageryLayerFactory.createImageryLayer(
      //     TS.ImageryType.TDT,
      //     {
      //       style: "img",
      //       key: this.key
      //     }
      //   );
      //   viewer.imageryLayers.addImageryProvider(baselayer);
    });
  },
  destroyed() {},
  methods: {
    baidu_1() {
      this.removeAll();
      let baselayer = TS.ImageryLayerFactory.createBaiduImageryLayer({
        style: "img",
        crs: "WGS84",
      });
      viewer.imageryLayers.addImageryProvider(baselayer);
    },
    baidu_2() {
      this.removeAll();
      let baselayer = TS.ImageryLayerFactory.createBaiduImageryLayer({
        crs: "WGS84",
      });
      viewer.imageryLayers.addImageryProvider(baselayer);
    },
    baidu_3() {
      this.removeAll();
      let baselayer = TS.ImageryLayerFactory.createBaiduImageryLayer({
        style: "img",
        crs: "WGS84",
      });
      let baselayer2 = TS.ImageryLayerFactory.createBaiduImageryLayer({
        style: "vec",
        crs: "WGS84",
      });
      viewer.imageryLayers.addImageryProvider(baselayer2);
      viewer.imageryLayers.addImageryProvider(baselayer);
    },
    baidu_4() {
      this.removeAll();
      let baselayer = TS.ImageryLayerFactory.createBaiduImageryLayer({
        style: "dark",
        crs: "WGS84",
      });
      viewer.imageryLayers.addImageryProvider(baselayer);
    },
    gaode_1() {
      this.removeAll();
      let baselayer = TS.ImageryLayerFactory.createAmapImageryLayer({
        crs: "WGS84",
      });
      viewer.imageryLayers.addImageryProvider(baselayer);
    },
    gaode_2() {
      this.removeAll();
      let baselayer = TS.ImageryLayerFactory.createAmapImageryLayer({
        style: "img",
        crs: "WGS84",
      });
      viewer.imageryLayers.addImageryProvider(baselayer);
    },
    gaode_3() {
      this.removeAll();
      let baselayer = TS.ImageryLayerFactory.createAmapImageryLayer({
        style: "cva",
        crs: "WGS84",
      });
      viewer.imageryLayers.addImageryProvider(baselayer);
    },
    // 注记图层
    tianditu_1() {
      this.removeAll();
      let baselayer = TS.ImageryLayerFactory.createTdtImageryLayer({
        style: "cva",
        key: this.key,
      });
      viewer.imageryLayers.addImageryProvider(baselayer);
    },
    // 电子地图
    tianditu_2() {
      this.removeAll();
      let baselayer = TS.ImageryLayerFactory.createTdtImageryLayer({
        key: this.key,
      });
      viewer.imageryLayers.addImageryProvider(baselayer);
    },
    // 影像图层
    tianditu_3() {
      this.removeAll();
      let baselayer = TS.ImageryLayerFactory.createTdtImageryLayer({
        style: "img",
        key: this.key,
      });
      viewer.imageryLayers.addImageryProvider(baselayer);
    },
    // 地形图层
    tianditu_4() {
      this.removeAll();
      let baselayer = TS.ImageryLayerFactory.createTdtImageryLayer({
        style: "ter",
        key: this.key,
      });
      viewer.imageryLayers.addImageryProvider(baselayer);
    },
    tengxun_1() {
      this.removeAll();
      let baselayer = TS.ImageryLayerFactory.createTencentImageryLayer({
        // style: "img",
        // crs: "WGS84"
      });
      viewer.imageryLayers.addImageryProvider(baselayer);
    },
    tengxun_2() {
      this.removeAll();
      let baselayer = TS.ImageryLayerFactory.createTencentImageryLayer({
        style: "img",
      });
      viewer.imageryLayers.addImageryProvider(baselayer);
    },
    tengxun_3() {
      this.removeAll();
      let baselayer = TS.ImageryLayerFactory.createTencentImageryLayer({
        style: 2,
      });
      viewer.imageryLayers.addImageryProvider(baselayer);
    },
    arcgis_1() {
      this.removeAll();
      let baselayer = TS.ImageryLayerFactory.createArcGisImageryLayer({
        url: "http://services.arcgisonline.com/ArcGIS/rest/services/world_imagery/Server",
      });
      viewer.imageryLayers.addImageryProvider(baselayer);
    },
    arcgis_2() {
      this.removeAll();
      let baselayer = TS.ImageryLayerFactory.createArcGisImageryLayer({
        url: "http://services.arcgisonline.com/arcgis/rest/services/world_terrain_Base/MapServer",
      });
      viewer.imageryLayers.addImageryProvider(baselayer);
    },
    removeAll() {
      viewer.imageryLayers.removeAll();
    },
  },