无法动态添加 BingMaps 图层

Question

我正在尝试将 BingMaps 图层添加到已初始化的地图中。我遇到了一个我无法理解的错误。你知道出了什么问题吗？我正在使用 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 创建了一个 bug 票，因为我认为它至少应该抛出一个有意义的错误消息，即使我不能使用另一个投影将 BingMaps（网络墨卡托投影）与图层混合。

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

如果不可能的转换（例如极点到网络墨卡托）导致可以忽略的错误：

    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];
            }
        }
    );