sgyzt-front/public/map-easy-client/layer.yj.js

window.getYjMarkerPopup = function (attr) {
  //var startTime = Math.ceil((new Date().getTime())/1000-1800),endTime = Math.ceil(new Date().getTime()/1000);
  //console.log(attr); {\"range\":{\"attributes.collectime\":{\"lte\":"+endTime+",\"gt\":"+startTime+"}}},{\"term\":{\"_targetID\":\""+attr.attributes._targetID+"\"}}
  var _this = this;
  //var url =  this._jsonUrl+"?format=json&layer="+this.options.gjLayer+"&customsQuery="+encodeURIComponent("{\"must\":[{\"term\":{\"attributes._targetID\":\""+attr.attributes._targetID+"\"}},{\"range\":{\"attributes.collecTime\":{\"lte\":"+endTime+",\"gt\":"+startTime+"}}}]}")+"&sort=collecTime:asc";
  //console.log("{\"must\":[{\"range\":{\"attributes.collectime\":{\"lte\":"+endTime+",\"gt\":"+startTime+"}}}]}");
  let mmsi = attr.attributes.mmsi ? attr.attributes.mmsi : "-"
  let name = attr.name ? attr.name : "-"
  let happenTime = attr.attributes.happenTime ? attr.attributes.happenTime : "-"
  let happenPlace = attr.attributes.happenPlace ? attr.attributes.happenPlace : "-"
  let reliableLevelName = attr.attributes.reliableLevelName ? attr.attributes.reliableLevelName : "-"
  let sensitiveLevelName = attr.attributes.sensitiveLevelName ? attr.attributes.sensitiveLevelName : "-"
  let details = attr.attributes.details ? attr.attributes.details : "-"
  var html = "<div class='ship-ss-pop'>"

    // + "<span>MMSI：" + mmsi + "</span></br>"
    + "<span>预警名称：" + name + "</span></br>"
    + "<span>经度：" + attr.lon + "</span></br>"
    + "<span>纬度：" + attr.lat + "</span></br>"
    + "<span>发生时间：" + formatDate(happenTime) + "</span></br>"
    + "<span>发生地点：" + happenPlace + "</span></br>"
    + "<span>可信度：" + reliableLevelName + "</span></br>"
    + "<span>关注度：" + sensitiveLevelName + "</span></br>"
    + "<span>详情：" + details + "</span></br>"
    + "</div>"
  //+"<div><a onClick=goOpenGJ('"+url+"')>轨迹播放</a></div>";

  return html;

}
L.Layer.YJ = L.Layer.extend({

  options: {
    yjLayer: '',
    yJmarkerPopup: window.getYjMarkerPopup,
    time: 1800,
  },

  yjMarkerLayerGroup: {},
  markerDrawJ: null,
  pupopOpenHander: null,
  eventMap: {},
  yjHander: [],
  yjcurrentPage: 0,
  yjTotal: 0,

  initialize: function (url, options, markerClick) { // (String, Object)
    this._url = url;
    this.markerClick = markerClick
    L.setOptions(this, options);

    this.markerDrawJ = L.layerGroup();
    this.yjMarkerLayerGroup = L.layerGroup();

    var _this = this;
    this.eventMap = {
      click: function (ev) { },
      /*moveend: function (ev) {
        if (_this.moveendHander) {
          clearTimeout(_this.moveendHander);
        }
        _this.moveendHander = setTimeout(function () {
          _this.realtimeYJUpdate();
        }, 500);
      },
      zoomend: function (ev) {
        if (_this.zoomendHander) {
          clearTimeout(_this.zoomendHander);
        }
        _this.zoomendHander = setTimeout(function () {
          _this.realtimeYJUpdate();
        }, 500);

      }*/
    };
    window.map.on(this.eventMap);

    this.clearMarker();
    var _this = this;
   /* this.removeOutTimeHander.push(setInterval(function () {
      _this.removeOutTime()
    }, 1000));*/
    this.yjHander.push(setInterval(function () {
        _this.realtimeYJUpdate()
      }, 60000));
    setTimeout(function () {
        _this.realtimeYJUpdate();
      }, 1000);

  },
  onAdd: function (map) {
    this.markerDrawJ.addTo(map);
    this.yjMarkerLayerGroup.addTo(map);
  },
  onRemove: function (map) {

    this.clearMarker();
    this.markerDrawJ.remove();
    this.yjMarkerLayerGroup.remove();
    //this.remove();
    if (this.yjHander && this.yjHander.length > 0) {
          for (var i in this.yjHander) {
            clearInterval(this.yjHander[i]);
            this.yjHander[i] = null;
          }
          this.yjHander = [];
    }
    window.map.off(this.eventMap);
    // L.Layer.prototype.onRemove.call(this, map);
  },
  clearMarker: function () {
    this.markerDrawJ.clearLayers();
    this.yjMarkerLayerGroup.clearLayers();
  },

  getFanweiConfig: function () {
    var minx = window.map.getBounds().getSouthWest().lng
      , maxx = window.map.getBounds().getNorthEast().lng
      , miny = window.map.getBounds().getSouthWest().lat
      , maxy = window.map.getBounds().getNorthEast().lat;
    var options = this.options
    var fanweiConfig = ''
    if (options.point) {
      fanweiConfig = this.getParamString({
        point: options.point,
        radius: options.radius
      })
    } else if (options.polygon) {
      fanweiConfig = this.getParamString({
        polygon: options.polygon
      })
    } else if (options.bbox) {
      fanweiConfig = this.getParamString({
        bbox: options.bbox
      })
    } else {
      fanweiConfig = "?bbox=" + encodeURIComponent("BBOX(" + minx + "," + maxx + "," + maxy + "," + miny + ")")
    }
    fanweiConfig = '&' + fanweiConfig.substr(1)
    return fanweiConfig
  },
  realtimeYJUpdate: function () {

    // console.log(this.options.layer.indexOf('zt_clzt'))
    // if (this.options.layer.indexOf('zt_clzt') !== -1) {
    //   return;
    // }
    if (this.yjTotal > 0 && this.yjTotal / 30 < this.yjcurrentPage) {
      return;
    }
    this.clearMarker();
    // 实时预警查询接口
    //和实时图层保持一致，查半小时的
    var datatime = new Date().getTime();
    var endTimeSecond = Math.ceil(datatime)
    var startTimeSecond = Math.ceil(datatime) - this.options.time * 1000;
    var url = this._url + "?format=json&layer=" + this.options.yjLayer + "&from=" + (this.yjcurrentPage) + "&size=30&tilematrix=" + window.map.getZoom() + this.getFanweiConfig();

    // var url = this._url + "?format=json&layer=" + this.options.yjLayer + "&from=" + (this.yjcurrentPage) + "&size=30&tilematrix=" + window.map.getZoom() + this.getFanweiConfig()+ "&customsQuery=" + encodeURIComponent("{\"must\":[{\"range\":{\"attributes.createTime\":{\"lte\":" + endTimeSecond + ",\"gte\":" + startTimeSecond + "}}}]}");;
    //"107.85003662109375,18.973388671875,111.36566162109375,20.5609130859375"
    //bbox:"BBOX(109.6875,111.12671,20.17639,19.44031)",
    //BBOX:"BBOX(minx,maxx,maxy,miny)
    // console.log("url=============",url)
    var _this = this;
    window.doXHR(url, function (data) {
      //console.log(data)
      if (data && data.resultList && data.resultList.length && data.resultList.length > 0) {
        if (data.total && data.total > 0) {
          _this.yjTotal = data.total;
        }
        if (_this.yjTotal / 30 > _this.yjcurrentPage + 1) {
          _this.yjcurrentPage++;
        }
        var icon;
        let id;
        //_this.clearYJMarker();
        var m;
        var yjMakers = _this.yjMarkerLayerGroup.getLayers();
        for (var i in data.resultList) {
          id = data.resultList[i].attributes.mmsi;
          m = null;
          if (i < yjMakers.length) {
            m = yjMakers[i]
          }
          let label = data.resultList[i].name;
          // let label = ""
          let ObjJson = data.resultList[i].attributes.objInfoList
          // console.log(ObjJson)
          JSON.parse(ObjJson).forEach((e) => {
            if (e.type === _this.options.ObjType) {
              label += e.name + ","
            }
          });
          label = label.substring(0, label.length - 1)
          label = label === "" ? "未知" : label
          if (!m) {
            m = L.marker([data.resultList[i].lat, data.resultList[i].lon]
              , {
                title: data.resultList[i].attributes.shipName
                , icon: new L.SSIcon({
                  showTitle: label,
                  label: label,
                  iconUrl: data.resultList[i].markerPath+"?sessionToken="+window.sessionToken
                })
                , showTitle: true
              });
            _this.yjMarkerLayerGroup.addLayer(m);
          } else {
            m.setLatLng(L.latLng([data.resultList[i].lat, data.resultList[i].lon]));
            m.setIcon(new L.SSIcon({
              showTitle: label,
              label: label,
              iconUrl: data.resultList[i].markerPath+"?sessionToken="+window.sessionToken
            }))
          }
          m.unbindPopup().bindPopup(_this.options.yJmarkerPopup(data.resultList[i]), { autoPan: false, closeButton: false, offset: L.point(180, 305) });
          m.off("mouseover").on('mouseover', function (ev) {
              _this.popupEventHandler(ev)
          });
         /* m.off("click").on('click', function (ev) {
              _this.popupEventHandler(ev)
          });*/

        }
      } else {
        _this.yjcurrentPage = 0;
      }

    });

  },
  popupEventHandler:function(ev){
    if (this.markerDrawJ) {
      this.markerDrawJ.clearLayers();
    }
    let jmarker = L.marker(ev.target.getLatLng(), { icon: new L.AngleIcon({ iconSize: new L.Point(32, 32) }) })
      .addTo(this.markerDrawJ);
    jmarker.options.icon.drawJ();
    if (this.pupopOpenHander) {
      clearTimeout(this.pupopOpenHander);
    }
    this.pupopOpenHander = setTimeout(function () {
      ev.target.openPopup();
    }, 500);
  }
});

