如何安裝mars3d請(qǐng)看這個(gè)鏈接哈！

我用的是vue3
先引入mars3d

import * as mars3d from "mars3d"

創(chuàng)建地圖的變量

let m3d:any; // 地圖

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

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

在 onMounted 中使用

let mapOptions = {
   scene: {
     center: { 
       lat: 21.210378, // 緯度值
       lng: 110.426257, // 經(jīng)度值
       alt: 39192.8, // 高度值
       heading: 4.5, // 方向角度值，繞垂直于地心的軸旋轉(zhuǎn)角度, 0至360
       pitch: -74.1, // 俯仰角度值，繞緯度線旋轉(zhuǎn)角度,-90至90
       // roll: 0, // 翻滾角度值，繞經(jīng)度線旋轉(zhuǎn)角度, -90至90
     },
     scene3DOnly: false, // 為 true 時(shí)，每個(gè)幾何實(shí)例將僅以3D渲染以節(jié)省GPU內(nèi)存
     shadows: false, // 是否啟用日照陰影
     removeDblClick: false, // 是否移除Cesium默認(rèn)的雙擊事件
     sceneMode: 3, // 初始場景模式。可以設(shè)置進(jìn)入場景后初始是2D、2.5D、3D 模式。
     showSun: true, // 是否顯示太陽，如修改對(duì)象可以用 map.scene.sun
     showMoon: true, // 是否顯示月亮，如修改對(duì)象可以用 map.scene.moon
     showSkyBox: true, // 是否顯示天空盒，如修改對(duì)象可以用 map.scene.skyBox
     showSkyAtmosphere: true, // 是否顯示地球大氣層外光圈，如修改對(duì)象可以用 map.scene.skyAtmosphere
     fog: true, // 是否啟用霧化效果，如修改對(duì)象可以用 map.scene.fog
     fxaa: true, // 是否開啟快速抗鋸齒
   },
   basemaps: [
     { name: "天地圖", type: "tdt", layer: "img_d", show: true },
   ],
   control: {
     baseLayerPicker: false
   }
 };
 m3d = new mars3d.Map("cesiumBox", mapOptions);

切換地圖圖層的實(shí)例
在上面的實(shí)例繼續(xù)添加下面代碼
show為false的話是圖層隱藏掉
天地圖的api鏈接在底部

const tdt_tk = ['']; // 這個(gè)key就是你在天地圖中申請(qǐng)的key,這個(gè)是數(shù)組形式
// 電子海圖
  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 圖層了,直接需要哪個(gè)就添加哪個(gè)的圖層就可以
  // 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)
  
}

天地圖的api
天地圖的實(shí)例文章來源地址http://www.zghlxwxcb.cn/news/detail-520110.html

到了這里，關(guān)于mars3d顯示地圖，并且完成切換地圖圖層的功能，使用隱藏顯示去控制圖層的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！