OpenLayers の Development Examples の「Editing Toolbar Example（http://openlayers.org/dev/examples/editingtoolbar.html）」と OpenLayers の
「Control」ページ
http://docs.openlayers.org/library/controls.html
の「Customizing an Existing Panel」を参考に Editing Toolbar に選択ボタンを追加してみます。
---
map = new OpenLayers.Map('map', {
projection: new OpenLayers.Projection("EPSG:2451"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
maxResolution: 'auto',
units: 'meters',
maxExtent: new OpenLayers.Bounds(-63100,-34500,-45400,-24200),
controls: [ new OpenLayers.Control.PanZoom(), // new OpenLayers.Control.EditingToolbar(vectors ), 削除 new OpenLayers.Control.LayerSwitcher(), new OpenLayers.Control.MousePosition() ] });
map.addLayers([layer0, layer3, layer1, layer2, layer4, vectors]);
// ここから追加
var panel = new OpenLayers.Control.Panel({
displayClass: 'customEditingToolbar',
allowDepress: true
// "OpenLayers.Control.TYPE_TOOL" が "true" のとき "on" のアイコンをクリックすると "off" になる
});
// ボタンを１つずつ設定しないと配置がうまくできませんでした
panelCrontrol = [
new OpenLayers.Control.Navigation(
{
title: "Navigation"
// ポインタをボタンに重ねたときには浮き出して表示
}),
),
new OpenLayers.Control.DrawFeature(
vectors,
OpenLayers.Handler.Point,
{
multi: true,
// レイヤに渡す前に feature をマルチタイプジオメトリに型変換
displayClass: 'olControlDrawFeaturePoint' // アイコンの設定
}),
new OpenLayers.Control.DrawFeature(
vectors,
OpenLayers.Handler.Path,
{
multi: true,
displayClass: 'olControlDrawFeaturePath'
}),
new OpenLayers.Control.DrawFeature(
vectors,
OpenLayers.Handler.Polygon,
{
multi: true,
displayClass: 'olControlDrawFeaturePolygon'
}),
new OpenLayers.Control.SelectFeature(
vectors,
{
clickout: false, toggle: false,
multiple: false, hover: false,
toggleKey: "ctrlKey", // ctrl key removes from selection
multipleKey: "shiftKey", // shift key adds to selection
box: true,
displayClass: 'olControlSelectFeature'
})
];
panel.addControls(panelControl); map.addControl(panel); // ここまで map.zoomToMaxExtent(); } </script> </head>---
「displayClass」は、style を設定してアイコンを指定します。内容は "OpenLayers-2.13.1/theme/default/style.css" をコピーしました。
選択ボタンは次のようなものを作成して、"OpenLayers-2.13.1/theme/default/img/ に保存しました。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <link rel="stylesheet" href="OpenLayers-2.13.1/theme/default/style.css" type="text/css"> <link rel="stylesheet" href="OpenLayers-2.13.1/examples/style.css" type="text/css">
<!-- ここから追加 -->
<style>
.customEditingToolbar {
float: right;
right: 0px;
height: 30px;
}
.customEditingToolbar div {
float: right;
margin: 5px;
width: 24px;
height: 24px;
}
.olControlNavigationItemActive {
background-image: url("OpenLayers-2.13.1/theme/default/img/editing_tool_bar.png");
background-repeat: no-repeat;
background-position: -103px -23px;
}
.olControlNavigationItemInactive {
background-image: url("OpenLayers-2.13.1/theme/default/img/editing_tool_bar.png");
background-repeat: no-repeat;
background-position: -103px -0px;
}
.olControlDrawFeaturePointItemInactive {
background-image: url("OpenLayers-2.13.1/theme/default/img/editing_tool_bar.png");
background-repeat: no-repeat;
background-position: -77px -1px;
}
.olControlDrawFeaturePointItemActive {
background-image: url("OpenLayers-2.13.1/theme/default/img/editing_tool_bar.png");
background-repeat: no-repeat;
background-position: -77px -24px;
}
.olControlDrawFeaturePathItemInactive {
background-image: url("OpenLayers-2.13.1/theme/default/img/editing_tool_bar.png");
background-repeat: no-repeat;
background-position: -51px -1px;
}
.olControlDrawFeaturePathItemActive {
background-image: url("OpenLayers-2.13.1/theme/default/img/editing_tool_bar.png");
background-repeat: no-repeat;
background-position: -51px -24px;
}
.olControlDrawFeaturePolygonItemInactive {
background-image: url("OpenLayers-2.13.1/theme/default/img/editing_tool_bar.png");
background-repeat: no-repeat;
background-position: -26px 0px;
}
.olControlDrawFeaturePolygonItemActive {
background-image: url("OpenLayers-2.13.1/theme/default/img/editing_tool_bar.png");
background-repeat: no-repeat;
background-position: -26px -23px;
}
.olControlSelectFeatureItemActive {
background-image: url(OpenLayers-2.13.1/theme/default/img/select_feature_on.png);
background-repeat: no-repeat;
background-position: 0 1px;
}
.olControlSelectFeatureItemInactive {
background-image: url(OpenLayers-2.13.1/theme/default/img/select_feature_off.png);
background-repeat: no-repeat;
background-position: 0 1px;
}
</style> <!-- ここまで -->---
0 件のコメント:
コメントを投稿