0
openlayer2에서 버퍼를 그립니다. 원형으로 표시된 것처럼 다각형 또는 원형의 형태 일 수 있습니다. 나는 모든 무승부 공식 예제를 제공하지만, 예를Openlayers2 : 사용자 입력 길이에 따라 openlayer2에 버퍼를 그리려합니다.
<!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">
<title>Modify Feature</title>
<link rel="stylesheet" href="style.css" type="text/css">
<link rel="stylesheet" href="style1.css" type="text/css">
<style type="text/css">
#controls {
width: 512px;
}
#controlToggle {
padding-left: 1em;
}
#controlToggle li {
list-style: none;
}
</style>
<script src="OpenLayers.js"></script>
<script type="text/javascript">
var map, vectors, controls;
function init(){
map = new OpenLayers.Map('map');
var wms = new OpenLayers.Layer.WMS("OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0?", {layers: 'basic'});
OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2';
// allow testing of specific renderers via "?renderer=Canvas", etc
vectors = new OpenLayers.Layer.Vector("Vector Layer", {
});
map.addLayers([wms, vectors]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MousePosition());
if (console && console.log) {
function report(event) {
console.log(event.type, event.feature ? event.feature.id : event.components);
}
vectors.events.on({
"beforefeaturemodified": report,
"featuremodified": report,
"afterfeaturemodified": report,
"vertexmodified": report,
"sketchmodified": report,
"sketchstarted": report,
"sketchcomplete": report
});
}
controls = {
regular: new OpenLayers.Control.DrawFeature(vectors,
OpenLayers.Handler.RegularPolygon,
{handlerOptions: {sides: 5}}),
modify: new OpenLayers.Control.ModifyFeature(vectors)
};
for(var key in controls) {
map.addControl(controls[key]);
}
map.setCenter(new OpenLayers.LonLat(0, 0), 3);
document.getElementById('noneToggle').checked = true;
}
function update() {
// reset modification mode
controls.modify.mode = OpenLayers.Control.ModifyFeature.RESHAPE;
var resize = document.getElementById("resize").checked;
if(resize) {
controls.modify.mode |= OpenLayers.Control.ModifyFeature.RESIZE;
var keepAspectRatio = document.getElementById("keepAspectRatio").checked;
if (keepAspectRatio) {
controls.modify.mode &= ~OpenLayers.Control.ModifyFeature.RESHAPE;
}
}
controls.modify.createVertices = document.getElementById("createVertices").checked;
}
function toggleControl(element) {
for(key in controls) {
var control = controls[key];
if(element.value == key && element.checked) {
control.activate();
} else {
control.deactivate();
}
}
}
</script>
</head>
<body onload="init()">
<h1 id="title">OpenLayers 2 Modify Feature Example</h1>
<div id="tags">
vertices, digitizing, draw, drawing
</div>
<div id="shortdesc">A demonstration of the ModifyFeature control for editing vector features.</div>
<div id="map" class="smallmap"></div>
<div id="controls">
<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="regular" id="regularToggle" onclick="toggleControl(this);" />
<label for="regularToggle">draw regular polygon</label>
<label for="sides"> - sides</label>
<input id="sides" type="text" size="2" maxlength="2"
name="sides" value="5" onchange="update()" />
<ul>
</ul>
</li>
<li>
<input type="radio" name="type" value="modify" id="modifyToggle"
onclick="toggleControl(this);" />
<label for="modifyToggle">modify feature</label>
<ul>
<li>
<input id="resize" type="checkbox"
name="resize" onchange="update()" />
<label for="resize">allow resizing</label>
(<input id="keepAspectRatio" type="checkbox"
name="keepAspectRatio" onchange="update()" checked="checked" />
<label for="keepAspectRatio">keep aspect ratio</label>)
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
감사합니다 여기에 openlayers와 예를 찾을 수 있습니다. –