指南

前序准备

nodejs - 项目开发环境
Vite - 熟悉 vite 特性
Vue3 - 熟悉 Vue 基础语法
Es6+ - 熟悉es6基本语法
TypeScript - 熟悉 TypeScript 基本语法
Cesium - Cesium是一个开源的，基于WebGL的二、三维地图引擎
Mars3D - 基于Cesium优化提升与B/S架构设计，支持多行业扩展的轻量级高效能GIS开发平台

安装

首先在命令行执行如下命令添加 sat-earth 的依赖

bash

npm i sat-earth

将 node_modules/mars3d-cesium/Build/Cesium 目录拷贝到我们开发目录中的public下，然后在index.html中引入 Cesium 库
将 node_modules/@turf/turf/turf.min.js 拷贝到我们开发目录中的public下，然后在index.html中引入 turf 库
将 node_modules/mars3d/dist 目录拷贝到我们开发目录中的public下，然后重命名为mars3d，然后在index.html中引入 mars3d 库

html

<!--引入cesium库-->
<link href="/Cesium/Widgets/widgets.css" rel="stylesheet" type="text/css" />
<script src="/Cesium/Cesium.js" type="text/javascript"></script>
<!--引入turf库-->
<script src="/turf.min.js" type="text/javascript"></script>
<!--引入mars3d库-->
<link href="./play-local/mars3d/mars3d.css" rel="stylesheet" type="text/css" />
<script src="./play-local/mars3d/mars3d.js" type="text/javascript"></script>

如果您的项目也用了pinia，请修改您项目中的piniaStore直接使用sat-earth的导出，并且main.ts中不需要在调用App.use(piniaStore)

// const piniaStore = createPinia()
// export { piniaStore }
import { SatStore } from 'sat-earth'
const piniaStore = SatStore.piniaStore
export {
  piniaStore
}

在 main.[jt]s 中引入我们的 sat-earth 资源

import { createApp } from "vue"
import App from "./app.vue"
import SatEarth from 'sat-earth'
import 'sat-earth/dist/style.css'
const app = createApp(App)
// SatEarth内部引入了ElementPlus，如果你也使用了element-plus，请在你的代码中注释掉不再引入，并且取消element-plus的按需自动导入（按需加载目前发现一些样式上的bug，我弃用了）
// import ElementPlus from 'element-plus'
// import 'element-plus/dist/index.css'
// import 'element-plus/theme-chalk/dark/css-vars.css'
// app.use(ElementPlus)
app.use(SatEarth)
app.mount("#app")

在tsconfig.json中的types加入vue组件的类型声明文件sat-earth/dist/packages/auto-components，来支持Volar的代码提示

json

{
  "compilerOptions": {
    "target": "esnext", // 指定ts编译后的ECMAScript目标版本: 'es3' (default), 'es5', 'es2015', 'es2016', 'es2017', or 'esnext'
    "module": "esnext", // 指定编译后代码使用的模块化规范: 'commonjs', 'amd', 'umd' or 'es...'
    "declaration": false, // 是否生成声明文件
    "strict": true, // 开启全部严格模式
    "removeComments": true, // 删除注释
    "allowJs": true, // 是否对js文件开启编译
    "noImplicitAny": false, // 支持类型不标注可以默认any
    "allowSyntheticDefaultImports": true, // 允许没有导出的模块中导入
    "resolveJsonModule": true, // json文件是否可导入
    "isolatedModules": true, // 将每个文件作为单独的模块
    "useDefineForClassFields": true, // class类的变量声明方式从 = 赋值的方式变更成了Object.defineProperty;所有的字段声明都会生效，即使它没有指定默认值
    "moduleResolution": "node", // 置顶模块的解析策略，'node' or 'classic'
    "esModuleInterop": true, // 支持es6,commonjs模块
    "skipLibCheck": true, // 跳过类库检测
    "jsx": "preserve",
    "lib": [
      "esnext",
      "dom"
    ],
    "types": [
      "vite/client",
      "sat-earth/dist/packages/auto-components"
    ],
    "paths": {
      "@src/*": [
        "./src/*"
      ]
    }
  },
  "include": [
    "**/*.ts",
    "**/*.d.ts",
    "**/*.vue"
  ]
}

快速开始

vue

<script setup lang="ts">
import type { SatMapOptions } from 'sat-earth'
const options: SatMapOptions = {
  map3d: {
    control: {
      baseLayerPicker: true,
      animation: false,
      timeline: false
    },
    basemaps: {
      cover: false,
      list: []
    },
    custom: {
      toolbar: {
        mapSplit: true, // 开启卷帘工具
        bookmark: true, // 开启视角书签工具
        keyboardRoam: true, // 开启键盘漫游功能
      },
      layers: {
        /* list 这是要加入到数据源管理中的自定义Layer图层，参数与 mars3d构造 Layer 的参数一致，
         通过 'id/pid' 在 'SatSource' 组件中形成对应的树形结构, 不加 pid 的时候或者任意添加的 pid
         导致所有图层中并没有该 pid 对应图层项时，组件会给该项添加默认的 pid，并加入到树的跟节点上。
        */
        list: [
          {
            id: '20230511',
            type: 'osmBuildings',
            name: '全球城市白膜',
            highlight: { type: 'click', color: '#00FF00' },
            popup: 'all'
          }
        ],
        // 辅助图层
        auxiliaryLayers: {
          cover: false, // 是否覆盖内置的辅助图层
          list: [] // 自定义的辅助图层Layer集合
        },
        // 地形图层
        terrainLayers: {
          cover: false, // 是否覆盖内置的地形图层
          list: [] // 自定义的地形图层Layer集合
        },
      },
    },
  },
}
</script>
<template>
  <!-- 注意：在SatGlobe入口组件外部无法使用其他组件 -->
  <SatGlobe :sat-map-options="options">
    <SatTaskView></SatTaskView>
    <SatMenu>
      <SatSource></SatSource>
      <SatMapPart></SatMapPart>
      <SatLocation></SatLocation>
      <SatMeasure></SatMeasure>
      <SatPlot></SatPlot>
      <SatPicture></SatPicture>
    </SatMenu>
  </SatGlobe>
</template>