персонализирани контроли openlayers 3 в машинопис

Кодът 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.

Ето част от кода за карта на отворени слоеве в машинопис:

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.

Благодаря много предварително за всяка помощ


typescript javascript openlayers-3
person mk_yo    schedule 19.09.2014    source източник

Отговори (3)


arrow_upward
1
arrow_downward

Някой знае ли какво е еквивалентно ако 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);

Използвайте extends в класовете на TypeScript:

class RotateNorthControl extends openLayers.control.Control

Ще трябва да преосмислите целта на RotateNorthControl от функция да бъде клас.

person basarat    schedule 19.09.2014
comment
Благодаря ви за отговора! Знаете ли как мога да създам инстанция на клас RotateNorthControl тук: контроли: openLayers.control.defaults().extend([ new RotateNorthControl(???) ]) - person mk_yo; 19.09.2014

arrow_upward
7
arrow_downward

Пример за персонализиран контрол с 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());
    }

}
person Héctor    schedule 20.02.2019

arrow_upward
0
arrow_downward

Създайте нов клас (като отделен 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);
    };

}

След това импортирайте тази контрола във вашия компонент - изобщо не е нужно да подавате аргументи на конструктора.

person spaceman    schedule 24.12.2020
comment
здравейте, получавам тази грешка, докато използвам горния клас в моя ъглов проект event.element.setMap не е функция - person Tarang Rathod; 08.03.2021