javascript - typescript 中的openlayers 3自定义控件

Question

下面的js代码为openlayers map 添加自定义控件

/**
 * Define a namespace for the application.
 */
window.app = {};
var app = window.app;


//
// Define rotate to north control.
//



/**
 * @constructor
 * @extends {ol.control.Control}
 * @param {Object=} opt_options Control options.
 */
app.RotateNorthControl = function(opt_options) {

  var options = opt_options || {};

  var anchor = document.createElement('a');
  anchor.href = '#rotate-north';
  anchor.innerHTML = 'N';

  var this_ = this;
  var handleRotateNorth = function(e) {
    // prevent #rotate-north anchor from getting appended to the url
    e.preventDefault();
    this_.getMap().getView().setRotation(0);
  };

  anchor.addEventListener('click', handleRotateNorth, false);
  anchor.addEventListener('touchstart', handleRotateNorth, false);

  var element = document.createElement('div');
  element.className = 'rotate-north ol-unselectable';
  element.appendChild(anchor);

  ol.control.Control.call(this, {
    element: element,
    target: options.target
  });

};
ol.inherits(app.RotateNorthControl, ol.control.Control);


//
// Create map, giving it a rotate to north control.
//


var map = new ol.Map({
  controls: ol.control.defaults({
    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
      collapsible: false
    })
  }).extend([
    new app.RotateNorthControl()
  ]),
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  renderer: exampleNS.getRendererFromQueryString(),
  target: 'map',
  view: new ol.View({
    center: [0, 0],
    zoom: 2,
    rotation: 1
  })
});

但我正在使用 TypeScript 而不是 javascript 进行项目，但不知道如何在 typescript 代码中使用它。

这是 typescript 中 openlayers map 的部分代码:

import openLayers = require('openLayers');

class OpenLayersMapProvider implements MapProvider {

    map: openLayers.Map;

    constructor(elementid: string, zoom: number = 8, tilesUrl?: string) {

            var RotateNorthControl = function (opt_options) {
            var options = opt_options || {};
            var anchor = document.createElement('a');
            anchor.href = '#rotate-north';
            anchor.innerHTML = 'BUTTON';

            var handleRotateNorth = function (e) {
                prevent #rotate-north anchor from getting appended to the url
                e.preventDefault();
               this_.getMap().getView().setRotation(0);
           };

            anchor.addEventListener('click', null, false);
        anchor.addEventListener('touchstart', null, false);

            var element = document.createElement('div');
            element.className = 'rotate-north ol-unselectable';
            element.appendChild(anchor);

            openLayers.control.Control.call(this, {
                element: element,
                target: this
            });


           //openLayers.inherits(RotateNorthControl(), openLayers.control.Control);




                layers = [new openLayers.layer.Tile({
                    source: new openLayers.source.XYZ({
                        url: tilesUrl + '/{z}/{y}/{x}'
                    })
                }),
                    this.vector, this.features]


            this.map = new openLayers.Map({
                target: elementid,
                controls: openLayers.control.defaults().extend([
                    new openLayers.control.FullScreen(),
                   , new RotateNorthControl(???)
                ]),
                interactions: openLayers.interaction.defaults().extend([this.select, this.modify]),
                layers: layers,
                view: new openLayers.View({
                    center: openLayers.proj.transform([9.66495667, 55.18794717], 'EPSG:4326', 'EPSG:3857'),
                    zoom: zoom
                })
            });

        source: openLayers.source.Vector;
        vector: openLayers.layer.Vector;
        features: openLayers.layer.Vector;


    }
    export = OpenLayersMapProvider;

有谁知道 typescript 中的 window.app 是什么？ openLayers.inherits(RotateNorthControl(), openLayers.control.Control);怎么做？我只知道我需要在 openlayers.d.ts 文件中添加一些内容。

非常感谢任何帮助

Answer 1

带有 typescript 和 ol3 的自定义控件示例

export class MyControl extends ol.control.Control {
    constructor() {
        super({});
        let button = document.createElement('button');
        button.type = 'button';
        button.className = 'ol-control';
        button.innerHTML = 'N';
        let element = document.createElement('div');
        element.className = 'ol-feature ol-control';
        element.appendChild(button);
        ol.control.Control.call(this, {
            element: element
        });
        button.addEventListener('click', () => this.click());
    }

    click() {
        console.log('click');
        console.log(this.getMap());
    }

}