使用pg_featureserv+Mapbox GL JS展示选中要素时几何不显示的问题

使用pg_featureserv结合Mapbox GL JS实现地图要素搜索展示，当前搜索下拉列表正常显示，且能通过fitBounds定位到要素位置，但选中的要素几何图形无法在地图上显示。现有代码如下：

var myLayer = {
        "type": "FeatureCollection",
        "features": []
        };

$( function() {
        $("#tags").autocomplete({
            source: function(request, response) {
                    var url = "http://localhost:9000/functions/postgisftw.address_query/items.json?partialstr=";
                    var q = encodeURI(request.term);
                    $.get(url+q, function(data) {
                        response(data.features.map(function(d) {
                            return {
                                "value": d["properties"]["value"],
                                "geom": d["geometry"]
                            }
                        }));
                    });
                },
                minLength: 2,
                select: function(event, ui) {
                    myLayer.features = [ui.item];
                    map.fitBounds(turf.bbox(ui.item.geom));
                }
            });
        });
  
map.on('load', function() {
            map.addSource('myLayer', {
                "type": "geojson",
                "data": myLayer
            });
map.addLayer({
        'id': 'parcel',
        'type': 'fill',
        'source': 'myLayer',
        'paint': {
            'fill-color': '#0080ff',
            'fill-opacity': 0.5
                }
            });
map.addLayer({
        'id': 'outline',
        'type' : 'line',
        'source' : 'myLayer',
        'layout' : {},
        'paint': {
        'line-color':'#000'
            }
            });
        });

问题原因 #

1. GeoJSON格式不标准：构造的ui.item缺少GeoJSON Feature必需的type: "Feature"字段，且几何属性用了自定义的geom而非标准的geometry字段，Mapbox无法识别为有效要素。
2. 数据源未手动更新：直接修改myLayer对象后，Mapbox GL JS不会自动监听对象变化，必须调用数据源的setData方法才能触发地图重新渲染。

修改后的代码 #

var myLayer = {
        "type": "FeatureCollection",
        "features": []
        };

$( function() {
        $("#tags").autocomplete({
            source: function(request, response) {
                    var url = "http://localhost:9000/functions/postgisftw.address_query/items.json?partialstr=";
                    var q = encodeURI(request.term);
                    $.get(url+q, function(data) {
                        response(data.features.map(function(d) {
                            // 返回标准GeoJSON Feature结构，保留value用于下拉显示
                            return {
                                "type": "Feature",
                                "value": d["properties"]["value"],
                                "geometry": d["geometry"],
                                "properties": d["properties"]
                            }
                        }));
                    });
                },
                minLength: 2,
                select: function(event, ui) {
                    myLayer.features = [ui.item];
                    // 手动刷新Mapbox数据源
                    map.getSource('myLayer').setData(myLayer);
                    map.fitBounds(turf.bbox(ui.item));
                }
            });
        });
  
map.on('load', function() {
            map.addSource('myLayer', {
                "type": "geojson",
                "data": myLayer
            });
map.addLayer({
        'id': 'parcel',
        'type': 'fill',
        'source': 'myLayer',
        'paint': {
            'fill-color': '#0080ff',
            'fill-opacity': 0.5
                }
            });
map.addLayer({
        'id': 'outline',
        'type' : 'line',
        'source' : 'myLayer',
        'layout' : {},
        'paint': {
        'line-color':'#000'
            }
            });
        });

关键修改点 #

• 在source回调的map方法中，将返回对象调整为标准GeoJSON Feature格式，包含type、geometry、properties字段，同时保留value用于下拉展示。
• 在select事件中添加map.getSource('myLayer').setData(myLayer)，手动刷新数据源触发地图渲染。

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