L.Layer.yj = function (url, options, markerClick) {
  return new L.Layer.YJ(url, options, markerClick);
};


/* 预警闪闪 ICON */
L.SSIcon = L.Icon.extend({
  // default value
  options: {
    iconSize: new L.Point(42, 42),	// canvas  size
    className: "leaflet-boat-icon",
    labelAnchor: [0, -0],			// test loaction
    pointType: 0,			   		// pointType
    showTitle: true,
    label: '',
    textColor: 'red',
    img: null,
    strokeStyle: 'rgba(216,52,52,1)',
  },

  createIcon: function () {
    var div = document.createElement("div");
    var ss = document.createElement("canvas");
    this.nameDiv = document.createElement("div");
    div.appendChild(ss);
    div.appendChild(this.nameDiv);
    this._setIconStyles(div, "icon");
    var s = this.options.iconSize;
    ss.width = s.x;
    ss.height = s.y;
    // m.width = s.x;
    // m.height = s.y;
    this.radius = 0.0;
    // this.ctx = m.getContext("2d");
    this.ctxss = ss.getContext("2d");

    // 创建临时canvas
    this.bgCanvas = document.createElement('canvas');
    this.bgCtx = this.bgCanvas.getContext('2d');
    this.backCanvas = document.createElement('canvas');
    this.backCtx = this.backCanvas.getContext('2d');
    let width = this.options.iconSize.x;
    let height = this.options.iconSize.y;
    this.backCanvas.width = width
    this.backCanvas.height = height;
    this.bgCanvas.width = width
    this.bgCanvas.height = height;
    //设置主canvas的绘制透明度
    this.ctxss.globalAlpha = 0.95;
    //显示即将绘制的图像，忽略临时canvas中已存在的图像
    this.backCtx.globalCompositeOperation = 'copy';

    //设置动画时间
    if (this.renderHander) {
      clearInterval(this.renderHander);
    }
    this.canvas = ss;
    let _this = this;
    _this.drawImg();
    this.renderHander = setInterval(function () {
      _this.render()

    }, 20);
    // this.draw(s.x,s.y);
    this.createDivName();
    return div;
  },
  render: function () {
    let width = this.options.iconSize.x;
    let height = this.options.iconSize.y;
    //先将主canvas的图像缓存到临时canvas中
    this.backCtx.drawImage(this.canvas, 0, 0, width, height);
    //清除主canvas上的图像
    this.ctxss.clearRect(0, 0, width, height);
    //在主canvas上画新圆
    // this.createCircles();
    this.drawCircle();
    this.getRadius();
    //等新圆画完后，再把临时canvas的图像绘制回主canvas中
    this.ctxss.drawImage(this.backCanvas, 0, 0, width, height);
    this.ctxss.drawImage(this.bgCanvas, 0, 0, width, height);
    // this.drawLabelLine();

  },
  //画图片
  drawImg: function () {
    let width = this.options.iconSize.x;
    let height = this.options.iconSize.y;
    var img = this._createImg(this.options.iconUrl, img);
    var _this = this;
    img.onload = function () {
      //画图
      _this.bgCtx.drawImage(img, 8, 8, 26, 26);
    }
    this.drawLabelLine();
  },
  //画圆
  drawCircle: function () {
    this.ctxss.beginPath();
    this.ctxss.arc(this.options.iconSize.x / 2, this.options.iconSize.y / 2, this.radius, 0, Math.PI * 2);
    this.ctxss.closePath();
    this.ctxss.lineWidth = 0.2;
    this.ctxss.strokeStyle = this.options.strokeStyle;
    this.ctxss.stroke();
  },
  //圆的半径变化
  getRadius: function () {
    this.radius += 0.3;
    if (this.radius > 21) {
      this.radius = 0
    }
  },
  drawLabelLine: function () {

    //画线，指向label
    this.bgCtx.beginPath();
    /* let moveTo = [32,32] ,lineTo = [52,52]
     if(this.options.labelPosition === 'bottomleft'){
       moveTo = [32,32] ,lineTo = [52,52]
     }else if(this.options.labelPosition === 'bottomright'){
       moveTo = [32,32] ,lineTo = [0,52]
     }else if(this.options.labelPosition === 'topleft'){
       moveTo = [32,32] ,lineTo = [62,12]
     }else if(this.options.labelPosition === 'topright'){
     }*/
    let moveTo = [21, 21], lineTo = [42, 12]

    this.bgCtx.moveTo(moveTo[0], moveTo[1]);
    this.bgCtx.lineTo(lineTo[0], lineTo[1]);
    this.bgCtx.strokeStyle = '#83988acc';
    // this.ctxss.strokeStyle='#333';
    this.bgCtx.lineWidth = "1";
    this.bgCtx.stroke();
    this.bgCtx.closePath();

  },
  createDivName: function () {
    if (this.options.showTitle && this.options.label != '') {
      let style = "opacity: 0.8;position: relative;background-color: #fff;padding-left: 3px;padding-right: 3px;border-radius: 2px;white-space: nowrap;z-index:-3000;";
      this.nameDiv.style = "top:-49px;left: 43px;float: left;" + style;
      this.nameDiv.innerHTML = "<span style='text-align: right;font-size: 10px;font-family: bold ; color: rgb(131 152 138 / 80%);z-index:-3000;'>" + this.options.label + "</span>";
    }
  }

});