cesium 修改默认地图选择器内容

cesium默认的底图选择器中有很多底图实际用不到,但是这个选择器很好用,所以想着修改选择器中的内容,将其中的地图改为用的比较多的地图。
cesium 修改默认地图选择器内容
当初始化viewer的时候,将baseLayerPicker设置为true;
cesium 修改默认地图选择器内容
同时将imageryProviderViewModels属性设置为自定义的地图集合;
示例:

      var imageryViewModels = [];
      var tiandituyx=new Cesium.ProviderViewModel({
          name:"天地图影像",
          tooltip:"天地图影像及中文标注数据",
          iconUrl:"./sampleData/images/tianditu.jpg",
          creationFunction: function() {
              var mapsources=[];
              var yx = new Cesium.WebMapTileServiceImageryProvider({
              url: "http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=8b207a527da69c7a32f636801fa194d4",
              layer: "tdtBasicLayer",
              style: "default",
              format: "image/jpeg",
              tileMatrixSetID: "GoogleMapsCompatible",
              show: false
            })
            var jd= new Cesium.WebMapTileServiceImageryProvider({
              url:
                "http://t0.tianditu.gov.cn/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=8b207a527da69c7a32f636801fa194d4",
              layer: "tiandituImgMarker",
              style: "default",
              format: "image/jpeg",
              tileMatrixSetID: "tiandituImgMarker",
              show: true,
              maximumLevel: 16
            })
            mapsources.push(yx,jd);
            return mapsources;
          }
      });
      imageryViewModels.push(tiandituyx)

上述代码是天地图影像图层和天地图中文标注图层。
cesium 修改默认地图选择器内容

如果要设置默认图层,只需要将viewer里的selectedImageryProviderViewModel设置为想设置的默认图层即可,如果不设置,则默认显示第一个图层。cesium 修改默认地图选择器内容

完整代码:

<!doctype html>
<html>

<head>
    <title>修改默认的地图选择器内容</title>
    <script src="./Cesium/Cesium.js"></script>
    <meta charset="utf-8" />
    <style>
        @import url("./Cesium/bucket.css");
        @import url("./Cesium/Widgets/widgets.css");
        html,
        body,
        #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;

        }
    </style>
</head>

<body>
    <div id="cesiumContainer" style="width: 100%;height: 100%;"></div>
    <script>
      var imageryViewModels = [];
      var tiandituyx=new Cesium.ProviderViewModel({
          name:"天地图影像",
          tooltip:"天地图影像及中文标注数据",
          iconUrl:"./sampleData/images/tianditu.jpg",
          creationFunction: function() {
              var mapsources=[];
              var yx = new Cesium.WebMapTileServiceImageryProvider({
              url: "http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=8b207a527da69c7a32f636801fa194d4",
              layer: "tdtBasicLayer",
              style: "default",
              format: "image/jpeg",
              tileMatrixSetID: "GoogleMapsCompatible",
              show: false
            })
            var jd= new Cesium.WebMapTileServiceImageryProvider({
              url:
                "http://t0.tianditu.gov.cn/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=8b207a527da69c7a32f636801fa194d4",
              layer: "tiandituImgMarker",
              style: "default",
              format: "image/jpeg",
              tileMatrixSetID: "tiandituImgMarker",
              show: true,
              maximumLevel: 16
            })
            mapsources.push(yx,jd);
            return mapsources;
          }
      });
      imageryViewModels.push(tiandituyx)
      var tianditujd=new Cesium.ProviderViewModel({
          name:"天地图街道",
          tooltip:"天地图街道数据",
          iconUrl:"./sampleData/images/tianditu.jpg",
          creationFunction: function() {
            return 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=8b207a527da69c7a32f636801fa194d4",
              layer: "tdtVecBasicLayer",
              style: "default",
              format: "image/jpeg",
              tileMatrixSetID: "GoogleMapsCompatible",
              show: false
            })
          }
      });
      imageryViewModels.push(tianditujd)
      var tiandituzj=new Cesium.ProviderViewModel({
          name:"天地图中文标注",
          tooltip:"天地图中文标注数据",
          iconUrl:"./sampleData/images/tianditu.jpg",
          creationFunction: function() {
            return new Cesium.WebMapTileServiceImageryProvider({
              url:
                "http://t0.tianditu.gov.cn/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=8b207a527da69c7a32f636801fa194d4",
              layer: "tiandituImgMarker",
              style: "default",
              format: "image/jpeg",
              tileMatrixSetID: "tiandituImgMarker",
              show: true,
              maximumLevel: 16
            })
          }
      });
      imageryViewModels.push(tiandituzj)
      var tianditugjx=new Cesium.ProviderViewModel({
          name:"天地图国界线",
          tooltip:"天地图国界线数据",
          iconUrl:"./sampleData/images/tianditu.jpg",
          creationFunction: function() {
            return new Cesium.WebMapTileServiceImageryProvider({
              url:
                "https://t0.tianditu.gov.cn/ibo_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=ibo&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=8b207a527da69c7a32f636801fa194d4",
              layer: "tiandituImg",
              style: "default",
              format: "image/jpeg",
              tileMatrixSetID: "tiandituImg",
              show: true,
              maximumLevel: 16
            })
          }
      });
      imageryViewModels.push(tianditugjx)
      var viewer=new Cesium.Viewer("cesiumContainer",{   
        baseLayerPicker : true,//是否显示图层选择器 
        imageryProviderViewModels:imageryViewModels,
        selectedImageryProviderViewModel:tianditujd
      })  
    </script>

</body>
</html>
匿名

发表评论

匿名网友