如何在OpenLayers中点击标记时弹出信息窗口？

核心修改思路 #

• 将上报信息绑定到每个标记的Feature属性中，点击时直接读取
• 统一创建一个矢量图层存放所有标记，避免重复创建图层
• 利用ol-ext的Popup组件实现弹窗展示（已引入ol-ext.css，无需额外资源）

完整修改代码 #

<link rel="stylesheet" href="~/css/ol.css">
<link rel="stylesheet" href="~/css/ol-ext.css">

<script src="~/js/ol.js"></script>

<div id="map" style="position: fixed; top: 62.5px; left: 0; bottom: 65px; right: 0; z-index:-1"></div>

<style>
    .ol-zoom {
        top: 2.5%;
    }
    /* 自定义弹窗样式可选 */
    .ol-popup-content {
        max-width: 300px;
    }
</style>

<script type="text/javascript">
    var layers = [new ol.layer.Tile({ source: new ol.source.OSM() })];

    var map = new ol.Map({
        target: 'map',
        view: new ol.View({
            zoom: 5,
            center: [166326, 5992663]
        }),
        interactions: ol.interaction.defaults({ altShiftDragRotate: false, pinchRotate: false }),
        layers: layers
    });

    // 创建统一的标记图层，不要在循环里重复创建
    const markersLayer = new ol.layer.Vector({
        source: new ol.source.Vector(),
        style: new ol.style.Style({
            image: new ol.style.Icon({
                anchor: [0.5, 1],
                src: 'https://ucarecdn.com/4b516de9-d43d-4b75-9f0f-ab0916bd85eb/marker.png'
            })
        })
    });
    map.addLayer(markersLayer);

    // 创建ol-ext弹窗实例
    const popup = new ol.Overlay.Popup({
        className: 'ol-popup',
        closeBox: true,
        onclose: function() {}
    });
    map.addOverlay(popup);

    // 地图点击事件处理
    map.on('click', function (e) {
        map.forEachFeatureAtPixel(e.pixel, function (feature, layer) {
            if (layer === markersLayer) {
                // 获取Feature绑定的上报数据
                const data = feature.getProperties();
                // 构建弹窗内容HTML
                const content = `
                    <div class="card">
                        <div class="card-header">
                            <h3><u>类别</u>: ${data.category}</h3><br />
                            <h5><u>标题</u>: ${data.title}</h5>
                        </div><br />
                        <div class="card-body">
                            <p>
                                <u>描述</u>: <br />${data.remarks}
                            </p><br />
                            <u>紧急状态</u>: ${data.statUrgence} <br />
                        </div>
                        <div class="card-footer">
                            ${data.path ? `<img src="${data.path}" style="max-width:100%;" alt="上报图片" />` : '无图片'}
                        </div>
                    </div>
                `;
                // 在点击位置打开弹窗
                popup.show(e.coordinate, content);
            }
        })
    })
</script>

@{ 
    if (Model != null)
    {
        foreach (var _Data in Model)
        {
            <script>
                // 创建标记Feature，并绑定上报数据
                var marker = new ol.Feature(new ol.geom.Point([parseFloat(@_Data.coordLat), parseFloat(@_Data.coordLong)]));
                marker.setProperties({
                    category: '@_Data.Category',
                    title: '@_Data.Title',
                    remarks: '@_Data.Remarks',
                    statUrgence: '@_Data.statUrgence',
                    path: '@_Data.path'
                });
                // 添加到统一的图层源中
                markersLayer.getSource().addFeature(marker);
            </script>
        }
    }
}

关键修改点说明 #

1. 统一图层管理：将标记图层的创建移到循环外，避免每次循环创建新图层，提升性能且确保点击判断准确。
2. 数据绑定：通过marker.setProperties()将上报信息存入Feature，点击时直接读取，无需额外DOM存储。
3. 弹窗实现：利用ol-ext的ol.Overlay.Popup组件快速实现弹窗，自动处理位置和关闭逻辑，也可根据需求自定义弹窗样式。
4. 图片展示：判断图片路径是否存在，存在则渲染图片，否则显示“无图片”提示。

内容的提问来源于stack exchange，提问作者David