OpenLayers 편집 툴바를 일반 버튼으로 대체 할 수 있습니까?

Question

기본적으로 삽입에서이 작은 OpenLayers.Control.EditingToolbar는 :

정말 알 수없는이 버튼을 의미하는 무슨. 나는 버튼 그룹이 편집 도구 모음을 대체하고자하는 (예를 들어 트위터 부트 스트랩이 제공하는 것과 같은) :

<div id="panel" class="olControlEditingToolbar"> 
    <div class="olControlNavigationItemInactive olButton"></div> 
    <div class="olControlDrawFeaturePointItemActive olButton"></div> 
    <div class="olControlDrawFeaturePathItemInactive olButton"></div> 
    <div class="olControlDrawFeaturePolygonItemInactive olButton"></div> 
</div> 

이미지 : 편집 도구 모음의 마크 업 현재이입니다

기본 스프라이트입니다 - 그래서 나는 이것을 바꿀 수 있다는 것을 압니다. 그러나 나는 div에서 벗어나 어떻게 button으로 바꿀 수 있는지 알 수 없습니다. 버튼 그룹을 수동으로 만들고 버튼에 click() 이벤트 리스너를 추가하여 OpenLayers의 다른 편집 모드를 트리거하는 방법에 대해 생각했습니다. 하지만 어떻게 할 수 있는지에 대한 문서를 찾을 수 없었습니다.

• 수동 버튼 그룹을 만들고 내 자신 JS를 통해 적절한 OpenLayers 이벤트를 트리거 -하지만 어떤 이벤트를 내가 실행하는 데 필요합니까 :

  ---

  그래서, 기본적으로, 나는이 옵션을 보려면?

• EditingToolbar을 사용하지 말고 직접 OpenLayers로 툴바를 빌드하십시오. 어떻게 할 수 있습니까?

• OpenLayers 소스를 해킹하여 수정 도구 모음을 수정하십시오 (meh ...) - 노력할 가치가 있습니까?

Answer 1

가장 좋은 방법은 수동으로 컨트롤 버튼을 만드는 것입니다. HTML을 만들고, 마지막으로

function toggleControl(element) { 
    for(key in drawControls) { 
     var control = drawControls[key]; 
     if(element.value == key && element.checked) { 
      control.activate(); 
     } else { 
      control.deactivate(); 
     } 
    } 
} 

: 클릭 된 요소를 기반으로 현재 사용되는 제어를 변경하는 기능을 추가, 그리고

drawControls = { 
    point: new OpenLayers.Control.DrawFeature(pointLayer, 
     OpenLayers.Handler.Point), 
    line: new OpenLayers.Control.DrawFeature(lineLayer, 
     OpenLayers.Handler.Path), 
    polygon: new OpenLayers.Control.DrawFeature(polygonLayer, 
     OpenLayers.Handler.Polygon), 
) 
}; 

for(var key in drawControls) { 
    map.addControl(drawControls[key]); 
} 

다음 Draw Feature Example을 바탕으로, 당신은 가서 당신의 컨트롤을 추가 할 수 있습니다 자신을 마크 업하십시오. 컨트롤을 변경하는 각 요소에 대해 toggleControl 함수를 호출하는 onClick 처리기를 추가합니다. 또한 jQuery를 통해 클릭 핸들러를 첨부 할 수 있지만, 본질적으로,이 작품 : 당신은이 in action here (테스트 사용자, 필요 진짜 전자 우편에 가입)과 code on GitHub를 찾아 볼 수 있습니다

<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> 
    <!-- add more elements here, based on which draw modes you added --> 
</ul> 

.