vue Cesium接入在线地图-Toy模板网

这篇具有很好参考价值的文章主要介绍了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"
    });

vue Cesium接入在线地图,# gis,vue,cesium,在线地图,gis

OSM地图

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

vue Cesium接入在线地图,# gis,vue,cesium,在线地图,gis

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

vue Cesium接入在线地图,# gis,vue,cesium,在线地图,gis

谷歌影像地图

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

vue Cesium接入在线地图,# gis,vue,cesium,在线地图,gis 文章来源地址https://www.toymoban.com/news/detail-693934.html