Question

我正在尝试修改OpenLayers示例以添加我的自定义按钮，但我无法单击此按钮。我试过了所有的东西，但就好像点击事件无法附加到按钮上......问题出在哪里？我生气了。任何帮助将不胜感激！这是我的代码（很抱歉发布一个完整的例子，但我不能缩短它）：

<html>
    <head>
        <title>OpenLayers Editing Toolbar Example</title>

        <link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css" type="text/css">
        <link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css" type="text/css">
        <style type="text/css">
        #btnHiLite {  
        top: 50%;
        left: 3%;
        height: 10px;
        z-index: 3000;

        background: url('http://s11.postimg.org/s3u0s4pjj/marker.png') no-repeat center;
        padding: 5px 10px;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        border-radius: 8px;
        -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
        text-shadow: rgba(0,0,0,.4) 0 1px 0;
        color: #9c494e;
        font-size: 12px;
        font-family: Georgia, serif;
        text-decoration: none;
        vertical-align: middle;
    }
        </style>


        <script src="http://openlayers.org/api/OpenLayers.js"></script>
         <script type="text/javascript">
            var map, layer;

            function rotate_image() {
          alert("Button clicked!");
        }

            function init(){

        var btnHiLite = new OpenLayers.Control.Button({ 
          title: "click it to rotate image 90º",
          id: 'btnHiLite',
          trigger: rotate_image,
          type: OpenLayers.Control.TYPE_BUTTON
        });   

        var graphic = new OpenLayers.Layer.Image(
            'Document Page',
            "http://www.hdwallpapersinn.com/wp-content/uploads/2013/03/landscape_7.jpg",
            new OpenLayers.Bounds(-250, -100, 250, 100),
            new OpenLayers.Size(250, 100)
        );

                map = new OpenLayers.Map( 'map', {
                    controls: [new OpenLayers.Control.PanZoom(), btnHiLite]
                });

                map.addLayers([graphic]);
                map.zoomToMaxExtent();
            }
        </script>
    </head>
    <body onload="init()">
        <h1 id="title">Editing Toolbar Example</h1>

        <div id="tags">
            digitizing, point, line, linestring, polygon, editing
        </div>

        <p id="shortdesc">
            Demonstrate polygon, polyline and point creation and editing tools.
        </p>

        <div id="panel"></div>
        <div id="map" class="smallmap"></div>
    </body>
</html>

Answer 1

好的......我回答了自己的问题。我基本上需要：

1.-创建一个面板以在其中添加按钮

var panel = new OpenLayers.Control.Panel({defaultControl: btnHiLite});

2.-将按钮添加到面板

panel.addControls([btnHiLite]);

3.-将面板添加到地图

map = new OpenLayers.Map( 'map', {
    controls: [
        new OpenLayers.Control.PanZoom(), 
        panel]
});

这是正确的代码：jsfiddle.net/gilan/wR4Ee

Answer 2

我不喜欢OpenLayer自己的控制框架。用简单的html和jquery编写自己的方法要简单得多。

例如：http://jsfiddle.net/wR4Ee/111/

<div id="map"></div>
<div id="panel"><button id="testButton" class="btn btn-primary">TEST BUTTON</button></div>

$('#testButton').click(function(){
  console.log('click');
  map.getView().setZoom(map.getView().getZoom()+1); 
});

OpenLayers添加自定义按钮

2 个答案: