# cesium的基本使用

**Repository Path**: strex/cesium

## Basic Information

- **Project Name**: cesium的基本使用
- **Description**: 基于vue3和ts的cesium的基本使用
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2024-09-18
- **Last Updated**: 2024-11-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# cesium的基本使用

## 项目简介

基于vue3和ts的cesium的基本使用

## 依赖环境

node@14.19.0

## 运行步骤

1. npm i
   初始化
2. npm run dev
   启动本地服务
3. npm run prod
   打包生产环境

## 项目目录介绍

- public (公共文件，现在主要是放 favicon.ico)
- src (源代码)
  - assets (静态文件)
    - css (公共 css 文件)
    - js (公共 js 文件)
  - components (组件)
  - router (路由)
  - store (数据状态管理)
  - views (页面)
  - App.vue (初始化页面，根页面)
  - main.ts (初始化配置)
- .env.development (开发环境配置)
- .env.production (生产环境配置)
- .gitignore (git 忽略)
- index.html (最终的页面)
- package.json (依赖)
- vite.config.ts (vite 配置)

## 项目功能介绍

1. 加载地图
2. 将地图定位到指定经纬度
3. 左键点击事件获取经纬度
4. 设置标记点
5. 清除标记点
6. 将相机飞行到指定位置
7. 设置弹窗
8. 清除弹窗



## 参考文档

获取cesium token https://ion.cesium.com/tokens?page=1  

在Vue中使用Cesium（必读） https://blog.csdn.net/yuelizhe4774/article/details/129558855  

Ceisum加载天地图（矢量、影像） https://blog.csdn.net/Enbir/article/details/122586905  

地图数据编辑器 https://mapshaper.org/  

cesium中文网 http://cesium.xin/cesium/cn/Documentation1.62/  

天地图 https://www.tianditu.gov.cn/ 

Vue3.0中对Vue2.0全局API extend 的替代方案 https://blog.csdn.net/weixin_43901089/article/details/121428038


## 项目日志

### 2024.3.13

参考文档，搭建cesium地图框架。  
封装地图组件，在组件里加载底图。  
在外面父组件里，封装操作地图的方法。

### 2024.3.14

将相机飞行到指定位置 

### 2024.2.15

设置弹窗  
清除弹窗  
设置折线  

### 2024.5.28

加载geojson文件  

### 2024.9.18

对于电子地图，我们选择一些高对比度且常见的颜色：

省界：深红色（#8B0000）
市界：深蓝色（#00008B）
县界：深绿色（#006400）
影像地图颜色方案
对于影像地图，特别是偏深绿色的背景，我们需要选择一些与背景对比度高的颜色：

省界：白色（#FFFFFF）
市界：黄色（#FFD700）
县界：橙色（#FFA500）