二十一、openlayers官网示例Custom Controls解析——自定义控件扩展Control类

官网demo地址：

Custom Controls

这个示例讲的是如何自定义控件

首先创建了一个新的类继承了原本的Control，新增了一个button元素，然后调用了super方法将参数传给了父类。

 const button = document.createElement("button");
 button.innerHTML = "N";

 const element = document.createElement("div");
 element.className = "rotate-north ol-unselectable ol-control";
 element.appendChild(button);

然后调了super方法将参数传递给父类

 super({
          element: element,
          target: options.target,
        });

可以在node_moudles里面找到Control类的源码，看到父类需要的参数。

在点击事件里调用了openlayers的setRotation()方法控制视图倾斜角度。

 button.addEventListener(
          "click",
          this.handleRotateNorth.bind(this),