我正在将使用 bing maps api 7 的打字稿应用程序转换为 8 。
作为迁移的一部分，我想将实际的Overlay Component转换为实现类 Microsoft.Maps.CustomOverlay 的typescript类。
正如msdn论坛error trying to create an overlay中的这篇文章所解释的那样，我面临着一个我无法解决的加载错误，我不明白问题是在bing maps api库之前是否加载了打字稿编译文件已加载以及如何删除此错误。
我错过了什么吗？
答案 0 :(得分：0)
我创建了许多模块，可以在TypeScript中扩展CustomOverlay类而不会出现任何问题。这是我创造的一个。
以下是模块代码：
/// <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');
以下是实现此目的的Web应用程序：
<!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>