街道智能 API

这个 Street Smart api 软件包为 Street Smart Web 的大部分UI 组件提供程序访问 应用程序 这里。 。 。 .

设置

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

npm i @cyclomedia/streetsmart-api

释放通道

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

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

然后导入软件包

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

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

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

API 密码

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

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

输入

请看 正式文件 或 ApiOptions 键,以获取更多关于选项的信息.

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 函数. 请检查一下 正式文件。 。 。 .

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 函数.

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

实例:全球活动

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)
    })

示例:查看器特定事件

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 正式文件

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

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

财务问题

• 可用的 API 函数 ?

可用的 API 函数 ?

请看 文档 用于所有可用的功能和方法.