@anov/gis

v1.8.6

Published

3 days ago

基于Cesium封装的二次开发SDK

Downloads

1,102

0High
0Medium
0Low

@anov/gis

基于 Cesium 封装的二三维 WebGIS 二次开发 SDK

@anov/gis 是一个面向浏览器与移动端的三维 WebGIS 前端 SDK，核心基于 Cesium 二次封装而成，可用于快速搭建二三维场景可视化、空间分析、数据可视化与地图交互类应用。同时提供 @anov/gis-ui 组件库，支持零代码搭建 GIS 系统。

项目特性

二三维一体化：在同一个 Viewer 内支持 2D / 2.5D / 3D 模式切换，倾斜摄影、3D Tiles、地形、影像一站式加载。
海量数据可视化：基于 Primitive + 自定义 Shader 实现高效的点、线、面、体渲染，支持聚合、热力图、风场、动态水面等。
空间分析能力：内置测量、标绘、地形剖面、水淹分析、模型剖切、坐标转换等常用 GIS 分析工具。
场景特效体系：雨雪雾天气、后期处理（Bloom / 景深 / 夜视 / 黑白 / 亮度）、流动线、扩散波、雷达扫描等开箱即用。
国产地图适配：原生支持天地图、高德、腾讯、百度、GeoQ、ArcGIS 等国内外主流地图服务与坐标系互转。
多端构建：基于 Cesium 1.143 + WebGL2 + GLSL ES 3，浏览器、移动端、Electron、iframe 嵌入场景全面适配。
零代码拓展：通过 @anov/gis-ui 组件库配合 ANOV-UI，可在不写代码的情况下完成 GIS 系统搭建。

功能结构

SDK 源码按职责划分为 7 大模块，目录组织见 src/：

| 模块 | 路径 | 职责 | | --- | --- | --- | | 基础 Core | src/base | Viewer / 控件 / 事件 / 工具函数 / 数学 / 坐标转换 / 数据解析 | | 图层 Layer | src/layer | 影像、地形、矢量、3D Tiles、要素图层的加载与管理 | | 材质 Material | src/material | 点 / 线 / 面 / 体材质库（流动线、扩散波、雷达、水面等） | | 空间分析 Analysis | src/analysis | 标绘、测量、剖切、水淹、热力图、风场、地形剖面、坐标编辑 | | 场景 Effect | src/effect | 漫游、动画、天气、后期处理、Shader 特效 | | 实体元素 Graphic | src/graphic | Entity / Primitive / DOM 三类元素的封装，多 Graphic 组成 Layer | | 应用 API | src/application、packages/applyfn | 业务级开箱即用 API（已抽离为 @anov/gis.applyfn 包） |

模块一：图层 Layer

负责加载和管理底图、专题图层与业务图层。

影像图层：TdtImageryProvider（天地图）、AmapImageryProvider（高德）、TencentImageryProvider（腾讯）、BaiduImageryProvider（百度）、GoogleImageryProvider、ArcGIS、GeoQ、自定义 URL Template、SplitImageLayer（卷帘对比）、ImageryThemeGL（暗色 / 滤镜主题）。
地形图层：TerrainFactory 统一封装 CesiumTerrain、ArcGISTerrain、本地 terrain、自定义高度图等，支持异步 fromUrl 方式加载。
矢量 / 要素图层：GeoJsonLayer、CzmlLayer、KmlLayer、GpxLayer、TopoJsonLayer、HtmlLayer、LabelLayer、ClusterLayer、PrimitiveLayer、TilesetLayer、FeatureGridLayer、DynamicLayer。

模块二：材质 Material

为点 / 线 / 面 / 体添加丰富的视觉表现。

尾迹线、泛光线、图片纹理流动线、竖向流光、抛物线。
圆形扩散波纹、扩散模糊圆、图片雷达扫描。
流动水面、波浪水面（wave / water），支持与地形贴合。
渐变材质、墙体材质、圆 / 圆波。

