Skip to content

图层

添加天地图

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/',
    }),
  )
}

Released under the ISC License.