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

二、设置标签以及文字换行

 如果想要在设置标签的时候进行换行现在，可以在字符串中使用  '\r\n' ，

 const modelLabel = viewer.entities.add({
    position:Cesium.Cartesian3.fromDegrees(20.23,59.5),//设置Cartesian3或Cesium.SampledPositionProperty数据都可以
    label: {
      text: '名称：xxxx' + ' \r\n 类型：国道',
      font: "20px sans-serif",
      showBackground: true,//显示背景
      style: Cesium.LabelStyle.FILL,
      backgroundColor:new Cesium.Color.fromCssColorString('#8b8784'),
      horizontalOrigin: Cesium.HorizontalOrigin.LEFT,//对齐方式
      verticalOrigin: Cesium.VerticalOrigin.CENTER,
      pixelOffset: new Cesium.Cartesian2(50, -50),//设置偏移量
 
    },
  });