模块三：空间分析 Analysis

标绘 Draw：点、线、面、圆、矩形绘制。
测量 Measure：距离、面积、高度、角度测量。
剖切 Clipping：模型 / 地形剖切，支持任意方向。
水淹分析 WaterAnalysis：基于地形的水淹模拟。
热力图 HeatMap：基于 Canvas / WebGL 双引擎。
风场 Wind：矢量场可视化。
水坝放水仿真：结合地形的流体效果。
地形剖面：沿任意折线生成剖面图。
坐标编辑：位置编辑器、坐标轴平面。

模块四：场景 Effect

天气特效：Weather 抽象下雨、下雪、雾、云。
漫游：键盘漫游、路径漫游（RoamingPath）、飞行巡视。
动画：定位飞行、环绕旋转、开场动画。
后期处理：Bloom（泛光）、LensFlare（镜头光晕）、DepthOfField（景深）、NightVision（夜视）、Silhouette（轮廓）、BlackAndWhite（黑白）、Brightness（亮度）。

模块五：基础 Core

Viewer：src/base/viewer/Viewer.js，封装 Cesium Viewer 并扩展 geocoderType、copyRight、showMapInfo、showFPS、flyDuration、language、scaleRatio、drillPick、minZoom/maxZoom/minPitch/maxPitch 等参数。
工具函数：坐标转换 CoordUtil、WKT 解析 WktUtil、空间计算 ShapeUtil、PlotUtil、要素信息 FeatureInfoUtil、定位 LocateUtil、CesiumView 等。
事件：MouseEvent、SceneEvent、ViewerEvent、LayerEventType 等事件体系。
控件：底图切换器、POI 搜索、坐标显示、版权信息、翻译、图层控制。

模块六：实体元素 Graphic

Vector：Point / Polyline / Polygon / Circle / Ellipse / Rectangle / Wall / Box / Cylinder / Ellipsoid / Corridor / PolylineVolume / Plane / Billboard / Label。
Model：单模型（Model）、3D Tiles（Tileset）。
Primitive：基于 Primitive 实现的高性能自定义图元（点云 / 线 / 体 / 视频 / 云 / 地面多边形 / 反弹标牌 / 扫描圆 / 流动水面 / 灯柱 / 渐变墙 / 电磁球 / 尾迹 / 模型集合等）。

模块七：应用 API（@anov/gis.applyfn）

将常用业务场景封装为更高层的 API（如一键城市、园区、数字孪生场景），源码位于 packages/applyfn/，可独立发布与引用。

快速上手

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>@anov/gis 最简 Demo</title>
    <script src="https://unpkg.com/@anov/[email protected]/dist/index.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/@anov/[email protected]/dist/index.css">
    <style>
        html, body, #cesiumContainer { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; }
    </style>
</head>
<body>
    <div id="cesiumContainer"></div>
    <script>
        // 设置静态资源 baseUrl（必须在 new Viewer 之前调用）
        ANOVGIS.setBaseUrl('https://unpkg.com/@anov/[email protected]/dist/resources/');

        window.viewer = new ANOVGIS.Viewer('cesiumContainer', {
            geocoderType: ANOVGIS.GeocoderType.TIANDITU,
            vrButton: false,
            baseLayerPicker: true,
            fullscreenButton: true,
            homeButton: true,
            sceneModePicker: true,
            navigationHelpButton: true,
            copyRight: false,
            showMapInfo: true,
        });
    </script>
</body>
</html>

注：必须通过 HTTP 服务打开页面（不能直接 file:// 打开），否则 Cesium 静态资源加载会失败。

SDK 安装

方式一：UMD 引入（推荐用于快速验证）

下载 SDK 二次开发包后直接引入：

<link rel="stylesheet" href="./anov-gis-sdk/index.css">
<script src="./anov-gis-sdk/index.js"></script>

如需使用业务级 API，再引入：

<script src="./anov-gis-sdk/applyfn.js"></script>

