vue Cesium access online map

To access the online map in Cesium, you only need to replace the imageryProvider attribute with the address of the online map when creating it.

Table of contents

Tiantu map

OSM map

ArcGIS map

Google Image Map

---

Tiantu map

//矢量服务
    let imageryProvider = new Cesium.WebMapTileServiceImageryProvider({
        url: "http://t0.tianditu.com/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=30d07720fa76f07732d83c748bb84211",
        layer: "tdtBasicLayer",
        style: "default",
        format: "image/jpeg",
        tileMatrixSetID: "googleMapsCompatible"
    });

OSM map

let osmMapLayer = new Cesium.ImageryLayer(new Cesium.OpenStreetMapImageryProvider({
        url : 'https://a.tile.openstreetmap.org/'
        }), {
        show: false,
        alpha: 1
        });
    this.viewer.imageryLayers.addImageryProvider(osmMapLayer);

ArcGIS map

//使用arcgis全球影像，不含注记
    let esriMapLayer = new Cesium.ImageryLayer(new Cesium.ArcGisMapServerImageryProvider({
        url: "http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
        }), {
        show: true,
        alpha: 1
    });
    this.viewer.imageryLayers.addImageryProvider(esriMapLayer);

Google Image Map

viewer = new Cesium.Viewer('cesiumContainer', {
        //加载谷歌影像地图，UrlTemplateImageryProvider该接口是加载谷歌地图服务的接口
            imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
                url: "https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer",
            }),
            //需要纯色背景必须设置
            contextOptions: {
                webgl: {
                alpha: true,
                }
            },
        });