SuperMapGIS 搜索定位
关键技术： SuperMapGIS
作者：李嘉乐
一、在查询搜索模块中点击下拉框选择地址、企业、医疗服务任意一类型的地址，然后在文本框中输入你要查询的关键字，点击查询进行模糊搜索。（注意：如果下拉框选择的是地址就只可以查询加油站、收费站、商业大厦等类型地址，如果选择的是企业那就只能查询公司企业类型的地址，如果选择的是医疗服务就只能查询医院和药店）结果展示在右侧栏
如图：
代码如下：
<li>
<a><i class="fa fa-search"></i>查询搜索<span class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li class="panel-body">
<div class="input-group">
<div class="input-group-btn">
<select class="btn btn-default dropdown-toggle ChaXunweizhi" data-toggle="dropdown" aria-haspopup="true">
<option value="1">地址</option>
<option value="2">企业</option>
<option value="3">医疗服务 </option>
</select>
</div>
<input class="form-control wb">
</div>
<div style="margin-top: 3px;" class="text-right">
<button onclick="searchShow()" class="btn btn-primary">查询</button>
</div>
</li>
</ul>
</li>
<!-- 栅格右菜单 开始 -->
<nav class="navbar-default caidanRight" role="navigation">
<div class="panel-heading alert alert-info col-lg-12 col-sm-12 col-md-12">
<div style="width:100%;background-color:aqua">
<span class="col-lg-10 col-sm-10 col-md-10">查询结果：</span>
<a onClick="outModel()" class="col-lg-1 col-sm-1 col-md-1"><i class="fa fa-close"></i></a>
</div>
<ul style="overflow:auto;width:100%;float:left;padding:10px 0 0px 0;height:500px" id="site"></ul>
</div>
</nav>
markerLayer = new SuperMap.Layer.Markers("Markers");//点坐标标志图层
<!-- 栅格右菜单 开始 -->
//搜索查询》点击查询》右侧栏显示
function searchShow() {
$('.caidanRight').animate({ right: '0px' });//右侧栏样式
var x = $(".wb").val().trim();//获取查询文本值
$(".lf").remove();//删除右侧栏上次所追加的所有地址位置元素
var cx = $(".ChaXunweizhi").val();//所选的地址类型
var queryParams = [], queryBySQLParams, queryBySQLService;
if (cx == 1) {
queryParams.push(new SuperMap.REST.FilterParameter({ name: "P06加油站加气站[email protected]", attributeFilter: "NAME like '%" + x + "%' or ADDRESS like '%" + x + "%'" }));
queryParams.push(new SuperMap.REST.FilterParameter({ name: "P09收费站[email protected]", attributeFilter: "NAME like '%" + x + "%' or ADDRESS like '%" + x + "%'" }));
queryParams.push(new SuperMap.REST.FilterParameter({ name: "P11商业大厦[email protected]", attributeFilter: "NAME like '%" + x + "%' or ADDRESS like '%" + x + "%'" }));
queryBySQLParams = new SuperMap.REST.QueryBySQLParameters({
expectCount: 50,//返回数据条数
queryParams: queryParams//查询过滤条件参数数组
});
queryBySQLService = new SuperMap.REST.QueryBySQLService(url, {
eventListeners: { "processCompleted": Additional, "processFailed": processFailed },
});
queryBySQLService.processAsync(queryBySQLParams);
} else if (cx == 2) {
queryParams.push(new SuperMap.REST.FilterParameter({ name: "P17公司企业[email protected]", attributeFilter: "NAME like '%" + x + "%' or ADDRESS like '%" + x + "%'" }));
queryBySQLParams = new SuperMap.REST.QueryBySQLParameters({
expectCount: 50,//返回数据条数
queryParams: queryParams//查询过滤条件参数数组
});
queryBySQLService = new SuperMap.REST.QueryBySQLService(url, {
eventListeners: { "processCompleted": Additional, "processFailed": processFailed },
});
queryBySQLService.processAsync(queryBySQLParams);
} else {
queryParams.push(new SuperMap.REST.FilterParameter({ name: "P15医疗服务[email protected]", attributeFilter: "NAME like '%" + x + "%' or ADDRESS like '%" + x + "%'" }));
queryBySQLParams = new SuperMap.REST.QueryBySQLParameters({
expectCount: 50,//返回数据条数
queryParams: queryParams//查询过滤条件参数数组
});
queryBySQLService = new SuperMap.REST.QueryBySQLService(url, {
eventListeners: { "processCompleted": Additional, "processFailed": processFailed },
});
queryBySQLService.processAsync(queryBySQLParams);
}
};//根据输入的文本值去查找对应数据集
function Additional(queryEventArgs) {
var i, j, feature,
result = queryEventArgs.result;//marker
if (result && result.recordsets) {
for (i = 0; i < result.recordsets.length; i++) {
if (result.recordsets[i].features) {
for (j = 0; j < result.recordsets[i].features.length; j++) {
feature = result.recordsets[i].features[j];
sm_capital = feature.attributes.NAME;
address = feature.attributes.ADDRESS;
x = feature.attributes.DISPLAY_X;
y = feature.attributes.DISPLAY_Y;
$("#site").append("<li class='lf' onclick=ck(this)><img style='height:21px;width: 21px;margin-right:7px' src='/Content/img/maker_L _Red.png' />" + address + sm_capital + "★<div style='display:none'>" + x + "," + y + "</div></li>");
}
}
}
}
}//通过循环追加出所有筛选中的结果在右侧栏展示
二、在右侧栏的查询结果中，点击你想要查看的地址位置，跳转到该位置并显示该地址的名称位置。
如图：
代码如下：
function DW(X, Y, DZ, bool) {
var marker = null;
//初始化弹窗参数---------------------------------------------------
var size = new SuperMap.Size(25, 20);//标记的大小
var offset = new SuperMap.Pixel(-(size.w / 2), -size.h);//此类用x,y坐标描绘屏幕坐标（像素点）。
var icon = new SuperMap.Icon('/Content/img/maker_L _Red.png', size, offset);//图标类，表示显示在屏幕上的图标
//---------------------------------------------------
//初始化标记覆盖物类
marker = new SuperMap.Marker(new SuperMap.LonLat(X, Y), icon);//LonLat坐标
marker.name = DZ;//名称
marker.bool = bool;
//注册 click 事件,触发 mouseClickHandler()方法
markerLayer.events.on({
'click': OpenPersonMessagepopupss,//单击触发
'touchstart': OpenPersonMessagepopupss,//当在触摸屏上对marker开始进行触摸时触发此事件。//假如要在移动端的浏览器也实现点击弹框，则在注册touch类事件
"scope": marker,//传参数
});
markerLayer.addMarker(marker);//添加到图层
if (bool == true) {//判断是否自动打开消息框
OpenPersonMessagepopupss(marker);//点击立刻把弹窗显示出来
}
}
function OpenPersonMessagepopupss(obj) {
var marker = this;
var lonlat = marker.lonlat;
var contentHTML = "<div style='font-size:.8em; opacity: 1;background-color:#fff; '><img src='/Content/img/rdn_55fb3c21e57bf.jpg' style='width:45px;height:25px' /><div>" + obj.name + "</div></div>";
var size = new SuperMap.Size(28, 20);
var offset = new SuperMap.Pixel(0, -size.h);
var icon = new SuperMap.Icon("/Content/img/maker_L _Red.png", size, offset);
var popup = new SuperMap.Popup.FramedCloud("popwin",
new SuperMap.LonLat(obj.lonlat.lon, obj.lonlat.lat),
null,
contentHTML,
icon,
true);
infowin = popup;
map.addPopup(popup);
map.panTo(new SuperMap.LonLat(obj.lonlat.lon, obj.lonlat.lat));
map.setCenter(new SuperMap.LonLat(obj.lonlat.lon, obj.lonlat.lon), 3);
}
function ck(e) {
//clearFeatures();
map.removeAllPopup();//删除弹窗
markerLayer.clearMarkers();//移除所有的案件标记物
var x = $($($(e)[0])[0].outerHTML)[0].textContent;
var splitp = x.split("★")[1];//坐标x,y
var Y = splitp.split(",")[1];//坐标y
var X = splitp.split(",")[0];//坐标x
var DZ = x.split("★")[0];//地址
DW(X, Y, DZ, true);
}