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,}},});