';
let listStr = "";
for (let index = 0; index < lyrs.length; index++) {
const lyr = lyrs[index];
let dom = listStr.replace('THENAME', lyr.name);
dom = dom.replace('THETITLE', lyr.name);
dom = dom.replace('THEID', lyr.id);
dom = dom.replace('THEWS', lyr.dataSourceName);
dom = dom.replace('THEDATASETNAME', lyr.dataSetName);
lyrsSelect += dom;
}
lyrsSelect += '
';
layui.use('layer', function() {
let layer = layui.layer;
layer.open({
id: "panel-layerSelect",
type: 1,
area: ["300px", "220px"],
btn: ['确定'],
title: "请选择图层",
skin: 'layui-ext-coolskin',
content: lyrsSelect, //这里content是一个DOM,注意:最好该元素要存放在body最外层,否则可能被其它的相对元素所影响
cancel: function(index, layero) {
layer.close(index);
},
yes: function(e) {
var layers = $("#layers input:checked");
if (layers.length == 0) {
layer.msg('请至少选择一个图层!', {icon: 7});
return;
}
layer.close(e);
map.on('click', function (evt) {
var pt = crs.project(evt.latlng);
var _Point = L.marker([pt.y, pt.x]);
for (var index = 0; index < layers.length; index++) {
if(index == layers.length-1){
map.off("click");
}
let checked = layers[index].checked;
if (!checked)
continue;
var ws = layers[index].attributes.dataSourceName.value;
var dataSetName = layers[index].attributes.dataSetName.value;
var thatsubtitleP = layers[index].title;
clicQueryProcess(thatsubtitleP, dataSetName, ws, _Point);
}
});
}
});
layui.use(['form'], function() {
let form = layui.form;
form.render();
});
});
}
function clicQueryProcess(subtitle, dataSetName, ws, _Point) {
Q.queryByGeometry(subtitle,undefined,dataSetName, ws, _Point, function(result) {
if (result.result == undefined) return;
panels.createResultPanelWithDataGrid({
subTitle: subtitle,
features: result.result.features.features,
title: "点击查询结果",
//count: count,
dataSetName: dataSetName,
dataSourceName: ws
}, function() {
});
// 坐标系转换
var result = L.Util.transform(result.result.features, crs, L.CRS.EPSG4326);
L.geoJSON(result, {
style:{color: "#ef5b9c"},
onEachFeature: function (feature, layer) {
let attributes = "";
let lyrs = CONST_VALUES.GX_Datas;
for (var index = 0; index < lyrs.length; index++) {
var lyr = lyrs[index];
if(ws == lyr.dataSourceName && dataSetName == lyr.dataSetName){
var showCols = lyr.cols;
if(showCols != undefined && showCols != ""){
var colsArr = showCols.split(",");
for(var i = 0; i < colsArr.length; i++){
var colArr = colsArr[i].split(":");
let attValue = feature.properties[colArr[0]];
let attr = colArr[1] + ":" + attValue + " ";
attributes += attr;
}
}
break;
}
}
layer.bindPopup(attributes);
}
}).addTo(resultLayer);
});
}
/*距离测量*/
function measureDistance() {
map.off('click');
map.off('dblclick');
$("#tips").css('display', 'block');
var isFirstPoint = true; //判断是否是起始点
var latLngTemp = null;//存储上一点击点临时变量
var resultDis = 0; //总距
map.on('click', function(ev) {
TempLayer.clearLayers();
$("#tips").css('display', 'none');
var polyLine;
if(isFirstPoint) {
L.marker([ev.latlng.lat, ev.latlng.lng]).addTo(resultLayer); //起始点
var texticon = L.divIcon({ //定义图标
html: "起点",
iconSize: [30, 20],
iconAnchor: [15, 0]
});
L.marker([ev.latlng.lat, ev.latlng.lng], {
icon: texticon
}).addTo(resultLayer); //marker实现文本框显示
latLngTemp = ev.latlng; //存储上一点击点
isFirstPoint = false;
} else {
if(!latLngTemp.equals(ev.latlng)) { //避免出现结束双击,导致距离为0
polyLine = L.polyline([ //与上一点连线
[latLngTemp.lat, latLngTemp.lng],
[ev.latlng.lat, ev.latlng.lng]
], {
color: "red"
});
resultLayer.addLayer(polyLine);
L.marker([ev.latlng.lat, ev.latlng.lng]).addTo(resultLayer); // 最后点击点经纬度
var from = turf.point([latLngTemp.lng, latLngTemp.lat]);
var to = turf.point([ev.latlng.lng, ev.latlng.lat]);
var options = {units: 'kilometers'};
var jl11 = turf.distance(from, to, options) * 1000;
latLngTemp = ev.latlng; //更新临时变量为新点
resultDis += jl11;
// 距离根据地图单位进行换算成米或者千米
var content = "距上点:" + Number(jl11).toFixed(2) + "米" + " 总距:" + Number(resultDis).toFixed(2) + "米";
var texticon = L.divIcon({
html: content,
iconSize: [110, 40],
iconAnchor: [55, -5] //设置标签偏移避免遮盖
});
L.marker([ev.latlng.lat, ev.latlng.lng], {
icon: texticon
}).addTo(resultLayer);
TempLayer.clearLayers();
}
}
map.on("mousemove", function(ev) {
TempLayer.clearLayers();
var TempLine = L.polyline([ //虚线临时线段
[latLngTemp.lat, latLngTemp.lng],
[ev.latlng.lat, ev.latlng.lng]
], {
color: "red",
dashArray: "5,5"
});
TempLayer.addLayer(TempLine);
// 对坐标系进行转换
var pt1 = crs.project(latLngTemp);
var pt2 = crs.project(ev.latlng);
var TempLineDis = L.polyline([ //与上一点连线
[pt1.y, pt1.x],
[pt2.y, pt2.x]
]);
var from = turf.point([latLngTemp.lng, latLngTemp.lat]);
var to = turf.point([ev.latlng.lng, ev.latlng.lat]);
var options = {units: 'kilometers'};
var jl11 = turf.distance(from, to, options) * 1000;
var texticon = L.divIcon({
html: Number(jl11).toFixed(2) + "米",
iconSize: 90,
className: 'my-div-icon',
iconAnchor: [45, -5]
});
L.marker([ev.latlng.lat, ev.latlng.lng], {
icon: texticon
}).addTo(TempLayer);
});
});
map.on('dblclick', function(ev) {
map.off('click');
map.off('dblclick');
map.off('mousemove');
});
}
/*面积测量*/
function measureArea() {
drawType = "measureArea";
// 创建绘制控件,并启用
var handler = new L.Draw.Polygon(map);
handler.enable();
map.on(L.Draw.Event.CREATED,function (e) {
if(drawType != "measureArea"){
return;
}
var type = e.layerType,
layer = e.layer;
if (type === 'marker') {
layer.bindPopup('A popup!');
}
//将图形信息传给下一步,进行查询功能
var locationArray = e.layer.getLatLngs()[0];
var polygonArray = Array();
var turfPolygonArray = Array();
var midArray = Array();
var turfMidArray = Array();
var firstX = locationArray[0].lat;
var firstY = locationArray[0].lng;
for(var i =0;i请重新设置查询条件!');
return -1;
}
var layer = layui.layer;
panels.createPanelBase(layer,params.title);
panels.createPagesByFeatures(params);
if (callback != undefined) {
callback();
}
});
}
panels.createPanelBase = function(layer,title, resizeCb) {
//兼容两个页面
let pc = $("#panel-condition");
let theTarget;
if (pc.length > 0) {
theTarget = pc.parent();
} else {
theTarget = $(".q-s-type");
}
const conditionLeft = parseInt(theTarget.css("left").replace('px', ''));
const conditionWidth = parseInt(theTarget.width());
const conditionHeight = parseInt(theTarget.height());
const conditionTop = parseInt(theTarget.css("top").replace('px', ''));
let x = conditionLeft + conditionWidth + 5 + "px";
let y = conditionTop + conditionHeight + 10 + "px";
let offset = ['65px'];
if (pc.length === 0) {
x = conditionLeft + "px";
offset = [y, x]
}
panels.lastResultPanelIndex = layer.open({
id: "panel-result",
anim: 3,
area: ['412px', '400px'],
title: "" + title + "",
skin: 'layui-ext-coolskin',
offset: offset,
shade: 0,
type: 1,
maxmin: true,
resizing: function(layero) {
if (resizeCb)
resizeCb(layero);
},
full:function(layero){
if (resizeCb)
resizeCb(layero);
},
restore:function(layero){
if (resizeCb)
resizeCb(layero);
},
success: function(layero, index) {}
});
}
panels.createPagesByFeatures = function(params) {
panels.createMonitor();
let subTitle = params.subTitle;
let features = params.features;
let dataSourceName = params.dataSourceName;
let dataSetName = params.dataSetName;
if (features.length == 0) return;
let tableNew = "
";
const tableNewID = utils.guid();
while (tableNew.indexOf('THETABLEID') > -1)
tableNew = tableNew.replace('THETABLEID', tableNewID);
let cols = [];
var showZoom = 10;
let lyrs = CONST_VALUES.GX_Datas;
for (var index = 0; index < lyrs.length; index++) {
var lyr = lyrs[index];
if(dataSourceName == lyr.dataSourceName && dataSetName == lyr.dataSetName){
var showCols = lyr.cols;
showZoom = lyr.showZoom;
if(showCols != undefined && showCols != ""){
var colsArr = showCols.split(",");
for(var i = 0; i < colsArr.length; i++){
var colArr = colsArr[i].split(":");
cols.push({ field: colArr[0], title: colArr[1], sort: true, width: 80 });
}
}
break;
}
}
if(cols.length == 0){
for (const property in features[0].properties) {
let tmpProperty = property.toUpperCase();
if (tmpProperty.startsWith("SM") && tmpProperty != "SMID")
continue;
if (tmpProperty.startsWith("SS"))
continue;
cols.push({ field: property, title: property, sort: true });
}
}
let datas = [];
for (let i in features) {
datas.push(features[i].properties);
}
let tabControl = "
" +
"
" +
"
";
let tabControlID = utils.guid();
tabControl = tabControl.replace('THETABCONTROLID', tabControlID);
if ($('div[lay-filter="resultTabControl"]').length == 0) {
$(tabControl).appendTo($("#panel-result"));
}
layui.use('element', function() {
let element = layui.element;
element.render();
let tabID = utils.guid();
element.tabAdd('resultTabControl', {
title: subTitle,
content: tableNew //支持传入html
,
id: tabID
});
layui.use('table', function() {
let table = layui.table;
table.render({
elem: '#' + tableNewID,
data: datas,
page: true,
"lay-size": 'sm',
limit: 6,
done:function (res, curr, count){
$("table").css("width", "100%");
},
cols: [cols],
// toolbar: true,
// totalrow: true,
// title: '导出结果'
});
table.on('row(' + tableNewID + ')', function(obj) {
Q.queryBySql(dataSetName, dataSourceName, "SMID = " + obj.data.SMID, 0, 10, "", function(result) {
if (result.result == undefined) return;
// 坐标系转换
var result = L.Util.transform(result.result.features, crs, L.CRS.EPSG4326);
L.geoJSON(result, {
style:{color: "#f80202"},
onEachFeature: function (feature, layer) {
if(feature.geometry.type == 'Point'){
map.flyTo(layer._latlng, showZoom);
}
else{
map.flyToBounds(layer._bounds);
}
let attributes = "";
let lyrs = CONST_VALUES.GX_Datas;
for (var index = 0; index < lyrs.length; index++) {
var lyr = lyrs[index];
if(dataSourceName == lyr.dataSourceName && dataSetName == lyr.dataSetName){
var showCols = lyr.cols;
if(showCols != undefined && showCols != ""){
var colsArr = showCols.split(",");
for(var i = 0; i < colsArr.length; i++){
var colArr = colsArr[i].split(":");
let attValue = feature.properties[colArr[0]];
let attr = colArr[1] + ":" + attValue + " ";
attributes += attr;
}
}
break;
}
}
layer.bindPopup(attributes);
}
}).addTo(resultLayer);
});
});
});
element.tabChange('resultTabControl', tabID);
const thisTitle = $('.layui-layer-title');
thisTitle.addClass("layui-layer-title-transparent");
});
}
panels.createMonitor = function() {
if (panels.createMonitor.created == true) return;
panels.createMonitor.created = true;
function imitateClick(oElement, iClientX, iClientY) {
var oEvent;
if (document.createEventObject) { //For IE
oEvent = document.createEventObject();
oEvent.clientX = iClientX;
oEvent.clientY = iClientY;
oElement.fireEvent("onclick", oEvent);
} else {
oEvent = document.createEvent("MouseEvents");
oEvent.initMouseEvent("click", true, true, window, 0, 0, 0, iClientX, iClientY);
oElement.dispatchEvent(oEvent);
}
}
panels.createMonitor.moniter = imitateClick;
}
utils.guid = function() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
let r = Math.random() * 16 | 0,
v = c == 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
}
Q.queryBySql = function(datasetName, wsName, sql, fromIndex, toIndex, aggregations, callback) {
let sqlParam = new SuperMap.GetFeaturesBySQLParameters({
queryParameter: {
name: datasetName + "@" + wsName,
attributeFilter: sql
},
datasetNames: [wsName + ":" + datasetName],
fromIndex: fromIndex,
toIndex: toIndex,
maxFeatures: toIndex
});
L.supermap.featureService(dataUrl).getFeaturesBySQL(sqlParam,
function(serviceResult) {
if (callback != undefined) {
callback(serviceResult)
}
});
}
Q.queryByBounds = function(title,datasetName, wsName, bounds, callback) {
var paramsTmp = {};
paramsTmp.title = title;
paramsTmp.dataSetName = datasetName;
paramsTmp.dataSourceName = wsName;
var geometryParam = new SuperMap.GetFeaturesByGeometryParameters({
datasetNames: [wsName + ":" + datasetName],
geometry: bounds,
spatialQueryMode: "INTERSECT"
});
L.supermap
.featureService(dataUrl)
.getFeaturesByGeometry(geometryParam, function (serviceResult) {
if (callback != undefined) {
callback(serviceResult,paramsTmp)
}
});
}
Q.queryByGeometry = function(title,distanceTmp,datasetName, wsName, geometry, callback) {
var paramsTmp = {};
paramsTmp.title = title;
paramsTmp.dataSetName = datasetName;
paramsTmp.dataSourceName = wsName;
if(distanceTmp == undefined){
distanceTmp = CONST_VALUES.QUERY_BufferDistance;
}
var bufferParam = new SuperMap.GetFeaturesByBufferParameters({
datasetNames: [wsName + ":" + datasetName],
bufferDistance: distanceTmp,
geometry: geometry
});
L.supermap
.featureService(dataUrl)
.getFeaturesByBuffer(bufferParam, function (serviceResult) {
if (callback != undefined) {
callback(serviceResult,paramsTmp)
}
});
}
function InitDraw() {
// 创建一个名为“plottingLayer”的标绘图层。
plottingLayer = L.supermap.plotting.plottingLayer("plot", serverUrl);
// 向map中添加标绘图层
plottingLayer.addTo(map);
// 标绘控件
drawMapControl = L.supermap.plotting.drawControl(plottingLayer);
drawMapControl.addTo(map);
plotting = L.supermap.plotting.getControl(map, serverUrl);
drawMapControl.on(SuperMap.Plot.Event.featureadded, function (event) {
drawLayer = event.feature;
var symbolType = drawLayer.symbolType;
if (symbolType === SuperMap.Plot.SymbolType.ARBITRARYPOLYGONSYMBOL) {
}
else if (symbolType === SuperMap.Plot.SymbolType.CIRCLESYMBOL) {
var latLngs = drawLayer.getLatLngs();
var pt = crs.project(latLngs[0]);
var _Point = L.marker([pt.y, pt.x]);
var dataSourceName = CONST_VALUES.GX_DataSourceName;
var dataSetName = CONST_VALUES.GX_DataSetName;
var bufferParam = new SuperMap.GetFeaturesByBufferParameters({
datasetNames: [dataSourceName + ":" + dataSetName],
bufferDistance: CONST_VALUES.QUERY_BufferDistance,
geometry: _Point
});
// 判断点击的点是否在管线上
L.supermap
.featureService(dataUrl)
.getFeaturesByBuffer(bufferParam, function (result) {});
}
else if (symbolType === SuperMap.Plot.SymbolType.RECTANGLESYMBOL) {
}
// 覆土分析
if(drawType == "FTFX"){
ftfxProcess(drawLayer);
}
else{
let lyrs = CONST_VALUES.GX_Datas;
let lyrsSelect = '
';
let listStr = "";
for (let index = 0; index < lyrs.length; index++) {
const lyr = lyrs[index];
let dom = listStr.replace('THENAME', lyr.name);
dom = dom.replace('THETITLE', lyr.name);
dom = dom.replace('THEID', lyr.id);
dom = dom.replace('THEWS', lyr.dataSourceName);
dom = dom.replace('THEDATASETNAME', lyr.dataSetName);
lyrsSelect += dom;
}
lyrsSelect += '
';
layui.use('layer', function() {
let layer = layui.layer;
layer.open({
id: "panel-layerSelect",
type: 1,
area: ["300px", "220px"],
btn: ['确定'],
title: "请选择图层",
skin: 'layui-ext-coolskin',
content: lyrsSelect, //这里content是一个DOM,注意:最好该元素要存放在body最外层,否则可能被其它的相对元素所影响
cancel: function(index, layero) {
layer.close(index);
},
yes: function(e) {
var layers = $("#layers input:checked");
if (layers.length == 0) {
layer.msg('请至少选择一个图层!', {
icon: 7
});
return;
}
layer.close(e);
// 矩形查询
if (symbolType === SuperMap.Plot.SymbolType.RECTANGLESYMBOL) {
var rectangleTemp = L.Util.transform(drawLayer._bounds, L.CRS.EPSG4326, crs);
var ptArrayTemp = rectangleTemp.geometry.coordinates[0];
var ptArray = Array();
for(var i = 0; i < ptArrayTemp.length; i++) {
var tempArr = ptArrayTemp[i];
var ptTemp = Array();
ptTemp.push(tempArr[1]);
ptTemp.push(tempArr[0]);
ptArray.push(ptTemp);
}
var polygonTmp = L.polygon(ptArray);
for (var index = 0; index < layers.length; index++) {
let checked = layers[index].checked;
if (!checked)
continue;
var ws = layers[index].attributes.dataSourceName.value;
var dataSetName = layers[index].attributes.dataSetName.value;
var thatsubtitleP = layers[index].title;
Q.queryByBounds(thatsubtitleP, dataSetName, ws, polygonTmp, function(result,titleTmp) {
if (result.result == undefined) return;
panels.createResultPanelWithDataGrid({
subTitle: titleTmp.title,
features: result.result.features.features,
title: "范围查询结果",
//count: count,
dataSetName: titleTmp.dataSetName,
dataSourceName: titleTmp.dataSourceName
}, function() {
//debugger;
});
// 坐标系转换
// var result = L.Util.transform(result.result.features, crs, L.CRS.EPSG4326);
//
// L.geoJSON(result, {
// style:{color: "red"},
// onEachFeature: function (feature, layer) {
// let attributes = "";
// let lyrs = CONST_VALUES.GX_Datas;
// for (var index = 0; index < lyrs.length; index++) {
// var lyr = lyrs[index];
// if(ws == lyr.dataSourceName && dataSetName == lyr.dataSetName){
// var showCols = lyr.cols;
// if(showCols != undefined && showCols != ""){
// var colsArr = showCols.split(",");
// for(var i = 0; i < colsArr.length; i++){
// var colArr = colsArr[i].split(":");
// let attValue = feature.properties[colArr[0]];
// let attr = colArr[1] + ":" + attValue + " ";
// attributes += attr;
// }
// }
// break;
// }
// }
// layer.bindPopup(attributes);
// }
// }).addTo(resultLayer);
});
}
}
else if (symbolType === SuperMap.Plot.SymbolType.CIRCLESYMBOL) {
var latLngs = drawLayer.getLatLngs();
var from = turf.point([latLngs[0].lng, latLngs[0].lat]);
var to = turf.point([latLngs[1].lng, latLngs[1].lat]);
var options = {units: 'kilometers'};
var jl11 = turf.distance(from, to, options) * 1000;
var pt = crs.project(latLngs[0]);
var _Point = L.marker([pt.y, pt.x]);
var radius = Math.sqrt(Math.pow((latLngs[1].lng - latLngs[0].lng)*1000, 2) + Math.pow((latLngs[1].lat - latLngs[0].lat)*1000, 2));
for (var index = 0; index < layers.length; index++) {
let checked = layers[index].checked;
if (!checked)
continue;
var ws = layers[index].attributes.dataSourceName.value;
var dataSetName = layers[index].attributes.dataSetName.value;
var thatsubtitleP = layers[index].title;
var bufferParam = new SuperMap.GetFeaturesByBufferParameters({
datasetNames: [ws + ":" + dataSetName],
bufferDistance: jl11,
geometry: _Point
});
Q.queryByGeometry(thatsubtitleP, jl11, dataSetName, ws, _Point, function(result,titleTmp) {
if (result.result == undefined) return;
panels.createResultPanelWithDataGrid({
subTitle: titleTmp.title,
features: result.result.features.features,
title: "范围查询结果",
//count: count,
dataSetName: titleTmp.dataSetName,
dataSourceName: titleTmp.dataSourceName
}, function() {
});
// 坐标系转换
// var result = L.Util.transform(result.result.features, crs, L.CRS.EPSG4326);
//
// L.geoJSON(result, {
// style:{color: "red"},
// onEachFeature: function (feature, layer) {
// let attributes = "";
// let lyrs = CONST_VALUES.GX_Datas;
// for (var index = 0; index < lyrs.length; index++) {
// var lyr = lyrs[index];
// if(ws == lyr.dataSourceName && dataSetName == lyr.dataSetName){
// var showCols = lyr.cols;
// if(showCols != undefined && showCols != ""){
// var colsArr = showCols.split(",");
// for(var i = 0; i < colsArr.length; i++){
// var colArr = colsArr[i].split(":");
// let attValue = feature.properties[colArr[0]];
// let attr = colArr[1] + ":" + attValue + " ";
// attributes += attr;
// }
// }
// break;
// }
// }
// layer.bindPopup(attributes);
// }
// }).addTo(resultLayer);
})
}
}
}
});
layui.use(['form'], function() {
let form = layui.form;
form.render();
});
});
}
drawMapControl.handler.disable();
});
}
function polygonQueryProcess(subtitle, dataSetName, ws, bounds) {
Q.queryByBounds(subtitle, dataSetName, ws, bounds, function(result,titleTmp) {
if (result.result == undefined) return;
panels.createResultPanelWithDataGrid({
subTitle: titleTmp.title,
features: result.result.features.features,
title: "范围查询结果",
//count: count,
dataSetName: titleTmp.dataSetName,
dataSourceName: titleTmp.dataSourceName
}, function() {
});
// 坐标系转换
var result = L.Util.transform(result.result.features, crs, L.CRS.EPSG4326);
L.geoJSON(result, {
style:{color: "red"},
onEachFeature: function (feature, layer) {
let attributes = "";
let lyrs = CONST_VALUES.GX_Datas;
for (var index = 0; index < lyrs.length; index++) {
var lyr = lyrs[index];
if(ws == lyr.dataSourceName && dataSetName == lyr.dataSetName){
var showCols = lyr.cols;
if(showCols != undefined && showCols != ""){
var colsArr = showCols.split(",");
for(var i = 0; i < colsArr.length; i++){
var colArr = colsArr[i].split(":");
let attValue = feature.properties[colArr[0]];
let attr = colArr[1] + ":" + attValue + " ";
attributes += attr;
}
}
break;
}
}
layer.bindPopup(attributes);
}
}).addTo(resultLayer);
});
}
// 范围查询
function drawPolygon() {
drawType = "drawPolygon";
var handler = new L.Draw.Polygon(map);
handler.enable();
map.on(L.Draw.Event.CREATED,function (e) {
if (drawType != "drawPolygon") {
return;
}
//将图形信息传给下一步,进行查询功能
var locationArray = e.layer.getLatLngs()[0];
var polygonArray = Array();
var midArray = Array();
var polygonArrayTmp = Array();
var midArrayTmp = Array();
var firstX = locationArray[0].lat;
var firstY = locationArray[0].lng;
for (var i = 0; i < locationArray.length; i++) {
var pt2 = crs.project(locationArray[i]);
var x = locationArray[i].lat;
var y = locationArray[i].lng;
midArray.push(x);
midArray.push(y);
polygonArray.push(midArray);
midArray = Array();
midArrayTmp.push(pt2.y);
midArrayTmp.push(pt2.x);
polygonArrayTmp.push(midArrayTmp);
midArrayTmp = Array();
}
midArray.push(firstX);
midArray.push(firstY);
polygonArray.push(midArray);
var pt2 = crs.project(locationArray[0]);
midArrayTmp.push(pt2.y);
midArrayTmp.push(pt2.x);
polygonArrayTmp.push(midArrayTmp);
var polygonTmp = L.polygon(polygonArrayTmp);
var polygon = L.polygon(polygonArray, {color: "#00FF00"});
resultLayer.addLayer(polygon);
let lyrs = CONST_VALUES.GX_Datas;
//debugger;
let lyrsSelect = '
';
let listStr = "";
for (let index = 0; index < lyrs.length; index++) {
const lyr = lyrs[index];
let dom = listStr.replace('THENAME', lyr.name);
dom = dom.replace('THETITLE', lyr.name);
dom = dom.replace('THEID', lyr.id);
dom = dom.replace('THEWS', lyr.dataSourceName);
dom = dom.replace('THEDATASETNAME', lyr.dataSetName);
lyrsSelect += dom;
}
lyrsSelect += '
';
layui.use('layer', function() {
let layer = layui.layer;
layer.open({
id: "panel-layerSelect",
type: 1,
area: ["300px", "220px"],
btn: ['确定'],
title: "请选择图层",
skin: 'layui-ext-coolskin',
content: lyrsSelect, //这里content是一个DOM,注意:最好该元素要存放在body最外层,否则可能被其它的相对元素所影响
cancel: function(index, layero) {
layer.close(index);
},
yes: function(e) {
var layers = $("#layers input:checked");
if (layers.length == 0) {
layer.msg('请至少选择一个图层!', {
icon: 7
});
return;
}
layer.close(e);
for (var index = 0; index < layers.length; index++) {
let checked = layers[index].checked;
if (!checked)
continue;
var ws = layers[index].attributes.dataSourceName.value;
var dataSetName = layers[index].attributes.dataSetName.value;
var thatsubtitleP = layers[index].title;
Q.queryByBounds(thatsubtitleP,dataSetName, ws, polygonTmp, function(result,titleTmp) {
if (result.result == undefined) return;
panels.createResultPanelWithDataGrid({
subTitle: titleTmp.title,
features: result.result.features.features,
title: "范围查询结果",
//count: count,
dataSetName: titleTmp.dataSetName,
dataSourceName: titleTmp.dataSourceName
}, function() {
//debugger;
});
// 坐标系转换
// var result = L.Util.transform(result.result.features, crs, L.CRS.EPSG4326);
//
// L.geoJSON(result, {
// style:{color: "red"},
// onEachFeature: function (feature, layer) {
// let attributes = "";
// let lyrs = CONST_VALUES.GX_Datas;
// for (var index = 0; index < lyrs.length; index++) {
// var lyr = lyrs[index];
// if(ws == lyr.dataSourceName && dataSetName == lyr.dataSetName){
// var showCols = lyr.cols;
// if(showCols != undefined && showCols != ""){
// var colsArr = showCols.split(",");
// for(var i = 0; i < colsArr.length; i++){
// var colArr = colsArr[i].split(":");
// let attValue = feature.properties[colArr[0]];
// let attr = colArr[1] + ":" + attValue + " ";
// attributes += attr;
// }
// }
// break;
// }
// }
// layer.bindPopup(attributes);
// }
// }).addTo(resultLayer);
});
}
}
});
layui.use(['form'], function() {
let form = layui.form;
form.render();
});
});
});
}
function drawCircle() {
drawType = "";
setDefualtStyle();
drawMapControl.handler.disable();
drawMapControl.handler.libID = 0;
drawMapControl.handler.code = 29;
drawMapControl.handler.serverUrl = serverUrl;
drawMapControl.handler.enable();
}
function drawRectangle() {
drawType = "";
setDefualtStyle();
drawMapControl.handler.disable();
drawMapControl.handler.libID = 0;
drawMapControl.handler.code = 26;
drawMapControl.handler.serverUrl = serverUrl;
drawMapControl.handler.enable();
}
//设置选择区域的线色
function setDefualtStyle() {
var defualtStyle = plotting.getDefaultStyle();
defualtStyle.defaultFlag = true;
defualtStyle.lineColor = "#00FF00";
defualtStyle.fillSymbolID = 0;
defualtStyle.fillColor = "#00FF00";
}
function processCompleted(result,selectTitle,gx) {
var gxArr = gx.split(":");
panels.createResultPanelWithDataGrid({
subTitle: selectTitle,
features: result.features,
title: "按范围查询结果",
count: result.features.length,
dataSetName: gxArr[1],
dataSourceName: gxArr[0]
}, function() {
});
}
function toggleFullScreen() {
var el = document.body;
var isFullscreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
if (!isFullscreen) { //进入全屏,多重短路表达式
(el.requestFullscreen && el.requestFullscreen()) ||
(el.mozRequestFullScreen && el.mozRequestFullScreen()) ||
(el.webkitRequestFullscreen && el.webkitRequestFullscreen()) || (el.msRequestFullscreen && el.msRequestFullscreen());
}
else { //退出全屏,三目运算符
document.exitFullscreen ? document.exitFullscreen() :
document.mozCancelFullScreen ? document.mozCancelFullScreen() :
document.webkitExitFullscreen ? document.webkitExitFullscreen() : '';
}
}
panels.createResultPanelWithChart = function(xAxis, groupBy, data, title, subTitle, xTypeName, yTypeName, typeOfECharts, callback) {
layui.use('layer', function() {
let chart;
let resizeCb = function(layerno) {
if (chart == undefined) return;
var autoHeight = $("#panel-result").height() - 100;
chart.getDom().style.height = autoHeight + "px";
chart.getDom().childNodes[0].style.height = autoHeight + "px";
chart.getDom().childNodes[0].childNodes[0].setAttribute("height",autoHeight);
chart.getDom().childNodes[0].childNodes[0].style.height = autoHeight + "px";
var autoWidth = $("#panel-result").width();
chart.getDom().style.width = autoWidth + "px";
chart.getDom().childNodes[0].style.width = autoWidth + "px";
chart.getDom().childNodes[0].childNodes[0].setAttribute("width",autoWidth);
chart.getDom().childNodes[0].childNodes[0].style.width = autoWidth + "px";
chart.resize();
}
var layer = layui.layer;
panels.createPanelBase(layer,title, resizeCb);
chart = panels.createChart(xAxis, groupBy,data, title, subTitle, xTypeName, yTypeName, typeOfECharts);
panels.createChartPages(xAxis, groupBy, data);
if (callback != undefined) {
callback();
}
});
}
panels.createChart = function(xAxis, groupBy, data, title, subTitle, xTypeName, yTypeName, typeOfECharts) {
if (data.length == 0) return;
let xAxisData = [];
for (let val in data) {
xAxisData.push(data[val][groupBy])
}
let seriesData = [];
for (let i = 0; i < xAxis.length; i++) {
let series = {};
series.name = xAxis[i];
series.type = typeOfECharts;
series.data = [];
for (let j = 0; j < data.length; j++) {
series.data.push(parseFloat(data[j][xAxis[i]]));
}
seriesData.push(series);
}
const chartDivID = "statistics-Chart";
const chartDom = "";
let tabControl = "
';
let lyrs = CONST_VALUES.GX_Datas;
lyrsSelect += '
';
let listStr = "";
for (let index = 0; index < lyrs.length; index++) {
const lyr = lyrs[index];
let dom = listStr.replace('THETITLE', lyr.name);
dom = dom.replace('THEID', lyr.id);
dom = dom.replace('THEWS', lyr.dataSourceName);
dom = dom.replace('THEDATASETNAME', lyr.dataSetName);
dom = dom.replace('THETYPE', lyr.dataType);
lyrsSelect += dom;
}
lyrsSelect += '
';
layui.use('layer', function() {
let layer = layui.layer;
layer.open({
id: "panel-editTypes",
type: 1,
area: ["500px", "300px"],
btn: ['确定'],
title: "请选择编辑类型",
skin: 'layui-ext-coolskin',
content: lyrsSelect, //这里content是一个DOM,注意:最好该元素要存放在body最外层,否则可能被其它的相对元素所影响
cancel: function(index, layero) {
layer.close(index);
},
yes: function(e) {
let editType = $('input[name="editType"]:checked').val();
if (editType == undefined) {
layer.msg('请选择编辑类型!', {
icon: 7
});
return;
}
let editLayer = $('input[name="editLayer"]:checked').val();
if (editLayer == undefined) {
layer.msg('请选择编辑图层!', {
icon: 7
});
return;
}
layer.close(e);
var editTypeVal = $('input[name="editType"]:checked')[0].attributes.value.value;
var dataSourceName = $('input[name="editLayer"]:checked')[0].attributes.dataSourceName.value;
var dataSetName = $('input[name="editLayer"]:checked')[0].attributes.dataSetName.value;
var dataType = $('input[name="editLayer"]:checked')[0].attributes.dataType.value;
var editTypeMap
if(editTypeVal==0){
editTypeMap = SuperMap.EditType.ADD;
}
else if(editTypeVal == 1){
editTypeMap = SuperMap.EditType.UPDATE;
}
else if(editTypeVal == 2){
editTypeMap = SuperMap.EditType.DELETE;
}
map.on('contextmenu', function(evt){
map.off('click');
map.off('contextmenu');
});
// 新增
if(editTypeVal == 0){
// 添加管线
if(dataType == "line"){
var startPt;// 开始点击坐标
var endPt; // 结束点击坐标
var startGd;// 查询到开始管点
var endGd;// 查询到结束管点
var isFirst = true;
map.on('click', function (evt) {
var pt = crs.project(evt.latlng);
var _Point = L.marker([pt.y, pt.x]);
Q.queryByGeometry("",undefined,CONST_VALUES.JD_DataSetName, CONST_VALUES.JD_DataSourceName, _Point, function(result) {
if (result.result == undefined || result.result.features.features.length == 0) {
layui.layer.msg('附件没有发现管点信息,请重新选择!');
return;
}
var rs = L.Util.transform(result.result.features, crs, L.CRS.EPSG4326);
if(isFirst){
isFirst = false;
startPt = evt.latlng;
startGd = rs.features[0];
}
else{
endPt = evt.latlng;
endGd = rs.features[0];
if(!startPt.equals(endPt)){
var newLine = L.polyline([ //与上一点连线
[startGd.geometry.coordinates[1], startGd.geometry.coordinates[0]],
[endGd.geometry.coordinates[1], endGd.geometry.coordinates[0]]
], {
color: "#070af3"
});
newLine.addTo(map);
var from = turf.point([startGd.geometry.coordinates[0], startGd.geometry.coordinates[1]]);
var to = turf.point([endGd.geometry.coordinates[0], endGd.geometry.coordinates[1]]);
var options = {units: 'kilometers'};
var distance = (turf.distance(from, to, options) * 1000).toFixed(2);
var aa = newLine.toGeoJSON();
var bb = L.Util.transform(aa, L.CRS.EPSG4326, crs);
$.ajax({
url: '/static/maps/bs/create-line.html',
success: function(htmlContext) {
layui.use('layer', function(){
var layer = layui.layer,laydate = layui.laydate,form = layui.form;
layer.open({
type: 1 //此处以iframe举例
,area: ["400px", "550px"]
,title: "添加管线信息"
,skin: 'layui-ext-coolskin'
//,shade: 0.8
,maxmin: true
,content: htmlContext
,zIndex: layer.zIndex
,cancel: function (index, layero) {
layer.close(index);
map.removeLayer(newLine);
}
,success: function(layero, index){
$("#QSDH").val(startGd.properties["BSM"]);
$("#ZDDH").val(endGd.properties["BSM"]);
$("#QDMS").val(startGd.properties["MS"]);
$("#ZDMS").val(endGd.properties["MS"]);
$("#CD").val(distance);
var nowTime = new Date().Format("yyyyMMddhhmmssS");
$("#BSM").val(nowTime);
//日期
laydate.render({
elem: '#LRRQ',
});
laydate.render({
elem: '#MSRQ',
});
}
,btn: ['保存', '关闭']
,yes: function(){
var data = form.val('createLine');
bb.properties = data;
var featuresParameters = new SuperMap.EditFeaturesParameters({
dataSourceName: dataSourceName,
dataSetName: dataSetName,
features: [bb],
editType: editTypeMap,
returnContent: true
});
L.supermap.featureService(dataUrl)
.editFeatures(featuresParameters,function(result){
console.log(result);
});
layer.closeAll();
}
,btn2: function(){
layer.closeAll();
map.removeLayer(newLine);
}
});
})
},
error: function() {
layui.layer.msg('功能未实现!', {
icon: 7
});
}
});
isFirst = true;
}
}
});
});
}
else{
map.on('click', function (evt) {
var pt = crs.project(evt.latlng);
var aaaaa = L.circleMarker(evt.latlng, {color: '#953716', radius: 3, fill: true, fillColor: 'green'}).addTo(map);
var _Point = L.marker([pt.y, pt.x]);
var aa = _Point.toGeoJSON();
$.ajax({
url: '/static/maps/bs/create-point.html',
success: function(htmlContext) {
layui.use('layer', function(){
var layer = layui.layer,laydate = layui.laydate,form = layui.form;
layer.open({
type: 1 //此处以iframe举例
,area: ["390px", "550px"]
,title: "添加管点信息"
,skin: 'layui-ext-coolskin'
//,shade: 0.8
,maxmin: true
,content: htmlContext
,zIndex: layer.zIndex
,cancel: function (index, layero) {
layer.close(index);
map.removeLayer(aaaaa);
}
,success: function(layero, index){
$("#X").val(aa.geometry.coordinates[0]);
$("#Y").val(aa.geometry.coordinates[1]);
var nowTime = new Date().Format("yyyyMMddhhmmssS");
$("#BSM").val(nowTime);
$("#WTH").val(nowTime);
//日期
laydate.render({
elem: '#LRRQ',
});
laydate.render({
elem: '#MSRQ',
});
}
,btn: ['保存', '关闭']
,yes: function(){
var data = form.val('createPoint');
aa.properties = data;
var featuresParameters = new SuperMap.EditFeaturesParameters({
dataSourceName: dataSourceName,
dataSetName: dataSetName,
features: [aa],
editType: editTypeMap,
returnContent: true
});
L.supermap.featureService(dataUrl)
.editFeatures(featuresParameters,function(result){
console.log(result);
});
layer.closeAll();
}
,btn2: function(){
layer.closeAll();
map.removeLayer(aaaaa);
}
});
})
},
error: function() {
layui.layer.msg('功能未实现!', {
icon: 7
});
}
});
});
}
}
// 修改操作
else if(editTypeVal == 1){
map.on('click', function (evt) {
var pt = crs.project(evt.latlng);
var _Point = L.marker([pt.y, pt.x]);
Q.queryByGeometry("",undefined,dataSetName, dataSourceName, _Point, function(result) {
if (result.result == undefined || result.result.features.features.length < 1) return;
// 坐标系转换
//var result = L.Util.transform(result.result.features, crs, L.CRS.EPSG4326);
var editFeature = result.result.features.features[0];
var rsVal = editFeature.properties;
if(dataType == "line"){
$.ajax({
url: '/static/maps/bs/create-line.html',
success: function(htmlContext) {
layui.use('layer', function(){
var layer = layui.layer,laydate = layui.laydate,form = layui.form;
layer.open({
type: 1 //此处以iframe举例
,area: ["400px", "550px"]
,title: "编辑管线信息"
,skin: 'layui-ext-coolskin'
//,shade: 0.8
,maxmin: true
,content: htmlContext
,zIndex: layer.zIndex
,cancel: function (index, layero) {
layer.close(index);
}
,success: function(layero, index){
form.val('createLine', rsVal);
//日期
laydate.render({
elem: '#LRRQ',
});
laydate.render({
elem: '#MSRQ',
});
}
,btn: ['保存', '关闭']
,yes: function(){
var data = form.val('createLine');
editFeature.properties = data;
var featuresParameters = new SuperMap.EditFeaturesParameters({
dataSourceName: dataSourceName,
dataSetName: dataSetName,
features: [editFeature],
editType: editTypeMap,
returnContent: true
});
L.supermap.featureService(dataUrl)
.editFeatures(featuresParameters,function(result){
console.log(result);
});
layer.closeAll();
}
,btn2: function(){
layer.closeAll();
}
});
})
},
error: function() {
layui.layer.msg('功能未实现!', {
icon: 7
});
}
});
}
else{
$.ajax({
url: '/static/maps/bs/create-point.html',
success: function(htmlContext) {
layui.use('layer', function(){
var layer = layui.layer,laydate = layui.laydate,form = layui.form;
layer.open({
type: 1 //此处以iframe举例
,area: ["390px", "550px"]
,title: "编辑管点信息"
,skin: 'layui-ext-coolskin'
//,shade: 0.8
,maxmin: true
,content: htmlContext
,zIndex: layer.zIndex
,cancel: function (index, layero) {
layer.close(index);
}
,success: function(layero, index){
form.val('createPoint', rsVal);
//日期
laydate.render({
elem: '#LRRQ',
});
laydate.render({
elem: '#MSRQ',
});
}
,btn: ['保存', '关闭']
,yes: function(){
var data = form.val('createPoint');
editFeature.properties = data;
var featuresParameters = new SuperMap.EditFeaturesParameters({
dataSourceName: dataSourceName,
dataSetName: dataSetName,
features: [editFeature],
editType: editTypeMap,
returnContent: true
});
L.supermap.featureService(dataUrl)
.editFeatures(featuresParameters,function(result){
console.log(result);
});
layer.closeAll();
}
,btn2: function(){
layer.closeAll();
}
});
})
},
error: function() {
layui.layer.msg('功能未实现!', {
icon: 7
});
}
});
}
L.geoJSON(result, {
style:{color: "#ef5b9c"},
onEachFeature: function (feature, layer) {
let attributes = "";
let lyrs = CONST_VALUES.GX_Datas;
for (var index = 0; index < lyrs.length; index++) {
var lyr = lyrs[index];
if(ws == lyr.dataSourceName && dataSetName == lyr.dataSetName){
var showCols = lyr.cols;
if(showCols != undefined && showCols != ""){
var colsArr = showCols.split(",");
for(var i = 0; i < colsArr.length; i++){
var colArr = colsArr[i].split(":");
let attValue = feature.properties[colArr[0]];
let attr = colArr[1] + ":" + attValue + " ";
attributes += attr;
}
}
break;
}
}
layer.bindPopup(attributes);
}
}).addTo(resultLayer);
});
});
}
// 删除操作
else if(editTypeVal == 2){
drawType = "deletefeature";
// 创建绘制控件,并启用
var handler = new L.Draw.Polygon(map);
handler.enable();
map.on(L.Draw.Event.CREATED,function (e) {
if(drawType != "deletefeature"){
return;
}
var type = e.layerType,
layer = e.layer;
if (type === 'marker') {
layer.bindPopup('A popup!');
}
//将图形信息传给下一步,进行查询功能
var locationArray = e.layer.getLatLngs()[0];
var polygonArray = Array();
var midArray = Array();
var polygonArrayTmp = Array();
var midArrayTmp = Array();
var firstX = locationArray[0].lat;
var firstY = locationArray[0].lng;
for(var i =0;i 0){
layui.use('layer', function(){
let lyrsTmp = '