在范围查询中,查询多个数据集时,如何实现在属性标签框里显示不同图片

0 投票

想实现交互式的显示图片,就是点击不同的点,显示不同的名称及图片

类似于这种

3月 11 分类:  80次浏览 | 用户: xx (4 分)

1个回答

0 投票

您好,可以通过for循环或者类似foreach这种特定库的语言去实现结果的遍历,在结果图层被点击的时候遍历点击的是哪个对象。然后在外部定义不同的风格popup弹窗,针对不同的结果选择对应弹窗。

您可以参考openlayers客户端的这个范例来实现https://iclient.supermap.io/examples/openlayers/editor.html#02_editFeatures

function pointermoveLinstener(e) {
        var select = false;
        map.forEachFeatureAtPixel(e.pixel, function (feature) {
            if (feature.getProperties().CAPITAL) {
                map.getTargetElement().style.cursor = 'pointer';
                var contentHTML = feature.getProperties().CAPITAL;
                content.innerHTML = contentHTML;
                overlay.setPosition(feature.getGeometry().getCoordinates());
                map.addOverlay(overlay);
                select = true
            }
        }, {
            hitTolerance: 10
        });
        if (!select) {
            map.getTargetElement().style.cursor = '';
            overlay.setPosition(undefined);
            map.removeOverlay(overlay);
        }
        if (isclearPoint) {
            helpTooltipElement.innerHTML = resources.text_selectMarkerToDelete;
            helpTooltip.setPosition(e.coordinate);
            helpTooltipElement.classList.remove('hidden');
            map.addOverlay(helpTooltip);
        } else {
            helpTooltip.setPosition(undefined);
            helpTooltipElement.classList.add('hidden');
        }
    }

相当于对你查询的结果再做遍历去查询鼠标对应的点。如果是用的其他客户端也可以参考这个范例来一步步实现,思路是一样的。只不过弹窗的文字换成img的src

3月 12 用户: 于浩 登峰造极 (5,662 分)
...