eine CustomOverlay Klasse in BingMaps Api Erweiterung Typoskript mit

Question

Ich bin ein Typoskript Anwendung umgewandelt werden, die Bing Maps api 7 zu verwendet.
Als Teil der Migration möchte ich die tatsächliche Overlay-Komponente in eine Typoskript-Klasse konvertieren, die die Klasse Microsoft.Maps.CustomOverlay implementiert.
Wie in diesem Beitrag in der msdn Foren error trying to create an overlay erklärt, ich bin mit einem Ladefehler konfrontiert, den ich nicht lösen kann, und ich verstehe nicht, wenn das Problem die typoskript kompilierten Dateien geladen wird, bevor die Bing Maps API Bibliothek geladen wird und wie man diesen Fehler entfernt.

Fehle ich etwas?

Answer 1

Ich habe eine Reihe von Modulen erstellt, die die CustomOverlay-Klasse in TypeScript ohne Probleme erweitern. Hier ist eine, die ich erstellt habe. Hier

ist das Modul Code:

/// <reference path="MicrosoftMaps/Microsoft.Maps.d.ts"/> 

/** 
* The options that specify how to render a ground overlay on the map. 
*/ 
interface IGroundOverlayOptions extends Microsoft.Maps.ICustomOverlayOptions { 
    /** A background color that fills the bounding box area beneath the ground overlay. */ 
    backgroundColor?: string | Microsoft.Maps.Color; 

    /** The bounding box to anchor the ground overlay to. */ 
    bounds: Microsoft.Maps.LocationRect; 

    /** The URL to the image to anchor to the map as a ground overlay. */ 
    imageUrl: string; 

    /** The opacity of the ground overlay image. */ 
    opacity?: number; 

    /** An angle in degrees to rotate the overlay in a counter-clockwise direction where 0 = north, 90 = west, 180 = south, 270 = east */ 
    rotation?: number; 

    /** A boolean value indicating if the ground overlay is visible or not. */ 
    visible?: boolean; 
} 

/** 
* A map overlay that binds an image to a bounding box area on the map. 
*/ 
class GroundOverlay extends Microsoft.Maps.CustomOverlay { 

    /*********************************** 
    * Private Properties 
    ***********************************/ 

    /** The options used to define how the ground overlay is rendered. */ 
    private _options: IGroundOverlayOptions = { 
     beneathLabels: true, 
     backgroundColor: 'transparent', 
     bounds: null, 
     imageUrl: null, 
     opacity: 1, 
     rotation: 0, 
     visible: true 
    }; 

    /** The image DOM element that is used to render the ground overlay. */ 
    private _img: HTMLImageElement; 

    private _mapViewChangeEvent: Microsoft.Maps.IHandlerId; 

    /*********************************** 
    * Constructor 
    ***********************************/ 

    /** 
    * @constructor 
    * @param options The options used to render the ground overlay. 
    */ 
    constructor(options: IGroundOverlayOptions) { 
     super({ 
      beneathLabels: (typeof options.beneathLabels === 'boolean') ? options.beneathLabels : true 
     }); 

     this.setOptions(options); 
    } 

    /*********************************** 
    * Public Properties 
    ***********************************/ 

    /** Optional property to store any additional metadata for this layer. */ 
    public metadata: any; 

    /*********************************** 
    * Public functions 
    ***********************************/ 

    /** 
    * Clears the ground overlay. 
    */ 
    public clear() { 
     //Reset the options back to the defaults. 
     this._options = { 
      backgroundColor: 'transparent', 
      bounds: null, 
      imageUrl: null, 
      opacity: 1, 
      rotation: 0, 
      visible: true 
     }; 

     this.setHtmlElement(null); 
    } 

    /** 
    * Gets the background color of the ground overlay. 
    * @returns The background color of the ground overlay. 
    */ 
    public getBackgroundColor(): string | Microsoft.Maps.Color { 
     return this._options.backgroundColor; 
    } 

