map-tools-vue-viewer

与 map-tools 后端配套的 Vue3 地图只读展示组件：通过接口加载地图 JSON，在业务项目中用脚本驱动 setElement 更新展示（与编辑器里「预览脚本」同一套 API）。

安装

npm install map-tools-vue-viewer
# 或本地路径 / 私有源
npm install file:../packages/map-tools-vue-viewer

需 Vue ^3.4，peer dependency。

构建产物见 dist/；开发联调可 Vite alias 到包的 src/index.js。

快速使用

import { createApp } from 'vue';
import MapToolsViewer from 'map-tools-vue-viewer';

const app = createApp(App);
app.use(MapToolsViewer); // 注册全局 <MapViewer />

或按需：

<script setup>
import { MapViewer } from 'map-tools-vue-viewer';
</script>
<template>
  <MapViewer
    api-base="/api"
    :map-id="1"
    :get-headers="() => ({ Token: 'your-token' })"
    height="100vh"
  />
</template>

Props

| 属性 | 说明 | |------|------| | apiBase | 接口根路径，需能访问 GET /maps/:id、GET /custom-components、GET /resources/proxy | | mapId | 地图 ID（与 mapData 二选一） | | mapData | 直接传入与 GET /maps/:id 相同结构的对象，可不请求接口 | | getHeaders | () => ({ Token: '...' }) 等与编辑器一致的鉴权头 | | script | 业务脚本字符串；不传则用地图内嵌 script；传 '' 禁用脚本 | | scriptInterval | 脚本轮询间隔 ms；不传则沿用地图内嵌配置 | | loadCustomComponents | 是否请求自定义组件列表（默认 true） | | height | 容器高度，默认 100% |

脚本 API（与编辑器预览一致）

脚本体内可写：

(function () {
  const els = getElements();
  const el = els.find((e) => e.type === 'text');
  if (el) setElement(el.id, { content: 'Hello' });
})();

实际由组件注入：getToken、request（fetch，自动带 getHeaders）、setElement(id, patch)、getElements()。

工具方法

import { fetchMapData, parseMapRecord } from 'map-tools-vue-viewer';

发布到 npm

cd packages/map-tools-vue-viewer
npm run build
npm publish

（若包名占用可改为 @your-scope/map-tools-vue-viewer 并修改 package.json 的 name。）