# BaseLayerPicker

底图切换控件

## props

### imageryProviderViewModels

可供选择的底图库，[api](https://cesium.com/docs/cesiumjs-ref-doc/ProviderViewModel.html)。

```ts
    imageryProviderViewModels: {
      type: Array as PropType<ProviderViewModel[]>,
      default: () => ([])
    }
```

example

```vue
<script lang="ts">
import { defineComponent } from 'vue'
import { OpenStreetMapImageryProvider, UrlTemplateImageryProvider, ProviderViewModel, buildModuleUrl, TileMapServiceImageryProvider } from 'cesium'
import { VumBaseLayerPicker } from 'vuesium'
export default defineComponent({
  components: {
    VumBaseLayerPicker
  },
  setup () {
    const imageryViewModels = []

    const imgProvider = process.env.VUE_APP_BASE_MAP_IMG_URL ? new UrlTemplateImageryProvider({
      url: process.env.VUE_APP_BASE_MAP_IMG_URL
    }) : new TileMapServiceImageryProvider({
      url: buildModuleUrl('Assets/Textures/NaturalEarthII')
    })

    const vecProvider = process.env.VUE_APP_BASE_MAP_VEC_URL ? new UrlTemplateImageryProvider({
      url: process.env.VUE_APP_BASE_MAP_VEC_URL
    }) : new OpenStreetMapImageryProvider({
      url: 'https://a.tile.openstreetmap.org/'
    })

    imageryViewModels.push(new ProviderViewModel({
      name: '电子',
      iconUrl: buildModuleUrl('Widgets/Images/ImageryProviders/openStreetMap.png'),
      tooltip: 'OpenStreetMap (OSM) is a collaborative project to create a free editable map of the world.\nhttp://www.openstreetmap.org',
      creationFunction: function () {
        return vecProvider
      }
    }))

    imageryViewModels.push(new ProviderViewModel({
      name: '影像',
      iconUrl: buildModuleUrl('Widgets/Images/ImageryProviders/naturalEarthII.png'),
      tooltip: 'Natural Earth II, darkened for contrast.\nhttp://www.naturalearthdata.com/',
      creationFunction: function () {
        return imgProvider
      }
    }))

    const options = {
      imageryProvider: vecProvider,
      terrainProvider: undefined
    }

    return {
      options,
      imageryViewModels
    }
  }
})
</script>
<template>
<vum-viewer :options="options" v-bind="$attrs">
  <vum-base-layer-picker :imageryProviderViewModels="imageryViewModels"></vum-base-layer-picker>
  <slot></slot>
</vum-viewer>
</template>


```

### options

[BaseLayerPicker options api](https://cesium.com/docs/cesiumjs-ref-doc/BaseLayerPicker.html?classFilter=BaseLayerPicker) 。此项会覆盖其涉及到的`props`参数

```ts
    options: {
      type: Object as PropType<{
          imageryProviderViewModels?: ProviderViewModel[];
          selectedImageryProviderViewModel?: ProviderViewModel;
          terrainProviderViewModels?: ProviderViewModel[];
          selectedTerrainProviderViewModel?: ProviderViewModel;
      }>,
      default: () => ({})
    },
```

# Cesium3dTileset

 ## props
 
 ## emits
 
 ### load
 
 ## provide
 
# DataSource

## props

## emits

### load

```ts
type Viewer = __VumViewer.VumViewer
export type LoadEvent = {
  viewer: Viewer
  dataSource: CustomDataSource
}
```

## provide

+ `vumDataSource`  [CustomDataSource](https://cesium.com/learn/cesiumjs/ref-doc/CustomDataSource.html?classFilter=CustomDataSource)

# DataSourceClickPopup

 ## props
 
 ## emits
 
 ### load
 
 ## provide
 
# DataSourceConstantPopup

 ## props
 
 ## emits
 
 ### load
 
 ## provide
 
# Entity

## props

### defaultOptions

[PropType<Entity.ConstructorOptions>](https://cesium.com/learn/cesiumjs/ref-doc/Entity.html#.ConstructorOptions)

非响应式

### show

`Boolean`

控制`entity`显影

## emits

### load

```ts
type Viewer = __VumViewer.VumViewer
export type LoadEvent = {
  viewer: Viewer
  dataSource: DataSource
  entity: Entity
}
```

## provide

+ `vumEntity`  [Entity](https://cesium.com/learn/cesiumjs/ref-doc/Entity.html)

# GeoJsonDataSource

https://cesium.com/learn/cesiumjs/ref-doc/GeoJsonDataSource.html?classFilter=geojson

 ## props
  ### name

  `dataSource` 名称

  ### value

  驱动  `dataSource `  的  geojson 数据 或者 存有 geojson 数据 的 `Promise`

  ### show

  控制图层显隐

  ### cursor

  鼠标移入检测到要素时，将要改变的样式

  ### loadOptions

https://cesium.com/learn/cesiumjs/ref-doc/GeoJsonDataSource.html?classFilter=geojson#.LoadOptions

### viewRadianDisplayCondition

控制dataSource在一个层级区间下显隐

```ts
  viewRadianDisplayCondition: {
    type: Array as PropType<number[]>, 
    default: ():number[] => [],
  },
```

+ viewRadianDisplayCondition[0]：最小可视弧度，小于这个弧度则隐藏
+ viewRadianDisplayCondition[1]：最大可视弧度，大于这个弧度则隐藏

地球离屏幕越近，可视弧度越小

地球离屏幕越远，可视弧度越大，最大值为 2PI

```vue
   <VumGeoJsonDataSource
    :view-radian-display-condition="[3.14/100, 3.14]"
    :model-value="dataSource"
    :load-options="loadOptions"
    @load="layerLoad"
  ></VumGeoJsonDataSource>
```



 ## emits

 ### load

```ts
export declare type LoadEvent = {
    viewer: Viewer;
    dataSource: GeoJsonDataSource;
};
export declare type OnLoad = (e: LoadEvent) => ReturnVoid;
```



 ## provide

+ `vumDataSource`: https://cesium.com/learn/cesiumjs/ref-doc/GeoJsonDataSource.html

## example

### 通过接口加载

```vue
<script lang="ts" setup>
import { VumViewer,VumGeoJsonDataSource, VumSkyBasemap, __VumGeoJsonDataSource } from 'vuesium'
import { getCityDivision } from '@/api/arcgis'
const dataSource = getCityDivision() // getCityDivision() return Promise<FeatureCollection>
const layerLoad:__VumGeoJsonDataSource.OnLoad = ({ viewer, dataSource }) => {
  viewer.flyTo(dataSource, {
    duration: 0,
  })
}
</script>
<template>
<VumViewer>
  <VumSkyBasemap></VumSkyBasemap>
  <VumGeoJsonDataSource :model-value="dataSource"
    @load="layerLoad"
  ></VumGeoJsonDataSource>
</VumViewer>
</template>

```

### 自定义entity样式

```ts
    const layerLoad:__VumGeoJsonDataSource.OnLoad = ({
      dataSource,
    }) => {
      const entities = dataSource.entities.values
      entities.forEach(e => {
        e.polygon = new PolygonGraphics({
          hierarchy: e.polygon?.hierarchy,
          extrudedHeight: 1000,
          material: Color.fromCssColorString(getRootStyle('--c-land')),
          outline: true,
          outlineColor: Color.fromCssColorString(getRootStyle('--c-land-border')),
        })
      })
    }
```

### 根据polygon绘制轮廓

```vue
<script lang="ts" setup>
import { VumViewer,VumGeoJsonDataSource, VumSkyBasemap, __VumGeoJsonDataSource  } from 'vuesium'
import { createPolylineFromPolygon } from '@vuesium/shared'
import { getCityDivision } from '@/api/arcgis'
import { Color, GeoJsonDataSource } from 'cesium'
const dataSource = getCityDivision()
const layerLoad:__VumGeoJsonDataSource.OnLoad = ({ viewer, dataSource }) => {
  viewer.flyTo(dataSource, {
    duration: 0,
  })
  const entities = dataSource.entities.values
  entities.forEach(e => {
    if (!e.polygon) return
    // 将polygon的轮廓应用于polyline 用于可视化轮廓
    const polyline = createPolylineFromPolygon(viewer, e, {
      width: 3,
      material: Color.BLUE,
    }, {
      offsetZ: 1000,
    })
    e.polyline = polyline
    e.polygon = undefined
  })
}
const loadOptions:GeoJsonDataSource.LoadOptions = {
  fill: Color.TRANSPARENT,
}
</script>
<template>
<VumViewer>
  <VumSkyBasemap></VumSkyBasemap>
  <VumGeoJsonDataSource 
    :model-value="dataSource"
    :load-options="loadOptions"
    @load="layerLoad"
  ></VumGeoJsonDataSource>
</VumViewer>
</template>

```

![image-20210916113249493](D:\labCode\vuesium-next\packages\geo-json-data-source\README.assets\image-20210916113249493.png)

# HeatmapLayer

 ## props
 
 ## emits
 
 ### load
 
 ## provide
 
# ImageryLayer

## props

### imageryProvider

非响应式

[https://cesium.com/docs/cesiumjs-ref-doc/ImageryProvider.html?classFilter=imageryProvider](https://cesium.com/docs/cesiumjs-ref-doc/ImageryProvider.html?classFilter=imageryProvider) ，非响应式

```ts
    imageryProvider: {
      type: Object as PropType<ImageryProvider>,
      required: true
    },
```

WebMapServiceImageryProvider

```js
    const imageryProvider = new WebMapServiceImageryProvider({
      url: process.env.VUE_APP_MINING_POINT,
      layers: 'KQ:KQ',
      parameters: {	// 对于geoserver发布的wms服务可以有以下参数
          version: '1.3.0', // wms的版本
          format: 'image/png', // 输出的格式
          transparent: true, // 是否开启透明
          cql_filter: `ID='1'` // 过滤条件
      }
    })
```



### defaultOptions

非响应式

[https://cesium.com/docs/cesiumjs-ref-doc/ImageryLayer.html?classFilter=imagerylayer](https://cesium.com/docs/cesiumjs-ref-doc/ImageryLayer.html?classFilter=imagerylayer) options, 

```ts
    options: {
      type: Object,
      required: false
    },
```

### show

```
    show: {
      type: Boolean,
      default: true
    },
```

### index

当前layer的排序

```ts
    index: {
      type: Number,
      required: false
    }
```

## emits

### load

```ts
import { Viewer, ImageryLayer } from 'cesium'
export type LoadEvent = { viewer: Viewer, imageryLayer: ImageryLayer }
export type OnLoad = (e: LoadEvent) => void
```

## provide

+ `vumImageryLayer` 初始化的`ImageryLayer`实例
# PointBufferAnalysis

## props

### v-model:action

控件当前所处的状态

当前绘制动作

```ts
/**
 *  'update'：更新，'create'：创建\
 *  'start'：开始绘制， 'active'：绘制中，'complete'：结束绘制
 */
export type Action = {
  type: 'update' | 'create'
  state: ['start','active','complete'][number]
}

	action: {
      type: Object as PropType<Action>,
      required: true,
      default: () => ({
        type: 'create',
        state: 'complete',
      }),
    },
```

`create`点位时,不存在`active`状态, 点击地图即`complete`

### v-model:point

控件完成态，点位绑定的数据

```ts
    point: {
      type: Object as PropType<CallbackProperty>,
      default: () => new CallbackProperty(() => new Cartesian3(), true),
    },
```

### pointEntityOptions

非响应式

修改point样式

```ts
pointEntityOptions: {
    type: Object as PropType<Entity.ConstructorOptions>,
    default: () => ({
      point: {
        color: Color.ORANGE,
        pixelSize: 10,
      },
    } as Entity.ConstructorOptions)
```

### v-model:buffer

控件完成态，缓冲区绑定的数据

```ts
    buffer: {
      type: Object as PropType<CallbackProperty>,
      default: () => new CallbackProperty(() => new PolygonHierarchy(), true),
    },
```

### radius

缓冲区半径

```ts
export type Units = 'meters' | 'millimeters' | 'centimeters' | 'kilometers' | 'acres' | 'miles' | 'nauticalmiles' | 'inches' | 'yards' | 'feet' | 'radians' | 'degrees' | 'hectares'

radius: {
    type: Object as PropType<{ value: number; unit: Units; }>,
    default: () => ({
        value: 10,
        unit: 'kilometers',
    }),
},
```

### bufferEntityOptions

非响应式

修改buffer entity的样式

```ts
    bufferEntityOptions: {
      type: Object as PropType<Entity.ConstructorOptions>,
      default: () => ({
        polygon: new PolygonGraphics({
          fill: true,
          material: Color.BLUE.withAlpha(0.3),
        }),
      }),
    },
```

### bufferInActive

是否在绘制中显示buffer范围

```ts
    bufferInActive: {
      type: Boolean,
      default: false,
    },
```



## provide

+ `vumEntity`  [Entity](https://cesium.com/learn/cesiumjs/ref-doc/Entity.html)

# PointEntity

`Entity`-`PointEnity`

## props

### show

`Boolean`

控制`entity`显影

### defaultOptions

[PropType<Entity.ConstructorOptions>](https://cesium.com/learn/cesiumjs/ref-doc/Entity.html#.ConstructorOptions)

非响应式

```ts
  defaultOptions: {
    type: Object as PropType<Entity.ConstructorOptions>,
    default: () => ({
      point: {
        color: Color.ORANGE,
        pixelSize: 10,
      },
    } as Entity.ConstructorOptions),
```



### modelValue

数据源 对应`entity.position` 属性

```ts
  modelValue: {
    type: Object as PropType<PositionProperty| Cartesian3|CallbackProperty>,
    default: () => [],
  },
```

## emits

### load

from `VumEntity`

```ts
type Viewer = __VumViewer.VumViewer
export type LoadEvent = {
  viewer: Viewer
  dataSource: DataSource
  entity: Entity
}
```

## provide



from `VumEntity`

+ `vumEntity`  [Entity](https://cesium.com/learn/cesiumjs/ref-doc/Entity.html)

# PointSketch

## props

### defaultOptions

非响应式，初始化 [entity](https://cesium.com/learn/ion-sdk/ref-doc/Entity.html#.ConstructorOptions)。

```ts
defaultOptions: {
    type: Object as PropType<Entity.ConstructorOptions>,
    default: () => ({
      point: {
        color: Color.ORANGE,
        pixelSize: 10,
      },
    } as Entity.ConstructorOptions),
  },
```

### v-model

 当前绑定的点位数据

```ts
    modelValue: {
      type: Object as PropType<CallbackProperty>,
      default: () => new CallbackProperty(() => new Cartesian3(),true),
    },
```

### v-model:action

当前绘制动作

```ts
/**
 *  'update'：更新，'create'：创建\
 *  'start'：开始绘制， 'active'：绘制中，'complete'：结束绘制
 */
export type Action = {
  type: 'update' | 'create'
  state: ['start','active','complete'][number]
}

	action: {
      type: Object as PropType<Action>,
      required: true,
      default: () => ({
        type: 'create',
        state: 'complete',
      }),
    },
```
`create`点位时,不存在`active`状态, 点击地图即`complete`


## emits

### load

```ts
type Viewer = __VumViewer.VumViewer
export type LoadEvent = {
  viewer: Viewer
  position: CallbackProperty
  positionCache: Cartesian3
  isConstant: Ref<boolean>
}
export type OnLoad = (e:LoadEvent) => ReturnVoid
```

+ `position` 当前`entity.position `的实例
+ `positionCache`  `entity.position `的计算依据
+ `isConstant` 修改它可以控制 `position`是否固定（不需要实时刷新）

## provide

`vumEnity`# PolygonBuffer

## props

## emits

### load

## provide

# PolygonBufferAnalysis

## props

### v-model:action

控件当前所处的状态

当前绘制动作

```ts
/**
 *  'update'：更新，'create'：创建\
 *  'start'：开始绘制， 'active'：绘制中，'complete'：结束绘制
 */
export type Action = {
  type: 'update' | 'create'
  state: ['start','active','complete'][number]
}

	action: {
      type: Object as PropType<Action>,
      required: true,
      default: () => ({
        type: 'create',
        state: 'complete',
      }),
    },
```

`create`点位时,不存在`active`状态, 点击地图即`complete`

### v-model:polygon

控件完成态，点位绑定的数据

```ts
    polygon: {
      type: Object as PropType<CallbackProperty>,
      default: () => new CallbackProperty(() => new PolygonHierarchy(), true),
    },
```

### v-model:buffer

控件完成态，缓冲区绑定的数据

```ts
    buffer: {
      type: Object as PropType<CallbackProperty>,
      default: () => new CallbackProperty(() => new PolygonHierarchy(), true),
    },
```

### polygonEntityOptions

非响应式

修改polygon的样式

```ts
polygonEntityOptions: {
      type: Object as PropType<Entity.ConstructorOptions>,
      default: () => ({
        polygon: new PolygonGraphics({
          fill: true,
          material: Color.YELLOW.withAlpha(0.3),
        }),
      }),
    },
```

### bufferEntityOptions

非响应式

修改buffer entity的样式

```ts
    bufferEntityOptions: {
      type: Object as PropType<Entity.ConstructorOptions>,
      default: () => ({
        polygon: new PolygonGraphics({
          fill: true,
          material: Color.BLUE.withAlpha(0.3),
        }),
      }),
    },
```

### bufferInActive

是否在绘制中显示buffer范围

```ts
    bufferInActive: {
      type: Boolean,
      default: false,
    },
```

# PolygonEntity

`Entity`-`PolygonEntity`

## props

### show

`Boolean`

控制`entity`显影

### defaultOptions

[PropType<Entity.ConstructorOptions>](https://cesium.com/learn/cesiumjs/ref-doc/Entity.html#.ConstructorOptions)

非响应式

```ts
  defaultOptions: {
    type: Object as PropType<Entity.ConstructorOptions>,
    default: () => ({
      polygon: new PolygonGraphics({
        extrudedHeight: 0,
        material: Color.BLUE.withAlpha(.2),
      }),
    } as Entity.ConstructorOptions),
  },
```



## emits

### load

from `VumEntity`

```ts
type Viewer = __VumViewer.VumViewer
export type LoadEvent = {
  viewer: Viewer
  dataSource: DataSource
  entity: Entity
}
```



## provide

from `VumEntity`

+ `vumEntity`  [Entity](https://cesium.com/learn/cesiumjs/ref-doc/Entity.html)

# PolygonOutlineEntity

## props

## emits

### load

## provide

# PolygonSketch

## props

### defaultOptions

非响应式，初始化 [entity](https://cesium.com/learn/ion-sdk/ref-doc/Entity.html#.ConstructorOptions)。

```ts
  defaultOptions: {
    type: Object as PropType<Entity.ConstructorOptions>,
    default: () => ({
      polygon: new PolygonGraphics({
        material: Color.BLUE.withAlpha(.2),
      }),
    } as Entity.ConstructorOptions),
  },
```

必须设置 defaultOptions 的 `polygon` 属性。

### v-model

当前绑定的返回`PolygonHierarchy` 的`CallbackProperty`

```ts
  modelValue: {
    type: Object as PropType<CallbackProperty>,
    default: () => new CallbackProperty(() => new PolygonHierarchy(), true),
  },
```

### v-model:action

当前绘制动作

```ts
/**
 *  'update'：更新，'create'：创建\
 *  'start'：开始绘制， 'active'：绘制中，'complete'：结束绘制
 */
export type Action = {
  type: 'update' | 'create'
  state: ['start','active','complete'][number]
}

	action: {
      type: Object as PropType<Action>,
      required: true,
      default: () => ({
        type: 'create',
        state: 'complete',
      }),
    },
```

## emits



### load

## provide



## example

### 结合其他组件控制绘制

```ts
<script lang='ts'>
import {
  Viewer,
  ImageryLayer,
  CallbackProperty, PolygonHierarchy
} from 'cesium'
import { Position } from 'node_modules/@types/geojson'
import { defineComponent, inject, PropType, ref, shallowRef } from 'vue'
import ToolsTabItem from '_c/ToolsTabItem/index.vue'
import { pickWmsImageryLayersByRings } from '@/api/tools/geoserver'
import { getAllLayers } from '@/utils/cesium/imageryLayerCollection'
import { VumPolygonSketch, SketchAction, cartesian3ArrayToCoordinateArray } from 'vuesium'

export default defineComponent({
  components: {
    ToolsTabItem, VumPolygonSketch
  },
  props: {
    filter: {
      type: Function as PropType<(item: ImageryLayer, index: number) => boolean>,
      default: (item: ImageryLayer, index: number) => index > 0 && item.show
    }
  },
  emits: {
    'pick-features': null
  },
  setup (props, { emit }) {
    const viewer = inject<Viewer>('vumViewer')
    if (!viewer) throw new TypeError('QueryLayersTool must be in VumViewer')
    const drawPolyon = shallowRef(new CallbackProperty(() => new PolygonHierarchy(), true)) // 数据源
    const drawType = ref<SketchAction>({ // 当前绘制状态
      type: 'create',
      state: 'complete'
    })

    const queryActive = () => { // 开始绘制
      drawType.value.state = 'start'
    }
    const queryInactive = () => { // 结束绘制
      drawType.value.state = 'complete'
      drawPolyon.value.setCallback(() => new PolygonHierarchy(), true)
    }

    const doQuery = async (v: Position[][][]) => {
      const layers = getAllLayers(viewer.imageryLayers)
      const queryLayers = props.filter ? layers.filter(props.filter) : layers
      const res = await pickWmsImageryLayersByRings(v, queryLayers)
      emit('pick-features', res)
    }

    const handleAction = (e: SketchAction) => {
      if (e.state === 'complete') { // 绘制完成事件
        const polygonHierarchy: PolygonHierarchy = drawPolyon.value.getValue()
        // 转换成地理坐标
        const rings = cartesian3ArrayToCoordinateArray(viewer, polygonHierarchy.positions)
        doQuery([[rings]])
      }
    }

    return {
      queryActive,
      queryInactive,
      drawPolyon,
      drawType,
      handleAction
    }
  }
})
</script>
<template>
  <ToolsTabItem v-bind="$attrs" @active="queryActive" @inactive="queryInactive" :title="'绘制查询'">
    <svg-icon icon-class="shape-query" class="f-l"  />
  </ToolsTabItem>
  <VumPolygonSketch v-model="drawPolyon" v-model:action="drawType" @update:action="handleAction" />
</template>

```

# PolylineBuffer

## props

## emits

### load

## provide

# PolylineBufferAnalysis

## props

### v-model:action

控件当前所处的状态

当前绘制动作

```ts
/**
 *  'update'：更新，'create'：创建\
 *  'start'：开始绘制， 'active'：绘制中，'complete'：结束绘制
 */
export type Action = {
  type: 'update' | 'create'
  state: ['start','active','complete'][number]
}

	action: {
      type: Object as PropType<Action>,
      required: true,
      default: () => ({
        type: 'create',
        state: 'complete',
      }),
    },
```

### v-model:buffer

控件完成态，缓冲区绑定的数据

```ts
    buffer: {
      type: Object as PropType<CallbackProperty>,
      default: () => new CallbackProperty(() => new PolygonHierarchy(), true),
    },
```

### radius

缓冲区半径

```ts
export type Units = 'meters' | 'millimeters' | 'centimeters' | 'kilometers' | 'acres' | 'miles' | 'nauticalmiles' | 'inches' | 'yards' | 'feet' | 'radians' | 'degrees' | 'hectares'

radius: {
    type: Object as PropType<{ value: number; unit: Units; }>,
    default: () => ({
        value: 10,
        unit: 'kilometers',
    }),
},
```

### v-model:polyline

控件完成态，点位绑定的数据

```ts
  polyline: {
    type: Object as PropType<CallbackProperty>,
    default: () => new CallbackProperty(() => [], true),
  },
```

### polylineEntityOptions

非响应式

修改polygon entity的样式

```ts
polylineEntityOptions:{
    type: Object as PropType<Entity.ConstructorOptions>,
    default: () => ({
      polyline: new PolylineGraphics({
        material: Color.YELLOW.withAlpha(0.6),
        width: 2,
        clampToGround: true,
      }),
    } as Entity.ConstructorOptions),
  }
```

### bufferEntityOptions

非响应式

修改buffer entity的样式

```ts
    bufferEntityOptions: {
      type: Object as PropType<Entity.ConstructorOptions>,
      default: () => ({
        polygon: new PolygonGraphics({
          fill: true,
          material: Color.BLUE.withAlpha(0.3),
        }),
      }),
    },
```

### bufferInActive

是否在绘制中显示buffer范围

```ts
    bufferInActive: {
      type: Boolean,
      default: false,
    },
```



## provide

+ `vumEntity`  [Entity](https://cesium.com/learn/cesiumjs/ref-doc/Entity.html)

# PolylineEntity

`Entity`-`PolylineEntity`

## props

### show

`Boolean`

控制`entity`显影

### defaultOptions

[PropType<Entity.ConstructorOptions>](https://cesium.com/learn/cesiumjs/ref-doc/Entity.html#.ConstructorOptions)

非响应式

```ts
  defaultOptions: {
    type: Object as PropType<Entity.ConstructorOptions>,
    default: () => ({
      polyline: new PolygonGraphics( {
        material: Color.YELLOW.withAlpha(.6),
        outlineWidth: 2,
      }),
    } as Entity.ConstructorOptions),
  },
```



## emits

### load

from `VumEntity`

```ts
type Viewer = __VumViewer.VumViewer
export type LoadEvent = {
  viewer: Viewer
  dataSource: DataSource
  entity: Entity
}
```



## provide

from `VumEntity`

+ `vumEntity`  [Entity](https://cesium.com/learn/cesiumjs/ref-doc/Entity.html)

# PolylineSketch

## props

## emits

### load

## provide

# SkyBasemap

 ## props
 
 ## emits
 
 ### load
 
 ## provide
 
# VumViewer

初始化 cesium `Viewer` 实例

## props

### defaultOptions

非响应式

[PropType<Viewer.ConstructorOptions>](https://cesium.com/learn/cesiumjs/ref-doc/Viewer.html#.ConstructorOptions)

### cursor

`string`

控制鼠标在地图div上的样式

此属性会覆盖，在子组件设置cursor引起的影响

## emits

### load

```vue
<script lang="ts">
import { defineComponent } from 'vue'
import { __VumViewer } from '_c/types'
export default defineComponent({
  setup () {
    const loadViewer: __VumViewer.OnLoad = ({ viewer }) => {
      console.log(viewer) // cesium `Viewer` 实例
    }
    return {
      loadViewer
    }
  }
})
</script>
<template>
  <vum-viewer
    @load="loadViewer"
  >
  </vum-viewer>
</template>
```

## provide

### viewer

cesium `Viewer` 实例

#### viewer[sMitter]

- `camera-move`  camera.changed

- `camera-move-end` camera.moveEnd

- `camera-move-start`  camera.moveStart

- `left-click`   当点击到一个未被屏蔽事件的要素时触发

  ```ts
  const viewerMitter = inject<__VumViewer.ViewerMitter>('viewerMitter')
  const emitClick:__VumViewer.OnClick = (event) => {
  	// do ...
  }
  viewerMitter.on('left-click', emitClick)
  onUnmounted(() => {
    viewerMitter.off('left-click', emitClick)
  })
  ```

- `mouse-move `  当鼠标移动到一个未被屏蔽事件的要素时触发

  ```ts
  const viewerMitter = inject<__VumViewer.ViewerMitter>('viewerMitter')
  const emitMouseMove:__VumViewer.OnMouseMove = (event) => {
    // do ...
  }
  viewerMitter.on('mouse-move', emitMouseMove)
  onUnmounted(() => {
  	viewerMitter.off('mouse-move', emitMouseMove)
  }
  ```

##  example

### 调整视角

```vue
<script lang="ts">
import { defineComponent } from 'vue'
import { Cartesian3, Viewer } from 'cesium'
export default defineComponent({
  methods: {
    setView ({ viewer }: { viewer: Viewer }) {
      const camera = viewer.camera
      camera.setView({
        destination: new Cartesian3(-2775018.8829862527, 4733423.758635312, 3251934.259794174),
        orientation: {
          heading: 0.692545081604309, // east, default value is 0.0 (north)
          pitch: -0.8280089240964794, // default value (looking down)
          roll: 0.0027926028351590304 // default value
        }
      })
    }
  }
})
</script>
<template>
<VumViewer @load="setView">
</VumViewer>
</template>
```

## 
# ViewerDiv

 ## props
 
 ## emits
 
 ### load
 
 ## provide