| New file |
| | |
| | | /* |
| | | * @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; |
| | | }); |