//模块:
var widget_queryBaiduPOI = xjsdk.widget.bindClass(xjsdk.widget.BaseWidget.extend({
options: {
resources: [
'view.css',
"./lib/cesiumjs/plugins/class/BaiduPOI.js" //百度poi查询
],
//直接添加到index
view: {
type: "append",
url: 'view.html',
parent: 'body'
},
},
//初始化[仅执行1次]
create: function () {
this.baiduPOI = new BaiduPOI();
},
//每个窗口创建完成后调用
winCreateOK: function (opt, result) {
if (opt.type != "append") return;
var that = this;
var img = $('#map-querybar img');
img.each(function (index, item) {
$(item).attr('src', that.path + $(item).attr('src'));
});
if (that.config.position)
$("#map-querybar").css(that.config.position);
if (that.config.style)
$("#map-querybar").css(that.config.style);
// 搜索框
$("#txt_querypoi").click(function () {
// 文本框内容为空
if ($.trim($(this).val()).length == 0) {
that.hideAllQueryBarView();
that.showHistoryList(); // 显示历史记录
}
});
var timetik = 0;
// 搜索框绑定文本框值发生变化,隐藏默认搜索信息栏,显示匹配结果列表
$("#txt_querypoi").bind("input propertychange", function () {
clearTimeout(timetik);
timetik = setTimeout(function () {
that.hideAllQueryBarView();
that.clearLayers();
var queryVal = $.trim($("#txt_querypoi").val());
if (queryVal.length == 0) {
// 文本框内容为空,显示历史记录
that.showHistoryList();
} else {
that.autoTipList(queryVal, true);
}
}, 500);
});
// 点击搜索查询按钮
$("#btn_querypoi").click(function () {
clearTimeout(timetik);
that.hideAllQueryBarView();
var queryVal = $.trim($("#txt_querypoi").val());
that.strartQueryPOI(queryVal, true);
});
//绑定回车键
$("#txt_querypoi").bind('keydown', function (event) {
if (event.keyCode == "13") {
$("#btn_querypoi").click();
}
});
// 返回查询结果面板界面
$("#querybar_detail_back").click(function () {
that.hideAllQueryBarView();
$("#querybar_resultlist_view").show();
});
},
//打开激活
activate: function () {
var that = this;
//单击事件
this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
this.handler.setInputAction(function () {
// 点击地图区域,隐藏所有弹出框
if ($.trim($("#txt_querypoi").val()).length == 0) {
that.hideAllQueryBarView();
$("#txt_querypoi").blur();
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
},
//关闭释放
disable: function () {
if (this.handler) {
this.handler.destroy();
delete this.handler
}
this.hideAllQueryBarView();
this.clearLayers();
},
hideAllQueryBarView: function () {
$("#querybar_histroy_view").hide();
$("#querybar_autotip_view").hide();
$("#querybar_detail_view").hide();
$("#querybar_resultlist_view").hide();
},
// 点击面板条目,自动填充搜索框,并展示搜索结果面板
autoSearch: function (name) {
$("#txt_querypoi").val(name);
$("#btn_querypoi").trigger("click");
},
//===================与后台交互========================
//显示智能提示搜索结果
autoTipList: function (text, queryEx) {
//输入经纬度数字时
if (this.isLonLat(text)) return;
//查询外部widget
if (this.hasExWidget() && queryEx) {
var qylist = this.autoExTipList(text);
return;
}
//查询外部widget
this.baiduPOI.autoTip({
text: text,
location: this.viewer.xjsdk.getCenter(),
success: function (result) {
var inhtml = "";
var pois = result.list;
for (var index = 0; index < pois.length; index++) {
var name = pois[index].name;
// var num = pois[index].num;
// if (num > 0) continue;
inhtml += "
" + name + "";
}
if (inhtml.length > 0) {
$("#querybar_ul_autotip").html(inhtml);
$("#querybar_autotip_view").show();
}
}
});
},
// 根据输入框内容,查询显示列表
queryText: null,
strartQueryPOI: function (text, queryEx) {
if (text.length == 0) {
toastr.warning('请输入搜索关键字!');
return;
}
// TODO:根据文本框输入内容,从数据库模糊查询到所有匹配结果(分页显示)
this.addHistory(text);
this.hideAllQueryBarView();
//输入经纬度数字时
if (this.isLonLat(text)) {
this.centerAtLonLat(text);
return;
}
//查询外部widget
if (this.hasExWidget() && queryEx) {
var qylist = this.queryExPOI(text);
return;
}
//查询外部widget
this.thispage = 1;
this.queryText = text;
this.query_location = this.viewer.xjsdk.getCenter()
this.query_radius = this.viewer.camera.positionCartographic.height; //单位:米
this.queryPOI();
},
queryPOI: function () {
var that = this;
//查询获取数据
this.baiduPOI.queryText({
text: this.queryText,
count: this.pageSize,
page: (this.thispage - 1),
location: this.query_location,
radius: this.query_radius,
success: function (result) {
if (!that.isActivate) return;
that.showPOIPage(result.list, result.allcount);
}
});
},
//===================显示查询结果处理========================
pageSize: 6,
arrdata: [],
counts: 0,
allpage: 0,
thispage: 0,
showPOIPage: function (data, counts) {
this.arrdata = data;
this.counts = counts;
if (this.counts < data.length) this.counts = data.length;
this.allpage = Math.ceil(this.counts / this.pageSize);
var inhtml = "";
if (this.counts == 0) {
inhtml += '没有找到"' + this.queryText + '"相关结果
';
}
else {
for (var index = 0; index < this.arrdata.length; index++) {
var item = this.arrdata[index];
var startIdx = (this.thispage - 1) * this.pageSize;
item.index = startIdx + (index + 1);
var _id = index;
var _mc;
if (item.detail_info && item.detail_info.detail_url) {
_mc = '' + item.name + '';
}
else {
_mc = item.name;
}
inhtml += ' '
+ item.index + '、' + _mc + '
' + (item.address || '') + '
';
this.objResultData[_id] = item;
};
//分页信息
var _fyhtml;
if (this.allpage > 1)
_fyhtml = '' + this.thispage + '/' + this.allpage + '页
首页 < > ';
else
_fyhtml = '';
//底部信息
inhtml += '找到' + this.counts + '条结果
' + _fyhtml + '
';
}
$("#querybar_resultlist_view").html(inhtml);
$("#querybar_resultlist_view").show();
this.showPOIArr(this.arrdata);
if (this.counts == 1) {
this.showDetail('0');
}
},
showFirstPage: function () {
this.thispage = 1;
this.queryPOI();
},
showNextPage: function () {
this.thispage = this.thispage + 1;
if (this.thispage > this.allpage) {
this.thispage = this.allpage;
toastr.warning('当前已是最后一页了');
return;
}
this.queryPOI();
},
showPretPage: function () {
this.thispage = this.thispage - 1;
if (this.thispage < 1) {
this.thispage = 1;
toastr.warning('当前已是第一页了');
return;
}
this.queryPOI();
},
//点击单个结果,显示详细
objResultData: {},
showDetail: function (id) {
var item = this.objResultData[id];
this.centerAt(item);
},
dataSource: null,
getWorkLayer: function () {
if (this.dataSource == null) {
this.dataSource = new Cesium.CustomDataSource();
this.viewer.dataSources.add(this.dataSource);
}
return this.dataSource;
},
clearLayers: function () {
if (this.dataSource == null) return;
this.dataSource.entities.removeAll();
this.viewer.xjsdk.popup.close();
},
showPOIArr: function (arr) {
var that = this;
this.clearLayers();
var dataSource = this.getWorkLayer();
$(arr).each(function (i, item) {
var jd = Number(item.x);
var wd = Number(item.y);
if (isNaN(jd) || isNaN(wd)) return;
var pt = viewer.xjsdk.point2map({ x: jd, y: wd })
jd = pt.x
wd = pt.y
item.x = jd
item.y = wd
//==================构建图上目标单击后显示div=================
var name;
if (item.detail_info && item.detail_info.detail_url) {
name = '' + item.name + '';
}
else {
name = item.name;
}
var inHtml = '';
//==============================================================
//添加实体
var entity = dataSource.entities.add({
name: item.name,
position: Cesium.Cartesian3.fromDegrees(jd, wd),
point: {
color: new Cesium.Color.fromCssColorString("#3388ff"),
pixelSize: 10,
outlineColor: new Cesium.Color.fromCssColorString("#ffffff"),
outlineWidth: 2,
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, //贴地
scaleByDistance: new Cesium.NearFarScalar(1000, 1, 1000000, 0.1),
disableDepthTestDistance: Number.POSITIVE_INFINITY //不被遮挡
},
label: {
text: item.name,
font: '20px 楷体',
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
fillColor: Cesium.Color.AZURE,
outlineColor: Cesium.Color.BLACK,
outlineWidth: 2,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
pixelOffset: new Cesium.Cartesian2(0, -10), //偏移量
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, //是地形上方的高度
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 200000),
disableDepthTestDistance: Number.POSITIVE_INFINITY //不被遮挡
},
data: item,
popup: {
html: inHtml,
anchor: [0, -12],
},
// click: function (entity) {//单击回调
// var data = entity.data;
// }
});
item._entity = entity;
});
if (arr.length > 1)
that.viewer.flyTo(that.dataSource.entities, { duration: 3 });
},
centerAt: function (item) {
var entity = item._entity;
if (entity == null) {
toastr.warning(item.name + " 无经纬度坐标信息!");
return;
}
this.viewer.xjsdk.centerAt({ x: item.x, y: item.y, minz: 2500 });
var that = this;
setTimeout(function () {
that.viewer.xjsdk.popup.show(entity);
}, 3000);
},
//===================坐标定位处理========================
isLonLat: function (text) {
var reg = /^-?((0|1?[0-7]?[0-9]?)(([.][0-9]*)?)|180(([.][0]*)?)),-?((0|[1-8]?[0-9]?)(([.][0-9]*)?)|90(([.][0]*)?))$/; /*定义验证表达式*/
return reg.test(text); /*进行验证*/
},
centerAtLonLat: function (text) {
var arr = text.split(",");
if (arr.length != 2) return;
var jd = Number(arr[0]);
var wd = Number(arr[1]);
if (isNaN(jd) || isNaN(wd)) return;
this.viewer.xjsdk.centerAt({ x: jd, y: wd, minz: 2500 });
var dataSource = this.getWorkLayer();
var inHtml = '\
';
//添加实体
var entity = dataSource.entities.add({
name: "坐标定位",
position: Cesium.Cartesian3.fromDegrees(jd, wd),
point: {
color: new Cesium.Color.fromCssColorString("#3388ff"),
pixelSize: 10,
outlineColor: new Cesium.Color.fromCssColorString("#ffffff"),
outlineWidth: 2,
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, //贴地
scaleByDistance: new Cesium.NearFarScalar(1000, 1, 1000000, 0.1),
disableDepthTestDistance: Number.POSITIVE_INFINITY //不被遮挡
},
popup: {
html: inHtml,
anchor: [0, -12],
}
});
var that = this;
setTimeout(function () {
that.viewer.xjsdk.popup.show(entity);
}, 3000);
},
//===================历史记录相关========================
cookieName: 'querypoi_gis',
arrHistory: [],
showHistoryList: function () {
$("#querybar_histroy_view").hide();
var lastcookie = haoutil.cookie.get(this.cookieName); //读取cookie值
if (lastcookie == null) return;
this.arrHistory = eval(lastcookie);
if (this.arrHistory == null || this.arrHistory.length == 0) return;
var inhtml = "";
for (var index = this.arrHistory.length - 1; index >= 0; index--) {
var item = this.arrHistory[index];
inhtml += "" + item + "";
}
$("#querybar_ul_history").html(inhtml);
$("#querybar_histroy_view").show();
},
clearHistory: function () {
this.arrHistory = [];
haoutil.cookie.del(this.cookieName);
$("#querybar_ul_history").html("");
$("#querybar_histroy_view").hide();
},
//记录历史值
addHistory: function (data) {
this.arrHistory = [];
var lastcookie = haoutil.cookie.get(this.cookieName); //读取cookie值
if (lastcookie != null) {
this.arrHistory = eval(lastcookie);
}
//先删除之前相同记录
this.arrHistory.remove(data);
this.arrHistory.push(data);
if (this.arrHistory.length > 10)
this.arrHistory.splice(0, 1);
lastcookie = JSON.stringify(this.arrHistory);
haoutil.cookie.add(this.cookieName, lastcookie);
},
//======================查询非百度poi,联合查询处理=================
//外部widget是否存在或启用
exWidget: null,
hasExWidget: function () {
if (window["queryBarWidget"] == null)
return false;
else {
this.exWidget = queryBarWidget;
return true;
}
},
autoExTipList: function (text) {
var that = this;
this.exWidget.autoTipList(text, function () {
that.autoTipList(text, false);
});
},
//调用外部widget进行查询
queryExPOI: function (text) {
var layer = this.getWorkLayer();
var that = this;
this.exWidget.strartQueryPOI(text, layer, function () {
that.strartQueryPOI(text, false);
});
}
}));