VEShape.SetZIndex メソッド
シェイプの Z インデックス値を設定します。
構文
VEShape.SetZIndex(icon, polyshape);
パラメータ
| パラメータ | 説明 |
|---|---|
icon |
(任意指定) シェイプのアイコンの Z インデックス (シェイプがプッシュピンの場合はプッシュピンの Z インデックス) を指定する整数です。この値が null または未定義の場合、Z インデックスは変更されません。 |
polyshape |
(任意指定) シェイプの Z インデックスを指定する整数です。シェイプがプッシュピンの場合、このパラメータは無視されます。この値が null または未定義の場合、Z インデックスは変更されません。 |
解説
パラメータは両方とも任意指定ですが、少なくとも 1 つのパラメータを指定する必要があります。
Z インデックスは、項目が描画される順序を定義します。Z インデックス値が大きいシェイプが優先され、それよりも Z インデックス値が小さいシェイプの上に描画されます。
シェイプには、共通の既定の Z インデックスがあります。アイコンの場合は 1000、多角形のシェイプの場合は 50 です。以下の表は、ほとんどのオブジェクトの Z インデックスを示しています。
| オブジェクト | Z インデックス |
|---|---|
シェイプのアイコン |
1000 |
ルートのアイコン |
998 |
ERO ERO 進行バー |
500 |
地名の選択画面 メッセージ ボックス |
201 |
検索コントロール |
199 |
ダッシュボード ミニ マップ |
100 |
ルートの線 |
60 |
多角形のシェイプ |
50 |
著作権表示 スケール バー |
31 または 30 |
ロゴ |
30 |
交通情報のタイル |
2 |
カスタム タイル マップ 道路地図/航空写真/ハイブリッドのタイル |
1 |
VE コンテナ |
0 |
例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1"></script>
<script type="text/javascript">
var map = null;
var zLevel;
var minZoom = 3;
var maxZoom = 6;
var kindaRed = new VEColor(255, 0, 0, 0.7);
var kindaGreen = new VEColor(0, 255, 0, 0.7);
var kindaBlue = new VEColor(0, 0, 255, 0.7);
var shape1 = null;
var shape2 = null;
var shape3 = null;
var topLeftS1 = new VELatLong(45.33, -111.27);
var topRightS1 = new VELatLong(45.33, -96.86);
var botRightS1 = new VELatLong(37.30, -96.86);
var botLeftS1 = new VELatLong(37.30, -111.27);
var topLeftS2 = new VELatLong(41.24, -109.51);
var topRightS2 = new VELatLong(41.24, -94.39);
var botRightS2 = new VELatLong(33.50, -94.39);
var botLeftS2 = new VELatLong(33.50, -109.51);
var topLeftS3 = new VELatLong(49.32, -104.32);
var topRightS3 = new VELatLong(49.32, -89.47);
var botRightS3 = new VELatLong(36.88, -89.47);
var botLeftS3 = new VELatLong(36.88, -104.32);
function GetMap()
{
map = new VEMap('myMap');
map.LoadMap();
shape1 = new VEShape(VEShapeType.Polygon, new Array(topLeftS1, topRightS1, botRightS1, botLeftS1));
shape1.HideIcon();
shape1.SetFillColor(kindaRed);
zLevel = shape1.GetMinZoomLevel();
if(zLevel == null || zLevel < minZoom)
{
shape1.SetMinZoomLevel(minZoom);
}
zLevel = shape1.GetMaxZoomLevel();
if(zLevel == null || zLevel > maxZoom)
{
shape1.SetMaxZoomLevel(maxZoom);
}
shape2 = new VEShape(VEShapeType.Polygon, new Array(topLeftS2, topRightS2, botRightS2, botLeftS2));
shape2.HideIcon();
shape2.SetFillColor(kindaGreen);
zLevel = shape2.GetMinZoomLevel();
if(zLevel == null || zLevel < minZoom)
{
shape2.SetMinZoomLevel(minZoom);
}
zLevel = shape2.GetMaxZoomLevel();
if(zLevel == null || zLevel > maxZoom)
{
shape2.SetMaxZoomLevel(maxZoom);
}
shape3 = new VEShape(VEShapeType.Polygon, new Array(topLeftS3, topRightS3, botRightS3, botLeftS3));
shape3.HideIcon();
shape3.SetFillColor(kindaBlue);
zLevel = shape3.GetMinZoomLevel();
if(zLevel == null || zLevel < minZoom)
{
shape3.SetMinZoomLevel(minZoom);
}
zLevel = shape3.GetMaxZoomLevel();
if(zLevel == null || zLevel > maxZoom)
{
shape3.SetMaxZoomLevel(maxZoom);
}
map.AddShape(shape1);
map.AddShape(shape2);
map.AddShape(shape3);
}
function MoveShape(s)
{
// 現在最大の Z インデックスを取得します。
var zindex = shape1.GetZIndexPolyShape();
var tz;
tz = shape2.GetZIndexPolyShape();
if(tz > zindex)
{
zindex = tz;
}
tz = shape3.GetZIndexPolyShape();
if(tz > zindex)
{
zindex = tz;
}
// 新しい最大 Z インデックスをインクリメントします。
zindex++;
if(s == "1")
{
shape1.SetZIndex(null, zindex);
}
if(s == "2")
{
shape2.SetZIndex(null, zindex);
}
if(s == "3")
{
shape3.SetZIndex(null, zindex);
}
}
</script>
</head>
<body onload="GetMap();">
<div id='myMap' style="position:relative; width:600px; height:400px;"></div>
<p> </p>
<input id="btnMvS1" type="button" value="赤のシェイプを前面に移動" name="moves1" onclick="MoveShape('1');">
<br />
<input id="btnMvS2" type="button" value="緑のシェイプを前面に移動" name="moves2" onclick="MoveShape('2');">
<br />
<input id="btnMvS3" type="button" value="青のシェイプを前面に移動" name="moves3" onclick="MoveShape('3');">
</body>
</html>