方式二：NPM / YARN

适合与 webpack、vite、vue-cli 等现代构建工具搭配使用。

npm install @anov/gis
# 或
yarn add @anov/gis

引入使用：

import '@anov/gis/dist/index.css';
import ANOVGIS from '@anov/gis';

ANOVGIS.setBaseUrl('/anov-gis-sdk/resources/');
const viewer = new ANOVGIS.Viewer('cesiumContainer', {
    geocoderType: ANOVGIS.GeocoderType.TIANDITU,
    baseLayer: ANOVGIS.ImageryType.TIANDITU,
});

关于静态资源：Cesium 自带 Workers/、Assets/、Widgets/、ThirdParty/ 多个静态目录，SDK 默认期望它们位于 /anov-gis-sdk/resources/。可通过 ANOVGIS.setBaseUrl(...) 修改该路径；若使用打包工具，请参考下方 vue-cli / vite 工程模板中的 copy-webpack-plugin 或 vite-plugin-static-copy 配置。

工程模板

为减少 Cesium 静态资源拷贝、Webpack / Vite 配置等样板代码，提供开箱即用的示例工程：

| 技术栈 | 仓库 | | --- | --- | | 纯 HTML | anov-gis-demo-html | | Vue 2 + vue-cli | anov-gis-demo-vue2 | | Vue 3 + Vite | anov-gis-demo-vue3 |

功能示例

本仓库自带完整示例站点，位于 examples/ 目录，使用 Vue + Element UI 构建，分类组织在 examples/src/demo/menus.js。

| 分类 | 内容 | | --- | --- | | 影像地形 | 天地图 / 高德 / 腾讯 / 百度 / ArcGIS 影像、ArcGIS / Cesium 地形、矢量切片、暗色主题、影像调色 | | 离线地图服务 | WMS / WMTS / WFS / XYZ 切片、单张图片影像、离线地形 | | 材质 | 泛光尾迹线、尾迹线、图片轨迹线、流动线、抛物线、竖向流光、扩散波、雷达、水面 | | geo 图层 | 矢量墙体、矢量区域、点 / 海量点 / 线图层、矢量面建筑、聚合、自定义广告牌 | | 三维模型 | 倾斜摄影、自定义 Shader、雨雪立体十字片、雾、物体积雪 | | 实体元素 | 点 / 线 / 面 / 文字 / 电子标牌 / div 信息框 | | 交互和事件 | Popup、Tooltip、Highlight、WMS 点击查询、3D Tiles 交互查询 | | 三维分析 | 标绘、测量、水淹、热力、风场、水坝放水、地形剖面、坐标编辑、自定义搜索 | | 第三方库融合 | 融合 three.js | | 场景与特效 | 定位、天空盒、天气特效、漫游、后期处理、开场动画 | | 综合案例 | 数字城市、数字孪生 | | 城市引擎 | 自定义图元（cityengine） |

本地运行示例站点：

# 安装根依赖（构建 SDK）
npm install

# 构建 SDK 并启动示例
npm run test
# 浏览器访问 http://localhost:8080

其它常用脚本：

npm run dev          # 启动 SDK watch 构建 + 文档 + 示例
npm run build        # 完整构建：SDK + 文档 + 站点
npm run testfn       # 启动 applyfn 子包示例
npm run testcity     # 启动 cityengine 子包示例

项目结构

