ウィジェットのz-indexを変更する
実行結果
次の例では、ウィジェットのz-indexを変更して表示順を変更します。
＜ボタンのz-indexに変更＞
Polyline:
Polygon:
Oval:
Popup:
Marker:
UserWidget:
Polyline:
Polygon:
Oval:
Popup:
Marker:
UserWidget:
ソースコードと解説
同じ種類のウィジェットの表示順を変更するには、各クラスのsetZindex()を利用します。
各クラス内でのみ有効です。他クラスとの重なり順序は保証されません。
・図形クラス:Polygon,Polyline,Oval,GroundOverlay,ImageLayer,GLLabel
・ウィジェットクラス:Popup,Marker,UserWidget,MarkerCluster,StataicUserWidget
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- ローダーのURLをscriptでロードする -->
<script src="https://{DOMAIN}/zma_loader.js?key=[APIキー]&auth=[認証方式]"></script>
<script type="text/javascript">
// オブジェクト
var map, pli, plg, ov, popup, mrk, user_widget;
// 中心点の緯度経度（東京駅）
const lat = 35.681406, lng = 139.767132;
// ZMALoader
ZMALoader.setOnLoad(function (mapOptions, error) {
if (error) {
console.error(error)
return
}
// マップオプションをデフォルト値から変更する
mapOptions.center = new ZDC.LatLng(lat, lng); // 中心点の緯度経度を設定
mapOptions.zoom = 10;
// 地図を生成
map = new ZDC.Map(
document.getElementById('ZMap'),
mapOptions,
function() {
// Success callback
/* Polyline */
var latlngs = [];
latlngs.push(new ZDC.LatLng(35.70, 139.73));
latlngs.push(new ZDC.LatLng(35.70, 139.82));
latlngs.push(new ZDC.LatLng(35.66, 139.75));
latlngs.push(new ZDC.LatLng(35.70, 139.73));
// 線を作成
pli = new ZDC.Polyline(
latlngs,
{
color: '#0000FF',
width: 2
}
);
// 線を地図に追加
map.addWidget(pli);
/* Polygon */
// 頂点の配列(外側)を作成
var latlngs1 = [];
latlngs1.push(new ZDC.LatLng(35.6607694489887, 139.7419563985648));
latlngs1.push(new ZDC.LatLng(35.6845229143682, 139.7286721190967));
latlngs1.push(new ZDC.LatLng(35.7057395047171, 139.7473525622848));
latlngs1.push(new ZDC.LatLng(35.7032096194981, 139.7793172849411));
latlngs1.push(new ZDC.LatLng(35.6794617174330, 139.7926015644093));
latlngs1.push(new ZDC.LatLng(35.6582381374606, 139.7739211212211));
latlngs1.push(new ZDC.LatLng(35.6607694489887, 139.7419563985648));
// 頂点の配列(内側)を作成
var latlngs2 = [];
latlngs2.push(new ZDC.LatLng(35.6921309732335, 139.7584403258811));
latlngs2.push(new ZDC.LatLng(35.6789032912005, 139.7484184084603));
latlngs2.push(new ZDC.LatLng(35.6705924719100, 139.7661655538930));
latlngs2.push(new ZDC.LatLng(35.6856869918577, 139.7757698914212));
latlngs2.push(new ZDC.LatLng(35.6921309732335, 139.7584403258811));
// ポリゴンを作成
plg = new ZDC.Polygon([latlngs1,latlngs2], {
fill: '#FF0000',
strokeWidth: 3
});
// 追加
map.addWidget(plg);
/* Oval */
ov = new ZDC.Oval(
new ZDC.LatLng(35.70, 139.75),
{x: 2000, y: 2000},
{
fill: '#00FF00',
stroke: '#FF00FF',
strokeWidth: '2',
opacity: 0.4,
propagation: true
}
);
// 円を地図に追加
map.addWidget(ov);
/* Popup */
popup = new ZDC.Popup(
new ZDC.LatLng(35.70, 139.75),
{
htmlSource: 'Sample Popup',
offset: new ZDC.Point(0, 50),
propagation: true
}
);
map.addWidget(popup);
/* Marker */
mrk = new ZDC.Marker(
new ZDC.LatLng(35.70, 139.75));
map.addWidget(mrk);
/* UserWidget */
user_widget = new ZDC.UserWidget(
new ZDC.LatLng(35.70, 139.75),
{ htmlSource: '<div style="background-color: #FF00FF"><b>Sample UserWidget</b></div>',
offset: new ZDC.Point(-10, -10),
propagation: true
}
);
// UserWidgetをMapに追加
map.addWidget(user_widget);
},
function() {
// Failure callback
}
);
});
/* ★指定のz-indexに変更 */
function polyline_index(z_index) {
pli.setZIndex(z_index);
};
function polygon_index(z_index) {
plg.setZIndex(z_index);
};
function oval_index(z_index) {
ov.setZIndex(z_index);
};
function popup_index(z_index) {
popup.setZIndex(z_index);
};
function marker_index(z_index) {
mrk.setZIndex(z_index);
};
function userwidget_index(z_index) {
user_widget.setZIndex(z_index);
};
/* hide/show */
function polyline_show(){pli.show();};
function polyline_hide(){pli.hide();};
function polygon_show(){plg.show();};
function polygon_hide(){plg.hide();};
function oval_show(){ov.show();};
function oval_hide(){ov.hide();};
function popup_show(){popup.show();};
function popup_hide(){popup.hide();};
function marker_show(){mrk.show();};
function marker_hide(){mrk.hide();};
function userwidget_show(){user_widget.show();};
function userwidget_hide(){user_widget.hide();};
</script>
</head>
<body>
<div id="ZMap" style="position: relative; max-width: calc(510px * 16 / 9); height:510px; border:1px solid #777777;"></div>
<div class="mb-2" id="IBox">
＜ボタンのz-indexに変更＞<br>
<span style="width: 105px;display: inline-block;text-align: right;">
Polyline:
</span>
<input type="button" value="show" onclick="polyline_show();">
<input type="button" value="099" onclick="polyline_index(99);">
<input type="button" value="100" onclick="polyline_index(100);">
<input type="button" value="101" onclick="polyline_index(101);">
<input type="button" value="102" onclick="polyline_index(102);">
<input type="button" value="103" onclick="polyline_index(103);">
<input type="button" value="104" onclick="polyline_index(104);">
<input type="button" value="hide" onclick="polyline_hide();">
<br>
<span style="width: 105px;display: inline-block;text-align: right;">
Polygon:
</span>
<input type="button" value="show" onclick="polygon_show();">
<input type="button" value="099" onclick="polygon_index(99);">
<input type="button" value="100" onclick="polygon_index(100);">
<input type="button" value="101" onclick="polygon_index(101);">
<input type="button" value="102" onclick="polygon_index(102);">
<input type="button" value="103" onclick="polygon_index(103);">
<input type="button" value="104" onclick="polygon_index(104);">
<input type="button" value="hide" onclick="polygon_hide();">
<br>
<span style="width: 105px;display: inline-block;text-align: right;">
Oval:
</span>
<input type="button" value="show" onclick="oval_show();">
<input type="button" value="099" onclick="oval_index(99);">
<input type="button" value="100" onclick="oval_index(100);">
<input type="button" value="101" onclick="oval_index(101);">
<input type="button" value="102" onclick="oval_index(102);">
<input type="button" value="103" onclick="oval_index(103);">
<input type="button" value="104" onclick="oval_index(104);">
<input type="button" value="hide" onclick="oval_hide();">
<br>
<br>
<span style="width: 105px;display: inline-block;text-align: right;">
Popup:
</span>
<input type="button" value="show" onclick="popup_show();">
<input type="button" value="099" onclick="popup_index(99);">
<input type="button" value="100" onclick="popup_index(100);">
<input type="button" value="101" onclick="popup_index(101);">
<input type="button" value="102" onclick="popup_index(102);">
<input type="button" value="103" onclick="popup_index(103);">
<input type="button" value="104" onclick="popup_index(104);">
<input type="button" value="hide" onclick="popup_hide();">
<br>
<span style="width: 105px;display: inline-block;text-align: right;">
Marker:
</span>
<input type="button" value="show" onclick="marker_show();">
<input type="button" value="099" onclick="marker_index(99);">
<input type="button" value="100" onclick="marker_index(100);">
<input type="button" value="101" onclick="marker_index(101);">
<input type="button" value="102" onclick="marker_index(102);">
<input type="button" value="103" onclick="marker_index(103);">
<input type="button" value="104" onclick="marker_index(104);">
<input type="button" value="hide" onclick="marker_hide();">
<br>
<span style="width: 105px;display: inline-block;text-align: right;">
UserWidget:
</span>
<input type="button" value="show" onclick="userwidget_show();">
<input type="button" value="099" onclick="userwidget_index(99);">
<input type="button" value="100" onclick="userwidget_index(100);">
<input type="button" value="101" onclick="userwidget_index(101);">
<input type="button" value="102" onclick="userwidget_index(102);">
<input type="button" value="103" onclick="userwidget_index(103);">
<input type="button" value="104" onclick="userwidget_index(104);">
<input type="button" value="hide" onclick="userwidget_hide();">
<br>
</div>
</body>
</html>