使用openlayers和typescript類

Question

/// <reference path="openlayers.d.ts" />

class MapComponent {
    element: HTMLElement;
    map: OpenLayers.Map;

    constructor(element: HTMLElement) {
        // Setup our map object
        this.element = element;
        this.map = new OpenLayers.Map(this.element);
    }

    init() {
        // Setup our two layer objects
        var osm_layer_map = new OpenLayers.Layer.OSM("OSM");

        // Add layers to the map
        this.map.addLayers([osm_layer_map]);

        // Add a layer switcher control
        this.map.addControl(new OpenLayers.Control.LayerSwitcher({}));

        // Zoom the map to the max extent
        if (!this.map.getCenter()) {
            this.map.zoomToMaxExtent();
        }
    }
}

window.onload = () => {
    var el = document.getElementById('map');
    var mc = new MapComponent(el);
    mc.init();
}

我有上面的代碼來處理一個只有1個ID的簡單HTML文件，'map'的樣式：高度和寬度@ 500px。

我已經嘗試了其他幾種方法來顯示地圖，但到目前為止，我得到的只是一個白頁（空白）。

任何人都能指出我正確的方向嗎？

到目前為止解決方案：

• 使用具有就緒功能的jquery

• 使用直接來自html， <script><script/>的調用替換window.onload

• 將document.getElementById()放在新的OpenLayers.Map(here); 第一次創建this.map

• 在上方和下方放置window.onload調用（當前）

• 使用export class或public init()或兩者

截至目前，我只是想讓它發揮作用。

Answer 1

似乎使用提供的元素創建地圖並稍后定義選項不起作用。

而是使用選項初始化地圖

    var options = {
        projection: "EPSG:3857",
        maxExtent: new OpenLayers.Bounds(-200000, -200000, 200000, 200000),
        center: new OpenLayers.LonLat(-12356463.476333, 5621521.4854095)
    };

    this.map = new OpenLayers.Map(this.element, options);

或者在init方法的末尾調用this.map.render(this.element) 。

還要確保你的div實際上是可見的並且指定了一些大小，否則它可能不可見......