を参考に描画したベクトル図の選択動作を設定します。
(OpenLayers 18d - OpenLayers Measure Example は動作しなかったので次回に version2.7が必要?)
次のコードを追加します。
---
// ここから追加
var vectors = new OpenLayers.Layer.Vector("Vector Layer");
map.addLayer(vectors);
var drawControl;
drawControls = {
point: new OpenLayers.Control.DrawFeature(
vectors, OpenLayers.Handler.Point
),
line: new OpenLayers.Control.DrawFeature(
vectors, OpenLayers.Handler.Path
),
polygon: new OpenLayers.Control.DrawFeature(
vectors, OpenLayers.Handler.Polygon
),
select: 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
}
),
selecthover: new OpenLayers.Control.SelectFeature(
vectors,
{
multiple: false, hover: true,
toggleKey: "ctrlKey", // ctrl key removes from selection
multipleKey: "shiftKey" // shift key adds to selection
}
)
};
for(var key in drawControls) {
map.addControl(drawControls[key]);
}
// ここまで
} // End of function init()
function displayZoom() {
document.getElementById("zoom").innerHTML = map.zoom.toFixed(4);
}
// ここから追加
function toggleControl(element){
for (key in drawControls) {
var control = drawControls[key];
if (element.value == key && element.checked) {
control.activate();
}
else {
control.deactivate();
}
}
}
function update() {
var clickout = document.getElementById("clickout").checked;
drawControls.select.clickout = clickout;
drawControls.select.box = document.getElementById("box").checked;
if(drawControls.select.active) {
drawControls.select.deactivate();
drawControls.select.activate();
}
}
// ここまで
</script>
</head>
<body onload="init()">
<h1 id="title">Display Data5</h1>
<div id="layerswitcher" style="position:absolute; z-index:1;"></div>
<div id="map"></div>
<div id="paneldiv" class="olControlNavToolbar"></div>
<div id="edpanel" class="olControlEditingToolbar"></div><br />
<div id="panel" style="margin-left:50px;"></div><br />
<div id="coords" style="margin-left:50px;"></div>
<div style="margin-left:50px;">Moving your mouse to the upper left corner of this map should return 'x=0,y=0'</div>
<div style="margin-left:50px;">zoom: <span id="zoom"></span></div>
<div style="margin-left:50px;"><a href="#" onclick="nav.enableZoomWheel();return false">Turn on Wheel Zoom</a> | <a href="#" onclick="nav.disableZoomWheel(); return false;">Turn off Wheel Zoom</a></div>
<!-- ここから追加 -->
<ul id="controlToggle">
<li>
<input type="radio" name="type" value="none" id="noneToggle"
onclick="toggleControl(this);" checked="checked" />
<label for="noneToggle">navigate</label>
</li>
<li>
<input type="radio" name="type" value="point" id="pointToggle"
onclick="toggleControl(this);" />
<label for="pointToggle">draw point</label>
</li>
<li>
<input type="radio" name="type" value="line" id="lineToggle"
onclick="toggleControl(this);" />
<label for="lineToggle">draw line</label>
</li>
<li>
<input type="radio" name="type" value="polygon" id="polygonToggle"
onclick="toggleControl(this);" />
<label for="polygonToggle">draw polygon</label>
</li>
<li>
<input type="radio" name="type" value="selecthover" id="selecthoverToggle"
onclick="toggleControl(this);" />
<label for="selecthoverToggle">Select features on hover</label>
</li>
<li>
<input type="radio" name="type" value="select" id="selectToggle"
onclick="toggleControl(this);" />
<label for="selectToggle">select feature</label>
<ul>
<li>
<input id="box" type="checkbox" checked="checked"
name="box" onchange="update()" />
<label for="box">select features in a box</label>
</li>
<li>
<input id="clickout" type="checkbox"
name="clickout" onchange="update()" />
<label for="clickout">click out to unselect features</label>
</li>
</ul>
</li>
</ul>
<!-- ここまで -->
---
"select features in a box" は動作しませんでした。version2.7ならできるかも?
"draw polygon" をクリックして選択し図を描画します。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih2B3mb6bZHOplOcCX997n8H8IASYcavTEkNY8NMQUSqVctU4-_FRao6ArKKSD196ohwcMKXarE0B-FmqSMhLtSM4W_RinPSPfjFrD3_EwZ-eQxl5Qm48pV_sAg4hA6cE60WvTz2aD9eZI/s320/openlayers18e_02_small.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7a8pAlexpiwFdJRsnaGOJdRYOyrjS6BYf8QZhUF03fPHa-C1CgMNvXBCu0xpuTm8msa_c1hrEyNzX4t4BtEurntJMsd7Fbvs4ZkZyT0xibuyu1whxmEGz8OPLtYuzYbwhoaTjkaDqpuFq/s320/openlayers18e_01_small.png)
"Select features on hover" をクリックして選択し図にポインタを合わせると色が変わります。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnGFdSNhRG63fcKAQoScX8eKyGIno0JxqKiQqbltIRGG-hW6saeak1p0-0Z6g1V3xJKEFJwFyv-IjMNYOfRuambba4emBBc60rPwt3LteaPTuBVQEjVbc_QYWO2UhRGxLqu2b6JDQmntpj/s320/openlayers18e_04_small.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9iGPsZemi9MH3wowsHulqmwq-24MyeHgAmw88P_SsyOrTwUPVG1CPeez98v7YfOGO2Aj7az5uw2JedD9uHOx4tvwI1h66a1HKBv0PcUDodc3vn_B8Du0oAZqKp8ojajbLRPiUGHUfLDG6/s320/openlayers18e_03_small.png)
"click out to unselect features" をクリックして選択し図をクリックすると色が変わります。図以外の場所をクリックすると元の色になります。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9CjYsEddJrJh6JPEvhzJQ5sQMBRpGKIqGuYEneNk3MwWuHWKcSOvonx1l4Z7s4Gf30oLuDqk_rIti4_3xsKIlSV63VqDr2b6CmvBp0L2jHwRFyZQG_Wm_iUjh6B8EM-SJEJnTStoRy3lp/s320/openlayers18e_06_small.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmvsdRijUAaethaG0C1UetvYx1xg1PTV3FPM5V5jKcS5tIArLXr82BHWJu7j11dvqyR-S-TEr3eYHInb7OzZ4K4xORCOUCCxb98ePi-IInIXG86NeBOw54dwoLWoPQAuPNdCQNgnxb4LIw/s320/openlayers18e_05_small.png)
描画した図だけ色が変わります。