mars3d显示地图，并且完成切换地图图层的功能，使用隐藏显示去控制图层-Toy模板网

这篇具有很好参考价值的文章主要介绍了mars3d显示地图，并且完成切换地图图层的功能，使用隐藏显示去控制图层。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

如何安装mars3d请看这个链接哈！

我用的是vue3
先引入mars3d

import * as mars3d from "mars3d"

创建地图的变量

let m3d:any; // 地图

在template中定义div，并且id名为cesiumBox(可以自定义)

<div id="cesiumBox" class="model"></div>

在 onMounted 中使用

let mapOptions = {
   scene: {
     center: { 
       lat: 21.210378, // 纬度值
       lng: 110.426257, // 经度值
       alt: 39192.8, // 高度值
       heading: 4.5, // 方向角度值，绕垂直于地心的轴旋转角度, 0至360
       pitch: -74.1, // 俯仰角度值，绕纬度线旋转角度,-90至90
       // roll: 0, // 翻滚角度值，绕经度线旋转角度, -90至90
     },
     scene3DOnly: false, // 为 true 时，每个几何实例将仅以3D渲染以节省GPU内存
     shadows: false, // 是否启用日照阴影
     removeDblClick: false, // 是否移除Cesium默认的双击事件
     sceneMode: 3, // 初始场景模式。可以设置进入场景后初始是2D、2.5D、3D 模式。
     showSun: true, // 是否显示太阳，如修改对象可以用 map.scene.sun
     showMoon: true, // 是否显示月亮，如修改对象可以用 map.scene.moon
     showSkyBox: true, // 是否显示天空盒，如修改对象可以用 map.scene.skyBox
     showSkyAtmosphere: true, // 是否显示地球大气层外光圈，如修改对象可以用 map.scene.skyAtmosphere
     fog: true, // 是否启用雾化效果，如修改对象可以用 map.scene.fog
     fxaa: true, // 是否开启快速抗锯齿
   },
   basemaps: [
     { name: "天地图", type: "tdt", layer: "img_d", show: true },
   ],
   control: {
     baseLayerPicker: false
   }
 };
 m3d = new mars3d.Map("cesiumBox", mapOptions);

切换地图图层的实例
在上面的实例继续添加下面代码
show为false的话是图层隐藏掉
天地图的api链接在底部

const tdt_tk = ['']; // 这个key就是你在天地图中申请的key,这个是数组形式
// 电子海图
  dzht = new mars3d.layer.ArcGisTileLayer({
    name: "电子海图",
    url: "http://www.oceanread.com:213/arcgis/rest/services/chart/chartAll/MapServer",
    show: true
  })
  
  // 影像底图
  wxt = new mars3d.layer.TdtLayer({
    layer: 'img_d',
    name: '影像底图',
    url: 'https://t{s}.tianditu.gov.cn/img_w/wmts?service=WMTS&version=1.0.0&request=GetTile&tilematrix={z}&layer=img&style=default&tilerow={y}&tilecol={x}&tilematrixset=w&format=tiles',
    key: tdt_tk,
    show: false,
    zIndex: 1
  })

  wxt2 = new mars3d.layer.TdtLayer({
    layer: 'img_z',
    name: '影像注记',
    url: 'https://t{s}.tianditu.gov.cn/cia_w/wmts?service=WMTS&version=1.0.0&request=GetTile&tilematrix={z}&layer=cia&style=default&tilerow={y}&tilecol={x}&tilematrixset=w&format=tiles',
    key: tdt_tk,
    show: false,
    zIndex: 2
  })

  // 矢量底图
  slt = new mars3d.layer.TdtLayer({
    layer: 'vec_d',
    name: '矢量底图',
    url: 'https://t{s}.tianditu.gov.cn/vec_w/wmts?service=WMTS&version=1.0.0&request=GetTile&tilematrix={z}&layer=vec&style=default&tilerow={y}&tilecol={x}&tilematrixset=w&format=tiles',
    key: tdt_tk,
    show: false,
    zIndex: 1
  })

  slt2 = new mars3d.layer.TdtLayer({
    layer: 'vec_z',
    name: '矢量注记',
    url: 'https://t{s}.tianditu.gov.cn/cva_w/wmts?service=WMTS&version=1.0.0&request=GetTile&tilematrix={z}&layer=cva&style=default&tilerow={y}&tilecol={x}&tilematrixset=w&format=tiles',
    key: tdt_tk,
    show: false,
    zIndex: 2
  })

  // 添加图层
  m3d.addLayer(dzht)
  m3d.addLayer(wxt)
  m3d.addLayer(wxt2)
  m3d.addLayer(slt)
  m3d.addLayer(slt2)

接着在 template 添加此代码

<button @click="add([0])" class="model_d">电子海图</button>
<button @click="add([1,2])" class="model_d2">影像底图</button>
<button @click="add([3,4])" class="model_d3">矢量底图</button>

const add = (index:any) => {
  
  // 获取所有的图层，不包含basemaps和layers中的图层
  const layersss =m3d.getLayers({
    basemaps:false, // 不包含basemps中配置的所有图层
    layers:false // 不包含layers中配置的所有图层
  })
  // 先隐藏所有的图层
  console.log(layersss);
  layersss.map((res:any) => {
    res.show = false
  })
  // 再指定的图层下显示
  for(let i = 0; i < index.length; i++){
    layersss[index[i]].show = true
  }
  
  // 第2种方法：使用移除图层，在添加图层
  // 一开始就不要 addLayer 图层了,直接需要哪个就添加哪个的图层就可以
  // m3d.removeLayer(dzht)
  // 矢量底图
  // dzht = new mars3d.layer.TdtLayer({
  //   layer: 'vec_d',
  //   name: '矢量底图',
  //   url: 'https://t{s}.tianditu.gov.cn/vec_w/wmts?service=WMTS&version=1.0.0&request=GetTile&tilematrix={z}&layer=vec&style=default&tilerow={y}&tilecol={x}&tilematrixset=w&format=tiles',
  //   key: tdt_tk,
  //   show: true
  // })
  // m3d.addLayer(dzht)
  
}