Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add znlgis/opengis-skills --skill map-360-demogit clone --depth 1 https://github.com/znlgis/opengis-skillsWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/znlgis/opengis-skills/map-360-demo)<a href="https://agentmods.dev/skills/znlgis/opengis-skills/map-360-demo"><img src="https://agentmods.dev/badge/skills/znlgis/opengis-skills/map-360-demo/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/znlgis/opengis-skills/map-360-demo"><img src="https://agentmods.dev/badge/skills/znlgis/opengis-skills/map-360-demo.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00087 | $0.04883 |
| Opus 5.5 | $0.00035 | $0.01953 |
| Sonnet 5.5 | $0.00017 | $0.00977 |
| Haiku 4.5 | $0.00009 | $0.00488 |
Grade A, and why
map-360-demo scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 6d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 321 lines — stays where its author put it; the contents beside it link to each section on GitHub.
项目地址： https://github.com/znlgis/map-360-demo
教程： https://znlgis.github.io/demos/map-360-demo/
许可证： 以仓库为准
概述
map-360-demo 是一个纯前端演示项目，核心目标是实现 360° 全景与真实地图的双向联动：全景由 Photo Sphere Viewer v5 渲染，右下角平面地图由 Leaflet（经 PlanPlugin 嵌入）渲染，两者通过标记的 data.plan 字段互相关联。项目基于 Vue 3 + Vite + TypeScript，不依赖后端，标记数据通过 localStorage 持久化，克隆后即可本地运行。配套教程共 12 章，覆盖组件封装、联动机制、坐标换算、状态管理与二次开发。
核心特性
| 特性 | 说明 |
|---|---|
| 多种全景格式 | 等距圆柱（Equirectangular）4 个互连场景 + 立方体贴图（Cubemap）独立场景 |
| 虚拟导览 | 等距圆柱场景间 3D 箭头导航，点击带转场动画切换场景 |
| 地图联动 | 全景标记与 Leaflet 地图热点双向联动，点击地图热点自动旋转视角 |
| 标记管理 | 添加/编辑/删除/搜索/导入导出 JSON/恢复默认，自动持久化 |
| 功能面板 | 自动旋转、罗盘、陀螺仪、设置面板、缩略图画廊实时开关 |
| 坐标换算 | 全景 yaw/pitch 与 GPS 经纬度互推（src/utils/geo.ts） |
| 安全处理 | 标记名称/描述 HTML 转义，防 XSS 注入 |
技术栈
| 依赖 | 版本 | 用途 |
|---|---|---|
| Vue | 3.5 | UI 框架（组合式 API + <script setup>） |
| Vite | 8.x | 构建工具 |
| TypeScript | 6.0 | 类型系统 |
| @photo-sphere-viewer/* | 5.15 | 核心 + markers/plan/virtual-tour/gallery/autorotate/compass/gyroscope/settings 插件与 cubemap 适配器 |
| leaflet | 1.9 | 平面地图渲染（由 PlanPlugin 内置） |
环境准备 / 快速开始
git clone https://github.com/znlgis/map-360-demo.git
cd map-360-demo
npm install # 安装依赖
npm run dev # 开发服务器，默认 http://localhost:5173
npm run typecheck # 仅类型检查（vue-tsc -b，含 vite.config.ts）
npm run build # 类型检查 + 生产构建，输出 dist/
npm run preview # 预览生产构建
- Node.js 20+（Vite 8 对 Node 版本要求较高，教程建议 20 或更高）
- 全景图片与地图瓦片均来自公共资源（PSV 官方 CDN / OpenStreetMap），运行与预览均需联网
项目结构
map-360-demo/
├── public/icons/link-pin.svg # 场景跳转标记图标（本地资源）
├── src/
│ ├── App.vue # 根组件：编排状态、跳转逻辑、导入导出
│ ├── main.ts # 入口
│ ├── components/
│ │ ├── PsvContainer.vue # 核心：PSV Viewer 生命周期与全部插件
│ │ ├── FeaturePanel.vue # 功能演示面板（各项能力开关）
│ │ ├── SceneSelector.vue # 场景下拉选择
│ │ ├── MarkerModal.vue # 添加/编辑标记弹窗
│ │ ├── MarkerList.vue # 底部标记列表（搜索/折叠/导入导出）
│ │ └── ToastHost.vue # 全局 Toast 反馈
│ ├── composables/
│ │ ├── useAppState.ts # 全局状态 + localStorage 持久化 + 导入导出
│ │ ├── useAddMarkerFlow.ts # 添加/编辑标记状态机
│ │ └── useToast.ts # Toast 单例
│ ├── data/scenes.ts # 预设场景、默认标记、PSV 配置转换
│ ├── styles/psv.css # PSV 全局样式覆盖
│ ├── types/index.ts # Scene/MarkerData/FeatureFlags 等类型
│ └── utils/geo.ts # 方位角换算（点击位置 <-> 经纬度）
├── vite.config.ts # 别名 @ -> ./src、manualChunks 分包
└── tsconfig*.json # project references（app/node）
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 6d ago Changed · +9 lines 824fdabacfa1
- 7d ago First seen · 312 lines · 87 tokens per session scan A 3b0227b478f9
map-360-demo is a skill published in the GitHub repository znlgis/opengis-skills (69 stars, last pushed yesterday), licensed MIT. It adds 87 tokens to every session and 4,883 once invoked, about $0.0003 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-10-15.
Other skills, from other repositories
slidev
Create and present web-based slidedecks for developers using Slidev with Markdown, Vue components, code highlighting, animations, and interactive features. Use when building technical presentations, conference talks, code walkthroughs, teaching materials, or developer decks.
vue
Vue 3 - Progressive JavaScript framework with Composition API, reactivity system, single-file components, Vite integration, TypeScript support.
nuxt-docs
Nuxt 4.x — full-stack Vue.js framework. File-based routing, auto-imports, SSR, Nitro, layers, modules.
nuxt-ui
Build UIs with @nuxt/ui v4 — 125+ accessible Vue components with Tailwind CSS theming. Use when creating interfaces, customizing themes to match a brand, building forms, or composing layouts like dashboards, docs sites, and chat interfaces.
uview-plus
A guide to using uview-plus, a Vue 3 interface component library for uni-app projects. It covers reusable page elements, setup, themes, icons, and differences between web, mobile-app, and mini-program targets.
Cypress v14 Component Testing
Component testing patterns with Cypress v14 including React, Vue, and Angular component mounting, custom mount commands, interaction testing, visual snapshots, and integration with Vite and Webpack bundlers.