class - 使用 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();
}

我有上面的一段代码来处理一个简单的 HTML 文件，该文件只有一个 ID，“ map ”，样式为:高度和宽度 @ 500 像素。

我已经尝试了其他几种方法来显示 map ，但到目前为止我得到的只是一个白页(空白)。

谁能指出我正确的方向？

目前尝试过的解决方案:

• 使用 jquery 和 ready 函数

• 替换 window.onload直接从 html 调用，<script><script/>

• 地点 document.getElementById()在新OpenLayers.Map(here);第一次创建时 this.map

• 放置 window.onload在上方和下方调用(当前)

• 使用导出类或公共(public)类 init()或两者兼而有之

到目前为止，我只希望它能正常工作。

Answer 1

似乎使用提供的元素创建 map 并稍后定义选项不起作用。

或者使用选项初始化 map

    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 实际上是可见的并且指定了一些大小，否则它可能不可见......