OL4通过ajax加载geoserver中WMS的GetFeatureInfo实现点击查询（解决跨域问题）

有时候我们不想加载WFS服务来获取要素的属性信息，我们就想加载WMS或者WMTS获取属性信息，geoserver客户端给我提供一种实现是返回html，这种方式受限太大，如果能返回json格式的数据那多好！这样我们就可以自己定义展示的效果了，在这里我首先想到的是通过点击事件配合Ajax 来加载WMS的GetFeatureInfo，但是发现总是提示跨域问题，明明我都已经配置了跨域，怎么还会报这个错呢？后来通过jsonp格式解决，但是又开始报Uncaught ReferenceError: parseResponse is not defined，差个各种资料最后通过format_options参数解决问题，具体东西见下文:

一、WMS的GetFeatureInfo介绍
1、功能
获取点击对象的属性信息，类似于WFS的 GetFeature，但是在输入和输出格式上受限，官方还是推荐WFS
2、主要的参数
在这里插入图片描述
详细见WMS详细介绍
3、关于输出格式（这里我们输出的json格式）
但是要解决跨域的问题需要用到jsonp，那么返回信息的格式不能用application/json而要用text/javascript

详细参考官网点击这里查询格式说明

二、完整demo示例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="../script/ol4/ol.css" rel="stylesheet" />
    <script src="../script/ol4/ol.js"></script>
    <script src="../../Scripts/jquery-3.3.1.min.js"></script>
    <style>
        #map {
            100%;
            height:100%;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script type="text/javascript">
        $(function () {
            var bounds = [89.1716461181641, 6.08244466781616,
                135.314254760742, 53.7941207885742];
            var format = 'image/png';
            var view = new ol.View({
                projection: "EPSG:4326",
                center: [117, 39],
                zoom: 4
            })
            var WMSsource = new ol.source.ImageWMS({
                ratio: 1,
                url: 'http://localhost:8888/geoserver/cite/wms',
                params: {
                    'FORMAT': format,
                    'VERSION': '1.1.1',
                    "LAYERS": 'cite:bou2_4p',
                    "exceptions": 'application/vnd.ogc.se_inimage',
                }
            });
            var WMSLayer = new ol.layer.Image({
                source: WMSsource
            });
            var map = new ol.Map({
                target: "map",
                layers: [WMSLayer],
                view: view
            });
            map.on("click", function (evt) {

                var viewResolution = view.getResolution();
                var urls = WMSsource.getGetFeatureInfoUrl(
                    evt.coordinate, viewResolution, view.getProjection(),
                    { 'INFO_FORMAT': 'text/javascript', 'FEATURE_COUNT': 50  ,format_options: 'callback: getJson'});
                console.log(urls);
                $.ajax({
                    type: "POST",
                    url:urls,
                    dataType: 'jsonp',
                    jsonpCallback: 'getJson',
                    success: function (data) {
                        console.log(data.features);
                    }
                });
            });
        });
    </script>
</body>
</html>

三、效果图
在这里插入图片描述四、踩坑
1、要通过jsonp来解决跨域问题，url参数INFO_FORMAT为text/javascript即为’INFO_FORMAT’: ‘text/javascript’
2、Ajax要设置jsonpCallback参数即:jsonpCallback: ‘getJson’
3、url参数中要设置:callback 即为’callback: getJson’ 其中getJson是函数名，可以随便起，但是要和jsonpCallback函数保持一致
更多采坑可见点我查看更多踩坑

参考：
1、文章1
2、文章2
3、文章3