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中的直接电话替换window.onload，<script><script/>
首次创建document.getElementById()时将OpenLayers.Map(here);放入新this.map
将window.onload电话置于上方和下方（当前）
使用导出类或公共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实际上是可见的并且指定了一些大小，否则它可能不可见......

使用openlayers和typescript类

1 个答案: