无法动态添加必应地图图层

Question

我正在尝试将必应地图图层添加到已初始化的地图中。我收到一个错误我无法理解。你知道出了什么问题吗？我正在使用OpenLayers 5.3.1。

TypeError: r is null[Weitere Informationen] map.js:1:677385
    •   a http://localhost:8080/map/map.js:1 
    •   inverse http://localhost:8080/map/map.js:1 
    •   I http://localhost:8080/map/map.js:1 
    •   transformInv_ http://localhost:8080/map/map.js:1 
    •   u http://localhost:8080/map/map.js:1 
    •   t http://localhost:8080/map/map.js:1 
    •   getTile http://localhost:8080/map/map.js:1 
    •   manageTilePyramid http://localhost:8080/map/map.js:1 
    •   prepareFrame http://localhost:8080/map/map.js:1 
    •   renderFrame http://localhost:8080/map/map.js:1 
    •   renderFrame_ http://localhost:8080/map/map.js:1 
    •   animationDelay_ http://localhost:8080/map/map.js:1 
    •   <anonym> self-hosted:974 

我的打字稿看起来像这样：

import Map from 'ol/Map';
import OlTileLayer from 'ol/layer/Tile';
import BingMaps from 'ol/source/BingMaps';
@injectable()
export class MapWrapper {
    private _map: Map;
    public getMap() {
        return this._map;
    }
    set map(value: Map) {
        this._map = value;
    }
    public createBingLayer(bingKey: string, style : string) : OlTileLayer {
        return new OlTileLayer({
            visible: true,
            preload: Infinity,
            source: new BingMaps({
                key: bingKey,
                imagerySet: style
            })
        });
    }
}

我的HTML中的javascript就是这样的：

    function addBingMap() {
      var realMap = map.mapWrapper.getMap();
      var bingLayer = map.mapHolder.createBingLayer("someAPIKey", "Road");
      //realMap.getLayers().insertAt(0, bingLayer);
      realMap.addLayer(bingLayer);
    }

更新

我

发现我看到的错误是由 BingMaps 磁贴重新投影到 EPSG：32632 引起的，我的所有其他图层都使用它。错误在 proj4 transformer(( 方法中引发。我已经为 ol 创建了一个错误票证，因为我认为它至少应该抛出有意义的错误消息，即使我无法将 BingMaps(Web 墨卡托投影(与使用其他投影的图层混合。

Answer 1

我无法重现错误，但由于 Bing 源在准备好使用之前异步验证 API 密钥，您可以尝试

function addBingMap() {
  var realMap = map.mapWrapper.getMap();
  var bingLayer = map.mapHolder.createBingLayer("someAPIKey", "Road");
  var onKey = bingLayer.getSource().on("change", function() {
    if (bingLayer.getSource().getState() == "ready") {
      ol.Observable.unByKey(onKey);
      realMap.addLayer(bingLayer);
    }
  });
} 

如果不可能的变换(如极点到 Web 墨卡托(会导致可以忽略的错误：

    var forward = ol.proj.getTransform(projection1, projection2);
    var inverse = ol.proj.getTransform(projection2, projection1);
    ol.proj.addCoordinateTransforms(
        projection1,
        projection2,
        function(coordinate) {
            try {
                return forward(coordinate)
            } catch (e) {
                return [undefined, undefined];
            }
        },
        function(coordinate) {
            try {
                return inverse(coordinate)
            } catch (e) {
                return [undefined, undefined];
            }
        }
    );

如果有效的直接转换失败，但可以使用中间投影使其工作：

    var forward1 = ol.proj.getTransform(projection1, intermediate);
    var forward2 = ol.proj.getTransform(intermediate, projection2);
    var inverse1 = ol.proj.getTransform(projection2, intermediate);
    var inverse2 = ol.proj.getTransform(intermediate, projection1);
    ol.proj.addCoordinateTransforms(
        projection1,
        projection2,
        function(coordinate) {
            try {
                return forward2(forward1(coordinate));
            } catch (e) {
                return [undefined, undefined];
            }
        },
        function(coordinate) {
            try {
                return inverse2(inverse1(coordinate));
            } catch (e) {
                return [undefined, undefined];
            }
        }
    );