    /** 
    * Gets the bounding box that the ground overlay is bounded to. 
    * @returns The bounding box that the ground overlay is bounded to. 
    */ 
    public getBounds(): Microsoft.Maps.LocationRect { 
     return this._options.bounds; 
    } 

    /** 
    * Gets the url to the gorund overlay image. 
    * @returns The url to the gorund overlay image. 
    */ 
    public getImageUrl(): string { 
     return this._options.imageUrl; 
    } 

    /** 
    * Gets the opacity of the ground overlay. 
    * @returns The opacity of the ground overlay. 
    */ 
    public getOpacity(): number { 
     return this._options.opacity; 
    } 

    /** 
    * Gets the rotation of the ground overlay. 
    * @returns The rotation of the ground overlay. 
    */ 
    public getRotation(): number { 
     return this._options.opacity; 
    } 

    /** 
    * Gets a boolean indicating if the ground overlay is visible or not. 
    * @returns A boolean indicating if the ground overlay is visible or not. 
    */ 
    public getVisible(): boolean { 
     return this._options.visible; 
    } 

    /** 
    * Sets the options used to render the ground overlay. 
    * @param options The options used to render the ground overlay. 
    */ 
    public setOptions(options: IGroundOverlayOptions): void { 
     if (options && typeof options.beneathLabels === 'boolean') { 
      this._options.beneathLabels = options.beneathLabels; 
     } 

     if (typeof options.backgroundColor !== 'undefined') { 
      this._options.backgroundColor = options.backgroundColor; 
     } 

     if (typeof options.opacity === 'number') { 
      this._options.opacity = options.opacity; 
      if (this._img) { 
       this._img.style.opacity = this._options.opacity.toString(); 
      } 
     } 

     if (typeof options.rotation === 'number') { 
      this._options.rotation = options.rotation; 
      this._rotateGroundOverlay(); 
     } 

     var reposition = false; 

     if (typeof options.visible === 'boolean') { 
      this._options.visible = options.visible; 
      if (this._img) { 
       if (options.visible) { 
        this._img.style.display = ''; 
        reposition = true; 
       } else { 
        this._img.style.display = 'none'; 
       } 
      } 
     } 

     if (options.bounds instanceof Microsoft.Maps.LocationRect) { 
      this._options.bounds = options.bounds; 
      reposition = true; 
     } 

     if (typeof options.imageUrl !== 'undefined') { 
      this._options.imageUrl = options.imageUrl; 
      this._loadGroundOverlayImage(); 
     } 

     if (reposition) { 
      this._repositionGroundOverlay(); 
     } 
    } 

    /*********************************** 
    * Inherited Events 
    ***********************************/ 

    /** 
    * The event logic that processes when the ground overlay is added to the map. 
    */ 
    public onAdd(): void { 
     this._loadGroundOverlayImage(); 
    } 

    /** 
    * The event logic that processes when the ground overlay is initially loaded. 
    */ 
    public onLoad(): void { 
     this._repositionGroundOverlay(); 

     this._mapViewChangeEvent = Microsoft.Maps.Events.addHandler(this.getMap(), 'viewchange',() => { this._repositionGroundOverlay() }); 
    } 

    /** 
    * The event logic that processes when the ground overlay is removed from the map. 
    */ 
    public onRemove(): void { 
     if (this._mapViewChangeEvent) { 
      Microsoft.Maps.Events.removeHandler(this._mapViewChangeEvent); 
     } 
     this.setHtmlElement(null); 
    } 

    /*********************************** 
    * Private Functions 
    ***********************************/ 

