"use script"; //开发环境建议开启严格模式
|
|
//对应widget.js中MyWidget实例化后的对象
|
var thisWidget;
|
|
//当前页面业务
|
function initWidgetView(_thisWidget) {
|
thisWidget = _thisWidget;
|
|
initExtent();
|
initLayer();
|
}
|
|
//限定区域相关处理
|
function initExtent() {
|
$("#trFwDraw").hide();
|
$("#trFwBuffer").hide();
|
$('input:radio[name="radioFwType"]').change(function () {
|
var type = $(this).val();
|
|
$("#trFwDraw").hide();
|
$("#trFwBuffer").hide();
|
thisWidget.clearDraw();
|
|
if (type == "2") {
|
$("#trFwDraw").show();
|
} else if (type == "3") {
|
$("#trFwBuffer").show();
|
}
|
});
|
//框选查询 矩形
|
$("#drawRectangle").click(function () {
|
thisWidget.clearDraw();
|
thisWidget.drawLayer.startDraw({
|
type: "rectangle",
|
style: {
|
color: "#00FF00",
|
opacity: 0.3,
|
outline: true,
|
outlineColor: "#ffffff",
|
clampToGround: true,
|
},
|
});
|
});
|
//框选查询 圆
|
$("#drawCircle").click(function () {
|
thisWidget.clearDraw();
|
thisWidget.drawLayer.startDraw({
|
type: "circle",
|
style: {
|
color: "#00FF00",
|
opacity: 0.3,
|
outline: true,
|
outlineColor: "#ffffff",
|
clampToGround: true,
|
},
|
});
|
});
|
|
//框选查询 多边
|
$("#drawPolygon").click(function () {
|
thisWidget.clearDraw();
|
thisWidget.drawLayer.startDraw({
|
type: "polygon",
|
style: {
|
color: "#00FF00",
|
opacity: 0.3,
|
outline: true,
|
outlineColor: "#ffffff",
|
clampToGround: true,
|
},
|
});
|
});
|
$("#drawClear").click(function () {
|
thisWidget.clearDraw();
|
});
|
|
//缓冲区
|
$("#txtRadius").change(function (e) {
|
thisWidget.updateBufferForRadius();
|
});
|
$("#drawBufferPoint").click(function () {
|
thisWidget.clearDraw();
|
thisWidget.drawLayer.startDraw({
|
type: "point",
|
style: {
|
pixelSize: 12,
|
color: "#ffff00",
|
},
|
buffer: true, //标识是缓冲分析
|
});
|
});
|
$("#drawBufferLine").click(function () {
|
thisWidget.clearDraw();
|
thisWidget.drawLayer.startDraw({
|
type: "polyline",
|
style: {
|
color: "#ffff00",
|
width: 3,
|
clampToGround: true,
|
},
|
buffer: true, //标识是缓冲分析
|
});
|
});
|
$("#drawBufferPolygon").click(function () {
|
thisWidget.clearDraw();
|
thisWidget.drawLayer.startDraw({
|
type: "polygon",
|
style: {
|
color: "#ffff00",
|
outline: true,
|
outlineColor: "#f0ce22",
|
outlineWidth: 4,
|
opacity: 0.5,
|
clampToGround: true,
|
},
|
buffer: true, //标识是缓冲分析
|
});
|
});
|
|
$("#btnQuery").click(function () {
|
excuteSqlQuery();
|
});
|
$("#btnClear").click(function () {
|
thisWidget.clearDraw();
|
clearResult();
|
});
|
}
|
//是否需要缓冲
|
function hasBuffer() {
|
var drawtype = $('input:radio[name="radioFwType"]:checked').val();
|
return drawtype == "3";
|
}
|
|
function getBufferRadius() {
|
var bufferRadius = Number($("#txtRadius").val()) * 1000; //km
|
return bufferRadius;
|
}
|
|
//图层相关处理
|
var treeObj;
|
var layersObj = {};
|
var layersCfg;
|
|
function initLayer() {
|
$.getJSON("config.json", function (data) {
|
layersCfg = data.layers.reverse();
|
initTree();
|
});
|
|
$table = $("#tableResult");
|
$(window).resize(function () {
|
$table.bootstrapTable("refreshOptions", {
|
height: getHeight(),
|
});
|
});
|
}
|
|
function initTree() {
|
//初始化树
|
var setting = {
|
check: {
|
enable: true,
|
},
|
data: {
|
simpleData: {
|
enable: true,
|
},
|
},
|
callback: {
|
onCheck: treeOverlays_onCheck,
|
onClick: treeOverlays_onClick,
|
},
|
};
|
|
var zNodes = [];
|
for (var i = layersCfg.length - 1; i >= 0; i--) {
|
var item = layersCfg[i];
|
if (item == null || item.hide) {
|
continue;
|
}
|
|
item.index = i;
|
item.result = [];
|
|
var node = {
|
id: item.id || 0,
|
pId: item.pid || -1,
|
name: item.name,
|
index: i,
|
};
|
|
if (item.url) {
|
node.icon = "images/layer.png";
|
layersObj[i] = item;
|
zNodes.push(node);
|
} else {
|
node.icon = "images/folder.png";
|
node.open = item.open == null ? true : item.open;
|
zNodes.push(node);
|
}
|
}
|
|
$.fn.zTree.destroy();
|
treeObj = $.fn.zTree.init($("#treeOverlays"), setting, zNodes);
|
}
|
|
function treeOverlays_onCheck(e, treeId, setreeNode) {
|
var zTree = $.fn.zTree.getZTreeObj(treeId);
|
//获得所有改变check状态的节点
|
var changedNodes = zTree.getChangeCheckedNodes();
|
for (var i = 0; i < changedNodes.length; i++) {
|
let treeNode = changedNodes[i];
|
treeNode.checkedOld = treeNode.checked;
|
|
var layer = layersObj[treeNode.index];
|
if (layer == null) {
|
continue;
|
}
|
|
layer.show = treeNode.checked;
|
}
|
}
|
function treeOverlays_onClick(event, treeId, treeNode) {
|
if (treeNode == null || treeNode.id == null) {
|
return;
|
}
|
|
var layer = layersObj[treeNode.index];
|
if (layer == null) {
|
return;
|
}
|
|
initTable(layer);
|
}
|
|
var $table;
|
function initTable(layer) {
|
var columnsTbl = [];
|
columnsTbl.push({
|
field: "index",
|
title: "序号",
|
sortable: true,
|
editable: false,
|
align: "left",
|
formatter: function (value, row, index) {
|
return index + 1;
|
},
|
});
|
|
var tableCoumns = layer.tableCoumns;
|
for (var i = 0; i < layer.columns.length; i++) {
|
var column = layer.columns[i];
|
|
if (!tableCoumns || tableCoumns.indexOf(column["field"]) != -1) {
|
columnsTbl.push({
|
field: column.field,
|
title: column.name,
|
sortable: true,
|
editable: false,
|
align: "left",
|
});
|
}
|
}
|
|
$table.bootstrapTable("destroy");
|
$table.bootstrapTable({
|
data: layer.result,
|
height: getHeight(),
|
singleSelect: false, //单选
|
showPaginationSwitch: false,
|
pagination: true,
|
pageNumber: 1,
|
pageSize: 10,
|
pageList: [5, 10, 20, 50, 100],
|
columns: columnsTbl,
|
onClickRow: function (item, $element, field) {
|
thisWidget.flyTo(item);
|
},
|
});
|
}
|
function getHeight() {
|
return $(window).height() - 400;
|
}
|
|
//开始查询
|
|
function clearResult() {
|
allCount = 0;
|
$("#lblCounts").html("");
|
|
thisWidget.clearShowFeature();
|
$table.bootstrapTable("destroy");
|
|
for (var i = layersCfg.length - 1; i >= 0; i--) {
|
var item = layersCfg[i];
|
if (item == null || item.hide) {
|
continue;
|
}
|
|
item.result = [];
|
|
if (item.url) {
|
var node = treeObj.getNodeByParam("index", item.index);
|
node.name = `${item.name}`;
|
treeObj.updateNode(node);
|
}
|
}
|
}
|
|
function excuteSqlQuery() {
|
clearResult();
|
|
var arrSelect = [];
|
for (var i in layersObj) {
|
var item = layersObj[i];
|
if (item.show) {
|
arrSelect.push(item);
|
}
|
}
|
|
if (arrSelect.length == 0) {
|
toastr.warning("请至少选择1个图层");
|
return;
|
}
|
|
var drawtype = $('input:radio[name="radioFwType"]:checked').val();
|
|
if (!thisWidget.hasDraw() && (drawtype == "2" || drawtype == "3")) {
|
toastr.warning("请在地图上鼠标单击绘制限定范围！");
|
return;
|
}
|
var graphic = thisWidget.getExtentByType(drawtype);
|
|
var col_val = $.trim($("#txtKey").val());
|
|
for (let i = 0, len = arrSelect.length; i < len; i++) {
|
var layer = arrSelect[i];
|
|
var sqlstring = "1=1 ";
|
if (col_val.length > 0) {
|
layer.queryCoumns.forEach((col_name) => {
|
sqlstring += " and " + col_name + " like '%" + col_val + "%' ";
|
});
|
}
|
|
thisWidget.query({
|
layer: layer,
|
where: sqlstring,
|
graphic: graphic,
|
});
|
}
|
}
|
|
var allCount;
|
function updateAllCount(thiscount, layer) {
|
allCount += thiscount;
|
$("#lblCounts").html(`共${allCount}条`);
|
|
var node = treeObj && treeObj.getNodeByParam("index", layer.index);
|
node.name = `${layer.name}(${thiscount})`;
|
treeObj.updateNode(node);
|
}
|
