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

最新推荐文章于 2023-05-07 23:00:19 发布

weixin_33962923

最新推荐文章于 2023-05-07 23:00:19 发布

阅读量135

点赞数

文章标签： json xhtml ui

原文链接：http://www.cnblogs.com/id-666/p/8453732.html

版权

先放效果图：

下面是核心代码：

　　　　//地图搜索
        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相关设置

转载于:https://www.cnblogs.com/id-666/p/8453732.html

weixin_33962923

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ol3 Demo2 ----地图搜索功能

先放效果图：下面是核心代码：　　　　//地图搜索 function search(){ var searchstr = document.getElementById("searchkey").value; vectorSource.clear(); 　　 // 构造一个WFS request...
复制链接

扫一扫