Openlayers：在单个页面上具有多个地图/视图的单击事件使用for循环

Question

我正在尝试将一个包含多个地图的页面（一个包含一组路由的所有页面，每个路由一个的页面）放在一起，每个页面都放在不同的（Bootstrap）选项卡中。我通过重复并独立地给每个地图分配我想要的click和pointermove事件，来使用最重复的代码，但是理想情况下，我会以某种循环的方式来分配它们。

我的尝试是我在下面粘贴的内容，但是可以使用，但仅适用于最终地图-如果更改地图的顺序，则任何一张都可以使用，但前提是最后一张。 this other question being the closest找不到我所寻找的方向，尽管我无法充分利用所提供的答案，但提到了仅在最后一张地图上工作的相同问题。 是否有办法遍历这些事件并使它们在多个视图/地图上工作？

非常感谢任何方向！

Javascript：

//----------/MAP 0/----------//

var myView0 = new ol.View({
    center: ol.proj.fromLonLat([-87.068669, 8.470072]),
    zoom: 3,
});

var map0 = new ol.Map({
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        }),
        vectorLayerJNY10,
        vectorLayerJNY11,
        vectorLayerJNY12,
        hoverLayers['route'],
    ],
    target: 'map0',
    view: myView0,
});

//----------/MAP 1/----------//

var myView1 = new ol.View({
    center: ol.proj.fromLonLat([-94.803044, 36.719405]),
    zoom: 3.5,
});

var map1 = new ol.Map({
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        }),
        vectorLayerJNY10,
        hoverLayers['route'],
    ],
    target: 'map1',
    view: myView1,
});

//----------/MAP 2/----------//

var myView2 = new ol.View({
    center: ol.proj.fromLonLat([-114.778097, 32.698996]),
    zoom: 4,
});

var map2 = new ol.Map({
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        }),
        vectorLayerJNY11,
        hoverLayers['route'],
    ],
    target: 'map2',
    view: myView2
});

//----------/MAP 3/----------//

var myView3 = new ol.View({
    center: ol.proj.fromLonLat([-93.988196, 19.253431]),
    zoom: 4 
});

var map3 = new ol.Map({
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        }),
        vectorLayerJNY12,
        hoverLayers['route'],
    ],
    target: 'map3',
    view: myView3
});

var maps = [map0, map1, map2, map3];
var views = [myView0, myView1, myView2, myView3]

var mapOnClick = function (event) {
    if (event.map.hasFeatureAtPixel(event.pixel) === true) {
        var name = event.map.forEachFeatureAtPixel(event.pixel, function(feature) {
            return feature.get('name');
        })
        var coordinate = event.coordinate;
        content.innerHTML = name;
        olay.setPosition(coordinate);
    } else {
        olay.setPosition(undefined);
        closer.blur();
    }
};

var elmHover = function(evt) {
    if (evt.dragging) {
        return;
    }
    var pixel = evt.map.getEventPixel(evt.originalEvent);
    var map = elem;
    hover(pixel, map);
};

var cursor = function(evt) {
    elem.getTargetElement().style.cursor = elem.hasFeatureAtPixel(evt.pixel) ? 'pointer' : '';
};

var mapResize = function(event){
    setTimeout(function() {
        elem.updateSize();
    }, 200);
};

for(var i = 0; i < maps.length; i++){
    var elem = maps[i];

    var container = document.getElementById('popup' + i);
    var content = document.getElementById('popup-content' + i);
    var closer = document.getElementById('popup-closer' + i);

    var overlays = [];
    overlays[i] = new ol.Overlay({
        element: container,
        autoPan: true,
        autoPanAnimation: {
            duration: 250
        }
    });
    elem.addOverlay(overlays[i]);

    olay = overlays[i];
    view = views[i];

    elem.on('pointermove', elmHover);

    elem.on('singleclick', mapOnClick);

    elem.on('pointermove', cursor);

    closer.onclick = function() {
        layover.setPosition(undefined);
        closer.blur();
        return false;
    };

    $('.nav-tabs').on('shown.bs.tab', mapResize)

    $('.nav-tabs').on('hide.bs.tab', function(event){
        elem.setView(view);
        olay.setPosition(undefined);
    });
}

HTML（以防万一：3）：

<ul class="nav nav-tabs nav-justified" role="tablist">
    <li class="nav-item" >
        <a class="nav-link active" data-toggle="tab" href="#About">About</a>
    </li>
    <li class="nav-item" >
        <a class="nav-link" data-toggle="tab" href="#Journey-I">Journeys I</a>
    </li>
    <li class="nav-item" >
        <a class="nav-link" data-toggle="tab" href="#Journey-II">Journey II</a>
    </li>
    <li class="nav-item" >
        <a class="nav-link" data-toggle="tab" href="#Journey-III">Journey III</a>
    </li>
