Openlayer+Geoserver 空间查询,判断要素和图层数据是否相交

       function DrawLandSiteGeometry() {
       var draw = new ol.interaction.Draw({
       source: VectorSource,
                type: "Point"
            });
            //清除所有原有元素
            VectorLayer.getSource().clear();
            //地图强制刷新
            map.render();
  let timeoutPromise = (timeout) => {
                return new Promise((resolve, reject) => {
                    setTimeout(() => {
                        swal({
                            title: '警告',
                            text: '图层服务连接已超时!',
                            type: "warning",
                            // showCancelButton: true,
                            confirmButtonColor: "#DD6B55",
                            confirmButtonText: "确定"
                        }, function () {
                            VectorSource.clear();
                            map.removeInteraction(draw);
                            $('.layer-anim').show();
                            $('.layui-layer-shade').show();
                            $('.widget.tiling').show();
                            reject(false);
                        });
                    }, timeout);
                });
            }
                draw.on("drawend", function (callbackData) {
                var coordinate = callbackData.feature.getGeometry().getCoordinates();

                var lng = coordinate[0].toFixed(6);//保留小数点后6位
                var lat = coordinate[1].toFixed(6);//保留小数点后6位
                var h = 0;
                var point = turf.point([lng, lat]);
                var buffered = turf.buffer(point, 1, { units: 'kilometers' });//truf做一个缓冲区,也可以不做这一步
                var format = new ol.format.GeoJSON();
                var poyFeat = format.readFeature(buffered);
                //设置超时
                Promise.race([timeoutPromise(1000), CheackXiaoBan('Shape', poyFeat.getGeometry(),draw)])
                    .then(res => {
                        if (res) {
                        //执行成功
                            }).then(res => {
                                if (confirm('经度:' + lng + '   纬度:' + lat + '   高程:' + h + '   你确定提交吗?')) {
                                    map.removeInteraction(draw);
                                }
                                VectorSource.clear();
                            })
                        } else {
                         //执行失败,超时等
                            VectorSource.clear();
                        }
                    });
            })
            map.addInteraction(draw);
            }
//field是geometry空间属性字段,一般是Shape
              function CheackXiaoBan(field, geometry,draw) {
            let featureRequest = new ol.format.WFS().writeGetFeature({
                //坐标系统
                srsName: 'EPSG:4326',
                //命名空间
                featureNS: 'http://www.openplans.org/spearfish',
                //工作区名称
                featurePrefix: featurePrefix,
                //查询图层
                featureTypes: [featureTypes],
                outputFormat: 'application/json',
                filter: ol.format.filter.intersects(field, geometry)
            });
            //WFS服务地址
            return fetch(wfsservice, {
                method: 'POST',
                body: new XMLSerializer().serializeToString(featureRequest),
            }).then(function (response) {
                return response.json();
            }).then(function (json) {
                if (json.features.length > 0) {
                    setSwal('此处有小班!', 'warning');
                    isPointFlag = false;
                    reject(false);
                } else {
                    isPointFlag = true;
                    resolve(true);
                }
            }).catch(function (e) {
                swal({
                    title: '警告',
                    text: '图层服务调用不成功,请检查后重试!',
                    type: "warning",
                    // showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "确定"
                }, function () {
                    VectorSource.clear();
                    map.removeInteraction(draw);
                    reject(false);
                });
            });
        }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
OpenLayers中,可以通过单击地图来获取要素。下面是一个简单的示例代码: ```javascript // 创建一个地图对象 var map = new ol.Map({ target: 'map', layers: [ // 添加一个OSM图层 new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: ol.proj.fromLonLat([0, 0]), zoom: 2 }) }); // 创建一个WFS源 var wfsSource = new ol.source.Vector({ format: new ol.format.GeoJSON(), url: function(extent) { return 'http://localhost:8080/geoserver/wfs?service=WFS&' + 'version=1.1.0&request=GetFeature&typename=workspace:layername&' + 'outputFormat=application/json&srsname=EPSG:3857&' + 'bbox=' + extent.join(',') + ',EPSG:3857'; }, strategy: ol.loadingstrategy.bbox }); // 创建一个矢量图层 var vectorLayer = new ol.layer.Vector({ source: wfsSource }); // 将矢量图层添加到地图中 map.addLayer(vectorLayer); // 监听地图的单击事件 map.on('click', function(evt) { map.forEachFeatureAtPixel(evt.pixel, function(feature) { // 处理点击事件,获取要素信息 console.log(feature.getProperties()); }); }); ``` 上述代码中,我们首先创建了一个地图对象,并添加了一个OSM图层。然后,我们创建了一个WFS源,并指定了WFS服务的地址和参数。接下来,我们创建了一个矢量图层,并将WFS源添加到该图层中。最后,我们监听地图的单击事件,并在事件处理函数中使用`forEachFeatureAtPixel`方法来获取点击位置的要素信息。 请注意,上述代码中的`workspace:layername`需要替换为实际的工作空间图层名称,`http://localhost:8080/geoserver/wfs`需要替换为实际的GeoServer的WFS服务地址。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值