ol3 Demo2 ----地圖搜索功能
阿新 • • 發佈：2018-02-19
fetch bubuko source gpo base ogg json grey form
先放效果圖：
下面是核心代碼：
//地圖搜索 function search(){ var searchstr = document.getElementById("searchkey").value; vectorSource.clear(); // 構造一個WFS request var 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) }); // 發送請求然後把feature添加到地圖 fetch(‘http://********/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()); }); }
說明：想要使用WFS，需要解決跨域訪問問題。
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta charset=‘utf-8‘/> <script src="js/ol.js" type="text/javascript"></script> <script src="ScriptFolder/jquery-1.11.1.js" type="text/javascript"></script> <script src="ScriptFolder/jquery-ui-1.10.4.js" type="text/javascript"></script> <script src="layerswitcher/ol3-layerswitcher.js" type="text/javascript"></script> <link href="css/ol.css" rel="stylesheet" type="text/css" /> <link href="layerswitcher/ol3-layerswitcher.css" rel="stylesheet" type="text/css" /> <link href="StyleFolder/dot-luv/jquery-ui.css" rel="stylesheet" type="text/css" /> <link href="StyleFolder/dot-luv/jquery.ui.theme.css" rel="stylesheet" type="text/css" /> <style type="text/css"> #map { width: 70%; height: 80%; border: darkslategrey solid 3px; } </style> <script type="text/javascript"> 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", 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" } }) }); //////////////////////////////////////////////////////////////////////////////////// var 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‘, ‘*‘+‘10230616‘) }); 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); vectorSource.addFeatures(features); map.getView().fit(vectorSource.getExtent()); }); //////////////////////////////////////////////////////////////////////////////////////////// //初始化地圖 function initMap() { 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); } // 初始化界面 function initUI() { } $(function () { initMap(); initUI(); }); //地圖搜索 function search(){ var searchstr = document.getElementById("searchkey").value; vectorSource.clear(); var 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) }); 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()); }); } </script> </head> <body> <div id="searchDiv" style="position:absolute;top:50px;left:80px;width:200x;height:50px;z-index:99999;border: 1px solid #ccc; padding: 1em;"> <ul id="controls"> <li> <label for="pointToggle">關鍵字:</label> <input name="searchkey" id="searchkey" type="text"> <input name="type" value="搜索" id="polygonToggle" onclick="search()" type="button"> </li> </ul> </div> <div id="map"></div> </body> </html>
說明：
geoserver相關設置
ol3 Demo2 ----地圖搜索功能