• cesium 实战记录（一） 底图动态配置，前端实现切换

    上帝希望：

    有个底图管理功能，用户配置好需要展示的底图后，在地图页面会出现相应的底图可供切换；

     大概就这样吧底图切换。

    思考：

    1、首先要想动态管理底图，地图页面动态渲染底部的basemap组件。

    那底图的前端渲染数据格式要确定，

    2、cesium 切换图层的方法

    3、看了网上大佬们写的cesium 底图切换，大部分都不算真正意义上的底图，脱离上帝太远了，落不了地

    设计思路：

    1、数据格式：看了页面长那样，大概知道了，数据需要：img ， label，图层的类型type  以及构造 layer 的参数 params ；

    2、切换图层方法：

    （

    我先插一下什么叫底图的切换：底图就是最底层的图层，在底图切换的时候上面叠加的图层不会受到任何影响

    ）

    之前在arcgis 中实现底图的切换：arcgis 的map 类中 有一个basemap 的属性，只需要将底图加入basemap 中就可以了，切换的时候更改basemap 中的图层即可，不需要在考虑图层的顺序

    一开始我按照之前 arcgis 写的思路：寻找 view 中basemap 这个属性，但是 cesium 的 viewer 没有这个属性，他甚至没有底图这个概念，只有 imageryLayers 图像图层，大部分的图层都算这个子类。

    然后我就想把底图的图层都放在一个类似于 layersGroup 的图层组集合中，然后找到这个集合，每次切换的时候对这个集合进行操作，方便管理。

    cesium 的确实有 ImageryLayerCollection 这样的一个类，我尝试创建这样一个图层组集合，但是发现viewer 不支持直接加入这个集合；这个 ImageryLayerCollection 我认为只是 对于viewer.imageryLayers 返回这样一个图层集合，可在这里看到集合的操作方法等等。（暂时没看到其他用处）

    既然走不通，那就姥姥的踏踏实实的写切换方法把 ============》》》》 

    先移除之前的，然后在添加现在的，最后在调整下层级顺序

    上代码！

    首先是数据格式：

    1.   tdtUrl: "https://t{s}.tianditu.gov.cn", //天地图主域名
    2. const basemapOptions =[
    3.     /**
    4.      * type代表地图服务类型
    5.      * 0 代表ArcGisMapServerImageryProvider;
    6.      * 1 代表createOpenStreetMapImageryProvider;
    7.      * 2 代表WebMapTileServiceImageryProvider;
    8.      * 3 代表createTileMapServiceImageryProvider;
    9.      * 4 代表UrlTemplateImageryProvider;
    10.      * 5 代表WebMapServiceImageryProviderr);
    11.      */
    12.     {
    13.         id:'TDTSL',
    14.         img:'',//缩略图
    15.         type:2,
    16.         label:'天地图矢量',
    17.         params:[
    18.             {
    19.                 url: tdtUrl + '/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=' + token,
    20.                 layer: 'veccva',
    21.                 style: 'default',
    22.                 format: 'tiles',
    23.                 tileMatrixSetID: 'w',
    24.                 subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
    25.                 credit: new Cesium.Credit('天地图矢量注记'),
    26.                 maximumLevel: 18
    27.             },
    28.             {
    29.                 url: tdtUrl + '/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=' + token,
    30.                 layer: 'vec',
    31.                 style: 'default',
    32.                 format: 'tiles',
    33.                 tileMatrixSetID: 'w',
    34.                 subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
    35.                 credit: new Cesium.Credit('天地图矢量'),
    36.                 maximumLevel: 18
    37.             },
    38.  
    39.         ]
    40.     },
    41.     {
    42.         id:'TDTYX',
    43.         img:'',//缩略图
    44.         type:2,
    45.         label:'天地图影像',
    46.         params:[
    47.             {
    48.                 url: tdtUrl + '/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=' +  token,
    49.                 layer: 'imgcia',
    50.                 style: 'default',
    51.                 format: 'tiles',
    52.                 tileMatrixSetID: 'w',
    53.                 subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
    54.                 credit: new Cesium.Credit('天地图影像注记'),
    55.                 maximumLevel: 18
    56.             },
    57.             {
    58.                 url: tdtUrl + '/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=' + token,
    59.                 layer: 'img',
    60.                 style: 'default',
    61.                 format: 'tiles',
    62.                 tileMatrixSetID: 'w',
    63.                 subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
    64.                 credit: new Cesium.Credit('天地图影像'),
    65.                 maximumLevel: 18
    66.             },
    67.         ]
    68.     }
    69. ]

    大概就上面的吧。

    然后是切换方法：

    这个不想放啊，再放还不如直接放整个底图切换的 js 咯；

    算了，给你们抄吧，抄作业不得抄个爽！！！

    1. /**
    2.  * @Description: 提供底图配置参数，底图切换方法
    3.  * @author MrKuang
    4.  * @VX k792794653
    5.  * @date 2022/8/5 0005
    6.  */
    7.  
    8. const basemapOptions =[
    9.     /**
    10.      * type代表地图服务类型
    11.      * 0 代表ArcGisMapServerImageryProvider;
    12.      * 1 代表createOpenStreetMapImageryProvider;
    13.      * 2 代表WebMapTileServiceImageryProvider;
    14.      * 3 代表createTileMapServiceImageryProvider;
    15.      * 4 代表UrlTemplateImageryProvider;
    16.      * 5 代表WebMapServiceImageryProviderr);
    17.      */
    18.     {
    19.         id:'TDTSL',
    20.         img:'',//缩略图
    21.         type:2,
    22.         label:'天地图矢量',
    23.         params:[
    24.             {
    25.                 url: tdtUrl + '/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=' + token,
    26.                 layer: 'veccva',
    27.                 style: 'default',
    28.                 format: 'tiles',
    29.                 tileMatrixSetID: 'w',
    30.                 subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
    31.                 credit: new Cesium.Credit('天地图矢量注记'),
    32.                 maximumLevel: 18
    33.             },
    34.             {
    35.                 url: tdtUrl + '/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=' + token,
    36.                 layer: 'vec',
    37.                 style: 'default',
    38.                 format: 'tiles',
    39.                 tileMatrixSetID: 'w',
    40.                 subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
    41.                 credit: new Cesium.Credit('天地图矢量'),
    42.                 maximumLevel: 18
    43.             },
    44.  
    45.         ]
    46.     },
    47.     {
    48.         id:'TDTYX',
    49.         img:'',//缩略图
    50.         type:2,
    51.         label:'天地图影像',
    52.         params:[
    53.             {
    54.                 url: tdtUrl + '/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=' +  token,
    55.                 layer: 'imgcia',
    56.                 style: 'default',
    57.                 format: 'tiles',
    58.                 tileMatrixSetID: 'w',
    59.                 subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
    60.                 credit: new Cesium.Credit('天地图影像注记'),
    61.                 maximumLevel: 18
    62.             },
    63.             {
    64.                 url: tdtUrl + '/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=' + token,
    65.                 layer: 'img',
    66.                 style: 'default',
    67.                 format: 'tiles',
    68.                 tileMatrixSetID: 'w',
    69.                 subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
    70.                 credit: new Cesium.Credit('天地图影像'),
    71.                 maximumLevel: 18
    72.             },
    73.         ]
    74.     }
    75. ]
    76.  
    77.  
    78. export const changeBasemap =(viewer,val)=>{
    79.     const f =viewer.imageryLayers._layers.filter(item=>{
    80.         return item.lyr_id;
    81.     })
    82.     if(f.length == 0){
    83.         viewer.imageryLayers.remove(viewer.imageryLayers.get(0))
    84.         const l = getLayer(getLayerOption('TDTSL'));//默认加载天地图矢量
    85.         l.forEach(itme =>{
    86.             viewer.imageryLayers.add(itme);
    87.             viewer.imageryLayers.lowerToBottom(itme);
    88.         })
    89.     }else{
    90.         for (const elem of f) {
    91.             viewer.imageryLayers.remove(elem);
    92.         }
    93.         const l = getLayer(getLayerOption(val));//默认加载天地图矢量
    94.         l.forEach(itme =>{
    95.             viewer.imageryLayers.add(itme);
    96.             viewer.imageryLayers.lowerToBottom(itme);
    97.         })
    98.     }
    99. }
    100.  
    101. function getLayerOption(val){
    102.     return basemapOptions.find(item =>{
    103.         return item.id == val;
    104.     })
    105. }
    106.  
    107. function getLayer (val){
    108.     let tempLayerList=[];
    109.     switch (val.type){
    110.         case 0:{
    111.             break;
    112.         }
    113.         case 1:{
    114.             break;
    115.         }
    116.         case 2:{
    117.             val.params.forEach(item =>{
    118.                 let l  =new Cesium.ImageryLayer(
    119.                     new Cesium.WebMapTileServiceImageryProvider(item)
    120.                 )
    121.                 l.lyr_id = 'basemapLayer';
    122.                 l.lyr_name = val.id;
    123.                 tempLayerList.push(
    124.                     l
    125.                 )
    126.             })
    127.             break;
    128.         }
    129.     }
    130.     return tempLayerList;
    131. }

    索性前端页面调用方式也放出来吧：

    实例化viewer 之后添加这样就行

    切换的时候这样：

    我这边还是直接写的'TDTYX',

    因为我前端页面还没写好啊，哈哈哈，到时候写完直接把底图标签中数据的id 传进来就ok了。

    最后大概看下效果把：

     

  • 相关阅读:
    零基础自学javase黑马课程第十二天综合练习复习
    【Jfrog Artifactory】配置邮件服务器
    33 C++ Web 编程
    计算机基础知识35
    机器学习之算法优化（一）
    微信小程序-入门
    C#（四十五）之线程池
    jupyterlab教程
    通用人工智能技术（深度学习，大模型，Chatgpt，多模态，强化学习，具身智能）
    【毕设项目推荐】学长做过的那些有趣的毕设项目 - 毕设项目分享 (单片机 嵌入式 物联网 stm32)
  • 原文地址：https://blog.csdn.net/KK_bluebule/article/details/126177571