Geoserver+Openlayers拉框查询
2019-03-12 08:21:28来源：博客园 阅读 ()
1.代码
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>OpenLayers</title> 6 <link rel="stylesheet" href="geoserver/ol.css" type="text/css"> 7 <script src="geoserver/ol.js"></script> 8 <script src="bower_components/jquery/dist/jquery.min.js"></script> 9 <link rel="stylesheet" href="plugins/layui-v2.4.3/layui/css/layui.css"> 10 <script src="plugins/layui-v2.4.3/layui/layui.js" charset="utf-8"></script> 11 <link rel="stylesheet" href="https://openlayers.org/en/v3.20.1/css/ol.css" type="text/css"> 12 <#--注意openlayer的版本号，高版本存在es6中新语法不兼容的情况--> 13 <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script> 14 <script src="https://openlayers.org/en/v3.20.1/build/ol.js"></script> 15 </head> 16 <style> 17 #map { 18 height: 600px; 19 /*width: 1024px;*/ 20 /* float: left;*/ 21 } 22 </style> 23 <body> 24 <div id="map"> 25 <form class="form-inline"> 26 <label>查询类型</label> 27 <select id="type"> 28 <option value="None">None</option> 29 <option value="Point">点击</option> 30 <option value="Polygon">多边形</option> 31 <option value="Circle">拉框</option> 32 </select> 33 </form> 34 </div> 35 <script> 36 var map = new ol.Map({ 37 target: 'map', 38 view: new ol.View({ 39 projection: 'EPSG:4326', 40 center: [104.07, 30.72], 41 zoom: 7 42 }) 43 }); 44 var wfsParams = { 45 service: 'WFS', 46 version: '1.1.1', 47 request: 'GetFeature', 48 typeName: 'map_dz:tl_lx_g', //图层名称，可以是单个或多个 49 outputFormat: 'text/javascript', //重点，不要改变 50 format_options: 'callback:loadFeatures' //回调函数声明 51 }; 52 53 var vectorSource = new ol.source.Vector({ 54 format: new ol.format.GeoJSON(), 55 loader: function (extent, resolution, projection) { //加载函数 56 var url = 'http://192.168.1.113:8080/geoserver/map_dz/wms'; 57 $.ajax({ 58 url: url, 59 data: $.param(wfsParams), //传参 60 type: 'GET', 61 dataType: 'jsonp', //解决跨域的关键 62 jsonpCallback: 'loadFeatures' //回调 63 64 }); 65 }, 66 strategy: ol.loadingstrategy.tile(new ol.tilegrid.createXYZ({ 67 maxZoom: 20 68 })), 69 projection: 'EPSG:4326' 70 }); 71 //回调函数使用 72 window.loadFeatures = function (response) { 73 vectorSource.addFeatures((new ol.format.GeoJSON()).readFeatures(response)); //载入要素 74 }; 75 var vectorLayer = new ol.layer.Vector({ 76 source: vectorSource, 77 style: new ol.style.Style({ 78 stroke: new ol.style.Stroke({ 79 color: 'rgba(0, 0, 255, 1.0)', 80 width: 2 81 }) 82 }) 83 }); 84 map.addLayer(vectorLayer); 85 var draw; 86 var typeSelect = document.getElementById('type'); 87 var value; 88 var num=10;//用于删除之前的框，表示号，随便取一个 89 function addInteraction() { 90 if (value !== 'None') { 91 if (value === 'Polygon') { 92 draw = new ol.interaction.Draw({ 93 source: vectorLayer.getSource(), 94 style: new ol.style.Style({ 95 stroke: new ol.style.Stroke({ 96 color: '#ffcc33', 97 width: 2 98 }), 99 image: new ol.style.Circle({ 100 radius: 7, 101 fill: new ol.style.Fill({ 102 color: '#ffcc33' 103 }) 104 }) 105 }), 106 type: value 107 }); 108 } else if (value === 'Circle') { 109 draw = new ol.interaction.Draw({ 110 source: vectorLayer.getSource(), 111 style: new ol.style.Style({ 112 stroke: new ol.style.Stroke({ 113 color: '#ffcc33', 114 width: 2 115 }), 116 image: new ol.style.Circle({ 117 radius: 7, 118 fill: new ol.style.Fill({ 119 color: '#ffcc33' 120 }) 121 }) 122 }), 123 type: value, 124 geometryFunction: ol.interaction.Draw.createBox() 125 }); 126 } else if (value === 'Point') { 127 draw = new ol.interaction.Draw({ 128 source: vectorLayer.getSource(), 129 style: new ol.style.Style({ 130 stroke: new ol.style.Stroke({ 131 color: '#ffcc33', 132 width: 2 133 }), 134 image: new ol.style.Circle({ 135 radius: 7, 136 fill: new ol.style.Fill({ 137 color: '#ffcc33' 138 }) 139 }) 140 }), 141 type: value 142 }); 143 } 144 145 map.addInteraction(draw); 146 //删除之前draw的部分 147 draw.on('drawstart',function(evt) { 148 var featureAdd=vectorLayer.getSource().getFeatureById(num); 149 if(featureAdd!=null){ 150 vectorLayer.getSource().removeFeature(featureAdd); 151 } 152 }); 153 //绘图结束，处理选中部分 154 draw.on('drawend',function(e){ 155 e.feature.setId(num); 156 var geom=e.feature.getGeometry(); 157 var coor = geom.v; 158 mapSelect(coor); 159 }); 160 } 161 } 162 //选择事件 163 typeSelect.onchange = function() { 164 value = typeSelect.value; 165 map.removeInteraction(draw); 166 addInteraction(); 167 }; 168 169 //draw图像与原始数据相交 170 function mapSelect(coor) { 171 if(value=='Point') { 172 coor = [coor[0]-0.0001,coor[1]-0.0001,coor[0]+0.0001,coor[1]+0.0001]; 173 } 174 var FILTER = '<Filter xmlns:ogc="http://www.opengis.net/ogc" xmlns:gml="http://www.opengis.net/gml"><BBOX><PropertyName>geom</PropertyName><gml:Envelope srsName="EPSG:4326"><gml:lowerCorner>' + coor[0] + ' ' + coor[1] + '</gml:lowerCorner><gml:upperCorner>' + coor[2] + ' ' + coor[3] + '</gml:upperCorner></gml:Envelope></BBOX></Filter>'; 175 getFeature({ 176 typename: 'map_dz:tl_lx_g',//查询的服务图层名称 177 filter: FILTER,//查询条件 178 callback: 'getIdentifyroadGrid'//查询的回调函数 179 }); 180 } 181 var selectNum=[]; 182 var geojsonFormat = new ol.format.GeoJSON({defaultDataProjection: "EPSG:4326"}); 183 function getIdentifyroadGrid(res) { 184 var queryData = []; 185 var features = geojsonFormat.readFeatures(res); 186 187 for (var nu = 0; nu<selectNum.length;nu++) { 188 var featureSelect=vectorLayer.getSource().getFeatureById(selectNum[nu]); 189 if(featureSelect!=null) { 190 featureSelect.setStyle( 191 new ol.style.Style({ 192 stroke: new ol.style.Stroke({ 193 color: 'rgba(0, 0, 255, 1.0)', 194 width: 2 195 }) 196 })); 197 } 198 } 199 selectNum=[]; 200 for (var i = 0; i < features.length; i++) { 201 var feature = features[i]; 202 console.log(feature); 203 selectNum.push(feature.f); 204 var featureSelectCurrent=vectorLayer.getSource().getFeatureById(feature.f); 205 featureSelectCurrent.setStyle( 206 new ol.style.Style({ 207 stroke: new ol.style.Stroke({ 208 color: '#ff4118', 209 width: 2 210 }) 211 })); 212 var lxmc = feature.H["lxmc"]; 213 var ldbm = feature.H["ldbm"]; 214 var lxbh = feature.H["lxbh"]; 215 var result = { 216 "lxmc": lxmc, 217 "ldbm": ldbm, 218 "lxbh": lxbh, 219 "setindex": i 220 }; 221 queryData.push(result) 222 } 223 console.log(selectNum); 224 var tableIns=null; 225 var dataTable = "<table class=\"layui-table\" lay-filter=\"demo\" id=\"joinTab\"></table>"; 226 layui.use(['table', 'layer'], function () { 227 var table = layui.table; 228 var layer = layui.layer; 229 var index = layer.open({ 230 type: 1 //Page层类型 231 , title: '要素属性' 232 , shade: 0 //遮罩透明度 233 , anim: 0 //0-6的动画形式，-1不开启 234 , content: dataTable 235 , offset: ['250px', '290px'] 236 , zIndex: 1 237 , scrollbar: false 238 , resize: false 239 , skin: 'layui-layer-molv' 240 , closeBtn: 2 241 , btn: ["关闭"] 242 , yes: function (index) { 243 layer.close(index); 244 } 245 , cancel: function () { 246 } 247 }); 248 tableIns = table.render({ 249 elem: "#joinTab", 250 width: "auto", 251 height: "auto", 252 data: queryData, 253 initSort: {field: 'lxbh', type: 'desc'}, 254 cols: [[ 255 {field: 'lxmc', title: '路线名称', width: 150, align: 'center', sort: true}, 256 {field: 'ldbm', title: '路线编号', width: 150, align: 'center', sort: true}, 257 {field: 'lxbh', title: '路段编码', width: 150, align: 'center', sort: true} 258 ]] 259 }); 260 layer.style(index, { 261 opacity: 0.8 262 }); 263 }); 264 265 if (tableIns) { 266 tableIns.reload({ 267 data: queryData 268 }); 269 } else { 270 // console.log("Do Nothing!"); 271 } 272 } 273 274 //请求wfs数据 275 function getFeature(options) { 276 $.ajax(/*'http://192.168.1.113:8080/geoserver/map_dz/wms', */{ 277 type: 'GET', 278 url: 'http://192.168.1.113:8080/geoserver/map_dz/wms', 279 data: { 280 service: 'WFS', 281 version: '1.1.1', 282 request: 'GetFeature', 283 typename: options.typename, 284 srsname: options.srid, 285 outputFormat: 'text/javascript', 286 viewparams: options.viewparams, 287 bbox: (options.extent === undefined) ? undefined : options.extent.join(',') + ',' + options.srid, 288 filter: options.filter 289 }, 290 dataType: 'jsonp', 291 jsonp: 'format_options', 292 jsonpCallback: 'callback:' + options.callback 293 }); 294 295 } 296 297 </script> 298 </body> 299 </html>
2.代码解释
这一部分是主要针对用户做此功能的时候，遇到的问题进行总结：
在引入 Openlayers 的 JS 文件的时候，注意版本号，5.0+ 的版本中大量应用了ES6 的最新特性，如果直接引入 5.0+ ，可能与前期的项目有所冲突，所以这里建议使用低版本，同样能完成拉框查询
这里主要通过 Draw 对象进行框选的，Draw 的本质是在图层上兴建 Shape ，那么在下一次框选的时候，需要把上次 Draw 的框去掉：（回答了网上用户的提问：openlayers 在重新画图(圆或矩形)如何清除之前的图，Openlayer删除上一次绘制的图）
首先记录框选时，增加的框框的ID
然后在下次框选之前，通过 id 找到上次那个 Feature，并删掉
对选中的对象进行重新设置颜色，这里主要通过 Style 属性进行处理：
在下次选中对象的时候，删除上次选中对象的样式 将选中对象的 id 压到数组汇总
在下次设置选中对象的样式之前，遍历数组，对上次选中的feature进行样式设置（设置为原来的样式）
3.结果
参考
https://www.cnblogs.com/kkyyhh96/p/6379515.html
https://blog.csdn.net/songjian1314/article/details/17263865
https://blog.csdn.net/shaxiaozilove/article/details/60780175
https://blog.csdn.net/m0_37659871/article/details/80598589
https://openlayers.org/en/latest/examples/draw-features.html
https://openlayers.org/en/latest/examples/draw-shapes.html
原文链接:https://www.cnblogs.com/dz-boss/p/10516963.html
如有疑问请与原作者联系
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
上一篇：深入剖析z-index属性
下一篇：1111
相关文章
- 循序渐进VUE+Element 前端应用开发(5）--- 表格列表页面的查 2020-07-15
- 循序渐进VUE+Element 前端应用开发(5）--- 表格列表页面的查 2020-07-15
- 循序渐进VUE+Element 前端应用开发(5）--- 表格列表页面的查 2020-07-14
- 循序渐进VUE+Element 前端应用开发(5）--- 表格列表页面的查 2020-07-13
- 循序渐进VUE+Element 前端应用开发(5）--- 表格列表页面的查 2020-07-02
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
热门词条
最新资讯
热门关注
热门标签