/*
|
* @Description:
|
* @Version: 1.0
|
* @Author: yangsx
|
* @Date: 2019-12-09 19:01:40
|
* @LastEditors: yangsx
|
* @LastEditTime: 2019-12-14 14:44:57
|
*/
|
define([
|
"dojo",
|
"dojo/_base/declare",
|
"dojo/_base/lang",
|
"base/BaseWidget",
|
"dojo/text!widgets/mapBrowse/template.html",
|
"base/AppEvent",
|
"base/ConfigData",
|
"widgets/mapBrowse/config",
|
"dojo/dom",
|
"dojo/dom-construct",
|
"dojo/dom-attr",
|
"dojo/dom-style",
|
"dojo/on",
|
"esri/layers/ArcGISDynamicMapServiceLayer",
|
"esri/layers/ArcGISTiledMapServiceLayer",
|
"esri/layers/FeatureLayer",
|
"controls/tab/TabControl",
|
"esri/dijit/SymbolStyler",
|
"esri/styles/basic",
|
"dojo/_base/array",
|
"esri/InfoTemplate",
|
"esri/tasks/query",
|
"esri/tasks/QueryTask",
|
"esri/Color",
|
"esri/graphic",
|
"esri/geometry/Point",
|
"esri/symbols/SimpleLineSymbol",
|
"esri/symbols/SimpleFillSymbol",
|
"esri/symbols/PictureMarkerSymbol",
|
"esri/symbols/SimpleMarkerSymbol",
|
"esri/SpatialReference",
|
"esri/tasks/GeometryService",
|
"esri/tasks/ProjectParameters",
|
"esri/layers/GraphicsLayer",
|
"esri/layers/LabelLayer",
|
"esri/symbols/TextSymbol",
|
"esri/renderers/SimpleRenderer",
|
"esri/renderers/ClassBreaksRenderer",
|
"esri/tasks/Geoprocessor",
|
"esri/tasks/DataFile",
|
"esri/geometry/webMercatorUtils",
|
"esri/symbols/Font",
|
"esri/geometry/ScreenPoint",
|
"esri/layers/ImageParameters",
|
"esri/geometry/geometryEngine",
|
"dojo/domReady!"
|
], function(
|
dojo,
|
declare,
|
lang,
|
BaseWidget,
|
template,
|
AppEvent,
|
ConfigData,
|
config,
|
dom,
|
domConstruct,
|
domAttr,
|
domStyle,
|
on,
|
ArcGISDynamicMapServiceLayer,
|
ArcGISTiledMapServiceLayer,
|
FeatureLayer,
|
TabControl,
|
SymbolStyler,
|
basic,
|
arrayUtils,
|
InfoTemplate,
|
Query,
|
QueryTask,
|
Color,
|
Graphic,
|
Point,
|
SimpleLineSymbol,
|
SimpleFillSymbol,
|
PictureMarkerSymbol,
|
SimpleMarkerSymbol,
|
SpatialReference,
|
GeometryService,
|
ProjectParameters,
|
GraphicsLayer,
|
LabelLayer,
|
TextSymbol,
|
SimpleRenderer,
|
ClassBreaksRenderer,
|
Geoprocessor,
|
DataFile,
|
webMercatorUtils,
|
Font,
|
ScreenPoint,
|
ImageParameters,
|
geometryEngine
|
) {
|
var Widget = declare([BaseWidget], {
|
widgetName: "MapBrowseWidgetCopy",
|
label: "地图浏览",
|
templateString: template,
|
_map: null,
|
objThis: null,
|
_siteLayer: new GraphicsLayer(),
|
constructor: function(options, srcRefNode) {
|
this._map = options.map;
|
objThis = this;
|
},
|
startup: function() {
|
objThis._map.addLayer(objThis._siteLayer);
|
},
|
open: function() {
|
findStaVideoByStcd({ stcd: stcd }, function(res) {
|
// var data = [];
|
// var type = "";
|
// domConstruct.create(
|
// "select",
|
// {
|
// id: "toolSelect",
|
// class: "toolSelect"
|
// },
|
// dom.byId("mainMapWidget")
|
// );
|
// for (var i = 0; i < res.data.length; i++) {
|
// domConstruct.create(
|
// "option",
|
// {
|
// class: "toolSelectOption",
|
// lat: Number(res.data[i].lat),
|
// lon: Number(res.data[i].lon),
|
// innerHTML: res.data[i].videoName
|
// },
|
// dom.byId("toolSelect")
|
// );
|
// switch (res.data[i].id) {
|
// case 128:
|
// type = "气象土壤";
|
// break;
|
// case 129:
|
// type = "水质";
|
// break;
|
// default:
|
// type = "";
|
// }
|
// data.push({
|
// id: res.data[i].id,
|
// name: res.data[i].videoName,
|
// lat: Number(res.data[i].lat),
|
// lon: Number(res.data[i].lon),
|
// stcd: stcd,
|
// type: type
|
// });
|
// }
|
// $("#toolSelect").change(function() {
|
// $("select option:selected");
|
// var point = new Point(
|
// parseFloat($("#toolSelect option:selected").attr("lon")),
|
// parseFloat($("#toolSelect option:selected").attr("lat")),
|
// objThis.map.spatialReference
|
// );
|
// objThis.map.centerAndZoom(point, 15);
|
// });
|
|
// // domConstruct.create(
|
// // "div",
|
// // {
|
// // id: "toolUpdateName",
|
// // class: "toolUpdateName",
|
// // innerHTML: "修改站点名称"
|
// // },
|
// // dom.byId("mainMapWidget")
|
// // );
|
|
// $("#toolUpdateName").click(function() {
|
// layer.open({
|
// type: 2,
|
// title: "修改站点名称",
|
// shadeClose: true,
|
// shade: 0.8,
|
// area: ["500px", "320px"],
|
// content: "widgets/mapBrowse/upDateSiteName.html" //iframe的url
|
// });
|
// // objThis._init();
|
// });
|
|
// config.data = data;
|
// objThis._init();
|
});
|
},
|
_init: function() {
|
var symbol = new PictureMarkerSymbol({
|
url: "images/sompl.png",
|
height: 21,
|
width: 15
|
});
|
var font = new Font();
|
font.setSize("12px");
|
font.setWeight(Font.WEIGHT_BOLD);
|
console.log(1);
|
|
|
for (var i in config.data) {
|
var point = new Point(
|
parseFloat(config.data[i].lon),
|
parseFloat(config.data[i].lat),
|
objThis.map.spatialReference
|
);
|
|
if (config.data[i].name.length == 4) {
|
var symbol1 = new PictureMarkerSymbol({
|
url: "images/txt.png",
|
height: 20,
|
width: 60
|
}).setOffset(55, 2);
|
var label = new TextSymbol(config.data[i].name)
|
.setColor("#fff")
|
.setOffset(50, -2)
|
.setFont(font);
|
} else if (config.data[i].name.length == 5) {
|
var symbol1 = new PictureMarkerSymbol({
|
url: "images/txt.png",
|
height: 20,
|
width: 70
|
}).setOffset(65, 2);
|
var label = new TextSymbol(config.data[i].name)
|
.setColor("#fff")
|
.setOffset(60, -2)
|
.setFont(font);
|
} else if (config.data[i].name.length == 6) {
|
var symbol1 = new PictureMarkerSymbol({
|
url: "images/txt.png",
|
height: 20,
|
width: 80
|
}).setOffset(74, 2);
|
var label = new TextSymbol(config.data[i].name)
|
.setColor("#fff")
|
.setOffset(70, -2)
|
.setFont(font);
|
} else if (config.data[i].name.length == 7) {
|
var symbol1 = new PictureMarkerSymbol({
|
url: "images/txt.png",
|
height: 20,
|
width: 90
|
}).setOffset(80, 2);
|
var label = new TextSymbol(config.data[i].name)
|
.setColor("#fff")
|
.setOffset(80, -2)
|
.setFont(font);
|
} else if (config.data[i].name.length == 8) {
|
var symbol1 = new PictureMarkerSymbol({
|
url: "images/txt.png",
|
height: 20,
|
width: 100
|
}).setOffset(90, 2);
|
var label = new TextSymbol(config.data[i].name)
|
.setColor("#fff")
|
.setOffset(90, -2)
|
.setFont(font);
|
} else if (config.data[i].name.length == 9) {
|
var symbol1 = new PictureMarkerSymbol({
|
url: "images/txt.png",
|
height: 20,
|
width: 110
|
}).setOffset(95, 2);
|
var label = new TextSymbol(config.data[i].name)
|
.setColor("#fff")
|
.setOffset(100, -2)
|
.setFont(font);
|
} else if (config.data[i].name.length == 10) {
|
var symbol1 = new PictureMarkerSymbol({
|
url: "images/txt.png",
|
height: 20,
|
width: 120
|
}).setOffset(105, 2);
|
var label = new TextSymbol(config.data[i].name)
|
.setColor("#fff")
|
.setOffset(100, -2)
|
.setFont(font);
|
} else {
|
var symbol1 = new PictureMarkerSymbol({
|
url: "images/txt.png",
|
height: 20,
|
width: 130
|
}).setOffset(110, 2);
|
var label = new TextSymbol(config.data[i].name)
|
.setColor("#fff")
|
.setOffset(120, -2)
|
.setFont(font);
|
}
|
|
var temGraphic = new Graphic(point, symbol, config.data[i]);
|
var temGraphicImg = new Graphic(point, symbol1, config.data[i]);
|
var textGraphic = new Graphic(point, label, config.data[i]);
|
|
objThis._siteLayer.add(temGraphic);
|
objThis._siteLayer.add(temGraphicImg);
|
objThis._siteLayer.add(textGraphic);
|
}
|
|
objThis._siteLayer.on("click", function(layer) {
|
if (!layer.graphic.attributes.type) {
|
$(".map_tool_monitor, #monTitle").hide();
|
return false;
|
}
|
var id = layer.graphic.attributes.id;
|
findElementCurrentByStcd({ stcd: stcd }, function(res) {
|
var data = res.data;
|
var dataArr = {
|
airList: [],
|
weatherList: [],
|
soilList: [],
|
waterList: []
|
};
|
|
for (var i in data.soilList) {
|
for (var k in config.type) {
|
for (var a in config.type[k].type) {
|
if (data.soilList[i].name == config.type[k].type[a]) {
|
if (config.type[k].name == "气象") {
|
dataArr.weatherList.push(data.soilList[i]);
|
} else if (config.type[k].name == "水质") {
|
dataArr.waterList.push(data.soilList[i]);
|
} else if (config.type[k].name == "土壤") {
|
dataArr.soilList.push(data.soilList[i]);
|
} else if (config.type[k].name == "大气") {
|
dataArr.airList.push(data.soilList[i]);
|
}
|
}
|
}
|
}
|
}
|
|
for (var i in data.weatherList) {
|
for (var k in config.type) {
|
for (var a in config.type[k].type) {
|
if (data.weatherList[i].name == config.type[k].type[a]) {
|
if (config.type[k].name == "气象") {
|
dataArr.weatherList.push(data.weatherList[i]);
|
} else if (config.type[k].name == "水质") {
|
dataArr.waterList.push(data.weatherList[i]);
|
} else if (config.type[k].name == "土壤") {
|
dataArr.soilList.push(data.weatherList[i]);
|
} else if (config.type[k].name == "大气") {
|
dataArr.airList.push(data.weatherList[i]);
|
}
|
}
|
}
|
}
|
}
|
for (var i in data.airList) {
|
for (var k in config.type) {
|
for (var a in config.type[k].type) {
|
if (data.airList[i].name == config.type[k].type[a]) {
|
if (config.type[k].name == "气象") {
|
dataArr.weatherList.push(data.airList[i]);
|
} else if (config.type[k].name == "水质") {
|
dataArr.waterList.push(data.airList[i]);
|
} else if (config.type[k].name == "土壤") {
|
dataArr.soilList.push(data.airList[i]);
|
} else if (config.type[k].name == "大气") {
|
dataArr.airList.push(data.airList[i]);
|
}
|
}
|
}
|
}
|
}
|
for (var i in data.waterList) {
|
for (var k in config.type) {
|
for (var a in config.type[k].type) {
|
if (data.waterList[i].name == config.type[k].type[a]) {
|
if (config.type[k].name == "气象") {
|
dataArr.weatherList.push(data.waterList[i]);
|
} else if (config.type[k].name == "水质") {
|
dataArr.waterList.push(data.waterList[i]);
|
} else if (config.type[k].name == "土壤") {
|
dataArr.soilList.push(data.waterList[i]);
|
} else if (config.type[k].name == "大气") {
|
dataArr.airList.push(data.waterList[i]);
|
}
|
}
|
}
|
}
|
}
|
|
objThis.parseRealtimeData(dataArr, layer.graphic.attributes.id);
|
});
|
});
|
},
|
parseRealtimeData: function(data, _id) {
|
$(".map_tool_monitor").show();
|
$("#map_tool_monitor_content").html("");
|
if (
|
data.soilList.length == 0 &&
|
data.weatherList == 0 &&
|
data.airList == 0 &&
|
data.waterList == 0
|
) {
|
$("#map_tool_monitor_content").html(
|
"<p style='text-align:center; color:#fff; line-hegiht:50px;'>暂无数据！<p>"
|
);
|
$("#monTitle").hide();
|
return false;
|
}
|
var datas = [];
|
/*if(data.airList.length > 0){
|
datas.push({"name":"大气质量监测", "data":data.airList});
|
}
|
if(data.soilList.length > 0){
|
datas.push({"name":"土壤质量监测", "data":data.soilList});
|
}
|
if(data.waterList.length > 0){
|
datas.push({"name":"水质质量监测", "data":data.waterList});
|
}
|
if(data.weatherList.length > 0){
|
datas.push({"name":"气象质量监测", "data":data.weatherList});
|
}
|
*/
|
if (_id == 129) {
|
datas.push({ name: "水质质量监测", data: data.waterList });
|
} else if (_id == 128) {
|
// datas.push({ name: "气象质量监测", data: data.weatherList });
|
datas.push({ name: "土壤质量监测", data: data.soilList });
|
}
|
|
$("#monTitle").show();
|
for (var i = 0; i < datas.length; i++) {
|
var html = "";
|
if (i == 0) {
|
$("#monTitle").html(datas[i].name);
|
if (datas[i].data.length == 0) {
|
$("#map_tool_monitor_content").append(
|
"<p style='text-align:center; color:#fff; line-height:50px;'>暂无数据！<p>"
|
);
|
} else {
|
for (var k in datas[i].data) {
|
html +=
|
"<div>" +
|
"<div>" +
|
"<span>" +
|
datas[i].data[k].name +
|
"</span><br />" +
|
" <span>" +
|
datas[i].data[k].code +
|
"</span>" +
|
"</div>" +
|
" <p><span>" +
|
datas[i].data[k].value +
|
"</span>" +
|
datas[i].data[k].unit +
|
"</p>" +
|
" </div>";
|
}
|
$("#map_tool_monitor_content").append(
|
'<div class="map_tool_box">' + html + "</div>"
|
);
|
}
|
} else {
|
if (datas[i].data.length == 0) {
|
$("#map_tool_monitor_content").append(
|
'<div class="mon-title"><span>' + datas[i].name + "</span></div>"
|
);
|
$("#map_tool_monitor_content").append(
|
"<p style='text-align:center; color:#fff; line-height:50px;'>暂无数据！<p>"
|
);
|
} else {
|
for (var k in datas[i].data) {
|
html +=
|
"<div>" +
|
"<div>" +
|
"<span>" +
|
datas[i].data[k].name +
|
"</span><br />" +
|
" <span>" +
|
datas[i].data[k].code +
|
"</span>" +
|
"</div>" +
|
" <p><span>" +
|
datas[i].data[k].value +
|
"</span>" +
|
data[i].data[k].unit +
|
"</p>" +
|
" </div>";
|
}
|
$("#map_tool_monitor_content").append(
|
'<div class="mon-title"><span>' + datas[i].name + "</span></div>"
|
);
|
$("#map_tool_monitor_content").append(
|
'<div class="map_tool_box">' + html + "</div>"
|
);
|
}
|
}
|
}
|
}
|
});
|
return Widget;
|
});
|
