Javascript OpenLayers ol.Control.SelectFeature未定义

我在一个实时站点上可以很好地使用此地图，但只是尝试添加一些弹出窗口，如图所示：

然而，我得到

未捕获类型错误：无法读取未定义的属性“SelectFeature”

尝试为每个功能创建控件时

    <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script><link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">

瓦尔之家酒店=[
[51.3899'、-2.36414'、Spencers Belle Vue、巴斯、萨默塞特、BA1 5ER
']，
[51.3854'，-2.36025'，'Bladud Buildings，BATH，Somerset，BA1 5LS
'，
[51.3971'，-2.34538'，兰布里奇大厦，巴斯，萨默塞特，BA1 6RS
]，
]
var中心=Lonlat的其他项目（[-2.36,51.391]）；
变量视图=新的ol.view({
中心:中心,，
缩放：10//5
});
var特征=[]；
对于（var i=0；i

您链接了isOpenLayers 2的示例，在更高版本中无法重复使用任何OpenLayers 2代码，OpenLayers 5使用了选择交互，谢谢。在寻找示例时，几乎没有关于版本的信息。

<script >

    var houses=[

           [ '51.3899',  '-2.36414', '<div class="map-popup"><p>Spencers Belle Vue, BATH, Somerset, BA1 5ER</p></div>'] ,


           [ '51.3854',  '-2.36025', '<div class="map-popup"><p>Bladud Buildings, BATH, Somerset, BA1 5LS</p></div>'] ,            

           [ '51.3971',  '-2.34538', '<div class="map-popup"><p>Lambridge Buildings, BATH, Somerset, BA1 6RS</p></div>'] ,
                                ]
    var center = ol.proj.fromLonLat([-2.36, 51.391]);

    var view = new ol.View({
      center: center,
      zoom: 10 // 5
    });
    var features = [];
    for (var i = 0; i < houses.length; i++) {
        var item = houses[i]; 
        var iconFeature = new ol.Feature({
          geometry: new ol.geom.Point(ol.proj.transform([parseFloat(item[1]), parseFloat(item[0])], 'EPSG:4326', 'EPSG:3857')),
          description : item[2]
        });      
        features.push(iconFeature);
    }

    var iconStyle = new ol.style.Style({
      image: new ol.style.Icon( ({
        anchor: [0.45, 1],
        anchorXUnits: 'fraction',
        anchorYUnits: 'fraction',
        opacity: 0.75,
        src: 'https://example.com/themes/pheads/resources/img/icons/pointer_original.svg',
        color: '#8959A8',
          crossOrigin: 'anonymous',
          imgSize:[120,120],
          scale:0.25
      }))
    }); 

    var vectorSource = new ol.source.Vector({
        features: features
    });


    var vectorLayer = new ol.layer.Vector({
      source: vectorSource,
      style: iconStyle,
    });

    var map = new ol.Map({
      target: 'map',
      view: view,
      layers: [
        new ol.layer.Tile({
            preload: 3,
          source: new ol.source.OSM()
        })

      ],

       loadTilesWhileAnimating: true,
    });

    map.addLayer(vectorLayer);

    var controls = {
        selector: new ol.Control.SelectFeature(vectorLayer, { onSelect: createPopup, onUnselect: destroyPopup })
    };
    map.addControl(controls['selector']);
    controls['selector'].activate();

    function createPopup(feature) {
        feature.popup = new ol.Popup.FramedCloud("pop",
            feature.geometry.getBounds().getCenterLonLat(),
            null,
            '<div class="markerContent">'+feature.attributes.description+'</div>',
            null,
            true,
            function() { controls['selector'].unselectAll(); }
        );
        //feature.popup.closeOnMove = true;
        map.addPopup(feature.popup);
    }

    function destroyPopup(feature) {
      feature.popup.destroy();
      feature.popup = null;
    }

</script>