OpenLayers5实现点击地图查询要素信息

WebGIS开发中，点击查询是最常用的一种查询方式。本文从开源框架的角度，从前台到服务端到数据库等多个角度，多种方式实现点击查询。

1、map的click事件

该方法，通过鼠标在地图上点击的坐标，与当前矢量图层做相交分析查询，得到查询的要素及其所属的Layer对象

<template>
    <div>
        <div id="mapDiv"></div>
    </div>
</template>

<script>
    import 'ol/ol.css';
    import Map from 'ol/Map';
    import View from 'ol/View';
    import TileLayer from 'ol/layer/Tile';
    import OSM from 'ol/source/OSM';
    import {toLonLat,transform,transformExtent} from 'ol/proj';
    import VectorLayer from 'ol/layer/Vector';
    import VectorSource from 'ol/source/Vector';
    import Feature from 'ol/Feature';
    import Point from 'ol/geom/Point';
    import Style from 'ol/style/Style';
    import Fill from 'ol/style/Fill';
    import Stroke from 'ol/style/Stroke';
    import Image from 'ol/style/Image';
    import Icon from 'ol/style/Icon';

    import axios from 'axios'

    export default {
        name: "TestOL",
        data(){
            return{
                ol_map:''
            }
        },
        mounted:function(){
            var _this = this;

            //构建map
            var osmTileLayer = new TileLayer({
                source: new OSM()
            });
            this.ol_map = new Map({
                target: 'mapDiv',
                layers: [osmTileLayer],
                view: new View({
                    center: transform([130, 35],'EPSG:4326', 'EPSG:3857'),
                    zoom: 3
                })
            });


            //添加矢量图层
            var vectorSource = new VectorSource({
                features: []
            });
            var vectorLayer = new VectorLayer({
                source: vectorSource
            });
            _this.ol_map.getLayers().push(vectorLayer);

            var iconStyle = new Style({
                image:new Icon({
                    size:[30,30],
                    anchorXUnits: 'pixels',
                    anchorYUnits: 'pixels',
                    src:'/static/image/car_left.png'
                })
            });
            axios.get("http://localhost:8081/static/json/car.json").then(function(response){
                var res = response.data;
                for(var i=0; i<res.length; i++){
                    var feature = new Feature({
                        geometry: new Point(transform([res[i].lon, res[i].lat],'EPSG:4326', 'EPSG:3857')),
                        name:res[i].name,
                        lon:res[i].lon,
                        lat:res[i].lat
                    });
                    feature.setStyle(iconStyle);
                    vectorSource.addFeature(feature);
                }
            });

            this.ol_map.on('click',this.clickMapHandle);
        },
        methods:{
            clickMapHandle:function(event){
                var pixel = this.ol_map.getEventPixel(event.originalEvent);
                this.ol_map.forEachFeatureAtPixel(pixel, function (feature, layer) {
                    if (feature != undefined) {
                        console.log(feature);
                    }
                })
            }
        }
    }
</script>

<style scoped>
    #mapDiv{
        width:1000px;
        height:700px;
        border:1px solid #ff0000;
    }
</style>

car.json

2、WMS图层的GetFeatureInfo

对于矢量图层，我们可以通过第一种方法实现点击查询。但是，很多时候我们底图是wms服务，这时候我们可以通过wms协议的GetFeatureInfo实现点选查询。

<template>
    <div>
        <div id="mapDiv"></div>
    </div>
</template>

<script>
    //点击地图，通过GetFeatureInfo实现要素信息查询
    import Map from 'ol/Map.js';
    import View from 'ol/View.js';
    import TileLayer from 'ol/layer/Tile.js';
    import TileWMS from 'ol/source/TileWMS.js';

    import $ from 'jquery'

    export default {
        name: "TestOL",
        data(){
            return{
                tileWMSSource:'',
                tileLayer:'',
                map:''
            }
        },
        mounted:function(){
            this.tileWMSSource = new TileWMS({
                url: 'http://localhost:8080/geoserver/wzf/wms',
                params: {
                    'LAYERS': 'wzf:wafangdianshi_0',
                    'TILED': true,
                    'STYLES':'wfds_style_GB2312'
                },
                serverType: 'geoserver',
                projection: "EPSG:4326"
            });
            this.tileLayer = new TileLayer({
                source: this.tileWMSSource,
            })

            this.map = new Map({
                layers: [this.tileLayer],
                target: 'mapDiv',
                view: new View({
                    center: [122, 40],
                    zoom: 9,
                    projection:"EPSG:4326"       //默认的是 'EPSG:3857'横轴墨卡托投影
                })
            });
            this.map.on('click',this.mapClick);

        },
        methods:{
            mapClick:function(evt){
                var viewResolution = this.map.getView().getResolution();
                var url = this.tileLayer.getSource().getGetFeatureInfoUrl(
                    evt.coordinate, viewResolution, 'EPSG:4326',
                    {
                        'INFO_FORMAT': 'application/json',
                    });
                $.ajax({
                    type: 'GET',
                    url:url,
                    success:function(res){
                        console.log(res);
                    }
                });
            }
        }
    }
</script>

<style scoped>
    #mapDiv{
        width:1000px;
        height:700px;
        border:1px solid #ff0000;
    }
</style>