zhongrj
2023-06-27 d74b495736f0c04522ec54274b70fed0ded2878d
public/map/widgets/mapBrowsecopy/MapBrowseWidgetCopy.js
New file
@@ -0,0 +1,501 @@
/*
 * @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;
});