首页 / 浏览问题 / WebGIS / 问题详情
通过TileSuperMapRest添加的图层如何点击获取属性信息
22EXP 2023年10月06日
通过ol.source.TileSuperMapRest添加的图层,如何通过点击事件获取某一点的属性信息

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();

希望能够帮助到您!

735EXP 2023年10月07日
请问有完整的示例吗,
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.字段名获取该图层的属性信息

...