Question

通过ol.source.TileSuperMapRest添加的图层，如何通过点击事件获取某一点的属性信息

Answer 1

您好，以下是通过点击事件获取点位（图层）属性信息的示例：

function query() {
            var sqlParam = new ol.supermap.GetFeaturesBySQLParameters({
                queryParameter: {
                    name: "杭州亚运会场馆@hangzhou",
                },
                datasetNames: ["hangzhou:杭州亚运会场馆"],
                toIndex: -1,
            });

            new ol.supermap.FeatureService(urldata).getFeaturesBySQL(sqlParam, function (serviceResult) {
                var vectorSource = new ol.source.Vector({
                    features: (new ol.format.GeoJSON()).readFeatures(serviceResult.result.features),
                    wrapX: false
                });
                console.log(serviceResult.result.features);
                var pointStyle = new ol.style.Style({
                    image: new ol.style.Circle({
                        radius: 8,
                    })
                });

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

                // map.addLayer(resultLayer);

                var select = new ol.interaction.Select();
                map.addInteraction(select);

                select.on('select', function (e) {
                    if (e.selected.length > 0) {
                        var feature = e.selected[0];
                        var properties = feature.getProperties();
                        //设置显示的属性信息
                        content.innerHTML = '场馆名称: ' + properties.名称 + `<br/>` +
                            "比赛项目: " + properties.项目 + `<br/>` +
                            "场馆地址：" + properties.地址;
                        overlay.setPosition(feature.getGeometry().getCoordinates());
                    }
                });
                map.addOverlay(overlay);
            });
        }
        query();

希望能够帮助到您！

Comments

请问有完整的示例吗，

---

1个iserver中有很多个子图层，如何通过点击，获取这个子图层的属性呢

---

上面发的代码就是点击获取子图层属性的完整示例，地图和urldata的定义可以参考：SQL 查询 (supermap.io)

其中：

1、urldata为在iserver上发布的数据服务，name: "杭州亚运会场馆@hangzhou"中“杭州亚运会场馆”为子图层的名称，“hangzhou”为数据源名称

2、datasetNames: ["hangzhou:杭州亚运会场馆"]中“杭州亚运会场馆”为数据集名称，“hangzhou”为数据源名称。可以在iserver的数据服务页面里查看图层名和数据集名称：

3、content.innerHTML = '场馆名称: ' + properties.名称 + `<br/>` + "比赛项目: " + properties.项目 + `<br/>` + "场馆地址：" + properties.地址;  这里设置的是显示该图层的属性信息，“properties.名称”里的“名称”为属性表字段名，以此类推，通过properties.字段名获取该图层的属性信息