vue Cesium接入在线地图

Cesium接入在线地图只需在创建时将imageryProvider属性换为在线地图的地址即可。

目录

天地图

OSM地图

ArcGIS 地图

谷歌影像地图

---

天地图

//矢量服务
    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地图

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

ArcGIS 地图

//使用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);

谷歌影像地图

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