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