二十一、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),
          false
        );
 handleRotateNorth() {
        this.getMap().getView().setRotation(0);
      }

如果style里面设置了scoped，样式代码这里需要使用样式穿透，否则不会生效。

::v-deep #map {
  .rotate-north {
    top: 65px;
    left: 0.5em;
  }
  .ol-touch .rotate-north {
    top: 80px;
  }
}

完整代码：

<template>
  <div class="box">
    <h1>自定义控件</h1>
    <div id="map"></div>
  </div>
</template>

<script>
import Map from "ol/Map.js";
import OSM from "ol/source/OSM.js";
import TileLayer from "ol/layer/Tile.js";
import View from "ol/View.js";
import { Control, defaults as defaultControls } from "ol/control.js";
export default {
  name: "",
  components: {},
  data() {
    return {
      map: null,
    };
  },
  computed: {},
  created() {},
  mounted() {
    class RotateNorthControl extends Control {
      /**
       * @param {Object} [opt_options] Control options.
       */
      constructor(opt_options) {
        const options = opt_options || {};

        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({
          element: element,
          target: options.target,
        });

        button.addEventListener(
          "click",
          this.handleRotateNorth.bind(this),
          false
        );
      }

      handleRotateNorth() {
        this.getMap().getView().setRotation(0);
      }
    }

    this.map = new Map({
        controls: defaultControls().extend([new RotateNorthControl()]),
      layers: [
        new TileLayer({
          source: new OSM(),
        }),
      ],
      target: "map",
      view: new View({
        center: [0, 0],
        zoom: 3,
        rotation: 1,
      }),
    });
  },
  methods: {

  },
};
</script>

<style lang="scss" scoped>
#map {
  width: 100%;
  height: 500px;
}
.box {
  height: 100%;
}

::v-deep #map {
  .rotate-north {
    top: 65px;
    left: 0.5em;
  }
  .ol-touch .rotate-north {
    top: 80px;
  }
}

</style>