续上一篇，用户除有地物搜索（任意输入关键字，查询包含该关键字的地物）外，也有精确查询的需求，如查询指定经纬度周边一定范围内的地物，通过地图上框选矩形或者多边形，查询矩形或者多边形内的地物等。
范围查询：查询指定经纬度周边一定距离内的地物，效果如下图所示：
矩形框选查询：查询包含在指定矩形内的地物
多边形框选查询：在地图上绘制多边形，并查询包含在多边形内的地物
代码：
<!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]NaN.X, data.data[i]NaN.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>
时间： 2024-10-12 04:07:13