openlayers 3 typescript中的自定义控件

openlayers 3 custom controls in typescript

本文关键字：自定义控件 typescript openlayers      更新时间：2023-09-26

下面的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;

有人知道typescript中的window.app等价物是什么吗？如何进行openLayers.inherits(RotateNorthControl(), openLayers.control.Control);？我只知道我需要在openlayers.d.ts文件中添加一些内容。

Thanx非常提前为任何帮助

带有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());
    }
}

有人知道如果window.app在typescript中是等价的吗？

提示：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（RotateOrthControl（），openLayers.control.control）；

在TypeScript类中使用extends：

class RotateNorthControl extends openLayers.control.Control

您需要重新思考RotateNorthControl的用途，从函数到类。

创建一个新类（作为一个单独的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);
    };
}

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

相关文章：