WebGIS開發(fā)中豆瘫，點擊查詢是最常用的一種查詢方式。本文從開源框架的角度寺董，從前臺到服務端到數(shù)據(jù)庫等多個角度覆糟，多種方式實現(xiàn)點擊查詢。

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

對于矢量圖層漓藕，我們可以通過第一種方法實現(xiàn)點擊查詢。但是挟裂，很多時候我們底圖是wms服務享钞，這時候我們可以通過wms協(xié)議的GetFeatureInfo實現(xiàn)點選查詢。

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

<script>
    //點擊地圖话瞧，通過GetFeatureInfo實現(xiàn)要素信息查詢
    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>