3

下面的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 代码中使用它。

这是打字稿中 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 文件中添加一些内容。

非常感谢您的帮助

4

3 回答 3

7

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

}
于 2019-02-20T09:49:56.187 回答
1

有谁知道打字稿中的window.app是什么？

暗示 ：Define a namespace for the application.

Typescript 通过module. 所以

JavaScript：

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

将是打字稿：

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

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

extends在 TypeScript 类中使用：

class RotateNorthControl extends openLayers.control.Control

你需要重新思考RotateNorthControl从一个函数到一个类的目的。

于 2014-09-19T07:03:31.313 回答
0

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

}

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

于 2020-12-24T09:28:26.357 回答