URL Hash¶

URLHash を利用して表示位置を指定したり、現在の位置をアドレスバーに表示できます。

URLHash による表示位置指定¶

URL で位置ハッシュを持つものを与えられると該当する位置を表示します。

http://ip/#35.1907986956/138.8507189384/480.23312a/74.00000t/47242.87843r/33.72390h

アドレスバーの更新設定API¶

enableURLUpdate( readUrlOnStart: boolean ): 表示している位置を URLHash にしてアドレスバーの URL を更新します。引数に true を指定すると、呼び出し時に指定されている URLHash の位置を表示します。
disableURLUpdate(): アドレスバーの URL の更新をしないようにします。

URLHashの内容¶

# の後に、 / で区切って表記されます。

#35.1/135.6/2000a/45t/1000r/0.0h

記号	内容	省略時
無し	latitude	省略不可¹
無し	longitude	省略不可¹
末尾a	altitude	8000m
末尾t	tilt	0（真下を見る）
末尾r	range	1000m
末尾h	heading	0（真南から見る）

latitude, longitude, altitude で示される地点から、range 分離れた位置にカメラを設置します。カメラの姿勢は tilt, heading で指定できます。

Warning

URLHash はカメラの位置姿勢から都度生成されます。地表DEMデータの精度は地表に近い状態の DEMデータが読み込まれていると高精度になりますが、地表から離れていたり、まだ DEMデータが読み込まれていない場合には低精度となるため誤差が生じることがあります。

URLHash補助API¶

URLHash補助関数を利用することで、ユーザが独自のパラメーターを URLHash に追加できます。（すでに定義されている記号と重複しないようにご注意ください） createCameraParameterHash で現在の URLHash文字列を生成し、独自パラメーターを追加してアドレスバーに反映する等で実現できます。

createCameraParameterHash(): string: 現在のカメラ位置から、URLHash文字列を生成して取得します。URLHash が生成できないときは、length0 の文字列が返ります。
getCameraParameterFromHash( hash: string ): StandardUIViewer.HashCameraParameter | undefined: URLHash文字列を引数で与えると、カメラパラメーターが返ります。カメラパラメーターは、位置、視点位置、ヨーの値です。

サンプルコード¶

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="https://resource.mapray.com/mapray-js/v0.9.6/mapray.min.js"></script>
        <script src="https://resource.mapray.com/ui/v0.9.6/maprayui.min.js"></script>
        <link rel="stylesheet" href="https://resource.mapray.com/styles/v1/mapray.css">
        <style>
            html, body, div#mapray-container { margin: 0; padding: 0; height: 100%; }
        </style>
    </head>

    <body>
        <div id="mapray-container"></div>
    </body>
</html>

<script>
    // Set up your apikey, which can be created in Mapray Cloud.
    const apikey = "<YOUR_MAPRAY_API_KEY>";

    // The StandardUIView in the ui package includes mouse-based camera manipulation.
    const uiviewer = new maprayui.StandardUIViewer( "mapray-container", apikey);

    uiviewer.enableURLUpdate( true );
</script>

Info

このサンプルコードは、<YOUR_MAPRAY_API_KEY>を、あなたのMapray CloudアカウントのAPI Keyに置き換えるまで、期待通りに動作しません。

記号の直後は latitude/longitude である必要があります ↩↩