From de9ce8a5f06f87c035990ac8b207fd69f83b28c9 Mon Sep 17 00:00:00 2001 From: Akihiko Kusanagi Date: Tue, 16 Nov 2021 12:38:13 +0800 Subject: [PATCH] Bump version to 3.0.0-rc.1 --- DEVELOPER_GUIDE-en.md | 983 +---------------------- DEVELOPER_GUIDE-ja.md | 983 +---------------------- USER_GUIDE-en.md | 298 +------ USER_GUIDE-ja.md | 298 +------ docs/ja/user-guide/supported-browsers.md | 6 +- docs/user-guide/supported-browsers.md | 6 +- package.json | 2 +- src/configs.js | 2 +- src/map.js | 2 +- 9 files changed, 13 insertions(+), 2567 deletions(-) diff --git a/DEVELOPER_GUIDE-en.md b/DEVELOPER_GUIDE-en.md index 72183498..086438da 100644 --- a/DEVELOPER_GUIDE-en.md +++ b/DEVELOPER_GUIDE-en.md @@ -1,984 +1,3 @@ # Mini Tokyo 3D Developer Guide -日本語版は[こちら](https://minitokyo3d.com/docs/master/ja/developer-guide/)でご覧いただけます。 - -This document describes how developers can embed Mini Tokyo 3D into their web page and integrate it into their applications. If you want to know how to use Mini Tokyo 3D itself, see the [Mini Tokyo 3D User Guide](https://minitokyo3d.com/docs/master/). - -## How to Integrate Mini Tokyo 3D - -Embedding Mini Tokyo 3D into a web page, or using the APIs to customize it, is very simple. Please follow the instructions in this section to get started. - -### Preparation for Use - -Mini Tokyo 3D works on all major browsers that support ES6. Internet Explorer is not supported. - -#### Getting a Mapbox Access Token - -Mini Tokyo 3D uses the [Mapbox](https://www.mapbox.com) service for its map tiles, so you will need a Mapbox access token to use it. It uses [Map Loads for Web](https://www.mapbox.com/pricing/#maploads) sessions, which are free for up to 50,000 connections per month. Follow the steps below to get an access token. - -1. Create a Mapbox account by entering your user information on the [sign-up page](https://account.mapbox.com/auth/signup/). -2. After logging in with your Mapbox account, click on "Tokens" in the menu at the top of the screen to view the list of access tokens. Only the "Default public token" will be displayed right after creating the account. -3. Click on the "Create a token" button in the upper right corner of the screen to go to the page for creating an access token. -4. In the "Token name" field, enter your web site name, app name, or any other name you want. -5. The "Token scopes" should be the default setting (all public scopes should be checked). -6. Enter the URL of the site where you want to install Mini Tokyo 3D in the "URL" field in the "Token restrictions" section, and then click the "Add URL" button. For the URL format, please refer to the [URL restrictions](https://docs.mapbox.com/accounts/overview/tokens/#url-restrictions). By setting this URL restriction, you can prevent other sites from using this access token for their own purposes. -7. Finally, click the "Create token" button at the bottom of the screen and the newly created token will appear in the list of access tokens. - -### Embedding Directly Into a Web Page - -If you simply want to display a Mini Tokyo 3D map on your web page, you can edit the HTML file as follows. - -First, use the jsDelivr CDN link to load the Mini Tokyo 3D style sheet and JavaScript code within the `` element of the HTML file. - -```html - - - - -``` - -Within the `` element of the same HTML file, add an HTML element with an `id` (a `
` element in the example below), and write JavaScript code to create a Map instance in the ` - -``` - -### Embedding Into an App as a Module - -To embed Mini Tokyo 3D into your application code using a bundler, follow the steps below. - -First, install the npm module of Mini Tokyo 3D and register it to your application's `package.json`. - -```bash -npm install mini-tokyo-3d --save -``` - -If you want to load the module in the CommonJS style, you need to include the following at the beginning of your code. - -```js -const {Map} = require('mini-tokyo-3d'); -``` - -To load the module in the ES6 style, you need to include the following at the beginning of your code. - -```js -import {Map} from 'mini-tokyo-3d'; -``` - -In your application code, you need to initialize the Map object as follows. `container` of the `options` object represents the ID of the HTML element in which Mini Tokyo 3D will render the map. You also need to specify the Mapbox access token obtained in the above step to `accessToken`. - -```js -const options = { - container: '', - accessToken: '' -}; -const map = new Map(options); -``` - -### Adding Plugins - -A variety of [plugins](https://minitokyo3d.com/docs/master/user-guide/plugins.html) are available to display additional information on the 3D map. Plugins are provided separately from Mini Tokyo 3D, and can be installed at the time of site installation or application build, depending on your preference. As an example, the following shows how to incorporate the [Precipitation Plugin](https://github.com/nagix/mt3d-plugin-precipitation) and [Fireworks Plugin](https://github.com/nagix/mt3d-plugin-fireworks). - -To integrate them directly into a web page, load the plugins in the `` element of the HTML file and initialize the Map object by specifying the `plugins` property as follows. - -```html - - -``` - -```html - -``` - -If you want to include them in your application as modules, please follow the steps below to build your application. - -If you want to load the modules in the CommonJS style, you need to include the following at the beginning of your code. - -```js -const mt3dPrecipitation = require('mt3d-plugin-precipitation'); -const mt3dFireworks = require('mt3d-plugin-fireworks'); -``` - -To load the modules in the ES6 style, you need to include the following at the beginning of your code. - -```js -import mt3dPrecipitation from 'mt3d-plugin-precipitation'; -import mt3dFireworks from 'mt3d-plugin-fireworks'; -``` - -In your application code, initialize the Map object by specifying the `plugins` property as follows. - -```js -const options = { - /* ... */ - plugins: [mt3dPrecipitation(), mt3dFireworks()] -}; -const map = new Map(options); -``` - -## Mini Tokyo 3D API - -Using Mini Tokyo 3D API in JavaScript, you can customize Mini Tokyo 3D in a variety of ways. - -Class/Object | Details -:--|:-- -[`Map`](#map) | **Parameters**
[`options`](#options-object)
**Instance Members**
[`easeTo`](#easetooptions) [`flyTo`](#flytooptions) [`getBearing`](#getbearing) [`getCenter`](#getcenter) [`getClockMode`](#getclockmode) [`getEcoMode`](#getecomode) [`getPitch`](#getpitch) [`getSelection`](#getselection) [`getTrackingMode`](#gettrackingmode) [`getViewMode`](#getviewmode) [`getZoom`](#getzoom) [`jumpTo`](#jumptooptions) [`off`](#offtype-listener) [`on`](#ontype-listener) [`once`](#oncetype-listener) [`setBearing`](#setbearingbearing) [`setCenter`](#setcentercenter) [`setClockMode`](#setclockmodemode) [`setEcoMode`](#setecomodemode) [`setPitch`](#setpitchpitch) [`setSelection`](#setselectionid) [`setTrackingMode`](#settrackingmodemode) [`setViewMode`](#setviewmodemode) [`setZoom`](#setzoomzoom)
**Events**
[`boxzoomcancel`](#boxzoomcancel) [`boxzoomend`](#boxzoomend) [`boxzoomstart`](#boxzoomstart) [`click`](#click) [`clockmode`](#clockmode) [`contextmenu`](#contextmenu) [`dblclick`](#dblclick) [`deselection`](#deselection) [`drag`](#drag) [`dragend`](#dragend) [`dragstart`](#dragstart) [`ecomode`](#ecomode) [`error`](#error) [`load`](#load) [`mousedown`](#mousedown) [`mousemove`](#mousemove) [`mouseout`](#mouseout) [`mouseover`](#mouseover) [`mouseup`](#mouseup) [`move`](#move) [`moveend`](#moveend) [`movestart`](#movestart) [`pitch`](#pitch) [`pitchend`](#pitchend) [`pitchstart`](#pitchstart) [`resize`](#resize) [`rotate`](#rotate) [`rotateend`](#rotateend) [`rotatestart`](#rotatestart) [`selection`](#selection) [`touchcancel`](#touchcancel) [`touchend`](#touchend) [`touchmove`](#touchmove) [`touchstart`](#touchstart) [`trackingmode`](#trackingmode) [`viewmode`](#viewmode) [`wheel`](#wheel) [`zoom`](#zoom) [`zoomend`](#zoomend) [`zoomstart`](#zoomstart) -[`Secrets`](#secrets) | - -### Map - -The `Map` object represents the Mini Tokyo 3D map on your page. You create a `Map` by specifying a `container` and other `options`. Then Mini Tokyo 3D initializes the map on the page and returns your `Map` object. - -```js -new Map(options: Object) -``` - -#### Parameters - -##### **`options`** ([`Object`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)) - -Name | Description -:-- | :-- -**`options.container`**
[`string`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) | The `id` of the HTML element in which Mini Tokyo 3D will render the map. -**`options.accessToken`**
[`string`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) | Access token for [Mapbox](https://www.mapbox.com). If you don't specify this token, an error will occur when loading the map, so make sure to get an access token specific to your web site. -**`options.secrets`**
[`Secrets`](#secrets) | An object to store the access tokens used to retrieve data. -**`options.lang`**
[`string`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) | [IETF language tag](https://en.wikipedia.org/wiki/IETF_language_tag) for the language. If not specified, the browser's default language is used. Currently `'ja'`, `'en'`, `'ko'`, `'zh-Hans'`, `'zh-Hant'`, `'th'` and `'ne'` are supported. If an unsupported language is specified, then 'en' is used. -**`options.dataUrl`**
[`string`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) | Mini Tokyo 3D data URL. If not specified, `'https://minitokyo3d.com/data'` will be used. -**`options.clockControl`**
[`boolean`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)
default: `true` | If `true`, the date and time display will be added to the map. -**`options.searchControl`**
[`boolean`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)
default: `true` | If `true`, the search button will be added to the map. -**`options.navigationControl`**
[`boolean`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)
default: `true` | If `true`, the navigation buttons will be added to the map. -**`options.fullscreenControl`**
[`boolean`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)
default: `true` | If `true`, the fullscreen button will be added to the map. -**`options.modeControl`**
[`boolean`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)
default: `true` | If `true`, the mode switch buttons will be added to the map. -**`options.configControl`**
[`boolean`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)
default: `true` | If `true`, the configuration buttons will be added to the map. -**`options.trackingMode`**
[`string`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)
default: `'helicopter'` | The initial tracking mode. `'helicopter'` and `'heading'` are supported. -**`options.ecoMode`**
[`string`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)
default: `'normal'` | The initial eco mode. `'normal'` and `'eco'` are supported. -**`options.center`**
[`LngLatLike`](https://docs.mapbox.com/mapbox-gl-js/api/#lnglatlike)
default: `[139.7670, 35.6814]` | The initial geographical center point of the map. If not specified, it will default to around Tokyo station (`[139.7670, 35.6814]`). Note: Mini Tokyo 3D uses longitude, latitude coordinate order to match GeoJSON. -**`options.zoom`**
[`number`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)
default: `14` | The initial zoom level of the map. If not specified, it will default to `14`. -**`options.bearing`**
[`number`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)
default: `0` | The initial bearing (rotation) of the map, measured in degrees counter-clockwise from north. If not specified, it will default to the true north (`0`). -**`options.pitch`**
[`number`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)
default: `60` | The initial pitch (tilt) of the map, measured in degrees away from the plane of the screen (0-85). If not specified, it will default to `60`. -**`options.ecoFrameRate`**
[`number`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)
default: `1` | Frame rate for train and airplane animations (frames per second) when Eco Mode is on. Specify on a scale of 1 to 60. Lower values result in less smoother animations and lower CPU resource usage, thus reducing battery consumption on mobile devices. If not specified, it will default to `1`. -**`options.selection`**
[`string`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) | ID of the train or flight to be tracked. The train ID is a string in the form of `'odpt.Train:..'`. The fright ID is a string in the form of `'odpt.FlightInformationArrival:..'` or `'odpt.FlightInformationDeparture:..'`. The `'odpt.*:'` part can be omitted. For details, see the [Open Data Challenge for Public Transportation in Tokyo: API Specification](https://developer-tokyochallenge.odpt.org/en/documents). - -#### Instance Members - -##### **`easeTo(options)`** - -Changes any combination of center, zoom, bearing, pitch, and padding with an animated transition between old and new values. The map will retain its current values for any details not specified in `options`. - -Note: The transition will happen instantly if the user has enabled the reduced motion accessibility feature enabled in their operating system, unless `options` includes `essential: true`. - -###### Parameters - -**`options`** ([`Object`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)) Options describing the destination and animation of the transition. Accepts [`CameraOptions`](https://docs.mapbox.com/mapbox-gl-js/api/properties/#cameraoptions) and [`AnimationOptions`](https://docs.mapbox.com/mapbox-gl-js/api/properties/#animationoptions). - -###### Returns - -[`Map`](#map): `this` - ---- - -##### **`flyTo(options)`** - -Changes any combination of center, zoom, bearing, and pitch, animating the transition along a curve that evokes flight. The animation seamlessly incorporates zooming and panning to help the user maintain her bearings even after traversing a great distance. - -Note: The animation will be skipped, and this will behave equivalently to `jumpTo` if the user has the `reduced motion` accessibility feature enabled in their operating system, unless `options` includes `essential: true`. - -###### Parameters - -**`options`** ([`Object`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)) Options describing the destination and animation of the transition. Accepts [`CameraOptions`](https://docs.mapbox.com/mapbox-gl-js/api/properties/#cameraoptions), [`AnimationOptions`](https://docs.mapbox.com/mapbox-gl-js/api/properties/#animationoptions), and the following additional options. - -Name | Description -:-- | :-- -**`options.curve`**
[`number`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)
default: `1.42` | The zooming "curve" that will occur along the flight path. A high value maximizes zooming for an exaggerated animation, while a low value minimizes zooming for an effect closer to [`Map#easeTo`](#easetooptions). 1.42 is the average value selected by participants in the user study discussed in [van Wijk (2003)](https://www.win.tue.nl/~vanwijk/zoompan.pdf). A value of `Math.pow(6, 0.25)` would be equivalent to the root mean squared average velocity. A value of 1 would produce a circular motion. -**`options.minZoom`**
[`number`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number) | The zero-based zoom level at the peak of the flight path. If `options.curve` is specified, this option is ignored. -**`options.speed`**
[`number`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)
default: `1.2` | The average speed of the animation defined in relation to `options.curve`. A speed of 1.2 means that the map appears to move along the flight path by 1.2 times `options.curve` screenfuls every second. A *screenful* is the map's visible span. It does not correspond to a fixed physical distance, but varies by zoom level. -**`options.screenSpeed`**
[`number`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number) | The average speed of the animation measured in screenfuls per second, assuming a linear timing curve. If `options.speed` is specified, this option is ignored. -**`options.maxDuration`**
[`number`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number) | The animation's maximum duration, measured in milliseconds. If duration exceeds maximum duration, it resets to 0. - -###### Returns - -[`Map`](#map): `this` - ---- - -##### **`getBearing()`** - -Returns the map's current bearing. The bearing is the compass direction that is "up"; for example, a bearing of 90° orients the map so that east is up. - -###### Returns - -[`number`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number): The map's current bearing. - ---- - -##### **`getCenter()`** - -Returns the map's geographical centerpoint. - -###### Returns - -[`LngLat`](https://docs.mapbox.com/mapbox-gl-js/api/geography/#lnglat): The map's geographical centerpoint. - ---- - -##### **`getClockMode()`** - -Returns the current clock mode. - -###### Returns - -[`string`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String): A string representing the current clock mode. Either `'realtime'` or `'playback'`. - ---- - -##### **`getEcoMode()`** - -Returns the current eco mode. - -###### Returns - -[`string`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String): A string representing the current eco mode. Either `'normal'` or `'eco'`. - ---- - -##### **`getPitch()`** - -Returns the map's current pitch (tilt). - -###### Returns - -[`number`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number): The map's current pitch, measured in degrees away from the plane of the screen. - ---- - -##### **`getSelection()`** - -Returns the ID of the train or flight being tracked. - -###### Returns - -[`string`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String): The ID of the train or flight being tracked. The train ID is a string in the form of `'..'`. The flight ID is a string in the form of `'..'`. - ---- - -##### **`getTrackingMode()`** - -Returns the current tracking mode. - -###### Returns - -[`string`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String): A string representing the current tracking mode. Either `'helicopter'` or `'heading'`. - ---- - -##### **`getViewMode()`** - -Returns the current view mode. - -###### Returns - -[`string`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String): A string representing the current view mode. Either `'ground'` or `'underground'`. - ---- - -##### **`getZoom()`** - -Returns the map's current zoom level. - -###### Returns - -[`number`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number): The map's current zoom level. - ---- - -##### **`jumpTo(options)`** - -Changes any combination of center, zoom, bearing, and pitch, without an animated transition. The map will retain its current values for any details not specified in `options`. - -###### Parameters - -**`options`** ([`CameraOptions`](https://docs.mapbox.com/mapbox-gl-js/api/properties/#cameraoptions)) Options object - -###### Returns - -[`Map`](#map): `this` - ---- - -##### **`off(type, listener)`** - -Removes an event listener previously added with [`Map#on`](#ontype-listener). - -###### Parameters - -**`type`** ([`string`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)) The event type previously used to install the listener. - -**`listener`** ([`Function`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function)) The function previously installed as a listener. - -###### Returns - -[`Map`](#map): `this` - ---- - -##### **`on(type, listener)`** - -Adds a listener for events of a specified type. - -###### Parameters - -**`type`** ([`string`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)) The event type to listen for. - -**`listener`** ([`Function`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function)) The function to be called when the event is fired. - -###### Returns - -[`Map`](#map): `this` - ---- - -##### **`once(type, listener)`** - -Adds a listener that will be called only once to a specified event type. - -###### Parameters - -**`type`** ([`string`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)) The event type to add a listener for. - -**`listener`** ([`Function`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function)) The function to be called when the event is fired. - -###### Returns - -[`Map`](#map): `this` - ---- - -##### **`setBearing(bearing)`** - -Sets the map's bearing (rotation). The bearing is the compass direction that is "up"; for example, a bearing of 90° orients the map so that east is up. - -Equivalent to `jumpTo({bearing: bearing})`. - -###### Parameters - -**`bearing`** ([`number`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)) The desired bearing. - -###### Returns - -[`Map`](#map): `this` - ---- - -##### **`setCenter(center)`** - -Sets the map's geographical centerpoint. Equivalent to `jumpTo({center: center})`. - -###### Parameters - -**`center`** ([`LngLatLike`](https://docs.mapbox.com/mapbox-gl-js/api/#lnglatlike)) The centerpoint to set. - -###### Returns - -[`Map`](#map): `this` - ---- - -##### **`setClockMode(mode)`** - -Sets the clock mode. In the real-time clock mode (`'realtime'`), trains and airplanes are displayed on the map according to the actual operation at the current time. In the playback clock mode (`'playback'`), you can specify the time and the speed of time passing. - -###### Parameters - -**`mode`** ([`string`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)) A string representing the clock mode. Either `'realtime'` or `'playback'`. - -###### Returns - -[`Map`](#map): `this` - ---- - -##### **`setEcoMode(mode)`** - -Sets the eco mode. In the normal mode (`'normal'`), the frame rate for train and airplane animations will be set to 60. In the eco mode (`'eco'`), the frame rate will be set to the [`Map`](#map) constructor option `ecoFrameRate`. - -###### Parameters - -**`mode`** ([`string`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)) A string representing the eco mode. Either `'normal'` or `'eco'`. - -###### Returns - -[`Map`](#map): `this` - ---- - -##### **`setPitch(pitch)`** - -Sets the map's pitch (tilt). Equivalent to `jumpTo({pitch: pitch})`. - -###### Parameters - -**`pitch`** ([`number`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)) The pitch to set, measured in degrees away from the plane of the screen (0-85). - -###### Returns - -[`Map`](#map): `this` - ---- - -##### **`setSelection(id)`** - -Sets the ID of the train or flight you want to track. The train ID is a string in the form of `'odpt.Train:..'`. The fright ID is a string in the form of `'odpt.FlightInformationArrival:..'` or `'odpt.FlightInformationDeparture:..'`. The `'odpt.*:'` part can be omitted. For details, see the [Open Data Challenge for Public Transportation in Tokyo: API Specification](https://developer-tokyochallenge.odpt.org/en/documents). - -###### Parameters - -**`id`** ([`string`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)) ID of the train or flight to be tracked. - -###### Returns - -[`Map`](#map): `this` - ---- - -##### **`setTrackingMode(mode)`** - -Sets the tracking mode. In the helicopter tracking mode (`'helicopter'`), it makes a 360 degree turn around the target train or airplane. In the heading tracking mode (`'heading'`), it tracks the target train or airplane from above or diagonally behind in the direction of travel up. - -###### Parameters - -**`mode`** ([`string`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)) A string representing the tracking mode. Either `'helicopter'` or `'heading'`. - -###### Returns - -[`Map`](#map): `this` - ---- - -##### **`setViewMode(mode)`** - -Sets the view mode. In the ground view mode (`ground'`), ground railways, stations, trains and airplanes will be displayed brightly, and underground railways, stations and trains will be translucent. In the underground view mode (`'underground'`), the map will turn dark and ground railways, stations, trains and airplanes will be translucent, while underground railways, stations and trains will appear brighter. - -###### Parameters - -**`mode`** ([`string`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)) A string representing the view mode. Either `'ground'` or `'underground'`. - -###### Returns - -[`Map`](#map): `this` - ---- - -##### **`setZoom(zoom)`** - -Sets the map's zoom level. Equivalent to `jumpTo({zoom: zoom})`. - -###### Parameters - -**`zoom`** ([`number`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)) The zoom level to set (0-20). - -###### Returns - -[`Map`](#map): `this` - -#### Events - -##### **`boxzoomcancel`** - -Fired when the user cancels a "box zoom" interaction, or when the bounding box does not meet the minimum size threshold. See [`BoxZoomHandler`](https://docs.mapbox.com/mapbox-gl-js/api/handlers/#boxzoomhandler). - -###### Properties - -**`data`** ([`MapBoxZoomEvent`](https://docs.mapbox.com/mapbox-gl-js/api/events/#mapboxzoomevent)) - ---- - -##### **`boxzoomend`** - -Fired when a "box zoom" interaction ends. See [`BoxZoomHandler`](https://docs.mapbox.com/mapbox-gl-js/api/handlers/#boxzoomhandler). - -###### Properties - -**`data`** ([`MapBoxZoomEvent`](https://docs.mapbox.com/mapbox-gl-js/api/events/#mapboxzoomevent)) - ---- - -##### **`boxzoomstart`** - -Fired when a "box zoom" interaction starts. See [`BoxZoomHandler`](https://docs.mapbox.com/mapbox-gl-js/api/handlers/#boxzoomhandler). - -###### Properties - -**`data`** ([`MapBoxZoomEvent`](https://docs.mapbox.com/mapbox-gl-js/api/events/#mapboxzoomevent)) - ---- - -##### **`click`** - -Fired when a pointing device (usually a mouse) is pressed and released at the same point on the map. - -###### Properties - -**`data`** ([`MapMouseEvent`](https://docs.mapbox.com/mapbox-gl-js/api/events/#mapmouseevent)) - ---- - -##### **`clockmode`** - -Fired when the clock mode is changed. - -###### Properties - -**`data`** (`{mode: `[`string`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)`}`) - ---- - -##### **`contextmenu`** - -Fired when the right button of the mouse is clicked or the context menu key is pressed within the map. - -###### Properties - -**`data`** ([`MapMouseEvent`](https://docs.mapbox.com/mapbox-gl-js/api/events/#mapmouseevent)) - ---- - -##### **`dblclick`** - -Fired when a pointing device (usually a mouse) is pressed and released twice at the same point on the map in rapid succession. - -###### Properties - -**`data`** ([`MapMouseEvent`](https://docs.mapbox.com/mapbox-gl-js/api/events/#mapmouseevent)) - ---- - -##### **`deselection`** - -Fired when a train or airplane tracking is canceled. - -###### Properties - -**`data`** (`{deselection: `[`string`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)`}`) - ---- - -##### **`drag`** - -Fired repeatedly during a "drag to pan" interaction. See [`DragPanHandler`](https://docs.mapbox.com/mapbox-gl-js/api/handlers/#dragpanhandler). - -###### Properties - -**`data`** (`{originalEvent: `[`DragEvent`](https://developer.mozilla.org/docs/Web/API/DragEvent)`}`) - ---- - -##### **`dragend`** - -Fired when a "drag to pan" interaction ends. See [`DragPanHandler`](https://docs.mapbox.com/mapbox-gl-js/api/handlers/#dragpanhandler). - -###### Properties - -**`data`** (`{originalEvent: `[`DragEvent`](https://developer.mozilla.org/docs/Web/API/DragEvent)`}`) - ---- - -##### **`dragstart`** - -Fired when a "drag to pan" interaction starts. See [`DragPanHandler`](https://docs.mapbox.com/mapbox-gl-js/api/handlers/#dragpanhandler). - -###### Properties - -**`data`** (`{originalEvent: `[`DragEvent`](https://developer.mozilla.org/docs/Web/API/DragEvent)`}`) - ---- - -##### **`ecomode`** - -Fired when the eco mode is changed. - -###### Properties - -**`data`** (`{mode: `[`string`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)`}`) - ---- - -##### **`error`** - -Fired when an error occurs. This is Mini Tokyo 3D's primary error reporting mechanism. We use an event instead of `throw` to better accommodate asynchronous operations. If no listeners are bound to the `error` event, the error will be printed to the console. - -###### Properties - -**`data`** (`{error: {message: `[`string`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)`}}`) - ---- - -##### **`load`** - -Fired immediately after all necessary resources have been downloaded and the first visually complete rendering of the map has occurred. - ---- - -##### **`mousedown`** - -Fired when a pointing device (usually a mouse) is pressed within the map. - -###### Properties - -**`data`** ([`MapMouseEvent`](https://docs.mapbox.com/mapbox-gl-js/api/events/#mapmouseevent)) - ---- - -##### **`mousemove`** - -Fired when a pointing device (usually a mouse) is moved while the cursor is inside the map. As you move the cursor across the map, the event will fire every time the cursor changes position within the map. - -###### Properties - -**`data`** ([`MapMouseEvent`](https://docs.mapbox.com/mapbox-gl-js/api/events/#mapmouseevent)) - ---- - -##### **`mouseover`** - -Fired when a pointing device (usually a mouse) is moved within the map. As you move the cursor across a web page containing a map, the event will fire each time it enters the map or any child elements. - -###### Properties - -**`data`** ([`MapMouseEvent`](https://docs.mapbox.com/mapbox-gl-js/api/events/#mapmouseevent)) - ---- - -##### **`mouseup`** - -Fired when a pointing device (usually a mouse) is released within the map. - -###### Properties - -**`data`** ([`MapMouseEvent`](https://docs.mapbox.com/mapbox-gl-js/api/events/#mapmouseevent)) - ---- - -##### **`move`** - -Fired repeatedly during an animated transition from one view to another, as the result of either user interaction or methods such as [`Map#flyTo`](#flytooptions). - -###### Properties - -**`data`** (([`MapMouseEvent`](https://docs.mapbox.com/mapbox-gl-js/api/events/#mapmouseevent) | [`MapTouchEvent`](https://docs.mapbox.com/mapbox-gl-js/api/events/#maptouchevent))) - ---- - -##### **`moveend`** - -Fired just after the map completes a transition from one view to another, as the result of either user interaction or methods such as [`Map#jumpTo`](#jumptooptions). - -###### Properties - -**`data`** (`{originalEvent: `[`DragEvent`](https://developer.mozilla.org/docs/Web/API/DragEvent)`}`) - ---- - -##### **`movestart`** - -Fired just before the map begins a transition from one view to another, as the result of either user interaction or methods such as [`Map#jumpTo`](#jumptooptions). - -###### Properties - -**`data`** (`{originalEvent: `[`DragEvent`](https://developer.mozilla.org/docs/Web/API/DragEvent)`}`) - ---- - -##### **`pitch`** - -Fired repeatedly during the map's pitch (tilt) animation between one state and another as the result of either user interaction or methods such as [`Map#flyTo`](#flytooptions). - -###### Properties - -**`data`** (`MapEventData`) - ---- - -##### **`pitchend`** - -Fired immediately after the map's pitch (tilt) finishes changing as the result of either user interaction or methods such as [`Map#flyTo`](#flytooptions). - -###### Properties - -**`data`** (`MapEventData`) - ---- - -##### **`pitchstart`** - -Fired whenever the map's pitch (tilt) begins a change as the result of either user interaction or methods such as [`Map#flyTo`](#flytooptions). - -###### Properties - -**`data`** (`MapEventData`) - ---- - -##### **`resize`** - -Fired immediately after the map has been resized. - ---- - -##### **`rotate`** - -Fired repeatedly during a "drag to rotate" interaction. See [`DragRotateHandler`](https://docs.mapbox.com/mapbox-gl-js/api/handlers/#dragrotatehandler). - -###### Properties - -**`data`** (([`MapMouseEvent`](https://docs.mapbox.com/mapbox-gl-js/api/events/#mapmouseevent) | [`MapTouchEvent`](https://docs.mapbox.com/mapbox-gl-js/api/events/#maptouchevent))) - ---- - -##### **`rotateend`** - -Fired when a "drag to rotate" interaction ends. See [`DragRotateHandler`](https://docs.mapbox.com/mapbox-gl-js/api/handlers/#dragrotatehandler). - -###### Properties - -**`data`** (([`MapMouseEvent`](https://docs.mapbox.com/mapbox-gl-js/api/events/#mapmouseevent) | [`MapTouchEvent`](https://docs.mapbox.com/mapbox-gl-js/api/events/#maptouchevent))) - ---- - -##### **`rotatestart`** - -Fired when a "drag to rotate" interaction starts. See [`DragRotateHandler`](https://docs.mapbox.com/mapbox-gl-js/api/handlers/#dragrotatehandler). - -###### Properties - -**`data`** (([`MapMouseEvent`](https://docs.mapbox.com/mapbox-gl-js/api/events/#mapmouseevent) | [`MapTouchEvent`](https://docs.mapbox.com/mapbox-gl-js/api/events/#maptouchevent))) - ---- - -##### **`selection`** - -Fired when a train or airplane tracking is initiated. - -###### Properties - -**`data`** (`{selection: `[`string`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)`}`) - ---- - -##### **`touchcancel`** - -Fired when a [`touchcancel`](https://developer.mozilla.org/docs/Web/Events/touchcancel) event occurs within the map. - -###### Properties - -**`data`** ([`MapTouchEvent`](https://docs.mapbox.com/mapbox-gl-js/api/events/#maptouchevent)) - ---- - -##### **`touchend`** - -Fired when a [`touchend`](https://developer.mozilla.org/docs/Web/Events/touchend) event occurs within the map. - -###### Properties - -**`data`** ([`MapTouchEvent`](https://docs.mapbox.com/mapbox-gl-js/api/events/#maptouchevent)) - ---- - -##### **`touchmove`** - -Fired when a [`touchmove`](https://developer.mozilla.org/docs/Web/Events/touchmove) event occurs within the map. - -###### Properties - -**`data`** ([`MapTouchEvent`](https://docs.mapbox.com/mapbox-gl-js/api/events/#maptouchevent)) - ---- - -##### **`touchstart`** - -Fired when a [`touchstart`](https://developer.mozilla.org/docs/Web/Events/touchstart) event occurs within the map. - -###### Properties - -**`data`** ([`MapTouchEvent`](https://docs.mapbox.com/mapbox-gl-js/api/events/#maptouchevent)) - ---- - -##### **`trackingmode`** - -Fired when the tracking mode is changed. - -###### Properties - -**`data`** (`{mode: `[`string`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)`}`) - ---- - -##### **`viewmode`** - -Fired when the view mode is changed. - -###### Properties - -**`data`** (`{mode: `[`string`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)`}`) - ---- - -##### **`wheel`** - -Fired when a [`wheel`](https://developer.mozilla.org/docs/Web/Events/wheel) event occurs within the map. - -###### Properties - -**`data`** ([`MapWheelEvent`](https://docs.mapbox.com/mapbox-gl-js/api/events/#mapwheelevent)) - ---- - -##### **`zoom`** - -Fired repeatedly during an animated transition from one zoom level to another, as the result of either user interaction or methods such as [`Map#flyTo`](#flytooptions). - -###### Properties - -**`data`** (([`MapMouseEvent`](https://docs.mapbox.com/mapbox-gl-js/api/events/#mapmouseevent) | [`MapTouchEvent`](https://docs.mapbox.com/mapbox-gl-js/api/events/#maptouchevent))) - ---- - -##### **`zoomend`** - -Fired just after the map completes a transition from one zoom level to another, as the result of either user interaction or methods such as [`Map#flyTo`](#flytooptions). - -###### Properties - -**`data`** (([`MapMouseEvent`](https://docs.mapbox.com/mapbox-gl-js/api/events/#mapmouseevent) | [`MapTouchEvent`](https://docs.mapbox.com/mapbox-gl-js/api/events/#maptouchevent))) - ---- - -##### **`zoomstart`** - -Fired just before the map begins a transition from one zoom level to another, as the result of either user interaction or methods such as [`Map#flyTo`](#flytooptions). - -###### Properties - -**`data`** (([`MapMouseEvent`](https://docs.mapbox.com/mapbox-gl-js/api/events/#mapmouseevent) | [`MapTouchEvent`](https://docs.mapbox.com/mapbox-gl-js/api/events/#maptouchevent))) - -### Secrets - -The `Secrets` object is an object that stores the access tokens used to retrieve data and is set to the [`Map`](#map) constructor option `secrets`. - -#### Properties - -**`tokyochallenge`** ([`string`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)) : Access token for the [Open Data Challenge for Public Transportation in Tokyo](https://tokyochallenge.odpt.org/en/). If not specified, the default token will be used. - -**`odpt`** ([`string`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)) : Access token for the [Public Transportation Open Data Center](https://www.odpt.org). If not specified, the default token will be used. - -## Building Mini Tokyo 3D - -If you want to try out the latest features before they are released, modify the code yourself, or contribute to Mini Tokyo 3D development, you can build your project from source code by following the instructions in this section. - -### Preparation for Build - -The following software are required. - -- The latest version of [Node.js](https://nodejs.org) -- The latest version of [Git](https://git-scm.com) if you're cloning the repository - -Mini Tokyo 3D uses the following data sources and requires an access token for each of them at build time and run time. Follow the instructions below to obtain access tokens. - -Data Source | Sign-Up URL | Access Token Format -:-- | :-- | :-- -[Open Data Challenge for Public Transportation in Tokyo](https://tokyochallenge.odpt.org/en/) | [Link](https://developer-tokyochallenge.odpt.org/en/users/sign_up) | A string of numbers and lowercase letters -[Public Transportation Open Data Center](https://www.odpt.org) | [Link](https://developer.odpt.org/en/users/sign_up) | A string of numbers and lowercase letters -[Mapbox](https://www.mapbox.com) | [Link](https://account.mapbox.com/auth/signup/) | Alphanumeric string containing a period beginning with `pk.` - -#### Getting an Access Token for Open Data Challenge for Public Transportation in Tokyo - -Mini Tokyo 3D is using train and airplane data from the [Open Data Challenge for Public Transportation in Tokyo](https://tokyochallenge.odpt.org/en/). You need to register as a developer to get the data, but it is available for free. - -1. Register as a developer by entering your user information on the [developer site's registration page](https://developer-tokyochallenge.odpt.org/en/users/sign_up). It may take a few days to receive your registration confirmation email. -2. After logging in with your developer account, click on "Account" in the menu at the top of the screen and select "Manage Access Token". -3. A list of access tokens will be displayed. Only the "DefaultApplication" token will be displayed right after creating the account. Click on "Issuing an access token". -4. Enter an application name in the "Name" field and click the "Submit" button. -5. The newly created token will appear in the list of access tokens - -#### Getting an Access Token for Public Transportation Open Data Center - -Mini Tokyo 3D is also using data from the [Public Transportation Open Data Center](https://www.odpt.org). Again, you need to register as a developer to get the data, but it is available for free. - -1. Register as a developer by entering your user information on the [developer site's registration page](https://developer.odpt.org/en/users/sign_up). It may take a few days to receive your registration confirmation email. -2. After logging in with your developer account, click on "Account" in the menu at the top of the screen and select "Manage Access Token". -3. A list of access tokens will be displayed. Only the "DefaultApplication" token will be displayed right after creating the account. Click on "Issuing an access token". -4. Enter an application name in the "Name" field and click the "Submit" button. -5. The newly created token will appear in the list of access tokens - -#### Getting an Access Token for Mapbox - -See [Getting a Mapbox Access Token](#getting-a-mapbox-access-token). - -### Build Instructions - -#### 1. Downloading Files - -Download the latest `master` branch from Mini Tokyo 3D's [GitHub repository](https://github.com/nagix/mini-tokyo-3d) and extract the zip file. A directory named `mini-tokyo-3d-master` will be created, so change the name to `mini-tokyo-3d`. - -```bash -curl -LO https://github.com/nagix/mini-tokyo-3d/archive/master.zip -unzip master.zip -mv mini-tokyo-3d-master mini-tokyo-3d -``` - -If you are using Git, you can clone the repository directly from GitHub instead of the above commands. - -```bash -git clone https://github.com/nagix/mini-tokyo-3d.git -``` - -#### 2. Build - -Go to the top directory of Mini Tokyo 3D. - -```bash -cd mini-tokyo-3d -``` - -Create a JSON file containing the access tokens for Open Data Challenge for Public Transportation in Tokyo and Public Transportation Open Data Center obtained in the build preparation step and save it in this directory with the file name `secrets`. - -```json -{ - "tokyochallenge": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", - "odpt": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" -} -``` - -Install the dependent npm modules. - -```bash -npm install -``` - -Build the project with the following command. - -```bash -npm run build-all -``` - -When the build completes successfully, the `dist` directory will be created. It includes style sheet and JavaScript files for distribution. The `build` directory will also be created at the same time. It contains all the files needed for deployment on your web site. - -#### 3. Deploying on a Web Site - -The `index.html` in the `build` directory is for the web page on [https://minitokyo3d.com](http://minitokyo3d.com). Replace the `accessToken` property, which is passed to a `Map` constructor, with the Mapbox access token obtained in the build preparation step. Then, edit it for your web site, and place all the files in the `build` directory in the public directory of your web server. +The Developer Guide was moved to [Mini Tokyo 3D Developer Guide](https://minitokyo3d.com/docs/master/developer-guide/). diff --git a/DEVELOPER_GUIDE-ja.md b/DEVELOPER_GUIDE-ja.md index 45b70872..dbb70d00 100644 --- a/DEVELOPER_GUIDE-ja.md +++ b/DEVELOPER_GUIDE-ja.md @@ -1,984 +1,3 @@ # Mini Tokyo 3D 開発者ガイド -English version is available [here](https://minitokyo3d.com/docs/master/developer-guide/). - -本ドキュメントは、開発者が Mini Tokyo 3D を Web ページに埋め込んだり、自分のアプリケーションに組み込んで使うための方法を説明します。Mini Tokyo 3D 自体の使い方を知りたい場合は、[Mini Tokyo 3D ユーザーガイド](https://minitokyo3d.com/docs/master/ja/)をご覧ください。 - -## Mini Tokyo 3D の使用 - -Mini Tokyo 3D を Web ページに埋め込んで利用する、もしくは API を使って操作する方法は非常にシンプルです。まずは、このセクションの説明に従って設定してください。 - -### 使用の準備 - -Mini Tokyo 3D は ES6 に対応した主要ブラウザで動作します。Internet Explorer には非対応です。 - -#### Mapbox アクセストークンの入手 - -Mini Tokyo 3D は地図タイルに [Mapbox](https://www.mapbox.com) のサービスを利用しているため、利用には Mapbox のアクセストークンが必要です。[Map Loads for Web](https://www.mapbox.com/pricing/#maploads) セッションを利用しており、月間 50,000 接続までは無料です。下記の手順に従って、アクセストークンを入手してください。 - -1. [サインアップ](https://account.mapbox.com/auth/signup/)ページでユーザー情報を入力して、Mapbox アカウントを作成します。 -2. Mapbox アカウントログイン後、画面上部のメニューから「Tokens」をクリックしてアクセストークン一覧を表示します。アカウント作成直後はデフォルトの「Default public token」のみが表示されます。 -3. 画面右上の「Create a token」ボタンをクリックして、アクセストークン作成ページに進みます。 -4. 「Token name」にはあなたの Web サイト名やアプリ名など、任意の名前を入力します。 -5. 「Token scopes」はデフォルト設定（Public scopes にすべてチェックが入った状態）のままにします。 -6. 「Token restrictions」の「URL」欄には、Mini Tokyo 3D を設置するサイトの URL を入力して「Add URL」ボタンをクリックします。URL の形式は、[URL restrictions](https://docs.mapbox.com/accounts/overview/tokens/#url-restrictions) を参考にしてください。この URL 制限を設定しておくことで、他のサイトからこのアクセストークンを利用されることを防ぎます。 -7. 最後に画面下部の「Create token」ボタンをクリックすると、アクセストークン一覧に新たに作成されたトークンが表示されます。 - -### 直接 Web ページに組み込む - -単純に Web ページに Mini Tokyo 3D のマップを表示するだけであれば、次のように HTML ファイルを編集するだけです。 - -まず、jsDelivr CDN のリンクを使用して、Mini Tokyo 3D のスタイルシートと JavaScript コードを HTML ファイルの `` エレメント内で読み込みます。 - -```html - - - - -``` - -同じ HTML ファイルの `` エレメント内で、`id` のついた HTML エレメント（下の例では `
` エレメント）を追加し、` - -``` - -### モジュールとしてアプリに組み込む - -バンドラーを使って Mini Tokyo 3D を自分のアプリケーションのコードに組み込む場合には、次の手順に従ってください。 - -まず、Mini Tokyo 3D の npm モジュールをインストールし、あなたのアプリケーションの `package.json` に登録します。 - -```bash -npm install mini-tokyo-3d --save -``` - -CommonJS 形式でモジュールを読み込む場合は、コードの先頭で次のように記載します。 - -```js -const {Map} = require('mini-tokyo-3d'); -``` - -ES6 形式でモジュールを読み込む場合は、コードの先頭で次のように記載します。 - -```js -import {Map} from 'mini-tokyo-3d'; -``` - -アプリケーションのコード内で、次のようにして Map オブジェクトを初期化します。`options` オブジェクトの `container` には Mini Tokyo 3D がマップを表示する HTML エレメントの ID を指定します。また、`accessToken` には、上のステップで入手した Mapbox アクセストークンを指定します。 - -```js -const options = { - container: '<コンテナエレメントの ID>', - accessToken: '' -}; -const map = new Map(options); -``` - -### プラグインの追加 - -3Dマップ上に付加的な情報を表示する、様々な[プラグイン](https://minitokyo3d.com/docs/master/ja/user-guide/plugins.html)が利用可能です。プラグインは Mini Tokyo 3D 本体とは別に提供されており、サイト設置時もしくはアプリケーションビルド時に好みに応じて組み込むことができます。下記では例として、[降水プラグイン](https://github.com/nagix/mt3d-plugin-precipitation)と[花火プラグイン](https://github.com/nagix/mt3d-plugin-fireworks)を組み込む手順を示します。 - -直接 Web ページに組み込む場合は、 - -```html - - -``` - -```html - -``` - -モジュールとしてアプリに組み込む場合は、次の手順に従ってアプリケーションをビルドしてください。 - -CommonJS 形式でモジュールを読み込む場合は、コードの先頭で次のように記載します。 - -```js -const mt3dPrecipitation = require('mt3d-plugin-precipitation'); -const mt3dFireworks = require('mt3d-plugin-fireworks'); -``` - -ES6 形式でモジュールを読み込む場合は、コードの先頭で次のように記載します。 - -```js -import mt3dPrecipitation from 'mt3d-plugin-precipitation'; -import mt3dFireworks from 'mt3d-plugin-fireworks'; -``` - -アプリケーションのコード内で、次のように `plugins` プロパティを指定して Map オブジェクトを初期化します。 - -```js -const options = { - /* ... */ - plugins: [mt3dPrecipitation(), mt3dFireworks()] -}; -const map = new Map(options); -``` - -## Mini Tokyo 3D API - -JavaScript で Mini Tokyo 3D API を使うことで、様々なカスタマイズを行うことが可能です。 - -クラス／オブジェクト | 詳細 -:--|:-- -[`Map`](#map) | **パラメータ**
[`options`](#options-object)
**インスタンスメンバ**
[`easeTo`](#easetooptions) [`flyTo`](#flytooptions) [`getBearing`](#getbearing) [`getCenter`](#getcenter) [`getClockMode`](#getclockmode) [`getEcoMode`](#getecomode) [`getPitch`](#getpitch) [`getSelection`](#getselection) [`getTrackingMode`](#gettrackingmode) [`getViewMode`](#getviewmode) [`getZoom`](#getzoom) [`jumpTo`](#jumptooptions) [`off`](#offtype-listener) [`on`](#ontype-listener) [`once`](#oncetype-listener) [`setBearing`](#setbearingbearing) [`setCenter`](#setcentercenter) [`setClockMode`](#setclockmodemode) [`setEcoMode`](#setecomodemode) [`setPitch`](#setpitchpitch) [`setSelection`](#setselectionid) [`setTrackingMode`](#settrackingmodemode) [`setViewMode`](#setviewmodemode) [`setZoom`](#setzoomzoom)
**イベント**
[`boxzoomcancel`](#boxzoomcancel) [`boxzoomend`](#boxzoomend) [`boxzoomstart`](#boxzoomstart) [`click`](#click) [`clockmode`](#clockmode) [`contextmenu`](#contextmenu) [`dblclick`](#dblclick) [`deselection`](#deselection) [`drag`](#drag) [`dragend`](#dragend) [`dragstart`](#dragstart) [`ecomode`](#ecomode) [`error`](#error) [`load`](#load) [`mousedown`](#mousedown) [`mousemove`](#mousemove) [`mouseout`](#mouseout) [`mouseover`](#mouseover) [`mouseup`](#mouseup) [`move`](#move) [`moveend`](#moveend) [`movestart`](#movestart) [`pitch`](#pitch) [`pitchend`](#pitchend) [`pitchstart`](#pitchstart) [`resize`](#resize) [`rotate`](#rotate) [`rotateend`](#rotateend) [`rotatestart`](#rotatestart) [`selection`](#selection) [`touchcancel`](#touchcancel) [`touchend`](#touchend) [`touchmove`](#touchmove) [`touchstart`](#touchstart) [`trackingmode`](#trackingmode) [`viewmode`](#viewmode) [`wheel`](#wheel) [`zoom`](#zoom) [`zoomend`](#zoomend) [`zoomstart`](#zoomstart) -[`Secrets`](#secrets) | - -### Map - -`Map` オブジェクトは、Web ページ上の Mini Tokyo 3D マップを表しています。`Map` を作るには `container` やその他のオプションを指定してコンストラクタを呼び出します。すると、Web ページ上のマップが初期化され、`Map` が返されます。 - -```js -new Map(options: Object) -``` - -#### パラメータ - -##### **`options`** ([`Object`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)) - -名前 | 説明 -:-- | :-- -**`options.container`**
[`string`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) | Mini Tokyo 3D がマップを表示する HTML エレメントの `id` -**`options.accessToken`**
[`string`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) | [Mapbox](https://www.mapbox.com) のアクセストークン。未指定の場合はマップのロード時にエラーが起きるため、必ず自分の Web サイト専用のアクセストークンを入手して指定する -**`options.secrets`**
[`Secrets`](#secrets) | データ取得に使用するアクセストークンを格納するオブジェクト -**`options.lang`**
[`string`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) | 言語を表す [IETF 言語タグ](https://ja.wikipedia.org/wiki/IETF言語タグ)。未指定の場合は、ブラウザのデフォルト言語が使われる。現在 `'ja'`, `'en'`, `'ko'`, `'zh-Hans'`, `'zh-Hant'`, `'th'`, `'ne'` がサポートされている。サポートしていない言語が指定された場合は `'en'` が使われる -**`options.dataUrl`**
[`string`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) | Mini Tokyo 3D のデータ URL。未指定の場合は、`'https://minitokyo3d.com/data'` が使われる -**`options.clockControl`**
[`boolean`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)
デフォルト: `true` | `true` の場合、時刻表示をマップに追加する -**`options.searchControl`**
[`boolean`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)
デフォルト: `true` | `true` の場合、検索ボタンをマップに追加する -**`options.navigationControl`**
[`boolean`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)
デフォルト: `true` | `true` の場合、ナビゲーションボタンをマップに追加する -**`options.fullscreenControl`**
[`boolean`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)
デフォルト: `true` | `true` の場合、フルスクリーンボタンをマップに追加する -**`options.modeControl`**
[`boolean`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)
デフォルト: `true` | `true` の場合、表示モード切り替えボタンをマップに追加する -**`options.configControl`**
[`boolean`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)
デフォルト: `true` | `true` の場合、設定ボタンをマップに追加する -**`options.trackingMode`**
[`string`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)
デフォルト: `'helicopter'` | 初期の追跡モードを指定する。`'helicopter'` または `'heading'` がサポートされている -**`options.ecoMode`**
[`string`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)
デフォルト: `'normal'` | 初期のエコモードを指定する。`'normal'` または `'eco'` がサポートされている -**`options.center`**
[`LngLatLike`](https://docs.mapbox.com/mapbox-gl-js/api/#lnglatlike)
デフォルト: `[139.7670, 35.6814]` | 初期のマップ中心点の座標。未指定の場合は、東京駅付近（`[139.7670, 35.6814]`）に設定される。注: Mini Tokyo 3D では、GeoJSON と同様に経度、緯度の順で座標を指定する -**`options.zoom`**
[`number`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)
デフォルト: `14` | 初期のマップのズームレベル。未指定の場合は、`14` に設定される -**`options.bearing`**
[`number`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)
デフォルト: `0` | 初期のマップの方角。真北から反時計回りの角度で指定する。未指定の場合は、真北（`0`）に設定される -**`options.pitch`**
[`number`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)
デフォルト: `60` | 初期のマップの傾き。画面に対する地表面の角度（0〜85）で指定する。未指定の場合は、`60` に設定される -**`options.ecoFrameRate`**
[`number`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)
デフォルト: `1` | エコモードがオンの場合の、列車や旅客機のアニメーションのフレームレート（1秒あたりのフレーム数）。1〜60 の間で指定する。数値を小さくすると、アニメーションの滑らかさが減少する一方で CPU リソースの使用も下がるため、モバイルデバイスでのバッテリー消費を抑えることができる。未指定の場合は、`1` に設定される -**`options.selection`**
[`string`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) | 追跡する列車またはフライトの ID。列車 ID は`'odpt.Train:<事業者ID>.<路線ID>.<列車番号>'`、フライト ID は`'odpt.FlightInformationArrival:<事業者ID>.<空港ID>.<フライト番号>'`または`'odpt.FlightInformationDeparture:<事業者ID>.<空港ID>.<フライト番号>'`の形式で表される文字列。`'odpt.*:'`の部分は省略可。詳細は[東京公共交通オープンデータチャレンジ API 仕様](https://developer-tokyochallenge.odpt.org/documents)を参照のこと - -#### インスタンスメンバ - -##### **`easeTo(options)`** - -center、zoom、bearing および pitch の任意の組み合わせを、新旧の値の間のアニメーションによる遷移で変更します。マップは、`options` で指定されていない項目については、現在の値を保持します。 - -注: ユーザーがオペレーティングシステムで `reduced motion` (動きの抑制) アクセシビリティ機能を有効にしている場合、`options` に `essential:true` が含まれていない限り、遷移は即座に行われます。 - -###### パラメータ - -**`options`** ([`Object`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)) 遷移先とアニメーションを記述するオプション。[`CameraOptions`](https://docs.mapbox.com/mapbox-gl-js/api/properties/#cameraoptions) と [`AnimationOptions`](https://docs.mapbox.com/mapbox-gl-js/api/properties/#animationoptions) が使用可能 - -###### 返り値 - -[`Map`](#map): `this` - ---- - -##### **`flyTo(options)`** - -center、zoom、bearing および pitch の任意の組み合わせを変更し、飛行をイメージした曲線に沿って遷移をアニメーションします。アニメーションにはズームとパンがシームレスに組み込まれており、ユーザーが長距離を移動した後でも方向感を維持できるようになっています。 - -注: ユーザーがオペレーティングシステムで `reduced motion` (動きの抑制) アクセシビリティ機能を有効にしている場合、`options` に `essential:true` が含まれていない限り、アニメーションはスキップされ `jumpTo` と同じ動作になります。 - -###### パラメータ - -**`options`** ([`Object`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)) 遷移先とアニメーションを記述するオプション。[`CameraOptions`](https://docs.mapbox.com/mapbox-gl-js/api/properties/#cameraoptions)、[`AnimationOptions`](https://docs.mapbox.com/mapbox-gl-js/api/properties/#animationoptions) に加えて、次に示すオプションが使用可能 - -名前 | 説明 -:-- | :-- -**`options.curve`**
[`number`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)
デフォルト: `1.42` | 飛行経路に沿って発生するズームの「カーブ」。高い値を設定するとズームのアニメーションの誇張が最大になり、低い値を設定するとズームの効果が最小になって [`Map#easeTo`](#easetooptions) の動きに近づく。1.42 は、[van Wijk (2003)](https://www.win.tue.nl/~vanwijk/zoompan.pdf) で論じられた、ユーザー調査の参加者によって選択された平均値。`Math.pow(6, 0.25)` の値は平均速度の平方根に相当する。1 の値は円運動を生成する -**`options.minZoom`**
[`number`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number) | 飛行経路のピークでのゼロベースのズームレベル。`options.curve` が指定された場合、このオプションは無視される -**`options.speed`**
[`number`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)
デフォルト: `1.2` | `options.curve` と関連して定義されるアニメーションの平均速度。速度が 1.2 の場合、マップが飛行経路に沿って 1 秒ごとに `options.curve` の 1.2 倍のスクリーンフルで移動しているように見えることを意味する。*スクリーンフル*とは、マップの表示部分の幅のこと。これは固定の物理的な距離に対応するものではなく、ズームレベルによって変化する -**`options.screenSpeed`**
[`number`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number) | 直線的なタイミングカーブを想定した場合の、1秒あたりのスクリーンフルで表したアニメーションの平均速度。`options.curve` が指定された場合、このオプションは無視される -**`options.maxDuration`**
[`number`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number) | アニメーションの最大継続時間をミリ秒単位で指定。継続時間が最大継続時間を超えると、0 にリセットされる - -###### 返り値 - -[`Map`](#map): `this` - ---- - -##### **`getBearing()`** - -現在のマップの方角を返します。方角は、コンパスの方向を「上」としたものです。例えば、90°の方角は、東が上になるように地図の向きを変えた状態です。 - -###### 返り値 - -[`number`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number): 現在のマップの方角 - ---- - -##### **`getCenter()`** - -マップ中心点の座標を返します。 - -###### 返り値 - -[`LngLat`](https://docs.mapbox.com/mapbox-gl-js/api/geography/#lnglat): マップ中心点の座標 - ---- - -##### **`getClockMode()`** - -現在のクロックモードを返します。 - -###### 返り値 - -[`string`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String): 現在のクロックモードを表す文字列。`'realtime'` または `'playback'` のどちらか - ---- - -##### **`getEcoMode()`** - -現在のエコモードを返します。 - -###### 返り値 - -[`string`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String): 現在のエコモードを表す文字列。`'normal'` または `'eco'` のどちらか - ---- - -##### **`getPitch()`** - -現在のマップの傾きを返します。 - -###### 返り値 - -[`number`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number): 現在のマップの傾き。画面に対する地表面の角度で表される - ---- - -##### **`getSelection()`** - -追跡中の列車またはフライトの ID を返します。 - -###### 返り値 - -[`string`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String): 追跡中の列車またはフライトの ID。列車 ID は`'<事業者ID>.<路線ID>.<列車番号>'`、フライト ID は`'<事業者ID>.<空港ID>.<フライト番号>'`の形式で表される文字列 - ---- - -##### **`getTrackingMode()`** - -現在の追跡モードを返します。 - -###### 返り値 - -[`string`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String): 現在の追跡モードを表す文字列。`'helicopter'` または `'heading'` のどちらか - ---- - -##### **`getViewMode()`** - -現在のビューモードを返します。 - -###### 返り値 - -[`string`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String): 現在のビューモードを表す文字列。`'ground'` または `'underground'` のどちらか - ---- - -##### **`getZoom()`** - -現在のマップのズームレベルを返します。 - -###### 返り値 - -[`number`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number): 現在のマップのズームレベル - ---- - -##### **`jumpTo(options)`** - -center、zoom、bearing および pitch の任意の組み合わせを、アニメーションによる遷移なしで変更します。マップは、`options` で指定されていない項目については、現在の値を保持します。 - -###### パラメータ - -**`options`** ([`CameraOptions`](https://docs.mapbox.com/mapbox-gl-js/api/properties/#cameraoptions)) オプションのオブジェクト - -###### 返り値 - -[`Map`](#map): `this` - ---- - -##### **`off(type, listener)`** - -[`Map#on`](#ontype-listener) で追加したイベントリスナを削除します。 - -###### パラメータ - -**`type`** ([`string`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)) リスナの登録に使用したイベントタイプ - -**`listener`** ([`Function`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function)) リスナとして登録した関数 - -###### 返り値 - -[`Map`](#map): `this` - ---- - -##### **`on(type, listener)`** - -指定したタイプのイベントのリスナを追加します。 - -###### パラメータ - -**`type`** ([`string`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)) 待ち受けるイベントタイプ - -**`listener`** ([`Function`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function)) イベントが発生したときに呼び出される関数 - -###### 返り値 - -[`Map`](#map): `this` - ---- - -##### **`once(type, listener)`** - -指定したイベントタイプに対して一度だけ呼び出されるリスナを追加します。 - -###### パラメータ - -**`type`** ([`string`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)) 待ち受けるイベントタイプ - -**`listener`** ([`Function`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function)) イベントが発生したときに呼び出される関数 - -###### 返り値 - -[`Map`](#map): `this` - ---- - -##### **`setBearing(bearing)`** - -マップの方角を設定します。方角は、コンパスの方向を「上」としたものです。例えば、90°の方角は、東が上になるように地図の向きを変えた状態です。 - -`jumpTo({bearing: bearing})` と同じ。 - -###### パラメータ - -**`bearing`** ([`number`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)) 設定する方角 - -###### 返り値 - -[`Map`](#map): `this` - ---- - -##### **`setCenter(center)`** - -マップ中心点の座標を設定します。`jumpTo({center: center})` と同じです。 - -###### パラメータ - -**`center`** ([`LngLatLike`](https://docs.mapbox.com/mapbox-gl-js/api/#lnglatlike)) 設定する中心点の座標 - -###### 返り値 - -[`Map`](#map): `this` - ---- - -##### **`setClockMode(mode)`** - -クロックモードを設定します。リアルタイムクロックモード（`'realtime'`）では、列車や旅客機は現在時刻の実際の運行に合わせて地図上に表示されます。再生クロックモード（`'playback'`）では、時刻や時間の経過速度の指定ができるようになります。 - -###### パラメータ - -**`mode`** ([`string`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)) クロックモードを表す文字列。`'realtime'` または `'playback'` のどちらか - -###### 返り値 - -[`Map`](#map): `this` - ---- - -##### **`setEcoMode(mode)`** - -エコモードを設定します。ノーマルモード（`'normal'`）では、列車や旅客機のアニメーションのフレームレートは60に設定されます。エコモード（`'eco'`）では、フレームレートは [`Map`](#map) のコンストラクタオプション `ecoFrameRate` で指定された値に設定されます。 - -###### パラメータ - -**`mode`** ([`string`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)) エコモードを表す文字列。`'normal'` または `'eco'` のどちらか - -###### 返り値 - -[`Map`](#map): `this` - ---- - -##### **`setPitch(pitch)`** - -マップの傾きを設定します。`jumpTo({pitch: pitch})` と同じです。 - -###### パラメータ - -**`pitch`** ([`number`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)) 設定する傾き。画面に対する地表面の角度（0〜85）で指定する - -###### 返り値 - -[`Map`](#map): `this` - ---- - -##### **`setSelection(id)`** - -追跡する列車またはフライトの ID を設定します。列車 ID は`'odpt.Train:<事業者ID>.<路線ID>.<列車番号>'`、フライト ID は`'odpt.FlightInformationArrival:<事業者ID>.<空港ID>.<フライト番号>'`または`'odpt.FlightInformationDeparture:<事業者ID>.<空港ID>.<フライト番号>'`の形式で表される文字列です。`'odpt.*:'`の部分は省略可能です。詳細は[東京公共交通オープンデータチャレンジ API 仕様](https://developer-tokyochallenge.odpt.org/documents)を参照してください。 - -###### パラメータ - -**`id`** ([`string`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)) 追跡する列車またはフライトの ID - -###### 返り値 - -[`Map`](#map): `this` - ---- - -##### **`setTrackingMode(mode)`** - -追跡モードを設定します。ヘリコプター追跡モード（`'helicopter'`）では、対象の列車や旅客機を中心に360度旋回を行います。進行方向追跡モード（`'heading'`）では、対象の列車や旅客機の上空または斜め後方から進行方向を上にして追跡します。 - -###### パラメータ - -**`mode`** ([`string`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)) 追跡モードを表す文字列。`'helicopter'` または `'heading'` のどちらか - -###### 返り値 - -[`Map`](#map): `this` - ---- - -##### **`setViewMode(mode)`** - -ビューモードを設定します。地上表示モード（`'ground'`）では、地上の路線や駅、列車や旅客機が明るく表示され、地下の路線、駅、列車は半透明になります。地下表示モード（`'underground'`）では、地図が暗転して地上の路線や駅、列車や旅客機が半透明になる一方で、地下の路線、駅、列車が明るく表示されます。 - -###### パラメータ - -**`mode`** ([`string`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)) ビューモードを表す文字列。`'ground'` または `'underground'` のどちらか - -###### 返り値 - -[`Map`](#map): `this` - ---- - -##### **`setZoom(zoom)`** - -マップのズームレベルを設定します。`jumpTo({zoom: zoom})` と同じです。 - -###### パラメータ - -**`zoom`** ([`number`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)) 設定するズームレベル (0〜20) - -###### 返り値 - -[`Map`](#map): `this` - -#### イベント - -##### **`boxzoomcancel`** - -ユーザーが「ボックスズーム」操作をキャンセルした場合や、境界ボックスが最小サイズのしきい値を満たしていない場合に発生します。[`BoxZoomHandler`](https://docs.mapbox.com/mapbox-gl-js/api/handlers/#boxzoomhandler) を参照してください。 - -###### プロパティ - -**`data`** ([`MapBoxZoomEvent`](https://docs.mapbox.com/mapbox-gl-js/api/events/#mapboxzoomevent)) - ---- - -##### **`boxzoomend`** - -「ボックスズーム」操作が終了したときに発生します。[`BoxZoomHandler`](https://docs.mapbox.com/mapbox-gl-js/api/handlers/#boxzoomhandler) を参照してください。 - -###### プロパティ - -**`data`** ([`MapBoxZoomEvent`](https://docs.mapbox.com/mapbox-gl-js/api/events/#mapboxzoomevent)) - ---- - -##### **`boxzoomstart`** - -「ボックスズーム」操作が開始されたときに発生します。[`BoxZoomHandler`](https://docs.mapbox.com/mapbox-gl-js/api/handlers/#boxzoomhandler) を参照してください。 - -###### プロパティ - -**`data`** ([`MapBoxZoomEvent`](https://docs.mapbox.com/mapbox-gl-js/api/events/#mapboxzoomevent)) - ---- - -##### **`click`** - -マップ上の同じ場所でポインティングデバイス（通常はマウス）を押して離すと発生します。 - -###### プロパティ - -**`data`** ([`MapMouseEvent`](https://docs.mapbox.com/mapbox-gl-js/api/events/#mapmouseevent)) - ---- - -##### **`clockmode`** - -クロックモードが変更されたときに発生します。 - -###### プロパティ - -**`data`** (`{mode: `[`string`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)`}`) - ---- - -##### **`contextmenu`** - -マウスの右ボタンがクリックされたとき、またはマップ内でコンテキストメニューキーが押されたときに発生します。 - -###### プロパティ - -**`data`** ([`MapMouseEvent`](https://docs.mapbox.com/mapbox-gl-js/api/events/#mapmouseevent)) - ---- - -##### **`dblclick`** - -マップ上の同じ場所でポインティングデバイス（通常はマウス）を2回連続して押して離すと発生します。 - -###### プロパティ - -**`data`** ([`MapMouseEvent`](https://docs.mapbox.com/mapbox-gl-js/api/events/#mapmouseevent)) - ---- - -##### **`deselection`** - -列車または航空機の追跡が解除された時に発生します。 - -###### プロパティ - -**`data`** (`{deselection: `[`string`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)`}`) - ---- - -##### **`drag`** - -「移動のためのドラッグ」操作中に繰り返し発生します。[`DragPanHandler`](https://docs.mapbox.com/mapbox-gl-js/api/handlers/#dragpanhandler) を参照してください。 - -###### プロパティ - -**`data`** (`{originalEvent: `[`DragEvent`](https://developer.mozilla.org/docs/Web/API/DragEvent)`}`) - ---- - -##### **`dragend`** - -「移動のためのドラッグ」操作が終了したときに発生します。[`DragPanHandler`](https://docs.mapbox.com/mapbox-gl-js/api/handlers/#dragpanhandler) を参照してください。 - -###### プロパティ - -**`data`** (`{originalEvent: `[`DragEvent`](https://developer.mozilla.org/docs/Web/API/DragEvent)`}`) - ---- - -##### **`dragstart`** - -「移動のためのドラッグ」操作が開始されたときに発生します。[`DragPanHandler`](https://docs.mapbox.com/mapbox-gl-js/api/handlers/#dragpanhandler) を参照してください。 - -###### プロパティ - -**`data`** (`{originalEvent: `[`DragEvent`](https://developer.mozilla.org/docs/Web/API/DragEvent)`}`) - ---- - -##### **`ecomode`** - -エコモードが変更されたときに発生します。 - -###### プロパティ - -**`data`** (`{mode: `[`string`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)`}`) - ---- - -##### **`error`** - -エラーが発生したときに発生します。これは Mini Tokyo 3D の主要なエラー報告メカニズムです。`throw` の代わりにイベントを使用することで、非同期処理に対応できるようにしています。リスナが `error` イベントにバインドされていない場合、エラーはコンソールに出力されます。 - -###### プロパティ - -**`data`** (`{error: {message: `[`string`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)`}}`) - ---- - -##### **`load`** - -必要なリソースがすべてダウンロードされ、最初の完全なマップの視覚的なレンダリングが行われた後、直ちに発生します。 - ---- - -##### **`mousedown`** - -マップ内でポインティングデバイス（通常はマウス）が押されたときに発生します。 - -###### プロパティ - -**`data`** ([`MapMouseEvent`](https://docs.mapbox.com/mapbox-gl-js/api/events/#mapmouseevent)) - ---- - -##### **`mousemove`** - -カーソルがマップ内にあるときにポインティングデバイス（通常はマウス）が移動したときに発生します。マップ上でカーソルを移動すると、カーソルがマップ内の位置を変更するたびにイベントが発生します。 - -###### プロパティ - -**`data`** ([`MapMouseEvent`](https://docs.mapbox.com/mapbox-gl-js/api/events/#mapmouseevent)) - ---- - -##### **`mouseover`** - -ポインティングデバイス（通常はマウス）がマップ内で移動したときに発生します。マップを含む Web ページ上でカーソルを移動すると、カーソルがマップまたは子要素に入るたびにイベントが発生します。 - -###### プロパティ - -**`data`** ([`MapMouseEvent`](https://docs.mapbox.com/mapbox-gl-js/api/events/#mapmouseevent)) - ---- - -##### **`mouseup`** - -マップ内でポインティングデバイス（通常はマウス）が離されたときに発生します。 - -###### プロパティ - -**`data`** ([`MapMouseEvent`](https://docs.mapbox.com/mapbox-gl-js/api/events/#mapmouseevent)) - ---- - -##### **`move`** - -ユーザの操作や [`Map#flyTo`](#flytooptions) などのメソッドの結果として、あるビューから別のビューへのアニメーション遷移中に繰り返し発生します。 - -###### プロパティ - -**`data`** (`(`[`MapMouseEvent`](https://docs.mapbox.com/mapbox-gl-js/api/events/#mapmouseevent)` | `[`MapTouchEvent`](https://docs.mapbox.com/mapbox-gl-js/api/events/#maptouchevent)`)`) - ---- - -##### **`moveend`** - -ユーザの操作や [`Map#jumpTo`](#jumptooptions) などのメソッドの結果として、マップがあるビューから別のビューへの遷移を完了した直後に発生します。 - -###### プロパティ - -**`data`** (`{originalEvent: `[`DragEvent`](https://developer.mozilla.org/docs/Web/API/DragEvent)`}`) - ---- - -##### **`movestart`** - -ユーザの操作や [`Map#jumpTo`](#jumptooptions) などのメソッドの結果として、マップがあるビューから別のビューに遷移する直前に発生します。 - -###### プロパティ - -**`data`** (`{originalEvent: `[`DragEvent`](https://developer.mozilla.org/docs/Web/API/DragEvent)`}`) - ---- - -##### **`pitch`** - -ユーザの操作や [`Map#flyTo`](#flytooptions) などのメソッドの結果として、マップの傾きの状態遷移アニメーションの間に繰り返し発生します。 - -###### プロパティ - -**`data`** (`MapEventData`) - ---- - -##### **`pitchend`** - -ユーザの操作や [`Map#flyTo`](#flytooptions) などのメソッドの結果として、マップの傾きが変化し終わった直後に発生します。 - -###### プロパティ - -**`data`** (`MapEventData`) - ---- - -##### **`pitchstart`** - -ユーザの操作や [`Map#flyTo`](#flytooptions) などのメソッドの結果として、マップの傾きが変化し始める直前に発生します。 - -###### プロパティ - -**`data`** (`MapEventData`) - ---- - -##### **`resize`** - -マップのサイズが変更された直後に発生します。 - ---- - -##### **`rotate`** - -「回転のためのドラッグ」操作中に繰り返し発生します。[`DragRotateHandler`](https://docs.mapbox.com/mapbox-gl-js/api/handlers/#dragrotatehandler) を参照してください。 - -###### プロパティ - -**`data`** (`(`[`MapMouseEvent`](https://docs.mapbox.com/mapbox-gl-js/api/events/#mapmouseevent)` | `[`MapTouchEvent`](https://docs.mapbox.com/mapbox-gl-js/api/events/#maptouchevent)`)`) - ---- - -##### **`rotateend`** - -「回転のためのドラッグ」操作が終了したときに発生します。[`DragRotateHandler`](https://docs.mapbox.com/mapbox-gl-js/api/handlers/#dragrotatehandler)を参照してください。 - -###### プロパティ - -**`data`** (`(`[`MapMouseEvent`](https://docs.mapbox.com/mapbox-gl-js/api/events/#mapmouseevent)` | `[`MapTouchEvent`](https://docs.mapbox.com/mapbox-gl-js/api/events/#maptouchevent)`)`) - ---- - -##### **`rotatestart`** - -「回転のためのドラッグ」操作が開始されたときに発生します。[`DragRotateHandler`](https://docs.mapbox.com/mapbox-gl-js/api/handlers/#dragrotatehandler)を参照してください。 - -###### プロパティ - -**`data`** (`(`[`MapMouseEvent`](https://docs.mapbox.com/mapbox-gl-js/api/events/#mapmouseevent)` | `[`MapTouchEvent`](https://docs.mapbox.com/mapbox-gl-js/api/events/#maptouchevent)`)`) - ---- - -##### **`selection`** - -列車または航空機の追跡が開始された時に発生します。 - -###### プロパティ - -**`data`** (`{selection: `[`string`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)`}`) - ---- - -##### **`touchcancel`** - -マップ内で [`touchcancel`](https://developer.mozilla.org/docs/Web/Events/touchcancel) イベントが発生したときに発生します。 - -###### プロパティ - -**`data`** ([`MapTouchEvent`](https://docs.mapbox.com/mapbox-gl-js/api/events/#maptouchevent)) - ---- - -##### **`touchend`** - -マップ内で [`touchend`](https://developer.mozilla.org/docs/Web/Events/touchend) イベントが発生したときに発生します。 - -###### プロパティ - -**`data`** ([`MapTouchEvent`](https://docs.mapbox.com/mapbox-gl-js/api/events/#maptouchevent)) - ---- - -##### **`touchmove`** - -マップ内で [`touchmove`](https://developer.mozilla.org/docs/Web/Events/touchmove) イベントが発生したときに発生します。 - -###### プロパティ - -**`data`** ([`MapTouchEvent`](https://docs.mapbox.com/mapbox-gl-js/api/events/#maptouchevent)) - ---- - -##### **`touchstart`** - -マップ内で [`touchstart`](https://developer.mozilla.org/docs/Web/Events/touchstart) イベントが発生したときに発生します。 - -###### プロパティ - -**`data`** ([`MapTouchEvent`](https://docs.mapbox.com/mapbox-gl-js/api/events/#maptouchevent)) - ---- - -##### **`trackingmode`** - -追跡モードが変更されたときに発生します。 - -###### プロパティ - -**`data`** (`{mode: `[`string`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)`}`) - ---- - -##### **`viewmode`** - -ビューモードが変更されたときに発生します。 - -###### プロパティ - -**`data`** (`{mode: `[`string`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)`}`) - ---- - -##### **`wheel`** - -マップ内で [`wheel`](https://developer.mozilla.org/docs/Web/Events/wheel) イベントが発生したときに発生します。 - -###### プロパティ - -**`data`** ([`MapWheelEvent`](https://docs.mapbox.com/mapbox-gl-js/api/events/#mapwheelevent)) - ---- - -##### **`zoom`** - -ユーザの操作や [`Map#flyTo`](#flytooptions) などのメソッドの結果として、あるズームレベルから別のズームレベルへのアニメーション遷移中に繰り返し発生します。 - -###### プロパティ - -**`data`** (`(`[`MapMouseEvent`](https://docs.mapbox.com/mapbox-gl-js/api/events/#mapmouseevent)` | `[`MapTouchEvent`](https://docs.mapbox.com/mapbox-gl-js/api/events/#maptouchevent)`)`) - ---- - -##### **`zoomend`** - -ユーザの操作や [`Map#flyTo`](#flytooptions) などのメソッドの結果として、マップがあるズームレベルから別のズームレベルへの移行を完了した直後に発生します。 - -###### プロパティ - -**`data`** (`(`[`MapMouseEvent`](https://docs.mapbox.com/mapbox-gl-js/api/events/#mapmouseevent)` | `[`MapTouchEvent`](https://docs.mapbox.com/mapbox-gl-js/api/events/#maptouchevent)`)`) - ---- - -##### **`zoomstart`** - -ユーザの操作や [`Map#flyTo`](#flytooptions) などのメソッドの結果として、マップがあるズームレベルから別のズームレベルへの移行を開始する直前に発生します。 - -###### プロパティ - -**`data`** (`(`[`MapMouseEvent`](https://docs.mapbox.com/mapbox-gl-js/api/events/#mapmouseevent)` | `[`MapTouchEvent`](https://docs.mapbox.com/mapbox-gl-js/api/events/#maptouchevent)`)`) - -### Secrets - -`Secrets` オブジェクトは、データ取得に使用するアクセストークンを格納するオブジェクトで、[`Map`](#map) のコンストラクタオプション `secrets` に指定します。 - -#### プロパティ - -**`tokyochallenge`** ([`string`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)) : [東京公共交通オープンデータチャレンジ](https://tokyochallenge.odpt.org)のアクセストークン。未指定の場合は、デフォルトのトークンが使われる - -**`odpt`** ([`string`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)) : [公共交通オープンデータセンター](https://www.odpt.org)のアクセストークン。未指定の場合は、デフォルトのトークンが使われる - -## Mini Tokyo 3D のビルド - -リリース前の最新版の機能を試したい、自分でコードを改造したい、Mini Tokyo 3D の開発にコントリビュートしたい、という場合には、本セクションの手順に従ってソースコードからプロジェクトをビルドすることができます。 - -### ビルド準備 - -次のソフトウェアが必要です。 - -- [Node.js](https://nodejs.org/ja/) 最新版 -- [Git](https://git-scm.com) 最新版（リポジトリをクローンする場合） - -Mini Tokyo 3D は次のデータソースを使用しており、ビルド時および実行時にそれぞれのデータソースに対するアクセストークンが必要です。下記の手順に従って、アクセストークンを入手してください。 - -データソース | サインアップ用 URL | アクセストークンの形式 -:-- | :-- | :-- -[東京公共交通オープンデータチャレンジ](https://tokyochallenge.odpt.org) | [リンク](https://developer-tokyochallenge.odpt.org/users/sign_up) | 数字と英小文字からなる文字列 -[公共交通オープンデータセンター](https://www.odpt.org) | [リンク](https://developer.odpt.org/users/sign_up) | 数字と英小文字からなる文字列 -[Mapbox](https://www.mapbox.com) | [リンク](https://account.mapbox.com/auth/signup/) | `pk.` で始まるピリオドを含む英数字文字列 - -#### 東京公共交通オープンデータチャレンジアクセストークンの入手 - -Mini Tokyo 3D は[東京公共交通オープンデータチャレンジ](https://tokyochallenge.odpt.org)で配信されている列車データや旅客機データを利用しています。データの入手には開発者としての登録が必要ですが、無料で利用可能です。 - -1. [開発者サイトへの登録](https://developer-tokyochallenge.odpt.org/users/sign_up)ページでユーザー情報を入力して、開発者登録をします。登録完了のメールが届くまでに数日かかる場合があります。 -2. 開発者アカウントでログイン後、画面上部のメニューから「Account」をクリックして「アクセストークンの確認・追加」を選びます。 -3. アクセストークン一覧が表示されます。アカウント作成直後はデフォルトの「DefaultApplication」のみが表示されます。「アクセストークンの追加発行」をクリックします。 -4. 「名前」に任意のアプリケーション名を入力して、「Submit」ボタンをクリックします。 -5. アクセストークン一覧に新たに作成されたトークンが表示されます。 - -#### 公共交通オープンデータセンターアクセストークンの入手 - -Mini Tokyo 3D は[公共交通オープンデータセンター](https://www.odpt.org)のデータも併せて利用しています。こちらも、データの入手には開発者としての登録が必要ですが、無料で利用可能です。 - -1. [開発者サイトへの登録](https://developer.odpt.org/users/sign_up)ページでユーザー情報を入力して、開発者登録をします。登録完了のメールが届くまでに数日かかる場合があります。 -2. 開発者アカウントでログイン後、画面上部のメニューから「Account」をクリックして「アクセストークンの確認・追加」を選びます。 -3. アクセストークン一覧が表示されます。アカウント作成直後はデフォルトの「DefaultApplication」のみが表示されます。「アクセストークンの追加発行」をクリックします。 -4. 「名前」に任意のアプリケーション名を入力して、「Submit」ボタンをクリックします。 -5. アクセストークン一覧に新たに作成されたトークンが表示されます。 - -#### Mapbox アクセストークンの入手 - -[Mapbox アクセストークンの入手](#mapbox-%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%83%88%E3%83%BC%E3%82%AF%E3%83%B3%E3%81%AE%E5%85%A5%E6%89%8B) を参照してください。 - -### ビルド手順 - -#### 1. ファイルのダウンロード - -Mini Tokyo 3D の [GitHub レポジトリ](https://github.com/nagix/mini-tokyo-3d)から `master` ブランチ最新版をダウンロードして、zipファイルを展開します。`mini-tokyo-3d-master` というディレクトリができますが、`mini-tokyo-3d` という名前に変更しておきます。 - -```bash -curl -LO https://github.com/nagix/mini-tokyo-3d/archive/master.zip -unzip master.zip -mv mini-tokyo-3d-master mini-tokyo-3d -``` - -もし Git をお使いでしたら、上記のコマンドの代わりに GitHub からリポジトリを直接クローンしても構いません。 - -```bash -git clone https://github.com/nagix/mini-tokyo-3d.git -``` - -#### 2. ビルド - -Mini Tokyo 3D のトップディレクトリに移動します。 - -```bash -cd mini-tokyo-3d -``` - -ビルド準備のステップで取得した東京公共交通オープンデータチャレンジ、および公共交通オープンデータセンターのアクセストークンを記載した JSON ファイルを作成し、`secrets` というファイル名でこのディレクトリに保存します。 - -```json -{ - "tokyochallenge": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", - "odpt": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" -} -``` - -依存 npm モジュールをインストールします。 - -```bash -npm install -``` - -次のコマンドでプロジェクトをビルドします。 - -```bash -npm run build-all -``` - -ビルドが正常に完了すると、`dist` ディレクトリが作成されます。この中には配布用のスタイルシートおよび JavaScript ファイルが含まれています。また、同時に `build` ディレクトリも作成されます。この中には Web サイトへの設置に必要なすべてのファイルが含まれています。 - -#### 3. Web サイトへの設置 - -`build` ディレクトリに含まれる `index.html` は [https://minitokyo3d.com](http://minitokyo3d.com) 用の Web ページです。`Map` コンストラクタに渡される `accessToken` プロパティを、ビルド準備のステップで取得した Mapbox アクセストークンで置き換えます。そして設置する Web サイトに合わせて編集した上で、`build` ディレクトリのファイル全てを Web サーバの公開ディレクトリに配置してください。 +開発者ガイドは[Mini Tokyo 3D 開発者ガイド](https://minitokyo3d.com/docs/master/ja/developer-guide/) に移動しました。 diff --git a/USER_GUIDE-en.md b/USER_GUIDE-en.md index 52a3520e..837fc5e6 100644 --- a/USER_GUIDE-en.md +++ b/USER_GUIDE-en.md @@ -1,299 +1,3 @@ # Mini Tokyo 3D User Guide -日本語版は[こちら](https://minitokyo3d.com/docs/master/ja/)でご覧いただけます。 - -This document describes how to use Mini Tokyo 3D and its features. For more information for developers, see the [Mini Tokyo 3D Developer Guide](https://minitokyo3d.com/docs/master/developer-guide/). - -## Mini Tokyo 3D Overview - -![Screenshot](docs/.vuepress/public/images/screenshot1.jpg) - -Mini Tokyo 3D is a real-time 3D map of public transportation in Tokyo. Trains in operation and airplanes that are arriving or departing are represented on a realistic 3D map with smooth animation. This is a “digital twin” that looks exactly like the real world in the digital world. - -Users can freely move around on the 3D map and zoom in on the places they want to see to know the “now” of Tokyo. It can be used in various ways such as looking for the transfer route as a route map, checking the destination town and weather before going out, just watching the way along the railway by automatically tracking a train and judging if you should dash to not miss the final train from the current position of the train. - -Mini Tokyo 3D is a web application that you can run in any web browser, regardless of device, such as PCs, smartphones, tablets, and set-top boxes. Please use the following URL to access. - -[https://minitokyo3d.com](https://minitokyo3d.com) - -The features of Mini Tokyo 3D are as follows. - -### All in Real-Time - - - -You can view trains and airplanes that operate according to actual timetables and real-time delay information from your favorite point of view. The color of the scenery changes according to the sunrise and sunset times in Tokyo, and the sunset glow can be seen. In addition, a rain animation based on real-time weather information is displayed, so you can enjoy more realistic scenery. - -### Easy-To-Read Railroad Map - - - -Mini Tokyo 3D is using the same line colors used in official route maps and guidance, and arranges each railway at an appropriate interval according to the scale of the map to display the route in an easy-to-read form. If the names of two or more stations are different, but passengers can transfer from one to others, the connections between the stations are displayed to support smooth transfer. The shape of the train is a simple solid color cuboid that enhances symbolism. - -### Operability and Performance - - - -Over 2,200 trains run at the same time during the rush hour, but with the optimized data structure and processing logic, a very smooth operation animation is realized even on smartphones. Smooth animation of 60 frames per second is used everywhere, including viewpoint movement, switching between overground and underground views, and fading in and out of trains and airplanes. - -### Support for 4 Languages - - - -In addition to Japanese, Mini Tokyo 3D supports English, Chinese (Simplified and Traditional) and Korean, which are popular with tourists visiting Japan. Not only the user interface texts but also railway names, station names, train types, airport names and airline names are also multilingualized. For the user interface texts, Thai and Nepali are also supported. - -### Switching Views Between Overground and Underground - - - -The railway network in Tokyo is one of the most complex in the world. Mini Tokyo 3D is pursuing ease of viewing by switching between the overground and underground railway networks as well as clearly expressing subway train operations that are invisible in reality. - -## Practical Real-Time Route Search - - - -Mini Tokyo 3D is equipped with a unique route search function that uses real-time delay information. It displays multiple candidate travel routes based on train delays on an easy-to-understand 3D map through intuitive operation with gesture support on mobile devices. - -## Screen and Operations - -### Screen Description - - - -1. **Date and Time**: See [Date and Time](#date-and-time) -2. **Search Button**: See [Route Search](#route-search) -3. **Navigation Buttons**: See [Zooming-In/Out](#zooming-inout) and [Rotation and Tilting](#rotation-and-tilting) -4. **Display Mode Switching Buttons**: See [Display Modes](#display-modes) -5. **Configuration Buttons**: See [Configuration](#configuration) - -### Panning - - - -You can move your location by panning the map with a mouse or finger drag. You can also pan the map with the arrow keys on your keyboard. - -### Zooming-In/Out - - - -Click or tap the “+” or “−” icon button to zoom in or out the map. You can also zoom in or out by rotating the mouse wheel or pinching in or out of the screen. - -You can zoom in or out the map by pressing the “=” or “−” key on the keyboard. You can also zoom in the map by double-clicking with the mouse or triple-tapping, or zoom out by double-clicking while holding down the Shift key on the keyboard or two-finger tapping. - -A box zoom can be used by dragging the mouse while holding down the Shift key on the keyboard and selecting a rectangle on the screen. - -### Rotation and Tilting - - - -The compass icon represents the orientation of the map. If you press the compass icon button and drag the mouse or your finger to the left or right, you can rotate the map. You can also change the rotation and tilt of the map by dragging with the right mouse button, or by dragging with the left mouse button while holding down the Ctrl key on the keyboard. You can drag two fingers up and down to change the tilt of the map. - -You can also change the rotation and tilt of the map by holding down the Shift key on your keyboard and pressing the arrow keys. You can also rotate the map by pinching the screen. - -Click or tap the compass icon button and the bearing will be reset to true north. - -### Date and Time - - - -The current date and time is displayed at the top left of the screen. It is convenient when accessing from overseas because Japan standard time is always displayed. When [Playback Mode](#playback-mode) is on, additional buttons appear below the current time to change the time and the speed at which the time progresses. - -See [here](#playback-mode) for details on Playback Mode. - -### Displaying Detailed Information on Trains and Airplanes - - - -Place the mouse pointer or tap on the train or airplane to display detailed information about it. Detailed train information includes railway name, train type, destination, train number, previous or standing station and departure time, next station and arrival time, delay time, and operation information. Flight details include airline name, flight number, departure or arrival location, status, departure or arrival time, and code-share information. If there is a train delay or a flight schedule change, the change will be highlighted in orange. - -### Displaying Detailed Information on Stations - - - -Place the mouse pointer or tap on the station to display detailed information about it. Detailed information includes station photo, station names, and connecting line names. If a station has different names for different lines but is a single transfer station, the information will be displayed together. - -### Tracking Trains and Airplanes - -Clicking or tapping on a train or airplane will turn on [Tracking Mode](#tracking-mode) and the screen will automatically move following the movement of the train or airplane. There are two types of Tracking Modes, the “Helicopter Tracking Mode” and the “Heading Tracking Mode”, and you can enjoy the scenery along the railway in your favorite Tracking Mode. When Tracking Mode is on, the map panning and rotating operations are disabled (you can zoom in/out and change the tilt). Clicking on a map with no trains or airplanes turns Tracking Mode off. - -See [here](#tracking-mode) for details on Tracking Modes. - -### Sharing Trains and Flights - - - -When [Tracking Mode](#tracking-mode) is on, the “Share this train” or “Share this flight” button will appear at the top of the screen. Clicking the button will bring up an additional menu, depending on the device you are using, and you can send the tracking URLs for the trains or flight and optional messages through messaging apps, email or social networking apps. When the recipient of the information opens the URL in their browser, Mini Tokyo 3D will be launched, and they will be able to track the same train or flight. - -This feature is only available in the following browsers: Edge, Safari, Chrome (Android), Opera (Android) and Samsung Internet - -### Delayed Train - - - -When [Playback Mode](#playback-mode) is off, orange spheres are displayed around trains that are delayed for more than 1 minute. It is easy to see which sections on the map have the delay. - -### Displaying Station Exit Information - - - -When you click or tap on a station, the station is selected and the map around the station is enlarged to show the locations and names of the exits on the map. When a station is selected, a list of exits will be displayed at the bottom of the screen. If you move the mouse pointer over the name of the exit in the list or tap it, the name of the exit will be highlighted on the map and you can check the location. Clicking on the map where no station exists will deselect it. - -**Note**: As of the version 3.0, only subway lines and underground stations are supported for displaying station exit information. - -### Route Search - - - -When you click or tap the search icon button, the search window appears at the bottom of the screen to allow you to search for a route. Enter the departure and arrival station names, select the departure time, and click or tap the search button. Then, a recommended route will be highlighted on the map, and the search window will display information such as the trains to take, arrival and departure times, and transfer stations. Depending on the conditions, multiple route suggestions may be displayed, and you can switch between routes by pressing the “<” and “>” buttons at the top of the search window or swiping horizontally on the window. You can also click or tap the “Back” icon button to return to the search criteria. - -When you enter a part of the station name, a list of candidates will be displayed, and you can select one from the list to complete your input. In Japanese, Korean, and Chinese environments, you can also search by English name. If you enter an invalid station name and press the search button, the border around the station name field will be highlighted in orange, and you will be prompted to correct the station name. - -You can also enter the departure and arrival stations by clicking or tapping on the stations on the map. When you click or tap on a station name input box in the search window, the focus will move and the border will turn light blue. Then, lick or tap a station on the map to enter the station name in the input box. - -Trains, airplanes and layers will be temporarily hidden when the search window is displayed. To close the search window, click the search icon button again. - -**Note**: As of the version 3.0, there are some limitations: you can only specify the time of departure, and you can only search for the train of the day. - -## Display Modes - -### Full Screen Mode - - - -Click or tap the screen zoom icon to toggle Full Screen Mode on or off. - -When Full Screen Mode is on, you can cancel Full Screen Mode by pressing Esc key instead of clicking / tapping the button. - -### Underground Mode - - - -Click or tap the eye icon button to turn Underground Mode on or off (the icon is in light blue when it is on). - -When Underground Mode is on, the map will turn dark and overground railways, stations, trains and airplanes will be translucent, while underground railways, stations and trains will appear brighter. - -When Underground Mode is off, the map will return to normal, overground railways, stations, trains and airplanes will be displayed brightly, and underground railways, stations and trains will be translucent. - -You can also switch modes by clicking or tapping underground trains with Underground Mode off, or clicking or tapping overground trains with Underground Mode on. In addition, the mode is automatically switched when the train being tracked enters the underground from the ground or exits from the underground to the ground. - -### Tracking Mode - - - -Click or tap on a train or airplane to turn Tracking Mode on and the screen will automatically follow the movement of the train or airplane (the icon will appear in light blue when it is on). Clicking on a map with no trains or airplanes turns Tracking Mode off. - -The helicopter icon indicates the “Helicopter Tracking Mode”, and it makes a 360 degree turn around the target train or airplane. The train icon indicates the “Heading Tracking Mode”, and it tracks the target train or airplane from above or diagonally behind in the direction of travel up. Click or tap the icon button to toggle between the “Helicopter Tracking Mode” and the “Heading Tracking Mode”. - -When Tracking Mode is on, the timetable and current position of the train being tracked is displayed at the bottom of the screen. For the train connecting to other lines, the timetables of those lines are also shown. The timetable can be scrolled by using the mouse wheel, dragging the scroll bar, or dragging your finger. Click on the "∨" icon in the upper right corner of the timetable to hide the timetable at the bottom of the screen, or click on the "∧" icon to display it again. - -Also, when Tracking Mode is on, some devices will display the [share button](#sharing-trains-and-flights) to share the train or flight being tracked. - -### Playback Mode - - - -Click or tap the playback icon button to switch Playback Mode on or off (the icon is in light blue when it is on). - -When Playback Mode is on, you can change the date and time and the speed at which time progresses, so you can check the operation of a train on a specific date and time, or enjoy the train operation throughout the entire day as if you were watching model trains in motion. In this state, trains will run according to the timetables and no real-time information will be reflected. For airplanes, only the flights taking off and landing that day will be displayed. - -When Playback Mode is off, trains and airplanes are displayed on the map according to the actual operation at the current time. Because it uses real-time information, the location on the map will change accordingly if there is a train delay or flight schedule change. - -When Playback Mode is turned on, the “Edit date & time” button and the “+” and “-” buttons to change the playback speed appear just below the time display. If you click or tap the “Edit date & time” button, you will enter the date/time editing mode. The “+” and “-” buttons appear above and below the year, month, day, hour, minute, and second numbers. Use these buttons to change the date and time, and click or tap the "OK" button to confirm the change. Clicking or tapping the "Cancel" button will cancel the change and return to the original setting time. You can also change the playback speed by clicking or tapping the “+” and “-” buttons on the left and right of the number that indicates the speed. It can be set to between 1x (the same speed as real time) and 600x, in increments of 1 from 1x to 10x, 10 from 10x to 100x, and 100 from 100x to 600x. - - - -### Eco Mode - -Click or tap the battery icon button to turn on or off the Eco Mode (the icon is in light blue when it is on). - -When Eco Mode is on, the display interval for trains and airplanes will be increased to reduce power consumption and device heating. This is suitable for use with mobile devices that run on battery power. - -When Eco Mode is off, trains and airplanes are animated smoothly at 60 frames per second. Suitable for use on a PC or display device connected to a power source. - - - -## Configuration - -### Layer Display Settings - - - -Click or tap the layer icon button to show the Layer Display Settings panel. In the Layer Display Settings panel, you can turn on/off the layer that is superimposed on the map. By incorporating the [Plugins](#plugins), Precipitation layer, Fireworks layer, Live Cameras layer and Tokyo 2020 Olympics layer will be displayed in the list. Click or tap the “x” button in the top right corner of the panel, or click or tap outside the panel to close the panel. - -Click or tap the icon of each layer to toggle the layer display on and off (the outer frame of the icon is shown in light blue when it is on). See [here](#plugins) to learn more about the functions of each layer. - -### Showing Application Information - - - -Click or tap the information icon button to show application and data information. The last update time of static data and dynamic data is also displayed. Click or tap the “x” button in the top right corner of the panel, or click or tap outside the panel to close the panel. - -## Plugins - -A variety of plugins are available to display additional information on the 3D map. The information provided by each plugin is displayed as a layer on the map, and can be toggled on and off in the [Layer Display Settings](#layer-display-settings) panel. - -### Precipitation Plugin - - - -Based on real-time radar information, precipitation animations are displayed on the map according to the intensity of rain. As you increase the zoom level, the intensity of precipitation is displayed in finer mesh units, and is updated every 10 minutes with the latest information. - -For more information, please visit [Mini Tokyo 3D Precipitation Plugin GitHub Repository](https://github.com/nagix/mt3d-plugin-precipitation). - -### Fireworks Plugin - - - -This plugin displays fireworks animations on a map. You can watch 3D animation of fireworks launch at a specific location on the map on a scheduled date and time. - -For more information, please visit [Mini Tokyo 3D Fireworks Plugin GitHub Repository](https://github.com/nagix/mt3d-plugin-fireworks). - -### Live Camera Plugin - - - -You can watch trains running on live cameras placed in various locations around Tokyo. Clicking or tapping on a live camera button on the map will zoom in on the location and display the live camera video stream being broadcast from the same viewpoint. The video is transmitted in real-time, but there is a delay of a few tens of seconds, so the actual train tends to appear a little later than the movement of the train on the map. Clicking on a map where there is no live camera button will deselect the live camera. - -For more information, please visit [Mini Tokyo 3D Live Camera Plugin GitHub Repository](https://github.com/nagix/mt3d-plugin-livecam). - -### Tokyo 2020 Olympics Plugin - - - -This plugin displays information about the competition schedule and venues for the Tokyo 2020 Olympic Games, which was held from July 23 to August 8, 2021. Just below the time display in the upper left corner of the screen, a countdown to the opening ceremony if it is before the event, or an indication of what day it is during the event will be displayed. In addition, pictograms of the competitions will appear on the map at the locations of the competition venues, and when clicked or tapped, it will zoom in to that location and show the details of the competition schedule for that venue. Also, near the Kokuritsu-kyogijo station, an elaborate 3D model of the Olympic Stadium built for the Tokyo 2020 Olympics is displayed. - -For more information, please visit [Mini Tokyo 3D Tokyo 2020 Olympics Plugin GitHub Repository](https://github.com/nagix/mt3d-plugin-olympics2020). - -**Note**: The Tokyo 2020 Olympics plugin is not shown at [https://minitokyo3d.com](https://minitokyo3d.com). You can view on the page of [Mini Tokyo 3D 2021 for Open Data Challenge for Public Transportation in Tokyo](https://minitokyo3d.com/2021/). - -## About Data - -This application uses the following data. - -- [Open Data Challenge for Public Transportation in Tokyo](https://tokyochallenge.odpt.org/en/) -- [Public Transportation Open Data Center](https://www.odpt.org) -- [Mapbox](https://www.mapbox.com) -- [OpenStreetMap](https://www.openstreetmap.org) -- [Japan Meteorological Agency Precipitation Nowcast](https://www.jma.go.jp/en/radnowc/) -- [Haneda Airport Flight Course](https://www.ntrack.mlit.go.jp) - -The source of the public transportation data in this application is the Open Data Challenge for Public Transportation in Tokyo and the Public Transportation Open Data Center. They are based on the data provided by the public transportation operators. The accuracy and integrity of the data are not guaranteed. Please do not contact the public transportation operators directly regarding the content of this application. - -## Supported Browsers - -This application has been tested with the following browsers. Chrome is recommended. Internet Explorer is not supported. - -- Chrome 94 (Mac OS, Windows, iOS, Android) -- FireFox 93 (Mac OS, Windows, iOS) -- Safari 14 (Mac OS, iOS) -- Edge 94 (Mac OS, Windows, iOS) - -## Development Information - -The source code for this application is available at the [GitHub repository](https://github.com/nagix/mini-tokyo-3d). The development history is summarized in [Mini Tokyo 3D Development Diary](https://togetter.com/li/1413307) (in Japanese). - -## Contact - -For inquiries on this application, please contact the following email address. - -mini-tokyo-3d@nagi-p.com +The User Guide was moved to [Mini Tokyo 3D User Guide](https://minitokyo3d.com/docs/master/). diff --git a/USER_GUIDE-ja.md b/USER_GUIDE-ja.md index 9f1dc678..0d11242d 100644 --- a/USER_GUIDE-ja.md +++ b/USER_GUIDE-ja.md @@ -1,299 +1,3 @@ # Mini Tokyo 3D ユーザーガイド -English version is available [here](https://minitokyo3d.com/docs/master/). - -本ドキュメントは、Mini Tokyo 3D の機能や操作方法について説明します。開発者向けの情報については、[Mini Tokyo 3D 開発者ガイド](https://minitokyo3d.com/docs/master/ja/developer-guide/)をご覧ください。 - -## Mini Tokyo 3D 概要 - -![Screenshot](docs/.vuepress/public/images/screenshot1.jpg) - -Mini Tokyo 3D は東京の公共交通のリアルタイム3Dマップです。今、実際に動いている列車や発着している旅客機をリアルな3Dマップ上に滑らかなアニメーションで表現します。これは、現実世界とそっくりな双子をデジタルの世界に表現した「デジタルツイン」です。 - -ユーザーは自由に3Dマップ上を動き回り、見たいところにズームインして東京の「今」を知ることができます。路線図として乗り換えルートを調べる、出かける前に目的地の街と天気を下調べする、列車を自動追跡して沿線の様子をただひたすら眺める、終電に逃さないためにダッシュすべきかどうか列車の現在位置から判断するなど、さまざまな使い方ができます。 - -Mini Tokyo 3D は PC、スマートフォン、タブレット、セットトップボックスなど、デバイスを問わず Web ブラウザさえあれば利用できる Web アプリケーションです。下記の URL からアクセスしてください。 - -[https://minitokyo3d.com](https://minitokyo3d.com) - -Mini Tokyo 3D の特徴は次の通りです。 - -### 全てがリアルタイム - - - -現実の時刻表、さらにはリアルタイムの遅延情報に従って運行する列車や旅客機を上空の好きな視点から観覧できます。東京の日の出・日の入り時刻に合わせて景色の明るさが変わり、夕焼けも見られます。また、リアルタイムの気象情報を基にした降水アニメーションが表示されるため、よりリアルな風景を楽しめます。 - -### 鉄道路線図の見やすさをそのままに - - - -路線図や案内で使われているものと同じラインカラーを使用し、地図の縮尺に合わせて各路線を適切な間隔で配置してルートを見やすい形で表現します。駅名が異なっていても乗り換え駅である場合には駅間の接続を表示して、スムーズな乗り換えをサポートします。列車の形はあえてシンプルな単色の直方体にして、シンボル性を高めています。 - -### 操作性とパフォーマンス - - - -ラッシュ時には2,200を超える列車が同時に走りますが、最適化されたデータ構造と計算処理により、スマートフォンでも非常にスムーズな運行アニメーションを実現。視点移動や地上・地下表示の切り替え、列車・旅客機のフェードイン・アウトなど、60フレーム/秒のスムーズなアニメーションを随所に利用しています。 - -### 4ヶ国語対応 - - - -日本語以外に、訪日観光客の多い英語・中国語（簡体字・繁体字）・韓国語に対応。ユーザーインターフェース表示だけではなく、路線名、駅名、列車種別、空港名、航空会社名なども多言語化。ユーザーインターフェース表示に限り、タイ語・ネパール語にも対応しています。 - -### 地上・地下の表示切り替え - - - -東京の鉄道ネットワークは世界有数の複雑度。地上と地下の路線網を切り替えて表示することで見やすさを追求するとともに、地下鉄路線の現実には見えない列車の運行をわかりやすく表現します。 - -## 実用的なリアルタイム経路検索 - - - -リアルタイム遅延情報を利用した独自の経路検索機能を搭載。列車の遅れに応じた複数の乗り換え経路候補を、モバイルデバイスのジェスチャー対応した直感的な操作を通じて、わかりやすく3Dマップ上に表示します。 - -## 画面・操作説明 - -### 画面の説明 - - - -1. **時刻表示**: [時刻表示](#%E6%99%82%E5%88%BB%E8%A1%A8%E7%A4%BA)をご覧ください -2. **検索ボタン**: [経路検索](#%E7%B5%8C%E8%B7%AF%E6%A4%9C%E7%B4%A2)をご覧ください -3. **ナビゲーションボタン**: [地図の拡大・縮小](#%E5%9C%B0%E5%9B%B3%E3%81%AE%E6%8B%A1%E5%A4%A7%E7%B8%AE%E5%B0%8F)、[地図の回転と傾きの変更](#%E5%9C%B0%E5%9B%B3%E3%81%AE%E5%9B%9E%E8%BB%A2%E3%81%A8%E5%82%BE%E3%81%8D%E3%81%AE%E5%A4%89%E6%9B%B4)をご覧ください -4. **表示モード切り替えボタン**: [表示モード](#%E8%A1%A8%E7%A4%BA%E3%83%A2%E3%83%BC%E3%83%89)をご覧ください -5. **設定ボタン**: [設定](#%E8%A8%AD%E5%AE%9A)をご覧ください - -### 地図のスクロール - - - -マウスまたは指のドラッグで地図をスクロールして場所を移動することができます。また、キーボードの方向キーでも地図をスクロールすることができます。 - -### 地図の拡大・縮小 - - - -「＋」「−」アイコンボタンをクリックまたはタップすると、地図を拡大・縮小することができます。また、マウスホイールの回転または画面のピンチイン・アウトで地図を拡大・縮小することができます。 - -さらに、キーボードの「＝」「−」キーを押すことでも地図を拡大・縮小することができます。マウスのダブルクリックまたはトリプルタップで地図を拡大、キーボードの Shift キーを押しながらマウスのダブルクリックまたは2本指でのタップで縮小することもできます。 - -キーボードの Shift キーを押しながらマウスをドラッグして画面上の矩形を選択することで、対象範囲を拡大することができます。 - -### 地図の回転と傾きの変更 - - - -コンパスアイコンは、地図の向きを表しています。コンパスアイコンボタンを押して左右方向にドラッグすると、地図を回転させることができます。また、マウスの右ボタンを押してドラッグ、またはキーボードの Ctrl キーを押しながらマウスの左ボタンを押してドラッグすることで地図の回転と傾きを変更することができます。2本指で上下方向にドラッグして地図の傾きを変更することもできます。 - -さらに、キーボードの Shift キーを押しながら方向キーを押すことでも地図の回転と傾きを変更することができます。画面のピンチ操作で地図を回転することもできます。 - -コンパスアイコンボタンをクリックまたはタップすると、地図が真北を向くように回転します。 - -### 時刻表示 - - - -画面左上に現在時刻が表示されます。常に日本時間が表示されるため、海外からのアクセス時に便利です。[再生モード](#%E5%86%8D%E7%94%9F%E3%83%A2%E3%83%BC%E3%83%89)がオンの状態では、現在時刻の他に時刻や時間の経過速度を変更するためのボタンが表示されます。 - -再生モードの詳細については[こちら](#%E5%86%8D%E7%94%9F%E3%83%A2%E3%83%BC%E3%83%89)をご覧ください。 - -### 列車・旅客機の詳細情報の表示 - - - -列車や旅客機にマウスポインタを合わせたり、タップをすると列車や旅客機の詳細情報が表示されます。列車の詳細情報は、路線名、列車種別、行先、列車番号、前駅または停車駅と発車時刻、次駅と到着時刻、遅延時間、運行情報を含みます。旅客機の詳細情報は、航空会社名、便名、出発地または到着地、状況、出発時刻または到着時刻、コードシェアを含みます。列車の遅延もしくは旅客機のスケジュール変更がある場合は、変更部分がオレンジ色でハイライトされます。 - -### 駅の詳細情報の表示 - - - -駅にマウスポインタを合わせたり、タップをすると駅の詳細情報が表示されます。詳細情報は、駅の写真、駅名、乗り入れ路線名を含みます。駅名が異なっても乗り換え駅である場合は、まとめて表示されます。 - -### 列車・旅客機の追跡 - -列車や旅客機をクリックまたはタップすると、[追跡モード](#%E8%BF%BD%E8%B7%A1%E3%83%A2%E3%83%BC%E3%83%89)がオンに切り替わり、列車や旅客機の動きに追随して画面が自動的に移動します。追跡モードには「ヘリコプター追跡モード」と「進行方向追跡モード」の2種類があり、お好みの追跡モードで沿線の風景を楽しむことができます。追跡モードがオンの状態では、地図のスクロール・回転操作は無効になります（拡大・縮小、傾きの変更は可能です）。列車や旅客機が存在しない地図上をクリックすると、追跡モードがオフに切り替わります。 - -追跡モードの詳細については[こちら](#%E8%BF%BD%E8%B7%A1%E3%83%A2%E3%83%BC%E3%83%89)をご覧ください。 - -### 列車・フライトのシェア - - - -[追跡モード](#%E8%BF%BD%E8%B7%A1%E3%83%A2%E3%83%BC%E3%83%89)がオンの状態では、画面上部に「この列車をシェア」または「このフライトをシェア」ボタンが表示されます。ボタンをクリックすると、利用しているデバイスに応じて追加のメニューが表示され、追跡中の列車やフライトを示す URL と任意のメッセージをメッセージアプリやメール、SNSアプリなどで送信することができます。情報を受け取った人がその URL をブラウザで開くと、同じ列車やフライトを追跡した状態で Mini Tokyo 3D が起動します。 - -この機能は Edge、Safari、Chrome (Android)、Opera (Android)、Samsung Internet の各ブラウザでのみ利用可能です。 - -### 遅延列車の表示 - - - -[再生モード](#%E5%86%8D%E7%94%9F%E3%83%A2%E3%83%BC%E3%83%89)がオフの状態では、1分以上遅延している列車には周囲にオレンジ色の球が表示されます。地図上のどの区間で遅れがあるかが一目瞭然です。 - -### 駅出口情報の表示 - - - -駅をクリックまたはタップすると駅が選択された状態になり、駅周辺の地図が拡大表示されて出口の場所と名前が地図上に表示されます。駅が選択された状態では、出口の一覧が画面下部に表示されます。一覧の中で出口の名前にマウスポインタを合わせたり、タップをすると地図上の出口の名前がハイライトされ、場所の確認をすることができます。駅が存在しない地図上をクリックすると、駅の選択状態が解除されます。 - -**注意**: バージョン 3.0 現在、駅出口情報の表示は地下鉄路線および地下駅のみに対応しています。 - -### 経路検索 - - - -検索アイコンボタンをクリックまたはタップすると、検索ウィンドウが画面下部に現れて経路の検索が可能になります。出発駅および到着駅の駅名を入力し、出発時刻を選択して検索ボタンをクリックまたはタップすると、おすすめの経路がマップ上にハイライト表示され、検索ウィンドウには乗車する列車や発着時刻、乗り換え駅などの情報が表示されます。条件によっては複数の経路候補を表示する場合があり、検索ウィンドウ上部の「<」「>」ボタンを押すかウィンドウ上で水平方向にスワイプ操作を行うと経路を切り替えることができます。また、戻るアイコンボタンをクリックまたはタップすると検索条件の入力に戻ります。 - -駅名の入力時には、名称の一部を入力すると候補の一覧が表示されるため、その中から選択して入力を補完することもできます。日本語・韓国語・中国語の環境では、英語名での検索も可能です。無効な駅名を入力して検索ボタンを押すと、駅名入力欄の枠がオレンジ色でハイライトされ、駅名の修正を促します。 - -また、地図上の駅をクリックまたはタップすることで出発駅および到着駅を入力することもできます。検索ウィンドウの駅名入力欄をクリックまたはタップすると、フォーカスが移動し枠線が水色に変わります。その状態で、地図上の駅をクリックまたはタップすると駅名が入力欄に入ります。 - -検索ウィンドウが表示されている状態では、列車や旅客機、レイヤーが一時的に非表示になります。検索ウィンドウを閉じるには、検索アイコンボタンを再度クリックします。 - -**注意**: バージョン 3.0 現在、時刻の指定は出発時刻のみ、当日の列車のみ検索可能、という制限があります。 - -## 表示モード - -### フルスクリーンモード - - - -画面拡大・縮小アイコンボタンをクリックまたはタップすると、フルスクリーンモードのオン・オフを切り替えることができます。 - -フルスクリーンモードがオンの状態では、ボタンをクリック／タップする以外に、Esc キーを押すことでフルスクリーンモードを解除できます。 - -### 地下モード - - - -眼アイコンボタンをクリックまたはタップすると、地下モードのオン・オフを切り替えることができます（オンの状態でアイコンは水色で表示されます）。 - -地下モードがオンの状態では、地図が暗転して地上の路線や駅、列車や旅客機が半透明になる一方で、地下の路線、駅、列車が明るく表示されます。 - -地下モードがオフの状態では、地図が通常表示に戻って地上の路線や駅、列車や旅客機が明るく表示され、地下の路線、駅、列車は半透明になります。 - -このほか、地下モードがオフの状態で地下の列車をクリックまたはタップしたり、地下モードがオンの状態で地上の列車をクリックまたはタップしたりするとモードが切り替わります。また、追跡中の列車が地上から地下に入ったり、地下から地上に出るときもモードが自動的に切り替わります。 - -### 追跡モード - - - -列車や旅客機をクリックまたはタップすると、追跡モードがオンに切り替わり、列車や旅客機の動きに追随して画面が自動的に移動します（オンの状態でアイコンは水色で表示されます）。列車や旅客機が存在しない地図上をクリックすると、追跡モードがオフに切り替わります。 - -ヘリコプターアイコンは「ヘリコプター追跡モード」を示しており、対象の列車や旅客機を中心に360度旋回を行います。列車アイコンは「進行方向追跡モード」を示しており、対象の列車や旅客機の上空または斜め後方から進行方向を上にして追跡します。アイコンボタンをクリックまたはタップすると「ヘリコプター追跡モード」と「進行方向追跡モード」が交互に切り替わります。 - -追跡モードがオンの状態では、追跡中の列車の時刻表と現在位置が画面下部に表示されます。他社路線に乗り入れる列車については、乗り入れ先の路線の時刻表も含めて表示されます。時刻表はマウスホイール、スクロールバーのドラッグ、もしく指でのドラッグにてスクロールさせることができます。時刻表の右上の「∨」アイコンをクリックすると時刻表が画面下部に隠れ、「∧」アイコンをクリックすると再表示されます。 - -また、追跡モードがオンの状態では、デバイスによっては追跡中の列車やフライトをシェアするための[シェアボタン](#%E5%88%97%E8%BB%8A%E3%83%BB%E3%83%95%E3%83%A9%E3%82%A4%E3%83%88%E3%81%AE%E3%82%B7%E3%82%A7%E3%82%A2)が表示されます。 - -### 再生モード - - - -再生アイコンボタンをクリックまたはタップすると、再生モードのオン・オフを切り替えることができます（オンの状態でアイコンは水色で表示されます）。 - -再生モードがオンの状態では、時刻や時間の経過速度を自由に変えることができるため、特定の日時の列車の運行を確認したり、一日の列車の運行をまるで鉄道模型の動きを見るように楽しむことができます。この状態では、列車は時刻表通りの運行になり、リアルタイムの情報は反映されません。また、旅客機は当日の離着陸便のみが表示されます。 - -再生モードがオフの状態では、列車や旅客機は現在時刻の実際の運行に合わせて地図上に表示されます。リアルタイム情報を利用しているため、列車の遅延や旅客機のスケジュールの変更がある場合にはそれに合わせて地図上の位置が変わります。 - -再生モードをオンにすると、時刻表示のすぐ下に「日付時刻を変更」ボタンと再生速度を変更するための「＋」「−」ボタンが現れます。ここで「日付時刻を変更」ボタンを押すと、日付時刻編集モードに入ります。年・月・日・時・分・秒を表す数字の上下に「＋」「−」ボタンが現れるので、このボタンを使用して日付時刻を変更し、「OK」ボタンを押すと変更が確定されます。「キャンセル」ボタンを押すと、変更がキャンセルされて元の設定時刻に戻ります。また、再生速度を表す数字の左右にある「＋」「−」ボタンを押すと、再生速度が変わります。1倍速（現実の時間の流れと同じ速度）〜600倍速の間で設定することが可能です。1〜10倍速の間は1刻み、10〜100倍速の間は10刻み、100〜600倍速の間は100刻みになります。 - - - -### エコモード - -電池アイコンボタンをクリックまたはタップすると、エコモードのオン・オフを切り替えることができます（オンの状態でアイコンは水色で表示されます）。 - -エコモードがオンの状態では、列車や航空機の表示間隔が大きくなり、電力の消費とデバイスの発熱を抑えられます。バッテリーで動作するモバイルデバイスでの利用に適しています。 - -エコモードがオフの状態では、列車や航空機は60フレーム/秒の滑らかなアニメーションで表示されます。電源に繋がったPCや表示端末上での利用に適しています。 - - - -## 設定 - -### レイヤー表示設定 - - - -レイヤーアイコンボタンをクリックまたはタップすると、レイヤー表示設定パネルが表示されます。レイヤー表示設定パネルでは、地図上に重ねて表示するレイヤーのオン・オフを切り替えることができます。[プラグイン](#%E3%83%95%E3%82%9A%E3%83%A9%E3%82%AF%E3%82%99%E3%82%A4%E3%83%B3)を組み込むことで、降水レイヤー、花火レイヤー、ライブカメラレイヤー、東京2020オリンピックレイヤーがリストに表示されます。パネル右上の「×」ボタン、またはパネルの外をクリックまたはタップするとパネルが閉じます。 - -各レイヤーのアイコンをクリックまたはタップすると、レイヤー表示のオン・オフを切り替えることができます（オンの状態ではアイコンの外枠が水色で表示されます）。各レイヤーの機能については[こちら](#%E3%83%95%E3%82%9A%E3%83%A9%E3%82%AF%E3%82%99%E3%82%A4%E3%83%B3)をご覧ください。 - -### アプリ情報の表示 - - - -情報アイコンボタンをクリックまたはタップすると、アプリおよびデータの情報が表示されます。静的データ・動的データの最終更新日時も表示されます。パネル右上の「×」ボタン、またはパネルの外をクリックまたはタップするとパネルが閉じます。 - -## プラグイン - -3Dマップ上に付加的な情報を表示する、様々なプラグインが利用可能です。各プラグインが提供する情報はマップ上にレイヤーとして表示され、[レイヤー表示設定](#%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%E8%A1%A8%E7%A4%BA%E8%A8%AD%E5%AE%9A)パネルで表示のオン・オフを切り替えることができます。 - -### 降水プラグイン - - - -リアルタイムのレーダー情報をもとに、マップ上に雨の強度に応じた降水アニメーションを表示します。ズームレベルを上げていくと、より細かいメッシュの単位で降水の強弱が表示され、10分毎に最新の情報に更新されます。 - -詳細は [Mini Tokyo 3D 降水プラグイン GitHub レポジトリ](https://github.com/nagix/mt3d-plugin-precipitation)をご覧ください。 - -### 花火プラグイン - - - -マップ上に花火アニメーションを表示します。スケジュールされた日時に特定の場所の地図上で、花火打ち上げの3Dアニメーションを見ることができます。 - -詳細は [Mini Tokyo 3D 花火プラグイン GitHub レポジトリ](https://github.com/nagix/mt3d-plugin-fireworks)をご覧ください。 - -### ライブカメラプラグイン - - - -東京近郊各地に配置されたライブカメラで、列車が走行する様子を見ることができます。地図上のライブカメラボタンをクリックまたはタップすると、その場所にズームインすると同時に、同じ視点から配信しているライブカメラ映像が表示されます。映像はリアルタイムで配信されていますが、数十秒程度の配信遅延があるため、地図上の列車の動きより若干遅れて実際の列車が映る傾向があります。ライブカメラボタンが存在しない地図上をクリックすると、ライブカメラの選択が解除されます。 - -詳細は [Mini Tokyo 3D ライブカメラプラグイン GitHub レポジトリ](https://github.com/nagix/mt3d-plugin-livecam)をご覧ください。 - -### 東京2020オリンピックプラグイン - - - -2021年7月23日〜8月8日開催の東京2020オリンピックの競技日程と会場についての情報を表示します。画面左上の時刻表示のすぐ下に、開催日前であれば開会式までのカウントダウン、開催期間中は現在何日目かの表示が出ます。また、地図上には競技会場の場所に競技のピクトグラムで表されるボタンが表示され、クリックまたはタップするとその場所にズームインして、その会場の競技日程の詳細が表示されます。さらに、国立競技場駅の付近には、東京2020オリンピックのために建築されたオリンピックスタジアムの精巧な3Dモデルが表示されます。 - -詳細は [Mini Tokyo 3D 東京2020オリンピックプラグイン GitHub レポジトリ](https://github.com/nagix/mt3d-plugin-olympics2020)をご覧ください。 - -**注意**: 東京2020オリンピックプラグインは、[https://minitokyo3d.com](https://minitokyo3d.com) では表示されません。[東京公共交通オープンデータチャレンジ向け Mini Tokyo 3D 2021](https://minitokyo3d.com/2021/)のページで見ることができます。 - -## データについて - -本アプリケーションは次のデータを利用しています。 - -- [東京公共交通オープンデータチャレンジ](https://tokyochallenge.odpt.org) -- [公共交通オープンデータセンター](https://www.odpt.org) -- [Mapbox](https://www.mapbox.com) -- [OpenStreetMap](https://www.openstreetmap.org) -- [気象庁降水ナウキャスト](https://www.jma.go.jp/jp/radnowc/) -- [国土交通省東京航空局羽田飛行コース](https://www.ntrack.mlit.go.jp) - -本アプリケーションが利用する公共交通データは、東京公共交通オープンデータチャレンジおよび公共交通オープンデータセンターにおいて提供されるものです。公共交通事業者により提供されたデータを元にしていますが、必ずしも正確・完全なものとは限りません。本アプリケーションの表示内容について、公共交通事業者への直接の問合せは行わないでください。 - -## 対応ブラウザ - -次のブラウザで動作を確認しています。推奨は Chrome です。Internet Explorer には非対応です。 - -- Chrome 94 (Mac OS, Windows, iOS, Android) -- FireFox 93 (Mac OS, Windows, iOS) -- Safari 14 (Mac OS, iOS) -- Edge 94 (Mac OS, Windows, iOS) - -## 開発情報 - -本アプリケーションのソースコードは [GitHub リポジトリ](https://github.com/nagix/mini-tokyo-3d) にて公開されています。開発の経緯は [Mini Tokyo 3D 開発日誌](https://togetter.com/li/1413307) にまとめています。 - -## 問い合わせ先 - -本アプリケーションに関するお問い合わせは、以下のメールアドレスにお願いします。 - -mini-tokyo-3d@nagi-p.com +ユーザーガイドは[Mini Tokyo 3D ユーザーガイド](https://minitokyo3d.com/docs/master/ja/) に移動しました。 diff --git a/docs/ja/user-guide/supported-browsers.md b/docs/ja/user-guide/supported-browsers.md index 30151f8e..5d4d34f5 100644 --- a/docs/ja/user-guide/supported-browsers.md +++ b/docs/ja/user-guide/supported-browsers.md @@ -2,7 +2,7 @@ 次のブラウザで動作を確認しています。推奨は Chrome です。Internet Explorer には非対応です。 -- Chrome 94 (Mac OS, Windows, iOS, Android) -- FireFox 93 (Mac OS, Windows, iOS) +- Chrome 95 (Mac OS, Windows, iOS, Android) +- FireFox 94 (Mac OS, Windows, iOS) - Safari 14 (Mac OS, iOS) -- Edge 94 (Mac OS, Windows, iOS) +- Edge 95 (Mac OS, Windows, iOS) diff --git a/docs/user-guide/supported-browsers.md b/docs/user-guide/supported-browsers.md index 79f033e6..d68ee4e1 100644 --- a/docs/user-guide/supported-browsers.md +++ b/docs/user-guide/supported-browsers.md @@ -2,7 +2,7 @@ This application has been tested with the following browsers. Chrome is recommended. Internet Explorer is not supported. -- Chrome 94 (Mac OS, Windows, iOS, Android) -- FireFox 93 (Mac OS, Windows, iOS) +- Chrome 95 (Mac OS, Windows, iOS, Android) +- FireFox 94 (Mac OS, Windows, iOS) - Safari 14 (Mac OS, iOS) -- Edge 94 (Mac OS, Windows, iOS) +- Edge 95 (Mac OS, Windows, iOS) diff --git a/package.json b/package.json index db5d1d57..4e818cb9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "mini-tokyo-3d", - "version": "3.0.0-beta.3", + "version": "3.0.0-rc.1", "description": "A real-time 3D digital map of Tokyo's public transport system", "main": "dist/mini-tokyo-3d.js", "module": "dist/mini-tokyo-3d.esm.js", diff --git a/src/configs.js b/src/configs.js index ce73b483..fef8451a 100644 --- a/src/configs.js +++ b/src/configs.js @@ -120,7 +120,7 @@ const configs = { searchUrl: 'https://search.minitokyo3d.com/api/v1/routes', // Timestamp when the static data was last updated - lastStaticUpdate: '2021-10-18 12:00:00', + lastStaticUpdate: '2021-11-09 15:00:00', // String to show in an Mapbox's AttributionControl customAttribution: '© Akihiko Kusanagi', diff --git a/src/map.js b/src/map.js index 94afec42..2fc1b2f8 100644 --- a/src/map.js +++ b/src/map.js @@ -151,7 +151,7 @@ export default class extends Evented { } /** - * Returns the Mapbox's Map object used in the map + * Returns the Mapbox's Map object used in the map. * @returns {mapboxgl.Map} The Mapbox's Map */ getMapboxMap() {