# @cyclomedia/streetsmart-api 中文文档

规范地址：https://npmcn.com/package/%40cyclomedia/streetsmart-api/

版本：26\.4\.0
npm 元数据更新时间：2026-11-04T09:26:37.397Z
中文译文更新时间：2026-11-11T07:10:39.763Z
软件包许可：UNLICENSED

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40cyclomedia/streetsmart-api
原文对照：https://npmcn.com/package/%40cyclomedia/streetsmart-api/?lang=original
项目主页：https://github.com/cyclomedia/streetsmart#readme
源码仓库：https://github.com/cyclomedia/streetsmart

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：7.8 MB，9 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：2 个
- peer 依赖：react 18\.3\.1，react-dom 18\.3\.1
- 首次发布：2023-11-08T15:38:16.560Z
- 最新版本发布：2026-11-04T09:22:24.119Z
- 近 30 天下载量：3308（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：116（近 12 个月 12 个）

## 中文简介

Streetsmart API 包裹为 npm 套件

## 安装

```sh
npm install @cyclomedia/streetsmart-api
```

也可以使用：`pnpm add @cyclomedia/streetsmart-api`、`yarn add @cyclomedia/streetsmart-api`、`bun add @cyclomedia/streetsmart-api`

## README

# 街道智能 API

这个 Street Smart api 软件包为 Street Smart Web 的大部分UI 组件提供程序访问 应用程序 [这里](https://streetsmart.cyclomedia.com/)。 。 。 .

* * *

## 设置

首先使用 npm 或 纱线安装软件包 .

```sh
npm i @cyclomedia/streetsmart-api
```

### 释放通道

软件包发布在独立的 npm dist-tag上,因此支持线可以独立安装 主线.

| 调值 | 版本格式 | 目录 |
| --- | --- | --- |
| `latest` | `X.Y.Z` | 主行, API 发布版本 |
| `rc` | `X.Y.Z-rc.N` | 发布下一个版本的候选 |
| `react19` | `X.Y.Z-react19.N` | 反应19个兼容版本的构建 `X.Y.Z` |

```sh
npm i @cyclomedia/streetsmart-api           # latest
npm i @cyclomedia/streetsmart-api@rc        # release candidate
npm i @cyclomedia/streetsmart-api@react19   # React 19 support line
```

然后导入软件包

```ts
import { StreetSmartApi } from "@cyclomedia/streetsmart-api";
```

该包还暴露出Typescript类型和常数的命名输出.

```ts
import { ApiOptions, ViewerType, AuthOptions } from "@cyclomedia/streetsmart-api"
```

## API 密码

注意以下项目仅列举一些最常用方法的例子.

> \[TIP\] 所有可用的方法 `StreetSmartApi` 对象和个人查看器对象,请参见文档.

### 输入

请看 [正式文件](https://streetsmart.cyclomedia.com/api/v26.4/documentation/#init) 或 `ApiOptions` 键,以获取更多关于选项的信息.

```ts
import { StreetSmartApi } from "@cyclomedia/streetsmart-api";

await StreetSmartApi.init({
    targetElement: document.getElementById('panorama-window'),
    srs: "EPSG:28992",
    locale: 'en-GB',
    apiKey: 'some-secret-xxx',
    addressSettings: {
        locale: 'nl',
        database: 'CMDatabase'
    },
    loginOauth: true,
    clientId: 'CLIENT_ID-XX-YY-ZZ',
    loginRedirectUri: 'localhost:3000/login',
    logoutRedirectUri: 'localhost:3000/logoutt'
})
```

### 打开查看器

在呼叫之后 `init` 已成功解析,可用 `open` 函数. 请检查一下 [正式文件](https://streetsmart.cyclomedia.com/api/v26.4/documentation/#open)。 。 。 .

```ts
import { StreetSmartApi, ViewerType } from "@cyclomedia/streetsmart-api";

const viewerInstance = await StreetSmartApi.open("5D4KX5SM", {
    viewerType: [ViewerType.PANORAMA, ViewerType.OBLIQUE],
    srs: "EPSG:28992",
    panoramaViewer: {
        closable: true,
        maximizable: false,
        timeTravelVisible: true,
        recordingsVisible: true,
        navbarVisible: true,
        replace: true,
    },
    obliqueViewer: {
        closable: true,
        maximizable: false,
    }
})
```

### 活动

你可以听到全球事件 `StreetSmartApi` 对象和特定查看器对象,由 页:1 `open` 函数.

请检查所有可用事件的文档或打字声明.

#### 实例:全球活动

```ts
import { GlobalViewerEvents, MeasurementEvents, StreetSmartApi } from "@cyclomedia/streetsmart-api";

StreetSmartApi
    .on(MeasurementEvents.MEASUREMENT_SAVED, (evt) => {
        const { activeMeasurement } = evt.detail
        console.log(activeMeasurement.geometry)
    })
    .on(GlobalViewerEvents.VIEWER_ADDED, (evt) => {
        const viewerId = evt.detail.viewer.getId()
        console.log("Viewer added: ", viewerId)
    })
```

#### 示例:查看器特定事件

```ts
import { PanoramaViewer, PanoramaViewerEvents, StreetSmartApi, ViewerType } from "@cyclomedia/streetsmart-api";

try {
    const viewers = await StreetSmartApi.open({
        coordinate: [121692.34, 487812.37, 5.60],
        dateRange: { from: '2022-01-01', to: '2024-01-01' }
    }, {
        viewerType: ViewerType.PANORAMA,
        srs: 'EPSG:28992',
    })

    const panoramaViewer = viewers[0] as PanoramaViewer
    panoramaViewer.on(PanoramaViewerEvents.RECORDING_CLICK, (evt) => {
        const recording = evt.detail.recording
        console.log("Clicked recording ", recording.id)
    })
} catch (e) {
    // handle error e
}

```

### 销毁

详情请参考 页:1 [正式文件](https://streetsmart.cyclomedia.com/api/v26.4/documentation/#destroy)

```ts
import {StreetSmartApi} from "@cyclomedia/streetsmart-api";

await StreetSmartApi.destroy({
    targetElement: document.getElementById('panorama-window'),
    loginOauth: true,
})
```

## 财务问题

-   [可用的 API 函数 ?](https://npmcn.com/package/%40cyclomedia/streetsmart-api/#readme-what-api-functions-are-available)

#### 可用的 API 函数 ?

请看 [文档](https://streetsmart.cyclomedia.com/api/v26.4/documentation/) 用于所有可用的功能和方法.

## 常见问题

### @cyclomedia/streetsmart-api 是什么？

Streetsmart API 包裹为 npm 套件

### 如何安装 @cyclomedia/streetsmart-api？

在项目目录运行 npm install @cyclomedia/streetsmart-api，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（18\.3\.1）、react-dom（18\.3\.1）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @cyclomedia/streetsmart-api 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @cyclomedia/streetsmart-api 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @cyclomedia/streetsmart-api 可以商用吗？

@cyclomedia/streetsmart-api 使用 UNLICENSED 许可。作者声明为 UNLICENSED，即不授予公开使用许可（与公共领域的 Unlicense 不同）。使用前需获得作者授权。以上为概括，不构成法律意见，请以许可原文为准。

### @cyclomedia/streetsmart-api 的下载量有多少？

根据 npm 官方下载统计，@cyclomedia/streetsmart-api 在 2026/10/11 – 2026/11/09 这 30 天内被下载 3,308 次，日均约 110 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @cyclomedia/streetsmart-api 还在维护吗？

最新版本 26\.4\.0 发布于 2026/11/04（6 天前）；至今共发布 116 个版本，其中过去 12 个月发布了 12 个；首次发布于 2023/11/08。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。