打字稿中的 openlayers 3 自定义控件

Question

The js code below adds custom controls to 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
  })
});

But I'm working on project using TypeScript instead javascript, and don't know how to make that work in typescript code.

Here's some part of code for openlayers map in typescript:

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;

Does anyone know what is equivalent of window.app in typescript? And how to do openLayers.inherits(RotateNorthControl(), openLayers.control.Control); ? I only know that I need add something to the openlayers.d.ts file.

Thanx very much in advance for any help

Answer 1

A sample of custom control with typescript and 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());
    }

}

Answer 2

Does anyone know what is equivalent if window.app in typescript?

Hint : Define a namespace for the application.

Typescript supports this with the concept of module . So

JavaScript:

window.app = {};
var app = window.app;
app.RotateNorthControl = function(opt_options) {

would be TypeScript:

module app{
   export var RotateNorthControl = function(opt_options) {
   /// so on and so forth
}

how to do openLayers.inherits(RotateNorthControl(), openLayers.control.Control);

Use extends in TypeScript classes:

class RotateNorthControl extends openLayers.control.Control

You will need to rethink the purpose of RotateNorthControl from being a function to being a class.

Answer 3

Create a new class (as a separate TS-file) like so:

import { Control, defaults as defaultControls } from 'ol/control';
export class RotatControl extends Control {
    constructor() {
        super({});


        var button = document.createElement('button');
        button.innerHTML = 'N';

        var element = document.createElement('div');
        element.className = 'blahclass';
        element.appendChild(button);

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

        button.addEventListener('click', this.rotate.bind(this), false);
    }

    rotate() {
        super.getMap().getView().setRotation(0);
    };

}

Then import this control in your component - you dont't need t feed the constructor any arguments at all.