ol3 Demo2 ----地图搜索功能

Posted id-666

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ol3 Demo2 ----地图搜索功能相关的知识,希望对你有一定的参考价值。

先放效果图:

技术分享图片

下面是核心代码:

    //地图搜索
        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 ----地图搜索功能的主要内容,如果未能解决你的问题,请参考以下文章

WPF Demo2

回退流 Demo2

支付demo2

Demo2

qml 锚点demo2

LR分析-demo2