Не удается добавить слой 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
            })
        });
    }
}

И javascript в моем HTML-коде:

    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 (веб-проекция меркатора) со слоями, используя другую проекцию.

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

, где невозможное преобразование, такое как полюс в веб-mercator, вызывает ошибку, котораяможно игнорировать:

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