</ul>

<div class="tab-content">
    <div id="About" class="tab-pane fade show active" role="tabpanel">
        <h3>About</h3>

        <div id="map0" class="map"></div>

        <div id="popup0" class="ol-popup">
            <a href="#" id="popup-closer0" class="ol-popup-closer"></a>
            <div id="popup-content0"></div>
        </div>

    </div>

    <div id="Journey-I" class="tab-pane fade" role="tabpanel">
        <h3>Journey I</h3>

        <div id="map1" class="map"></div>

        <div id="popup1" class="ol-popup">
            <a href="#" id="popup-closer1" class="ol-popup-closer"></a>
            <div id="popup-content1"></div>
        </div>

    </div>

    <div id="Journey-II" class="tab-pane fade" role="tabpanel">
        <h3>Journey II</h3>

        <div id="map2" class="map"></div>

        <div id="popup2" class="ol-popup">
            <a href="#" id="popup-closer2" class="ol-popup-closer"></a>
            <div id="popup-content2"></div>
        </div>

    </div>

    <div id="Journey-III" class="tab-pane fade" role="tabpanel">
        <h3>Journey III</h3>

        <div id="map3" class="map"></div>

        <div id="popup3" class="ol-popup">
            <a href="#" id="popup-closer3" class="ol-popup-closer"></a>
            <div id="popup-content3"></div>
        </div>

    </div>

    <script src="{{ url_for('static', filename='JS/OLmap_ajall.js') }}" type="text/javascript"></script>

</div>

Answer 1

就像您检查的问题中所说的，这是上下文的问题。

在每个事件的处理程序中，您正在使用在循环上获取值的变量elem，olay，view。问题在于，当事件发生时，这些变量的值将引用它们各自数组的最后一个映射，覆盖和视图。

有几种解决方法。我建议您使用函数[bind）的JavaScript - function bind方法。

var mapOnClick = function (event) {
    if (this.map.hasFeatureAtPixel(event.pixel) === true) {
        var name = this.map.forEachFeatureAtPixel(event.pixel, function(feature) {
            return feature.get('name');
        })
        var coordinate = event.coordinate;
        this.content.innerHTML = name;
        this.overlay.setPosition(coordinate);
    } else {
        this.overlay.setPosition(undefined);
        this.closer.blur();
    }
};

var elmHover = function(evt) {
    if (evt.dragging) {
        return;
    }
    var pixel = this.map.getEventPixel(evt.originalEvent);
    // var map = elem; <- what is this for?
    hover(pixel, this.map); // <- this function is not defined, look out
};

var cursor = function(evt) {
    this.map.getTargetElement().style.cursor = 
        this.map.hasFeatureAtPixel(evt.pixel) ? 'pointer' : '';
};

var mapResize = function(event){
    setTimeout(function() {
        this.map.updateSize();
    }, 200);
};

var closerOnClick = function() {
    this.overlay.setPosition(undefined); // I am guessing is overlay
    this.closer.blur();
    return false;
}

var onHide = function(event){
    this.map.setView(this.view); // <- don't understand this
    this.overlay.setPosition(undefined);
}

var contexts = [
    { map: map0, view: myView0 },
    { map: map1, view: myView1 },
    { map: map2, view: myView2 },
    { map: map3, view: myView3 }
];

for(var i = 0; i < contexts.length; i++){
    contexts[i].container = document.getElementById('popup' + i);
    contexts[i].content = document.getElementById('popup-content' + i);
    contexts[i].closer = document.getElementById('popup-closer' + i);
    contexts[i].overlay = new ol.Overlay({
        element: contexts[i].container,
        autoPan: true,
        autoPanAnimation: {
            duration: 250
        }
    });
    contexts[i].map.addOverlay(contexts[i].overlay);
    contexts[i].mapOnClick = mapOnClick.bind(contexts[i]);
    contexts[i].elmHover = elmHover.bind(contexts[i]);
    contexts[i].cursor = cursor.bind(contexts[i]);
    contexts[i].mapResize = mapResize.bind(contexts[i]);

    contexts[i].map.on('singleclick', contexts[i].mapOnClick);
    contexts[i].map.on('pointermove', contexts[i].cursor);
    contexts[i].closer.onclick = contexts[i].closerOnClick;

    // don't understand why these are in the loop
    $('.nav-tabs').on('shown.bs.tab', contexts[i].mapResize);
    $('.nav-tabs').on('hide.bs.tab', contexts[i].onHide);
}

注意：我对您的代码有些不了解，加上您在每次迭代中都初始化了overlays数组，并且变量名称错误。这是很长的代码，没有检查它，因此请注意可能存在一些问题。只供您提出想法。

我注意到您使用的是jQuery，也可以使用proxy保留上下文。尽管我注意到它已被弃用。