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

Question

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

/**
 * 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 地图的部分代码：

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;

有谁知道打字稿中的 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());
    }

}

Answer 2

有谁知道 typescript 中的 window.app 是什么？

提示：Define a namespace for the application.

Typescript 通过 module 的概念支持这一点。所以

JavaScript：

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

将是 TypeScript：

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

如何做openLayers.inherits(RotateNorthControl(), openLayers.control.Control);

在 TypeScript 类中使用 extends：

class RotateNorthControl extends openLayers.control.Control

您需要重新考虑 RotateNorthControl 的用途，从作为一个函数到作为一个类。

Answer 3

像这样创建一个新类（作为单独的 TS 文件）：

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);
    };

}

然后在你的组件中导入这个控件——你根本不需要给构造函数提供任何参数。