文章目录一、写在前面为什么是 TerriaJS二、Terria系列体系里的五个角色三、TerriaMap介绍四、TerriaMap Start教程五、TerriaMap 目录结构六、总结一、写在前面为什么是 TerriaJS如果你做过三维 GIS 项目大概率经历过这样的过程先用 Cesium 把地球转起来然后自己写图层管理、目录树、图例、时间轴、底图切换再补上 GeoJSON、WMS、WMTS、3D Tiles、地形、影像……最后发现 60% 的代码都在重复造轮子而且每个项目都要再造一遍。那么有没有一个成熟的开源目录树框架可以直接开箱即用呢TerriaJS 解决的正是这个问题。TerriaJS 是一个开源的地理信息系统GIS平台提供了丰富的 API 和组件主要用于创建基于 Web的交互式地图和可视化地理数据应用程序。它是在 Cesium 之上构建的一套地理数据目录 地图应用框架支持地图渲染、场景管理、数据可视化等功能集成了 Cesium用于 3D WebGL 渲染和 Leaflet用于 2D 地图可以处理广泛的地理空间数据格式如 GeoJSON、KML 和 WMS等。底层渲染Cesium3D/ Leaflet2D上层能力数据目录Catalog、Workbench 图层管理、时间轴、图例、分享、搜索、量测、绘图等扩展方式JSON 配置 React 插件 自定义 CatalogItem 模型应用形态TerriaMap 是官方提供的应用壳terriajs是核心库。一句话概括Cesium 负责把地球画出来TerriaJS 负责把数据管起来、把交互做完整。本专栏按照我自己使用TerriaMap的项目经历出发把我在实际项目过程中遇到的二次开发的问题和踩过的坑给大家进行总结按真实项目的落地方案把TerriaMap的配置体系、数据接入、插件开发、模型定制和部署上线串成一条完整的工程链路。给大家分享学习。仓库地址https://github.com/TerriaJS/terriajs二、Terria系列体系里的五个角色打开官网你会发现 “Terria”“TerriaJS”“TerriaMap”“terriajs-server” 混着出现很容易懵。官方在 TerriaJS README 的 Components and naming 里给过定义我把它翻译成一张表开始使用 TerriaJS 的最简单方法是使用TerriaMap。TerriaMap是基于TerriaJS的具体实现它利用TerriaJS的功能和API提供用户友好的地图界面。TerriaMap 提供了一个完整的用户界面和功能集可以作为一个独立的应用程序使用也可以作为定制 TerriaJS 应用程序的起点简单来说TerriaJS 是构建 TerriaMap 的基础框架而 TerriaMap 是基于 TerriaJS 构建的一个具体的应用程序。而TerriaJS Server是一个用于托管TerriaJS应用的后端服务。它可以提供数据访问、处理和安全控制等功能以支持TerriaJS应用的运行。三、TerriaMap介绍官方 Getting Started 第一句“The easiest way to get started with TerriaJS is to useTerriaMap. TerriaMap is a full-featured application built on TerriaJS, ready to be customized with your own branding and catalog.”翻译过来TerriaMap它不是地图引擎也不是低代码平台而是一个数据目录驱动的 GIS 站点成品骨架——你换掉品牌、换掉目录、换掉底图它就是一个新的行业平台。TerriaMap天生自带的能力官方 README 归纳不是 GIS 服务端不做数据发布、不做切片、不做空间分析。WMS/瓦片/地形都要你另外准备GeoServer、自建切片、ArcGIS Server、对象存储。不是可视化大屏它的 UI 是资源管理器风格不是炫酷驾驶舱。要大屏得自己写面板。不是开箱即用的业务系统登录、权限、前后端交互等二次开发功能都要自己加。不保证国内底图/坐标系开箱可用天地图、内网瓦片都要手工配置。支持插件和个性化设置自定义数据结构、自定义符号化需要开发者按照需求自定义扩展、开发插件等。四、TerriaMap Start教程安装教程下载源码git clone [https://github.com/TerriaJS/TerriaMap.git](https://github.com/TerriaJS/TerriaMap.git)clone 下来之后第一眼该看的 5 个文件安装构建cd TerriaMap export NODE_OPTIONS--max_old_space_size4096 # Windows PowerShell 设置Linux/macOS 用 export npm install -g yarn yarn install yarn gulp yarn start注意官方文档写的是yarn install yarn gulp yarn start但第一次构建内存不够是最高频的失败点务必先设NODE_OPTIONS。打开http://localhost:3001主页面如下通过自带的目录数结构可以管理不同格式的数据实现数据的浏览、加载、符号化显示还有自带的数据对比功能可以直观对比不同时序下特征要素的差异五、TerriaMap 目录结构项目成功构建后目录结构如下TerriaMap/ ├─ entry.js # webpack 入口 ├─ index.js # 应用主入口new Terria → ViewState → start → render ├─ plugins.ts # 插件清单loadPlugins 按这里加载 ├─ gulpfile.js # 构建任务定义lint / copy-assets / render-index / write-version / webpack ├─ package.json # 依赖与 npm scriptsstart / gulp / hot / docker-build-* ├─ tsconfig.json # TypeScript 配置 ├─ serverconfig.json # terriajs-server 配置端口、代理白名单、CORS ├─ Dockerfile # 仓库自带的多阶段镜像build: node:16 → deploy: node:16-slim ├─ version.js # gulp write-version 生成供模板注入 ├─ terria-logo.png # 默认 Logo ├─ yarn.lock / .yarnrc # 依赖锁定与 yarn 配置 ├─ .eslintrc / .prettierrc / .editorconfig / .husky # 代码规范与 git hooks ├─ .devcontainer/ # VS Code 容器化开发环境 │ ├─ lib/ # 【应用层代码】TerriaMap 自己的 React 代码 │ ├─ Core/loadPlugins.ts # 插件加载逻辑读 plugins.ts逐个注册 │ ├─ ViewModels/PreviewLinkViewModel.js │ ├─ Views/ # 应用级视图UserInterface、render、About 按钮、免责声明 │ │ ├─ UserInterface.jsx # 页面骨架菜单、侧栏、地图容器 │ │ ├─ render.jsx # ReactDOM 挂载 │ │ ├─ AboutButton.jsx │ │ └─ global.scss │ └─ Styles/ # 全局样式变量与加载动画 │ ├─ wwwroot/ # 【静态资源 运行时配置 构建产物】 │ ├─ index.ejs # HTML 模板gulp render-index 编译成 index.html │ ├─ index.html # 生成物不要手改 │ ├─ config.json # 主配置品牌名、初始视角、底图、地形、工作台… │ ├─ version.json # 生成物版本 / commit线上排查用 │ ├─ init/ # 目录初始化文件Catalog 树、图层清单 │ │ └─ simple.json │ ├─ build/ # webpack 产物TerriaMap.js、TerriaJS/gulp copy 而来 │ ├─ data/ # 演示数据、图标、样式 JSON │ ├─ images/ favicons/ # 图片与站点图标 │ ├─ languages/ # 多语言文案包 │ ├─ help/ # 帮助文档页面 │ ├─ public/ # 额外静态站点内容 │ ├─ test/ # 前端测试页 │ └─ 404.html / 500.html / about.html / privacy.html │ ├─ packages/ # 【插件工作区】每个 plugin-* 都是独立包只有 src/ │ ├─ plugin-sample/ # 官方示例模板写新插件从这 copy │ └─ store/ # 插件间共享状态 │ ├─ buildprocess/ # 【构建配置】 │ ├─ webpack.config.js # 主构建配置含 terriajs 路径解析、插件别名 │ ├─ webpack.config.hot.js # 热更新开发配置 │ └─ configureWebpackForPlugins.js │ ├─ patches/ # patch-package 补丁如 protomaps1.19.0.patch ├─ deploy/ # 部署资产 │ ├─ docker/ # create-docker-context.js 官方 10 行 Dockerfile │ ├─ helm/ # Helm chart │ ├─ kubernetes/ # RBAC 配置 │ └─ varnish/ # 缓存层配置 ├─ doc/deploying/ # 部署文档 └─ architecture/ # 架构决策记录ADR1.wwwroot/配置项应该改config.json、init/*.json、index.ejs、images/、languages/、help/不该改index.html、version.json、build/——这三个都是 gulp 生成的改了下次构建就没了。2.lib/TerriaMap 自己的代码只有 8 个文件左右是“应用壳”级别的 UI页面骨架、About 按钮、免责声明、预览链接、全局样式。它和node_modules/terriajs/lib是两个完全不同的东西3.packages/插件工作区每个插件只有src/通过plugins.ts注册。写新插件最省事的做法是复制plugin-sample再改名。store/是插件之间共享的状态模块。4.buildprocess/构建配置webpack.config.js里最关键的一句是通过require.resolve(terriajs/package.json)找到node_modules/terriajs并把它加进resolve.alias5.deploy/、doc/、architecture/、patches/deploy/docker/官方 Docker 方案create-docker-context.js重新生成一个精简的构建上下文deploy/helm、kubernetes、varnish集群部署与缓存patches/patch-package补丁yarn install的 postinstall 会自动打上architecture/ADR记录“为什么这么选”。六、总结本篇文章介绍了什么是TerriaMap以及如何快速clone一个可执行的项目。下一篇技术文章将介绍如何基于官方提供的Demo在不修改核心底层源码的前提下仅通过调整配置项的方式完成自定义数据集的接入、适配与项目改造构建符合自身业务需求的专属项目。
文章目录一、写在前面为什么是 TerriaJS二、Terria系列体系里的五个角色三、TerriaMap介绍四、TerriaMap Start教程五、TerriaMap 目录结构六、总结一、写在前面为什么是 TerriaJS如果你做过三维 GIS 项目大概率经历过这样的过程先用 Cesium 把地球转起来然后自己写图层管理、目录树、图例、时间轴、底图切换再补上 GeoJSON、WMS、WMTS、3D Tiles、地形、影像……最后发现 60% 的代码都在重复造轮子而且每个项目都要再造一遍。那么有没有一个成熟的开源目录树框架可以直接开箱即用呢TerriaJS 解决的正是这个问题。TerriaJS 是一个开源的地理信息系统GIS平台提供了丰富的 API 和组件主要用于创建基于 Web的交互式地图和可视化地理数据应用程序。它是在 Cesium 之上构建的一套地理数据目录 地图应用框架支持地图渲染、场景管理、数据可视化等功能集成了 Cesium用于 3D WebGL 渲染和 Leaflet用于 2D 地图可以处理广泛的地理空间数据格式如 GeoJSON、KML 和 WMS等。底层渲染Cesium3D/ Leaflet2D上层能力数据目录Catalog、Workbench 图层管理、时间轴、图例、分享、搜索、量测、绘图等扩展方式JSON 配置 React 插件 自定义 CatalogItem 模型应用形态TerriaMap 是官方提供的应用壳terriajs是核心库。一句话概括Cesium 负责把地球画出来TerriaJS 负责把数据管起来、把交互做完整。本专栏按照我自己使用TerriaMap的项目经历出发把我在实际项目过程中遇到的二次开发的问题和踩过的坑给大家进行总结按真实项目的落地方案把TerriaMap的配置体系、数据接入、插件开发、模型定制和部署上线串成一条完整的工程链路。给大家分享学习。仓库地址https://github.com/TerriaJS/terriajs二、Terria系列体系里的五个角色打开官网你会发现 “Terria”“TerriaJS”“TerriaMap”“terriajs-server” 混着出现很容易懵。官方在 TerriaJS README 的 Components and naming 里给过定义我把它翻译成一张表开始使用 TerriaJS 的最简单方法是使用TerriaMap。TerriaMap是基于TerriaJS的具体实现它利用TerriaJS的功能和API提供用户友好的地图界面。TerriaMap 提供了一个完整的用户界面和功能集可以作为一个独立的应用程序使用也可以作为定制 TerriaJS 应用程序的起点简单来说TerriaJS 是构建 TerriaMap 的基础框架而 TerriaMap 是基于 TerriaJS 构建的一个具体的应用程序。而TerriaJS Server是一个用于托管TerriaJS应用的后端服务。它可以提供数据访问、处理和安全控制等功能以支持TerriaJS应用的运行。三、TerriaMap介绍官方 Getting Started 第一句“The easiest way to get started with TerriaJS is to useTerriaMap. TerriaMap is a full-featured application built on TerriaJS, ready to be customized with your own branding and catalog.”翻译过来TerriaMap它不是地图引擎也不是低代码平台而是一个数据目录驱动的 GIS 站点成品骨架——你换掉品牌、换掉目录、换掉底图它就是一个新的行业平台。TerriaMap天生自带的能力官方 README 归纳不是 GIS 服务端不做数据发布、不做切片、不做空间分析。WMS/瓦片/地形都要你另外准备GeoServer、自建切片、ArcGIS Server、对象存储。不是可视化大屏它的 UI 是资源管理器风格不是炫酷驾驶舱。要大屏得自己写面板。不是开箱即用的业务系统登录、权限、前后端交互等二次开发功能都要自己加。不保证国内底图/坐标系开箱可用天地图、内网瓦片都要手工配置。支持插件和个性化设置自定义数据结构、自定义符号化需要开发者按照需求自定义扩展、开发插件等。四、TerriaMap Start教程安装教程下载源码git clone [https://github.com/TerriaJS/TerriaMap.git](https://github.com/TerriaJS/TerriaMap.git)clone 下来之后第一眼该看的 5 个文件安装构建cd TerriaMap export NODE_OPTIONS--max_old_space_size4096 # Windows PowerShell 设置Linux/macOS 用 export npm install -g yarn yarn install yarn gulp yarn start注意官方文档写的是yarn install yarn gulp yarn start但第一次构建内存不够是最高频的失败点务必先设NODE_OPTIONS。打开http://localhost:3001主页面如下通过自带的目录数结构可以管理不同格式的数据实现数据的浏览、加载、符号化显示还有自带的数据对比功能可以直观对比不同时序下特征要素的差异五、TerriaMap 目录结构项目成功构建后目录结构如下TerriaMap/ ├─ entry.js # webpack 入口 ├─ index.js # 应用主入口new Terria → ViewState → start → render ├─ plugins.ts # 插件清单loadPlugins 按这里加载 ├─ gulpfile.js # 构建任务定义lint / copy-assets / render-index / write-version / webpack ├─ package.json # 依赖与 npm scriptsstart / gulp / hot / docker-build-* ├─ tsconfig.json # TypeScript 配置 ├─ serverconfig.json # terriajs-server 配置端口、代理白名单、CORS ├─ Dockerfile # 仓库自带的多阶段镜像build: node:16 → deploy: node:16-slim ├─ version.js # gulp write-version 生成供模板注入 ├─ terria-logo.png # 默认 Logo ├─ yarn.lock / .yarnrc # 依赖锁定与 yarn 配置 ├─ .eslintrc / .prettierrc / .editorconfig / .husky # 代码规范与 git hooks ├─ .devcontainer/ # VS Code 容器化开发环境 │ ├─ lib/ # 【应用层代码】TerriaMap 自己的 React 代码 │ ├─ Core/loadPlugins.ts # 插件加载逻辑读 plugins.ts逐个注册 │ ├─ ViewModels/PreviewLinkViewModel.js │ ├─ Views/ # 应用级视图UserInterface、render、About 按钮、免责声明 │ │ ├─ UserInterface.jsx # 页面骨架菜单、侧栏、地图容器 │ │ ├─ render.jsx # ReactDOM 挂载 │ │ ├─ AboutButton.jsx │ │ └─ global.scss │ └─ Styles/ # 全局样式变量与加载动画 │ ├─ wwwroot/ # 【静态资源 运行时配置 构建产物】 │ ├─ index.ejs # HTML 模板gulp render-index 编译成 index.html │ ├─ index.html # 生成物不要手改 │ ├─ config.json # 主配置品牌名、初始视角、底图、地形、工作台… │ ├─ version.json # 生成物版本 / commit线上排查用 │ ├─ init/ # 目录初始化文件Catalog 树、图层清单 │ │ └─ simple.json │ ├─ build/ # webpack 产物TerriaMap.js、TerriaJS/gulp copy 而来 │ ├─ data/ # 演示数据、图标、样式 JSON │ ├─ images/ favicons/ # 图片与站点图标 │ ├─ languages/ # 多语言文案包 │ ├─ help/ # 帮助文档页面 │ ├─ public/ # 额外静态站点内容 │ ├─ test/ # 前端测试页 │ └─ 404.html / 500.html / about.html / privacy.html │ ├─ packages/ # 【插件工作区】每个 plugin-* 都是独立包只有 src/ │ ├─ plugin-sample/ # 官方示例模板写新插件从这 copy │ └─ store/ # 插件间共享状态 │ ├─ buildprocess/ # 【构建配置】 │ ├─ webpack.config.js # 主构建配置含 terriajs 路径解析、插件别名 │ ├─ webpack.config.hot.js # 热更新开发配置 │ └─ configureWebpackForPlugins.js │ ├─ patches/ # patch-package 补丁如 protomaps1.19.0.patch ├─ deploy/ # 部署资产 │ ├─ docker/ # create-docker-context.js 官方 10 行 Dockerfile │ ├─ helm/ # Helm chart │ ├─ kubernetes/ # RBAC 配置 │ └─ varnish/ # 缓存层配置 ├─ doc/deploying/ # 部署文档 └─ architecture/ # 架构决策记录ADR1.wwwroot/配置项应该改config.json、init/*.json、index.ejs、images/、languages/、help/不该改index.html、version.json、build/——这三个都是 gulp 生成的改了下次构建就没了。2.lib/TerriaMap 自己的代码只有 8 个文件左右是“应用壳”级别的 UI页面骨架、About 按钮、免责声明、预览链接、全局样式。它和node_modules/terriajs/lib是两个完全不同的东西3.packages/插件工作区每个插件只有src/通过plugins.ts注册。写新插件最省事的做法是复制plugin-sample再改名。store/是插件之间共享的状态模块。4.buildprocess/构建配置webpack.config.js里最关键的一句是通过require.resolve(terriajs/package.json)找到node_modules/terriajs并把它加进resolve.alias5.deploy/、doc/、architecture/、patches/deploy/docker/官方 Docker 方案create-docker-context.js重新生成一个精简的构建上下文deploy/helm、kubernetes、varnish集群部署与缓存patches/patch-package补丁yarn install的 postinstall 会自动打上architecture/ADR记录“为什么这么选”。六、总结本篇文章介绍了什么是TerriaMap以及如何快速clone一个可执行的项目。下一篇技术文章将介绍如何基于官方提供的Demo在不修改核心底层源码的前提下仅通过调整配置项的方式完成自定义数据集的接入、适配与项目改造构建符合自身业务需求的专属项目。
技术解析与应用实践)
