gpt4 book ai didi

class - 使用 openlayers 和 typescript 类

转载 作者:搜寻专家 更新时间:2023-10-30 21:14:40 45 4
gpt4 key购买 nike

/// <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()或两者兼而有之

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

最佳答案

似乎使用提供的元素创建 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 实际上是可见的并且指定了一些大小,否则它可能不可见......

关于class - 使用 openlayers 和 typescript 类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20793292/

45 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com