Viewer 视图

---

演练场

引入

import { Viewer } from "@m-tech/gis-core";

new Viewer(viewerContainer, options);

入参

参数名称	类型	必填	默认值	描述
viewerContainer	HTMLElement	是	-	容器
options	object	否	{}	配置项
options.defaultView	Array<number>	否	-	默认视图
options.imageryProviderType	ImageryProviderType	否	TMap	影像类型
options.imageryType	ImageryType	否	IMG_C	在线地图类型
options. depthTestAgainstTerrain	boolean	否	false	是否开启地形深度测试
options.viewerMode	ViewerMode	否	3D	视图模式
options.locationBar	boolean	否	false	是否显示位置栏
options.navigationVisible	boolean	否	false	是否显示导航栏
options. debugShowFramesPerSecond	boolean	否	false	是否显示帧率

提示

Viewer 继承自 Cesium 的 Viewer，因此 Cesium 的 Viewer 的 配置项 也可以使用。

属性

属性	类型	读/写	描述
cursor	string	读写	鼠标样式
pickingStyleCursor	string	读写	拾取样式
cameraPosition	Position	读	相机位置
level	number	读	地图缩放层级
centerPosition	Position	读	地图中心点坐标
defaultView	Position	读写	默认视图
defaultCenter	Position	读写	默认中心点
viewerMode	ViewerMode	读写	视图模式
is2D	boolean	读	是否为 2D 模式
is3D	boolean	读	是否为 3D 模式
enableLighting	boolean	读写	是否开启光照

方法

• on(type: ViewerEventType | SceneEventType, callback: Function, context: ctx)

设置事件监听。

• off(type: ViewerEventType | SceneEventType, callback: Function, context: ctx)

移除事件监听。

• setImageryLayer(imageryProviderType: ImageryProviderType, imageryType?: ImageryType, isDefault?: boolean)

设置在线地图图层。

• getImageryLayers(imageryProviderType?: ImageryProviderType, imageryType?: ImageryType)

获取在线地图图层。

• removeDefaultLayers()

移除默认图层，包含默认在线底图。

• removeImageryLayer(layer?: Layer)

移除影像图层。

• addLayer(layer: Layer)

添加图层。

• removeLayer(layer: Layer)

移除图层。

• addLayers(layers: Layer[])

添加多个图层。

• removeLayers(layers: Layer[])

移除多个图层。

• hasLayer(layer: Layer)

检查是否包含该图层。

• getLayer(id: string)

根据 id 获取图层。

• eachLayer(method: Function, context: any)

遍历图层。

• addEffect(effect: Effect)

添加粒子效果。

• removeEffect(effect: Effect)

移除粒子效果。

• addWidget(widget?: Widget)

添加控件。

• removeWidget(widget?: Widget)

移除控件。

• getWidgets()

获取当前地图上的全部控件。

示例

<template>
  <div ref="viewerContainer" style="position: relative;" />
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { Viewer, ViewerMode } from "@m-tech/gis-core";

const viewerContainer = ref();

onMounted(() => {
  const viewer = new Viewer(viewerContainer.value, {
    defaultView: [114.31347646, 30.46387381, 2500, 0, -45, 0], // 默认视图
    viewerMode: ViewerMode["3D"], // 视图模式
    locationBar: true, // 是否显示位置栏
    navigationVisible: true, // 是否显示导航栏
    debugShowFramesPerSecond: true, // 是否显示帧率
  });
});
</script>