GD-Cesium-SDK

🇨🇳 中文

GD-Cesium-SDK 是基于开源项目 Cesium 进行二次封装的二三维一体的 WebGIS 应用框架，该框架优化了部分 Cesium 的使用方式和增添一些通用功能，旨在为开发者快速构建 WebGIS 应用。

Tips：本框架是 TypeScript+GIS+Vue3 的框架包。开发者需要有一定的前端技术和 GIS 相关技术

安装

NPM / YARN (推荐使用)

yarn add gd-cesium-sdk
-------------------------
npm install gd-cesium-sdk

// vite-plugin-cesium 插件
yarn add cesium vite-plugin-cesium vite -D
-------------------------
npm i cesium vite-plugin-cesium vite -D

使用

vite 配置

vite.config.ts

import { defineConfig } from 'vite'
import cesium from 'vite-plugin-cesium'
export default defineConfig({
  plugins: [cesium()]
})

全局导入

import 'gd-cesium-sdk/style/style.css'
import * as GDSDK from 'gd-cesium-sdk'
GDSDK.Cesium.Ion.defaultAccessToken =
  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmZTA1MDQ2NC0wZmYwLTRhZWMtYWY4OC1jY2JkMDU1NjVmOGMiLCJpZCI6NDM0MzQsImlhdCI6MTY0OTkzNjc0Mn0.nafX1X_3586auU738TC3DxvsiSvPxnQ3TmamqUkb8kw'
// 通过TypeScript加载地图
const viewer = new GDSDK.Viewer('viewer-container', {
  showCreditContainer: false
})
// 倾斜摄影
const layer = new GDSDK.TilesetLayer({
  url: GDSDK.Cesium.IonResource.fromAssetId(1633341),
  type: '3dtiles'
}).addTo(viewer)
layer.setHeight(60)
// 高德底图
new GDSDK.AmapImageryLayer().addTo(viewer)
viewer.delegate.flyTo(layer.delegate)

分模块导入

import 'gd-cesium-sdk/style/style.css'
import { Viewer, OverlayUtil, HtmlLayer, AmapImageryLayer } from'cesium-map-sdk'
Cesium.Ion.defaultAccessToken =
  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmZTA1MDQ2NC0wZmYwLTRhZWMtYWY4OC1jY2JkMDU1NjVmOGMiLCJpZCI6NDM0MzQsImlhdCI6MTY0OTkzNjc0Mn0.nafX1X_3586auU738TC3DxvsiSvPxnQ3TmamqUkb8kw'
// 加载地图
const viewer = new Viewer('viewer-container', {
  showCreditContainer: false
})
// 倾斜摄影
const layer = new TilesetLayer({
  url: Cesium.IonResource.fromAssetId(1633341),
  type: '3dtiles'
}).addTo(viewer)
layer.setHeight(60)
// 高德底图
new AmapImageryLayer().addTo(viewer)
viewer.delegate.flyTo(layer.delegate)

Vue组件

<template>
  <div id="app">
    <ViewerComponent @onViewCreated="onViewCreated">
    <BasemapComponent />
    <NavigationComponent />
    <HawkeyemapComponent />
    <PositionComponent />
  </ViewerComponent>
  </div>
</template>

<script lang="ts" setup>
import 'gd-cesium-sdk/style/style.css'
import {
  ViewerComponent,
  BasemapComponent,
  NavigationComponent,
  HawkeyemapComponent,
  PositionComponent,
  TilesetLayer,
  Cesium
} from 'gd-cesium-sdk'
import type { Viewer } from 'gd-cesium-sdk'

Cesium.Ion.defaultAccessToken =
  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmZTA1MDQ2NC0wZmYwLTRhZWMtYWY4OC1jY2JkMDU1NjVmOGMiLCJpZCI6NDM0MzQsImlhdCI6MTY0OTkzNjc0Mn0.nafX1X_3586auU738TC3DxvsiSvPxnQ3TmamqUkb8kw'
const onViewCreated = (viewer: Viewer) => {
  viewer.showLoadingMask(true)
  const duration = 1
  const layer = new TilesetLayer({
    url: Cesium.IonResource.fromAssetId(1633341),
    type: '3dtiles'
  }).addTo(viewer)
  layer.setHeight(60)
  viewer.delegate.flyTo(layer.delegate)
  setTimeout(() => {
    viewer.showLoadingMask(false)
  }, duration)
}
</script>