探索街景新视界：MapillaryJS 开源项目推荐

潘俭渝Erik

于 2024-09-11 07:30:27 发布

阅读量753

点赞数 15

本文链接：https://blog.csdn.net/gitblog_00091/article/details/142115334

版权

探索街景新视界：MapillaryJS 开源项目推荐

mapillary-js Interactive, extendable street imagery map experiences in the browser, powered by WebGL 项目地址: https://gitcode.com/gh_mirrors/ma/mapillary-js

项目介绍

MapillaryJS 是一个用于在网页上创建交互式、可扩展的街景地图体验的客户端 JavaScript 库。它通过 WebGL 技术渲染空间、语义和纹理数据，为用户提供沉浸式的街景浏览体验。MapillaryJS 不仅支持自定义相机控制、用户交互和数据提供者，还能通过地理空间渲染、动画和内容放置等功能进行扩展。

项目技术分析

MapillaryJS 的核心技术栈包括：

WebGL: 用于高性能的3D图形渲染，确保街景图像的流畅展示。
JavaScript: 作为客户端脚本语言，提供丰富的交互功能。
TypeScript: 提供类型安全，增强代码的可维护性和可扩展性。
UMD (Universal Module Definition): 支持多种模块加载方式，方便在不同环境中使用。

项目及技术应用场景

MapillaryJS 适用于多种应用场景，包括但不限于：

城市规划: 通过街景图像帮助规划师更好地理解城市空间布局。
旅游导览: 为游客提供实时的街景导航和景点介绍。
房地产: 展示房产周边环境，提升购房体验。
教育: 用于地理教学，帮助学生直观理解地理空间。

项目特点

交互性强: 支持用户自定义相机控制和交互操作，提升用户体验。
可扩展性高: 通过插件和扩展机制，轻松集成第三方数据和服务。
跨平台支持: 兼容多种模块加载方式，适用于不同的开发环境和需求。
开源免费: 采用 MIT 许可证，开发者可以自由使用和修改。

如何开始使用

安装与使用

ES6 打包工具

使用 Yarn 或 npm 安装 MapillaryJS：
```
yarn add mapillary-js
```

在 HTML 文件的 <head> 中引入 CSS 文件：

<link href="https://unpkg.com/mapillary-js@4.1.2/dist/mapillary.css" rel="stylesheet" />

在 JavaScript 文件中引入并初始化 MapillaryJS：

import { Viewer } from "mapillary-js";

const viewer = new Viewer({
  accessToken: "<your access token>",
  container: "<your HTML element ID>",
  imageId: "<your image ID for initializing the viewer>",
});

TypeScript

使用 Yarn 或 npm 安装 MapillaryJS：
```
yarn add mapillary-js
```

在 HTML 文件的 <head> 中引入 CSS 文件：

<link href="https://unpkg.com/mapillary-js@4.1.2/dist/mapillary.css" rel="stylesheet" />

在 TypeScript 文件中引入并初始化 MapillaryJS：

import { Viewer, ViewerOptions } from "mapillary-js";

const options: ViewerOptions = {
  accessToken: "<your access token>",
  container: "<your HTML element ID>",
  imageId: "<your image ID for initializing the viewer>",
};
const viewer = new Viewer(options);

CDN

在 HTML 文件的 <head> 中引入 JavaScript 和 CSS 文件：

<script src="https://unpkg.com/mapillary-js@4.1.2/dist/mapillary.js"></script>
<link href="https://unpkg.com/mapillary-js@4.1.2/dist/mapillary.css" rel="stylesheet" />

在 HTML 文件的 <body> 中添加容器：

<div id="mly" style="width: 400px; height: 300px;"></div>

在 HTML 文件的 <body> 中初始化 MapillaryJS：

<script>
var { Viewer } = mapillary;

var viewer = new Viewer({
  accessToken: "<your access token>",
  container: "mly",
  imageId: "<your image ID for initializing the viewer>",
});
</script>