精华内容
下载资源
问答
  • openlayers wms空间查询

    千次阅读 2017-12-18 18:04:27
    openlayers wms空间查询 http://www.giserdqy.com/gis/opengis/ol4/118  
    展开全文
  • Openlayers空间查询wfs

    2020-07-15 08:26:27
    Openlayers空间查询,下面主要包括三种查询,分别是点击地图查询,过滤条件查询,多边形查询等。说明的文字不是很多,直接看代码,最后提供一份完整的代码,直接复制到html中就可以运行。 1.点击查询 点击查询...

    Openlayers的空间查询,下面主要包括三种查询,分别是点击地图查询过滤条件查询多边形查询等。说明的文字不是很多,直接看代码,最后提供一份完整的代码,直接复制到html中就可以运行。

    1.点击查询

    点击查询主要是使用mapforEachFeatureAtPixel进行查询,首先需要给地图添加一个点击事件,如下所示:

    //点击查询
          map.on('singleclick',function(evt){
            var pixel = map.getEventPixel(evt.originalEvent);
            map.forEachFeatureAtPixel(pixel, function (feature, layer) {
                if (feature != undefined) {
                    console.log(feature);
                }
            })
          })
    

    2.条件过滤查询

    条件过滤查询使用的是ol.format.filter,可以添加过滤条件,过滤条件全部都 在ol.format.filter里面,包括Or,Not,Bbox,Within,IsNull,IsLike,During,EqualTo,LessThan,Contains,IsBetWeen,NotEqualTo,Instresects,GreaterThan,LessThanOrEqualTo,greaterThanOrEqualTo等。如下所示:

    function filterQuery(){
            var featureRequest = new ol.format.WFS().writeGetFeature({
            srsName: 'EPSG:3857',
            featureNS: 'http://openstreemap.org',
            featurePrefix: 'osm',
            featureTypes: ['water_areas'],
            outputFormat: 'application/json',
            filter: ol.format.filter.and(
                ol.format.filter.like('name', 'Mississippi*'),
                ol.format.filter.equalTo('waterway', 'riverbank')
            )
          });
    
          fetch('https://ahocevar.com/geoserver/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);
            vectorSource.addFeatures(features);
            map.getView().fit(vectorSource.getExtent());
          });
          }
    

    3.空间查询

    空间查询其实就是过滤查询,只是传递的过滤条件是几何体,这里使用intersects来查询相交的数据,其中第一个参数geometryName需要跟数据库中的空间字段对应,这里使用的是the_geom。如下所示:

    //多边形查询
            function query(){
                var featureRequest = new ol.format.WFS().writeGetFeature({
                srsName: 'EPSG:3857',
                featureNS: 'http://openstreemap.org',
                featurePrefix: 'osm',
                featureTypes: ['water_areas'],
                outputFormat: 'application/json',
                filter: ol.format.filter.intersects("the_geom", feature.getGeometry(), 'EPSG:3857')
            });
            
            fetch('https://ahocevar.com/geoserver/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('没有数据')
                }else{
                    spaceSource.addFeatures(features);
                    map.getView().fit(spaceSource.getExtent());
                }
                
            });
          }
    

    以下为完整代码,并且包含了多边形绘制,代码可能有点乱,demo嘛,知识怎么用就行了。

    <!DOCTYPE html>
    <html>
      <head>
        <title>WFS - GetFeature</title>
        <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
        <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
        <script src="https://cdn.bootcss.com/openlayers/4.6.5/ol-debug.js"></script>
      </head>
      <body>
        <div id="map" class="map"></div>
        <div style="position: absolute;top:30px;left: 100px;">
            <button onclick="addInteraction()">多边形</button>
            <button onclick="query()">查询</button>
        </div>
        <script>
          var vectorSource = new ol.source.Vector();
          var vector = new ol.layer.Vector({
            source: vectorSource,
            style: new ol.style.Style({
              stroke: new ol.style.Stroke({
                color: 'rgba(0, 0, 255, 1.0)',
                width: 2
              })
            })
          });
    
          var spaceSource = new ol.source.Vector();
          var spaceVector = new ol.layer.Vector({
            source: spaceSource,
            style: new ol.style.Style({
              stroke: new ol.style.Stroke({
                color: 'rgba(255, 0, 0, 1.0)',
                width: 2
              })
            })
          });
    
          var drawSource = new ol.source.Vector({wrapX: false});
    
          var drawVector = new ol.layer.Vector({
            source: drawSource
          });
    
          var map = new ol.Map({
            layers: [vector,drawVector,spaceVector],
            target: document.getElementById('map'),
            view: new ol.View({
              center: [-8908887.277395891, 5381918.072437216],
              maxZoom: 19,
              zoom: 12
            })
          });
          var feature;
          function addInteraction() {
            var draw = new ol.interaction.Draw({
                source: drawSource,
                type: 'Polygon'
              });
            map.addInteraction(draw);
            draw.on('drawend',function(evt){
                feature = evt.feature;
                map.removeInteraction(draw);
            })
          }
          
          //多边形查询
            function query(){
                var featureRequest = new ol.format.WFS().writeGetFeature({
                srsName: 'EPSG:3857',
                featureNS: 'http://openstreemap.org',
                featurePrefix: 'osm',
                featureTypes: ['water_areas'],
                outputFormat: 'application/json',
                filter: ol.format.filter.intersects("the_geom", feature.getGeometry(), 'EPSG:3857')
            });
            
            fetch('https://ahocevar.com/geoserver/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('没有数据')
                }else{
                    spaceSource.addFeatures(features);
                    map.getView().fit(spaceSource.getExtent());
                }
                
            });
          }
    
          // 过滤查询
          filterQuery();
          function filterQuery(){
            var featureRequest = new ol.format.WFS().writeGetFeature({
            srsName: 'EPSG:3857',
            featureNS: 'http://openstreemap.org',
            featurePrefix: 'osm',
            featureTypes: ['water_areas'],
            outputFormat: 'application/json',
            filter: ol.format.filter.and(
                ol.format.filter.like('name', 'Mississippi*'),
                ol.format.filter.equalTo('waterway', 'riverbank')
            )
          });
    
          fetch('https://ahocevar.com/geoserver/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);
            vectorSource.addFeatures(features);
            map.getView().fit(vectorSource.getExtent());
          });
          }
    
          //点击查询
          map.on('singleclick',function(evt){
            var pixel = map.getEventPixel(evt.originalEvent);
            map.forEachFeatureAtPixel(pixel, function (feature, layer) {
                if (feature != undefined) {
                    console.log(feature);
                }
            })
          })
        </script>
      </body>
    </html>
    

     

    展开全文
  • 在map对象上注册点击方法监听, 这里我用的是wms,当然你也可以查询wfs map.events.register('click', map, function (e) { var params = { REQUEST: "GetFeatureInfo",...
    在map对象上注册点击方法监听, 这里我用的是wms,当然你也可以查询wfs

        map.events.register('click', map, function (e) {
                         var params = {
                                 REQUEST: "GetFeatureInfo",
                                 EXCEPTIONS: "application/vnd.ogc.se_xml",
                                 BBOX: map.getExtent().toBBOX(),
                                 SERVICE: "WMS",
                                 VERSION: "1.1.1",
                                 X: e.xy.x,
                                 Y: e.xy.y,
                              //   INFO_FORMAT: 'text/html',  这里必须注意啦 查询结果会返回不同的格式滴,根据自己的需呀要做不同设置哦,text/html或者application/vnd.ogc.gml
                                 INFO_FORMAT: 'application/vnd.ogc.gml',  
                                QUERY_LAYERS: map.layers[1].params.LAYERS,
                                 FEATURE_COUNT: 50,
                                 Layers: 'mine:locatorinfo_'+MineCode,
                                 WIDTH: map.size.w,
                                 HEIGHT: map.size.h,
                                 format: format,
                                 styles: map.layers[1].params.STYLES,
                                 srs: map.layers[1].params.SRS};
                         //    alert(map.layers[1].params.LAYERS); 
                             OpenLayers.loadURL("http://172.16.0.81:8080/geoserver/mine/wms", params, this, setHTML, failhttml);
                             tpoint = map.getLonLatFromPixel(e.xy),  
                             OpenLayers.Event.stop(e);
                    });

    查询完毕且成功回调方法是:setHTML   【加载查询失败的方法时failhtml】

     var popup1;
                function setHTML(response){    
                //    alert(response.responseText);
                    //获取要素结果集
                    var g = new OpenLayers.Format.GML();
                  var   features = g.read(response.responseText);
                  var tempstr = '';
                  var nfid = '';
                  var nm = '';
                    //遍历要素集
                    for(var feat=0;feat<features.length;feat++){
                     nm = features[feat].attributes.equipmentid;    //获取属性的时候
                     nfid = features[feat].fid;   //fid的获取比较特殊哦,不是按照属性获取方式的,可以参考geoserver发布的服务就能看出那些时属性设置
                     tempstr += nfid;
                    }
                    
                    if(popup1!=null){
                        map.removePopup(popup1);
                    }
                    popup1 = new OpenLayers.Popup.FramedCloud("chicken",
                            tpoint,
                            new OpenLayers.Size(200,200),
                           tempstr,
                           null,
                            true);
                popup1.autoSize=true;
                map.addPopup(popup1);
                }; 

    执行逻辑是这样滴,点击图层,查询结果弹出tip提示窗口。

    效果如图哦

    转载于:https://www.cnblogs.com/zhaoyanhaoBlog/p/9026237.html

    展开全文
  • openlayers i查询功能(矢量图层、postgresql空间数据库) http://www.giserdqy.com/gis/opengis/ol4/120  

    openlayers i查询功能(矢量图层、postgresql空间数据库)

    http://www.giserdqy.com/gis/opengis/ol4/120

     

    展开全文
  • openlayers实现wfs属性查询和空间查询

    千次阅读 2015-05-30 21:41:51
    一直在寻求openlayers中wfs加载和属性查询的相关操作,功夫不负有心人,蓦然回首,那人却在灯火阑珊处,找到了这篇博文:...本文讲解如何通过wfs实现属性和空间查询与展示。
  • openlayers+geoserver+wfs实现空间查询,属性查询 查询方法 点击查看原文
  • geoserver+postgis+openlayers 空间要素的增删改功能,具体还可参考https://blog.csdn.net/rrrrroy_Ha/article/details/90904465
  • OpenLayers3的WMS空间查询实现多个图层

    千次阅读 2017-01-18 15:56:32
    空间查询前面的帖子写过,但是在一次性查询多个图层的时候卡了一下,再次记录下。 1、WMS数据源: var wmsSource = new ol.source.TileWMS({ url:'http://localhost:8080/geoserver/wms', params:{'LAYERS':...
  • // 传递map, 测量类型, 矢量图层 空间查询代码块 // An highlighted block // 空间查询 import { EPSG3857, EPSG4326, EPSG900913 } from './index'; import store from '@/store' export const QuerySpace = { //...
  • OpenLayers3的WMS空间查询的自定义格式

    千次阅读 2017-01-16 08:56:14
    content.innerHTML = '查询详情:</p><code>坐标:' + hdms + '</code>'; overlay.setPosition(e.coordinate); document.getElementById('info').innerHTML=''; var viewResolution=view....
  • 本文通过openlayers3进行空间查询,后台是geoserver服务器
  • 简介:使用Openlayers5.3,通过Geoserver实现wfs服务矢量的属性查询 参考官方例子:https://openlayers.org/en/latest/examples/vector-wfs-getfeature.html 我的Geoserver工作区截图如下,命名空间URI可以自定义,...
  • 本篇的重点内容是利用openlayers实现地图空间查询功能,效果图如下: 实现思路: 框选工具(多边形以及矩形) 框选绘制完成,进行wfs进行空间查询 点击查询结果列表,地图定位 地图...
  • wfs查询服务包括了属性查询和空间查询,具体参考如下地址 http://www.xiaobaigis.com/GiSarticles/GiSArticle?ID=82 http://www.xiaobaigis.com/GiSarticles/GiSArticle?ID=83
  • openlayers4,geoserver wfs实现空间分析、属性查询 原理 工作区启用WFS 工作区下发布图层 代码 var featureRequest = new ol.format.WFS().writeGetFeature({ srsName: 'EPSG:4326',//坐标系统 ...
  • Geoserver+PostGIS+Openlayers 空间要素的增删改

    千次阅读 热门讨论 2019-06-12 18:06:46
    openlayers中要达到动态显示增删改效果,一定要 选用WFS服务 。 创建WFS服务的方法(以点图层为例): var pointSource = new ol.source.Vector({ url: 'http://localhost:9010/geoserver/wfs?' + '...
  • OpenLayers-点击查询

    2019-10-02 15:04:56
    OpenLayers支持通过WMS的GetFeatureInfo(参考WMS说明)方法来实现地图上的点击查询。 1.定义MapClick事件响应函数 1 function onMapClick(e){ 2 var params = { 3 REQUEST: "GetFeatureInfo", // ...
  • OpenLayers

    2011-09-14 20:42:47
    OpenLayers是一个用于开发WebGIS客户端的...OpenLayers实现访问地理空间数据的方法都符合行业标准。比如OpenGIS的WMS和WFS规范。OpenLayers采用面向对象方式开发,并使用来自Prototype.js和Rico中的一些组件。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,969
精华内容 787
关键字:

openlayers空间查询