Tomcat8.5.39 + Geoserver2.13.4 + Openlayers4.5.6 + WFS realizar consulta de clic de elemento

Descripción ambiental

• Tomcat 8.5.39
• Geoserver 2.13.4 guerra
• openlayers 4.5.6
• WFS 1.1.0

proceso

War se lanza a través de Tomcat. He intentado usar directamente web.xml en el paquete war para la configuración entre dominios, pero informará un error de desbordamiento de memoria, así que configure directamente Tomcat para la configuración entre dominios.

1. Configuración de dominios cruzados de tomcat
Agregue alrededor de 459 líneas de conf / web.xml en el directorio de tomcat:

	<filter>
		  <filter-name>CorsFilter</filter-name>
		  <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
		  <init-param>
				<param-name>cors.allowed.origins</param-name>
				<param-value>*</param-value>
		  </init-param>
	</filter>
	<filter-mapping>
		  <filter-name>CorsFilter</filter-name>
		  <url-pattern>/*</url-pattern>
	</filter-mapping>

Realice el dominio cruzado.

2. Geoserver publica datos vectoriales

Consulte geoserver para publicar el mapa de formato shp.
No se requieren otras configuraciones redundantes, y la configuración predeterminada puede lograr el propósito (por ahora, no se considera el problema del permiso de lectura de datos).

3. Haga clic para consultar el código principal

//增加点击高亮的矢量图层
var layer = new ol.layer.Vector({
            source: new ol.source.Vector(),
            style: new ol.style.Style({
                fill: new ol.style.Fill({
                    color: "#f00"
                }),
                stroke: new ol.style.Stroke({
                    color: "#ffff00",
                    width: 3
                })
            })
        });
//加载WMS地图
        var tiled = new ol.layer.Tile({
            source: new ol.source.TileWMS({
                url: 'http://localhost:8080/geoserver/gis/wms',
                params: {
                    'FORMAT': "image/png",
                    'VERSION': '1.1.1',
                    tiled: true,
                    "STYLES": '',
                    "LAYERS": 'gis:county_area',
                    "exceptions": 'application/vnd.ogc.se_inimage',
                    tilesOrigin: 97.52911400949601 + "," + 21.144672509331322
                }
            })
        });
//构建地图
        var map = new ol.Map({
            target: "map",
            layers: [tiled, layer],
            view: new ol.View({
                center: [100.23, 23.15],
                zoom: 5,
                projection: "EPSG:4326"
            })
        })
//点击事件
        map.on('click', function(e) {
            // 创建一个请求
            var featureRequest = new ol.format.WFS().writeGetFeature({
                srsName: 'EPSG:4326', //坐标系
                featureNS: 'http://localhost:7080/gis', // 注意这个值必须为创建工作区时的命名空间URI
                featurePrefix: 'gis', //工作区的名称
                featureTypes: ['county_area'], //所要访问的图层
                maxFeatures: 1,
                outputFormat: 'application/json',
                //这里注意，ol4.5.6里面ol.format.filter.Intersects构造出来的WFS是1.1.0版本，这里的坐标中经纬度是反的
                filter: new ol.format.filter.Intersects("the_geom", new ol.geom.Point([e.coordinate[1], e.coordinate[0]]), "EPSG:4326")
            });

            // 发送请求
            fetch('http://localhost:8080/geoserver/wfs', {
                method: 'POST',
                body: new XMLSerializer().serializeToString(featureRequest)
            }).then(function(response) {
                return response.json();
            }).then(function(re) {
                var feas = new ol.format.GeoJSON().readFeatures(re);
                layer.getSource().clear();
               layer.getSource().addFeatures(feas)
                    // feas = feas.map(function(a) {
                    //     return new ol.Feature({
                    //         geometry: a.getGeometry().clone()
                    //     })
                    // })
                    // layer.getSource().addFeatures(feas)
                    // layer.getSource().dispatchEvent("addfeature")
            });
        })

4. Imagen de efecto