图层
添加天地图
getTianDiTuLayer
点我查看代码
vue
<script lang="ts" setup>
import { createCesiumViewer, getTianDiTuLayer } from '@summeruse/cesium'
import { shallowRef } from 'vue'
const container = shallowRef<HTMLDivElement>()
const { viewer } = createCesiumViewer(container)
const layer = getTianDiTuLayer({
type: 'img',
key: '8a684acb7b9d38ba08adf8035d0262ee',
})
const label = getTianDiTuLayer({
type: 'cia',
key: '8a684acb7b9d38ba08adf8035d0262ee',
})
viewer.imageryLayers.add(layer)
viewer.imageryLayers.add(label)
</script>
<template>
<div ref="container" class="w-100% h-300px" />
</template>
添加 OpenStreetMap 地图
getOsmLayer
点我查看代码
vue
<script lang="ts" setup>
import { createCesiumViewer, getOSMLayer } from '@summeruse/cesium'
import { shallowRef } from 'vue'
const container = shallowRef<HTMLDivElement>()
const { viewer } = createCesiumViewer(container)
const layer = getOSMLayer()
viewer.imageryLayers.add(layer)
</script>
<template>
<div ref="container" class="w-100% h-300px" />
</template>
源代码
点我查看代码
ts
import type { T_MAP_TYPE } from '@summeruse/common'
import { ImageryLayer, OpenStreetMapImageryProvider, WebMapTileServiceImageryProvider } from 'cesium'
export type _WebMapTileServiceImageryProviderOptions = Partial<ConstructorParameters<typeof WebMapTileServiceImageryProvider>[0]>
export type _ImageryLayerOptions = ConstructorParameters<typeof ImageryLayer>[1]
export interface GetTianDiTuLayerOptions {
key: string
type: T_MAP_TYPE
imageryProviderOptions?: _WebMapTileServiceImageryProviderOptions
imageryLayerOptions?: _ImageryLayerOptions
}
export function getTianDiTuLayer(data: GetTianDiTuLayerOptions) {
const { key, type } = data
const url = `https://t0.tianditu.gov.cn/${type}_w/wmts?tk=${key}`
return new ImageryLayer(new WebMapTileServiceImageryProvider({
url,
layer: type,
style: 'default',
tileMatrixSetID: 'w',
format: 'tiles',
...data.imageryProviderOptions,
}), data.imageryLayerOptions)
}
export function getOSMLayer() {
return new ImageryLayer(
new OpenStreetMapImageryProvider({
url: 'https://a.tile.openstreetmap.org/',
}),
)
}