    /** 
    * Loads the ground overlay image. 
    */ 
    private _loadGroundOverlayImage(): void { 
     if (this._options.imageUrl) { 
      //Create an image element that will be used as the overlay. 
      this._img = document.createElement('img'); 
      this._img.src = this._options.imageUrl; 
      this._img.style.width = '100%'; 
      this._img.style.height = '100%'; 
      this._img.style.position = 'absolute'; 
      this._img.style.display = (this._options.visible) ? '' : 'none'; 

      if (this._options.backgroundColor) { 
       if (this._options.backgroundColor instanceof Microsoft.Maps.Color) { 
        this._img.style.backgroundColor = (<Microsoft.Maps.Color>this._options.backgroundColor).toRgba(); 
       } else { 
        this._img.style.backgroundColor = <string>this._options.backgroundColor; 
       } 
      } 

      if (typeof this._options.opacity === 'number') { 
       this._img.style.opacity = this._options.opacity.toString(); 
      } 

      this._rotateGroundOverlay(); 

      this.setHtmlElement(this._img); 
     } else { 
      this.setHtmlElement(null); 
     } 
    } 

    /** 
    * Rotates the ground overlay image. 
    */ 
    private _rotateGroundOverlay(): void { 
     if (this._img) { 
      var rotation = this._options.rotation; 
      if (!rotation) { 
       rotation = 0; 
      } 

      rotation = rotation; 

      var rotateTransform = 'rotate(' + rotation + 'deg)'; 
      this._img.style['-webkit-transform'] = rotateTransform; 
      this._img.style['-moz-transform'] = rotateTransform; 
      this._img.style['-ms-transform'] = rotateTransform; 
      this._img.style['-o-transform'] = rotateTransform; 
      this._img.style['transform'] = rotateTransform; 
     } 
    } 

    /** 
    * Repositions the ground overlay when the map moves. 
    */ 
    private _repositionGroundOverlay(): void { 
     var map = this.getMap(); 

     if (map && this._img && this._options.bounds && this._options.visible) { 
      //Streach and position the image based on the bounding box pixel coordinates. 
      var topLeft = <Microsoft.Maps.Point>map.tryLocationToPixel(this._options.bounds.getNorthwest(), Microsoft.Maps.PixelReference.control); 
      var bottomRight = <Microsoft.Maps.Point>map.tryLocationToPixel(this._options.bounds.getSoutheast(), Microsoft.Maps.PixelReference.control); 

      this._img.style.left = topLeft.x + 'px'; 
      this._img.style.top = topLeft.y + 'px'; 
      this._img.style.width = (bottomRight.x - topLeft.x) + 'px'; 
      this._img.style.width = (bottomRight.x - topLeft.x) + 'px'; 
      this._img.style.height = (bottomRight.y - topLeft.y) + 'px'; 
     } 
    } 
} 

Microsoft.Maps.moduleLoaded('GroundOverlaysModule'); 

Hier ist die Web-Anwendung, die diese implementiert:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 
    <style> 
     html, body { 
      height: 100%; 
      margin: 0; 
      padding: 0; 
     } 

     #myMap { 
      height: 100%; 
     } 
    </style> 
</head> 
<body> 
    <div id="myMap"></div> 
    <script> 
    var map; 
    var groundOverlay; 

    function initMap() { 
     map = new Microsoft.Maps.Map('#myMap', { 
      credentials: 'Your Bing Maps Key', 
      zoom: 13, 
      center: new Microsoft.Maps.Location(40.740, -74.18) 
     }); 

     Microsoft.Maps.registerModule('GroundOverlaysModule', '../scripts/GroundOverlayModule.js'); 
     Microsoft.Maps.loadModule('GroundOverlaysModule', function() { 
      groundOverlay = new GroundOverlay({ 
       bounds: Microsoft.Maps.LocationRect.fromEdges(40.773941, -74.22655, 40.712216, -74.12544), 
       imageUrl: 'https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg' 
      }); 
      map.layers.insert(groundOverlay); 
     }); 
    } 
    </script> 

    <script async defer src="https://bing.com/api/maps/mapcontrol?callback=initMap"></script> 
</body> 
</html>