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