Pin Entity
ピンエンティティはピンを表示するためのエンティティです。
複数のピンを1つのエンティティ内に持つことができ、個々のピンは Entry と呼ばれます。
ピンの種類のほか、サイズや表示色を指定することができます。
これらの設定は、エンティティおよび、 Entry 単位で指定できます。
Entry については、こちらを参照してください。
ピンの種類
ピンの Entry は3種類あります。それぞれ、追加メソッドにより指定できます。
| ピン |
内容 |
追加メソッド |
| Pin |
ピン |
addPin |
| TextPin |
文字を含んだピン |
addTextPin |
| MakiIconPin |
アイコンを含んだピン |
addMakiIconPin |
アイコンについて
アイコンは Mapbox の Maki icons を Mapray のサイトで配信しています。
拡張子（.svg）を除いた名称で指定します。
たとえば、家のアイコンであれば home と指定します。
pinEntity.addMakiIconPin( "home", new mapray.GeoPoint( 138.7, 35.3, 3780 ) );
主なメソッド
| メソッド |
動作 |
| setBGColor |
背景色を指定します |
| setFGColor |
文字やアイコンの色を指定します |
| setVisibility |
可視性フラグを指定します |
| setPickable |
pick による選択対象とするかを指定します |
Warning
表示色は、RGB 値を各 0.0 ~ 1.0 の範囲で指定し、たとえば赤色は entity.setBGColor([1.0, 0.0, 0.0]); のように設定します。
その他メソッドや詳細は リファレンスマニュアル を参照してください。
サンプルコード
PinEntity と StandardUIViewer を使い、地表にアイコン Pin オブジェクトを表示する例を示します。
3種類のピンを表示します。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36 | <!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 Organization Token, which can be created in Mapray Cloud.
const accessToken = "<YOUR_MAPRAY_ACCESS_TOKEN>";
const uiviewer = new maprayui.StandardUIViewer( "mapray-container", accessToken, {
dem_provider: new mapray.StandardDemProvider( {
prefix: "https://tiles.mapray.com/dem/",
headers: { Authorization: "Bearer " + accessToken }
} )
} );
const pinEntity = new mapray.PinEntity( uiviewer.viewer.scene );
pinEntity.altitude_mode = mapray.AltitudeMode.CLAMP;
pinEntity.addPin( new mapray.GeoPoint( 138.71934, 35.36, 3780 ), { size: 15 } );
pinEntity.addTextPin( "Pin", new mapray.GeoPoint( 138.71934, 35.39, 3780 ), { size: 15 } );
pinEntity.addMakiIconPin( "car", new mapray.GeoPoint( 138.71934, 35.37, 3780 ) );
uiviewer.viewer.scene.addEntity( pinEntity );
</script>
|