2014-09-19 35 views
1

JS代碼下面添加自定義控件的OpenLayers映射的OpenLayers 3自定義控件

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

但我使用打字稿,而不是JavaScript的項目工作,不知道如何在打字稿的工作碼。

這裏是對的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文件中添加一些內容。

Thanx提前非常的任何幫助

回答

2

有誰知道什麼是等價的,如果在window.app打字稿?

提示:Define a namespace for the application.

打字稿支持這一與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在打字稿類:

class RotateNorthControl extends openLayers.control.Control 

您將需要從其事是一個類中的函數重新思考RotateNorthControl目的。

+0

謝謝你的迴應!你知道如何創建一個RotateNorthControl類的實例: controls:openLayers.control.defaults()。extend([new RotateNorthControl(???)]) – 2014-09-19 09:08:00