使用 openlayers 和 typescript 类答案

【问题标题】：Working with openlayers and typescript classes使用 openlayers 和 typescript 类
【发布时间】：2013-12-27 00:58:59
【问题描述】：

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

我有上面的代码可以处理一个简单的 HTML 文件，它只有 1 个 ID，'map' 样式：高度和宽度 @ 500px。

我尝试了其他几种方法来显示地图，但到目前为止我得到的只是一个白页（空白）。

谁能指出我正确的方向？

目前尝试的解决方案：

使用带有就绪功能的 jquery
将window.onload替换为直接来自html的调用<script><script/>
首次创建this.map时将document.getElementById()放入新的OpenLayers.Map(here);中
在上方和下方调用window.onload（当前）
使用导出类或公共init() 或同时使用两者

到目前为止，我只想让它工作。

【问题讨论】：

标签： class typescript openlayers

【解决方案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 实际可见并指定了一些大小，否则它可能不可见...

【讨论】：