本文共 2603 字，大约阅读时间需要 8 分钟。

使用WFS技术实现地图搜索功能

引言

本文将详细介绍如何通过Web服务（WFS）技术从地图中搜索特定 osm_id 的实现方法。我们将使用 OpenLayers 库进行前端处理，并结合 Geoserver 作为后端服务，解决跨域访问问题。

核心代码解释

1. WFS 请求构造

// 构造一个WFS requestvar featureRequest = new ol.format.WFS().writeGetFeature({    srsName: 'EPSG:3857',    featureNS: 'www.vnm.com',    featurePrefix: 'VNM',    featureTypes: ['gis.osm_waterways_free_1', 'gis.osm_buildings_a_free_1'],    outputFormat: 'application/json',    filter: ol.format.filter.like('osm_id', '*'+searchstr)});

• srsName：指定坐标参考系为 EPSG:3857（Web Mercator）。
• featureNS：特征空间命名空间，用于定义数据类型。
• featurePrefix：特征前缀，用于构造特征名。
• featureTypes：特征类型数组，指定需要查询的数据类型。
• outputFormat：指定输出格式为 JSON。
• filter：定义过滤条件，按 osm_id 进行搜索。

2. 请求处理与数据解析

fetch('http://gis.map.com/geoserver/VNM/wfs', {    method: 'POST',    body: new XMLSerializer().serializeToString(featureRequest)}).then(function(response) {    return response.json();}).then(function(json) {    var features = new ol.format.GeoJSON().readFeatures(json);    if(features.length == 0) {        alert("没有该项目");        return;    }    vectorSource.addFeatures(features);    map.getView().fit(vectorSource.getExtent());});

• fetch：发送 POST 请求，获取 Geoserver 的 WFS 数据。
• XMLSerializer：将特征请求转换为 XML 格式。
• readFeatures：将 JSON 格式的特征数据转换为 GeoJSON 格式。
• addFeatures：将获取到的特征数据添加到向量源中。
• fit：调整地图视图以适应特征数据的范围。

跨域访问解决方案

在实际应用中，可能会遇到跨域访问问题。为了解决这个问题，可以在前端使用 CORS 中间件，或者在后端配置 Geoserver 进行跨域设置。

地图初始化

var vectorSource = new ol.source.Vector();var selectVector = new ol.layer.Vector({    title:'选中区域',    source: vectorSource,    style: new ol.style.Style({        stroke: new ol.style.Stroke({            color: 'rgba(255, 255, 255, 1)',            width: 2        })    })});var map;var vietnam;var strFromProj = "EPSG:4326";var strToProj = "EPSG:3857";// 初始化越南图层vietnam = new ol.layer.Tile({    title:'越南行政底图',    type:'base',    source: new ol.source.TileWMS({        url: "http://gis.map.com/geoserver/VNM/wms",        params: {            "LAYERS": "VNM:VNM"        }    })});map = new ol.Map({    target: "map",    layers: [vietnam, selectVector],    view: new ol.View({        center: ol.proj.transform([105.5, 15.5], strFromProj, strToProj),        zoom: 5    })});// 添加图层切换控制器var layerSwitcher = new ol.control.LayerSwitcher({    tipLabel: 'Légende'});map.addControl(layerSwitcher);

• vectorSource：向量数据源，用于存储用户选择的特征数据。
• selectVector：选中区域层，用于显示用户选择的特征区域。
• map：地图实例，包含越南底图和选中区域层。
• view：地图视图，初始化中心点和缩放级别。

用户界面交互

• searchDiv：搜索区域容器，固定在屏幕右侧。
• searchkey：输入框，用于输入搜索关键字。
• polygonToggle：搜索按钮，调用 search() 函数进行数据查询。

技术说明

• OpenLayers：用于前端地图绘制和交互。
• Geoserver：作为 WFS 后端服务，提供数据查询功能。
• CORS：解决跨域访问问题的中间件或服务器配置。

转载声明

本文内容转载自 CNblogs 文章链接，转载请注明出处。