离线map解决方案（八）：map地物查询

离线地图解决方案（八）：地图地物查询

续上一篇，用户除有地物搜索（任意输入关键字，查询包含该关键字的地物）外，也有精确查询的需求，如查询指定经纬度周边一定范围内的地物，通过地图上框选矩形或者多边形，查询矩形或者多边形内的地物等。

范围查询：查询指定经纬度周边一定距离内的地物，效果如下图所示：

离线map解决方案（八）：map地物查询
矩形框选查询：查询包含在指定矩形内的地物

离线map解决方案（八）：map地物查询
多边形框选查询：在地图上绘制多边形，并查询包含在多边形内的地物

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }
    </style>

    <script src="js/jquery-1.11.2.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="plugin/ol3/build/ol-debug.js"></script>
    <script type="text/javascript" src="js/Config.js"></script>
    <script type="text/javascript" src="js/PrivateFunction.js"></script>

</head>
<body>
    <div id="topHead" style=" height:65px; float:none;width:100%;border:0px solid gray">
        <table id="bjTable" style="height:100%;width:100%;">
            <tr>
                <td style="width:85px" align="right">圆心,经度：</td>
                <td style="width:100px"><input id="txtjd" /></td>
                <td style="width:60px" align="right">纬度：</td>
                <td style="width:100px"><input id="txtwd" /></td>
                <td style="width:60px" align="right">周围：</td>
                <td style="width:100px" align="right"><input style="width:75px;" id="txtZWjl"/>米</td>
                <td style="width:70px" align="right"><button style="width:65px" onclick="OpenCJ();">画圆</button></td>
                <td style="width:70px"><button style="width:65px" onclick="GetServerData()">搜索</button></td>
                <td style="width:60px" align="right">结果：</td>
                <td style="width:180px"><select id="resultList" style="width:200px"></select></td>
                <td></td>
            </tr>
        </table>
    </div>
    <div id="div_gis" style="float:none;width:100%;height:100%;border:0px solid gray">

    </div>

</body>
</html>

<script type="text/javascript">
    LoadGoogleTileMap(1, 'div_gis', 1, 12, 8, 103.964571, 30.245677);
    CreateVectorLayer();
    OpenMap.on('click', function (evt) {
        var coordinate = evt.coordinate;
        txtjd.value = coordinate[0];
        txtwd.value = coordinate[1];
    });
    function GetServerData() {
        $.ajax({
            url: 'http://localhost:8899/api/ReverseGEOApi/SearchPointBytype', //请求地址
            type: 'Get',  //请求方式为post
            data: { 'x': txtjd.value, 'y': txtwd.value, 'PointType': 1, 'MiDis': txtZWjl.value, 'pointCount': 5 }, //传入参数
            dataType: 'json', //返回数据格式
            //请求成功完成后要执行的方法
            success: showRegCallBack,
            error: function (err) {
                alert("执行失败");
            }
        });
    }
    
    function showRegCallBack(data) {
        for (var i = 0; i < data.data.length; i++) {
            addPoint(data.data[i].PnameTemp, i + 1, data.data[i].pt.X, data.data[i].pt.Y);
        }
    }

    function addPoint(nameStr, id, xx, yy) {
        var pointStyle = CreatePointStyle('#ff0000', '10', '#ff0000', '2', nameStr, 'center', 'middle', 'Arial', '14', 'normal', '#aa3300', '#ffcc33', '2', '0', '15', '0');
        AddPointToLayer(tempDrawSoure, id, xx, yy, pointStyle);
    }
</script>

离线map解决方案（八）：map地物查询

相关推荐