openlayers i query function (vector layer, postgresql spatial database)

The essence of the i query is to click on the map, and use the interface provided by openlayers to filter in the map or layer Source according to the current mouse click position, or go to the spatial database to do distance, range, and intersection queries to obtain features

1. Filter query in map or layer source

               

Map binding click event: map.on('click', queryPoint)

Query by click location:

function queryPoint(evt){
    var coordinate = evt.coordinate;
    var pixel = evt.pixel;

    var source=layer.getSource();//A vector layer source

    //Specify filter conditions, such as filtering only a certain layer
    var options = {
      
    }
    //map filter
    map.forEachFeatureAtPixel(pixel,function(f
    eatures){
      if(features){
        if(features.length>0){
           //Operate feature
        }
      }
    },options);

    var features=source.getFeaturesAtCoordinate(coordinate);   

    if(features){
        if(features.length>0){
           //Operate feature
        }
      }

}

api: source  map

 

2. postgresql query

  http request

function iQueryLine(evt) {
    var coordinate = evt.coordinate;
    var geom = new ol.geom.Point(coordinate);
    var geomStr = wktFormat.writeGeometry(geom);
    $.ajax({
        type: 'post',
        url: "/Gis/GetClickLine",
        data: { "geom": geomStr },
        dataType: "json",
        success: function (data) {
            if (data) {
                if (data.length > 0) {
                    //var coordinate = wktFormat.readGeometry(data[0].geom).getCoordinates();
                    var name = data[0].name;
                    var direction = data[0].direction;
                    if (!name) {
                        name = '';
                    }
                    if (!direction) {
                        direction = '';
                    }
                    content.innerHTML = '<table class="table table-bordered"><tbody><tr><td><b>名称</b></td><td>' + name + '</td></tr><tr><td><b>方向</b></td><td>' + direction + '</td></tr></tbody></table>';
                    overlay.setPosition(coordinate);
                    map.un('click', iQueryLine);
                    map.on('click', function () {
                        overlay.setPosition(undefined);
                    });
                }
            }
        }
    });
}

sql语句：sql="select st_astext(geom) as geom,linename,direction from tbtempline where st_intersects(st_setsrid(st_astext(st_buffer(st_geomfromtext('" + geom + "'),10)),3857),geom) limit 1";