Geoserver+Openlayers拉框查詢
-Advertisement-
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 re ...
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 = "
您的分享是我們最大的動力!
-Advertisement-