BaseLayerPicker

底图切换控件

props

imageryProviderViewModels

可供选择的底图库，api。

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

example

<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 。此项会覆盖其涉及到的props参数

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

Cesium3dTileset

props

emits

load

provide

DataSource

props

emits

load

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

provide

vumDataSource CustomDataSource

DataSourceClickPopup

props

emits

load

provide

DataSourceConstantPopup

props

emits

load

provide

Entity

props

defaultOptions

PropType<Entity.ConstructorOptions>

非响应式

show

Boolean

控制entity显影

emits

load

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

provide

vumEntity Entity

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在一个层级区间下显隐

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

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

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

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

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

emits

load

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

通过接口加载

<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样式

    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绘制轮廓

<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>

HeatmapLayer

props

emits

load

provide

ImageryLayer

props

imageryProvider

非响应式

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

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

WebMapServiceImageryProvider

    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 options,

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

show

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

index

当前layer的排序

    index: {
      type: Number,
      required: false
    }

emits

load

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

控件当前所处的状态

当前绘制动作

/**
 *  '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

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

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

pointEntityOptions

非响应式

修改point样式

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

v-model:buffer

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

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

radius

缓冲区半径

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的样式

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

bufferInActive

是否在绘制中显示buffer范围

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

provide

vumEntity Entity

PointEntity

Entity-PointEnity

props

show

Boolean

控制entity显影

defaultOptions

PropType<Entity.ConstructorOptions>

非响应式

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

modelValue

数据源对应entity.position 属性

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

emits

load

from VumEntity

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

provide

from VumEntity

vumEntity Entity

PointSketch

props

defaultOptions

非响应式，初始化 entity。

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

v-model

当前绑定的点位数据

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

v-model:action

当前绘制动作

/**
 *  '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

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

控件当前所处的状态

当前绘制动作

/**
 *  '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

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

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

v-model:buffer

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

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

polygonEntityOptions

非响应式

修改polygon的样式

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

bufferEntityOptions

非响应式

修改buffer entity的样式

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

bufferInActive

是否在绘制中显示buffer范围

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

PolygonEntity

Entity-PolygonEntity

props

show

Boolean

控制entity显影

defaultOptions

PropType<Entity.ConstructorOptions>

非响应式

  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

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

provide

from VumEntity

vumEntity Entity

PolygonOutlineEntity

props

emits

load

provide

PolygonSketch

props

defaultOptions

非响应式，初始化 entity。

  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

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

v-model:action

当前绘制动作

/**
 *  '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

结合其他组件控制绘制

<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

控件当前所处的状态

当前绘制动作

/**
 *  '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

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

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

radius

缓冲区半径

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

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

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

polylineEntityOptions

非响应式

修改polygon entity的样式

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的样式

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

bufferInActive

是否在绘制中显示buffer范围

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

provide

vumEntity Entity

PolylineEntity

Entity-PolylineEntity

props

show

Boolean

控制entity显影

defaultOptions

PropType<Entity.ConstructorOptions>

非响应式

  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

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

provide

from VumEntity

vumEntity Entity

PolylineSketch

props

emits

load

provide

SkyBasemap

props

emits

load

provide

VumViewer

初始化 cesium Viewer 实例

props

defaultOptions

非响应式

PropType<Viewer.ConstructorOptions>

cursor

string

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

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

emits

load

<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 当点击到一个未被屏蔽事件的要素时触发

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 当鼠标移动到一个未被屏蔽事件的要素时触发

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

example

调整视角

<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>