qe-terrain-layer

地形图层组件，主要用于展示各种地形，包括：天地图地形、google earth 地形、arcgis 地形、cesium服务地形等。

---

实例

隐藏代码

<template>

  <div style="height: 450px;">
    <div  style="height: 8%;">
      <el-button-group>
        <el-button type="primary" size="mini" @click="handler('tdt')">天地图地形</el-button>
        <el-button type="primary" size="mini" @click="handler('cesium')">中国地形 </el-button>
        <el-button type="primary" size="mini" @click="handler('arcgis')">arcgis 地形</el-button>
      </el-button-group>
    </div>
    <qe-viewer
      style="height: 90%;"
      :imagery-type="'TMap'"
      :fullscreen-button="true"
      :default-view="defaultView"
    >
      <qe-terrain-layer 
        :layer-type="layerType" 
        :layer-options="layerOptions"
      >
      </qe-terrain-layer>
    </qe-viewer>
  </div>
</template>

<script>
import { QeViewer, QeTerrainLayer } from '@qycloud/vue-qearth';
import 'vue2qearth/vue2qearth.css'
import elementUI from 'element-ui'
import Vue from 'vue'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(elementUI)

export default {
  components: {
    QeViewer, 
    QeTerrainLayer
  },
  data () {
    return {
      defaultView: [
        97.5063,
        28.5769,
        22088.03,
        265.27,
        -20.93,
        359.83
      ],
      isShowLayer: true,
      layerType: "arcgis",
      layerOptions: {url: "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer"}
    };
  },
  methods: {
    handler(layerType) {
      this.layerType = layerType;
      if (layerType === "cesium") {
        this.layerOptions = {
          url: "http://data.marsgis.cn/terrain"
        }
      } else if (layerType === "arcgis") {
        this.layerOptions = {
          url: "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer"
        }
      }
    }
  }
}
</script>

Attributes

参数	说明	类型	可选值	默认值
layerType	地形类型	string	参照 layerType 说明	—
layerOptions	图层其他可选参数	object	参照 layerType 说明	—

layerType-说明

// 天地图地形类型参数设置
{
  layerType: "tdt",
  layerOptions: {
    // 天地图 `cesiumTdt.js` 资源路径
    cesiumTdtSrc: "https://api.tianditu.gov.cn/cdn/plugins/cesium/cesiumTdt.js" ,
    // 天地图地形服务 `tk`
    tk: "9ae78c51a0a28f06444d541148496e36"
  }
}

// cesium 地形
{
  layerType: "cesium",
  layerOptions: {
    // 地形服务地址
    // 参数设置参照链接： https://cesium.com/docs/cesiumjs-ref-doc/CesiumTerrainProvider.html?classFilter=CesiumTerrainProvider
    url: "http://data.marsgis.cn/terrain"
  }
}

// arcgis 地形
{
  layerType: "arcgis",
  layerOptions: {
    // 地形服务地址
    // 参数设置参照链接：https://cesium.com/docs/cesiumjs-ref-doc/ArcGISTiledElevationTerrainProvider.html?classFilter=ArcGISTiledElevationTerrainProvider
    url: "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer"
  }
}

// ellipsoid 地形
{
  layerType: "ellipsoid",
  // 参数设置参照链接：https://cesium.com/docs/cesiumjs-ref-doc/EllipsoidTerrainProvider.html?classFilter=EllipsoidTerrainProvider
  layerOptions: {}
}

// google earth 地形
{
  layerType: "google",
  // 参数设置参照链接：https://cesium.com/docs/cesiumjs-ref-doc/GoogleEarthEnterpriseTerrainProvider.html?classFilter=GoogleEarthEnterpriseTerrainProvider
  layerOptions: {}
}

// VT 地形
{
  layerType: "vt",
  // 参数设置参照链接：https://cesium.com/docs/cesiumjs-ref-doc/VRTheWorldTerrainProvider.html?classFilter=VRTheWorldTerrainProvider
  layerOptions: {}
}

Events

覆盖物事件的使用请参照上面TerrainLayer 实例

---

// 图层可选事件
"ready" // 组件装载后，返回当前实例对象