gis-tools-webgl

一个基于cesium二次封装的库gis-tools-webgl示例文档

安装步骤：

::: code-group

npm install cesium gis-tools-webgl

pnpm add cesium gis-tools-webgl

yarn add cesium gis-tools-webgl

::: 安装cesium插件vite-plugin-cesium

::: code-group

npm install vite-plugin-cesium -D

pnpm add vite-plugin-cesium -D

yarn add vite-plugin-cesium -D

::: 配置vite.config.js

import { defineConfig } from "vite";
import cesium from "vite-plugin-cesium";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [cesium()]
});

初始化三维地球

底图资源封装在BaseLayers中, 使用时候只需要调用BaseLayers.xxx即可, 例如: 天地图影像底图为BaseLayers.getWorldMapImg()。

new Globe( target, options )

常用的 options 属性

示例代码：

::: details 点我查看代码

<template>
  <div class="contanier" ref="cesiumContainer"></div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { Globe, BaseLayers } from "gis-tools-webgl";

const cesiumContainer = ref<HTMLElement>();
onMounted(() => {
  const mapapp = new Globe(cesiumContainer.value as HTMLElement, {
    mapOptions: {
      animation: false,
      baseLayerPicker: false,
      fullscreenButton: false,
      vrButton: false,
      geocoder: false,
      homeButton: false,
      infoBox: false,
      sceneModePicker: false,
      selectionIndicator: false,
      timeline: false,
      navigationHelpButton: false,
      useBrowserRecommendedResolution: false,
      imageryProvider: BaseLayers.getWorldMapVec()
    }
  });
});
</script>
<style scoped lang="scss">
.contanier {
  width: 100%;
  height: 100%;
}
</style>

:::

BaseLayers

底图集合

示例代码：

::: details 点我查看代码

<template>
  <div class="contanier" ref="cesiumContainer"></div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { Globe, BaseLayers } from "gis-tools-webgl";

const cesiumContainer = ref<HTMLElement>();
onMounted(() => {
  const mapapp = new Globe(cesiumContainer.value as HTMLElement, {
    mapOptions: {
      imageryProvider: BaseLayers.getWorldMapImg()
      // imageryProvider: BaseLayers.getWorldMapVec()
      // imageryProvider: BaseLayers.getWorldMapCia()
      // imageryProvider: BaseLayers.getAmapVec()
      // imageryProvider: BaseLayers.getAmapImg()
      // imageryProvider: BaseLayers.getAmapCva()
    }
  });
});
</script>
<style scoped lang="scss">
.contanier {
  width: 100%;
  height: 100%;
}
</style>