地图详情搭建，小窗跟随 input传值

liuyg

2021-04-20 f27799628498508c296d2c5d95ef66e2be2ca4dd

 public/map/widgets/supervisoryMap/SupervisoryMap.js

@@ -126,7 +126,7 @@
    layuiLayer: null,
    layuiLadate: null,
    tabIndex: 0,

    heatmapfeatureLayer: null,//liu热力图
    // 保留添加实体图层的变量
    addEntitys: null,
    entitysData: [],
@@ -190,7 +190,7 @@
    getQueryStringByKey: function (key) {
      return (document.location.search.match(new RegExp("(?:^\\?|&)" + key + "=(.*?)(?=&|$)")) || ['', null])[1];
    },

    entityData: [],
    open: function () {
      var that = this;
      $.ajax({
@@ -198,18 +198,101 @@
        type: 'get',
        dataType: 'JSON',
        success: function (res) {
         

          var datas = res.data;


          var heatmapRenderer = null;
          that.entityData = [];



          for (var i = 0; i < datas.length; i++) {
            datas[i].x = Number(datas[i].jd);
            datas[i].y = Number(datas[i].wd);
            // that.entityData[i].lgtd = Number(datas[i].jd);
            // that.entityData[i].lttd = Number(datas[i].wd);
            that.entityData.push({
              lgtd: Number(datas[i].jd),
              lttd: Number(datas[i].wd)
            })
          }
          // console.log(that.entityData, 444444444444444444444)
          // console.log(datas,444444444444444444444)
          that.flareClusterLayer(datas);

          that.heatmapfeatureLayer = that.heatmFeaLayers();

          // console.log(that.heatmapfeatureLayer);
          
          that._map.addLayer(that.heatmapfeatureLayer);
          
          that.checkBoxSelect();
          
          // console.log(that.heatmapfeatureLayer);
        }
      })

    },
    heatmFeaLayers: function () {// liu 热力图渲染器，加载热力图

      var layerDefinition = {
        "geometryType": "esriGeometryPoint",
        "fields": [{
          "num": "num",
          editable: true,
          nullable: true,
          "type": "esriFieldTypeInteger",
          "alias": "数量"
        }]
      };
      var featureCollection = {
        layerDefinition: layerDefinition,
        featureSet: null
      };
      //创建 FeatureLayer 图层
      var featureLayer = new esri.layers.FeatureLayer(featureCollection, {
        mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
        outFields: ["*"],
        opacity: .8
      });
      //设置渲染方式

      return featureLayer;
    },

    checkBoxSelect: function (self) {
      var that = this;
      var heatmapRenderer = null;
      // // return
      // 选中
      // if ($(self).prop('checked') == true) {
      // if (1) {
        heatmapRenderer = new HeatmapRenderer({
          colorStops: [
            { ratio: 0.45, color: "rgba(000,000,255,0)" },
            { ratio: 0.55, color: "rgb(000,255,255)" },
            { ratio: 0.65, color: "rgb(000,255,000)" },
            { ratio: 0.75, color: "rgb(234,126,15)" },
            { ratio: 1.00, color: "rgb(255,000,000)" },
          ],
          blurRadius: 42,
          maxPixelIntensity: 184,
          minPixelIntensity: 0
        });
        this.heatmapfeatureLayer.setRenderer(heatmapRenderer);
        // 取消选中
        var point = null;
        for (var i = 0; i < that.entityData.length; i++) {
          point = new esri.geometry.Point(this.entityData[i].lgtd, this.entityData[i].lttd, new esri.SpatialReference({ wkid: 4326 }));
          this.heatmapfeatureLayer.add(new esri.Graphic(point));
        }
      // } else {
      //   this.heatmapfeatureLayer.clear();
      //   this.heatmapfeatureLayer.setRenderer();
      // }
    },

    close: function () {

    },
@@ -284,14 +367,16 @@

    clickHand: function (e) {//top点击事件，导航
      console.log(e);
    }, 
    },
    
    
    //聚合图层事件
    flareClusterLayer: function (datas) {  //top聚合事件，导航

      var that = this;

      var preClustered = false;
      var displaySingleFlaresAtCount = 10;
      var displaySingleFlaresAtCount = 20;
      var areaDisplayMode = "";
      // var allData = JSON.parse(DATA);
      // DataManager.setData(allData);
@@ -308,7 +393,7 @@
        displaySingleFlaresAtCount: displaySingleFlaresAtCount,
        flareShowMode: "mouse",
        preClustered: preClustered,
        clusterRatio: 75,
        clusterRatio: 120,
        clusterAreaDisplay: areaDisplayMode,
        clusteringBegin: function (e) {
          console.log(e, "clustering begin");
@@ -336,20 +421,20 @@
      var template = new PopupTemplate({
        title: "{name}",
        fieldInfos: [{
            fieldName: "facilityType",
            label: "Facility Type",
            visible: true
          },
          {
            fieldName: "postcode",
            label: "Post Code",
            visible: true
          },
          {
            fieldName: "isOpen",
            label: "Opening Hours",
            visible: true
          }
          fieldName: "facilityType",
          label: "Facility Type",
          visible: true
        },
        {
          fieldName: "postcode",
          label: "Post Code",
          visible: true
        },
        {
          fieldName: "isOpen",
          label: "Opening Hours",
          visible: true
        }
        ]
      });