ANOV-GIS/
├── src/                         # SDK 源码
│   ├── base/                    # 基础：Viewer、控件、事件、工具、数学
│   ├── layer/                   # 图层：影像 / 地形 / 矢量
│   ├── material/                # 材质：property / shader / type
│   ├── analysis/                # 分析：标绘 / 测量 / 剖切 / 水淹 / 热力 / 风场
│   ├── effect/                  # 特效：动画 / 漫游 / 后期处理 / 天气
│   ├── graphic/                 # 实体：vector / model / primitive
│   ├── application/             # 应用层封装
│   ├── thirdpard/               # 第三方库适配
│   ├── copyright/               # 版权信息
│   ├── themes/                  # 主题 CSS
│   ├── ANOVGIS.js               # ANOVGIS 命名空间与 mixin 挂载
│   └── index.js                 # SDK 总入口
├── packages/                    # 独立发布的子包
│   ├── applyfn/                 # @anov/gis.applyfn  业务级应用 API
│   ├── ui/                      # @anov/gis.ui        ANOV-UI 组件库
│   └── cesiumthreelib/          # three.js 融合库
├── examples/                    # 示例站点（Vue + Element UI）
│   ├── public/examples/html/    # 全部功能 HTML 演示
│   └── src/demo/                # 示例菜单与说明
├── docs/                        # VuePress 文档站
├── config/                      # Webpack 配置与部署配置
├── tools/                       # JSDoc 工具配置
├── other_system/                # 其它子工程（如 anov-gis-scene 数字孪生场景）
├── dist/                        # 构建产物
├── config/                      # 构建与部署配置
├── index.js                     # 根入口（指向 src/index）
├── package.json
└── README.md

开发与构建

| 命令 | 作用 | | --- | --- | | npm install | 安装根工程依赖（包含 Cesium 1.143、VuePress、Webpack 5 等） | | npm run dev:sdk | 监听模式构建 SDK | | npm run build:sdk | 生产模式构建 SDK | | npm run doc | 生成 JSDoc API 文档 | | npm run docs:dev | 启动 VuePress 文档本地服务 | | npm run docs:build | 构建 VuePress 文档 | | npm run build | 一键构建 SDK + 文档 + 示例 | | npm run test / npm run test2 | 构建 SDK 并启动示例站点 | | npm run build:types | 生成 TypeScript 类型声明（tsc） | | npm run dev:applyfn | 构建 applyfn 业务 API 子包 | | npm run dev:city | 构建 cityengine 城市引擎子包 |

⚠️ Node.js 17+ 在某些子工程启动时需添加 --openssl-legacy-provider 参数（examples/package.json 已默认配置）。

配套包

| 包名 | 作用 | | --- | --- | | @anov/gis | 核心 SDK（本仓库主包） | | @anov/gis.applyfn | 业务级应用 API（数字孪生、园区、城市等开箱场景） | | @anov/gis.ui | ANOV-UI 组件库，支持零代码搭建 GIS 系统 | | @anov/gis.cesiumthreelib | Cesium × three.js 融合库 |

文档与教程

在线文档站：http://172.16.222.31:8866/
VuePress 源码：docs/
JSDoc API 文档：构建后在 dist/Documentation/ 下
示例站点：本地 npm run test 启动后访问

更新日志

详细变更请见 CHANGELOG.md。

当前最新版本 1.8.4，基于 Cesium 1.143（WebGL2 + GLSL ES 3），主要变更：

Cesium 主版本由 1.95 升级到 1.143，适配 fromUrl 异步 API、Model.fromGltfAsync、Cesium.Terrain.fromWorldTerrain() + scene.setTerrain()、移除 Cesium.defaultValue、默认 WebGL2 等破坏性变更。
重写所有自定义 Shader（性能示例、后期处理、雨雪雾、暗色主题）以兼容 GLSL ES 3。
修复 setBaseUrl 在非生产环境下的资源加载问题、iframe 中 about:srcdoc 跨域判定问题。
新增多个示例页面与材质、动态水面、自定义搜索等示例。

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@anov/gis

目录

项目特性

功能结构

模块一：图层 Layer

模块二：材质 Material

模块三：空间分析 Analysis

模块四：场景 Effect

模块五：基础 Core

模块六：实体元素 Graphic

模块七：应用 API（@anov/gis.applyfn）

快速上手

SDK 安装

方式一：UMD 引入（推荐用于快速验证）

方式二：NPM / YARN

工程模板

功能示例

项目结构

开发与构建

配套包

文档与教程

更新日志

许可证