sgyzt-front/public/map-easy-client/tileLayer.wmts.poi.js

L.TileLayer.WMTS.POI = L.TileLayer.WMTS.extend({

  options: {
    showTitle: true,
    showLabellevel:14,
    tileSize: 256,
    loadShape:false
  },
  markerLayerGroup: null,
  markerPopupGroup: null,
  clickHander: null,
  shapeGroup:null,
  mouseoverObj:null,
  shapeIds:{},
  initialize: function (url, jsonUrl, options, markerClick) { // (String, Object)
    this._jsonUrl = jsonUrl;

    var host = window.EASYMAP_CONFIG['poihost'];
    if(options.layer === 'xs_cb_cbyj'){
      this._url =  host + '/poiwmts/color/getTile';
    }else{
      this._url = url;
    }

    var wmtsParams = L.extend({}, this.defaultWmtsParams);
    var tileSize = options.tileSize || this.options.tileSize;
    if (options.detectRetina && L.Browser.retina) {
      wmtsParams.width = wmtsParams.height = tileSize * 2;
    } else {
      wmtsParams.width = wmtsParams.height = tileSize;
    }
    for (var i in options) {
      // all keys that are not TileLayer options go to WMTS params
      if (!this.options.hasOwnProperty(i) && i != "matrixIds" && i != "jsonUrl") {
        wmtsParams[i] = options[i];
      }
    }
    this.wmtsParams = wmtsParams;
    this.matrixIds = options.matrixIds || this.getDefaultMatrix();
    //console.log(this);
    if (!options.zIndex || options.zIndex < 10) {
      options.zIndex = 10;
    }
    L.setOptions(this, options);
    var _this = this;
    this.eventMap = {
      click: function (ev) {
        if (_this.clickHander) {
          clearTimeout(_this.clickHander)
          _this.clickHander = undefined;
        } else {
          _this.clickHander = setTimeout(function () {
            var minPoint = ev.layerPoint.subtract(L.point(12, 12));
            var maxPoint = ev.layerPoint.add(L.point(12, 12));
            var minLatLng = map.layerPointToLatLng(minPoint);
            var maxLatLng = map.layerPointToLatLng(maxPoint);
            ////BBOX:"BBOX(minx,maxx,maxy,miny)
            var bbox = "BBOX(" + minLatLng.lng + "," + maxLatLng.lng + "," + minLatLng.lat + "," + maxLatLng.lat + ")";
            _this.getClickPointBBoxJsonMarker(bbox, markerClick)
            _this.clickHander = undefined;
          }, 300);
        }

        //_this.markerLayerGroup = L.marker(ev.latlng,{iconUrl:'images/marker-icon-2x.png'}).addTo(map);
        /*if(!_this.markerLayerGroup || !_this.markerLayerGroup.popup){
          return ;
        }
        var minDistance = -1;
        var minDistancePopup;
        var markerInfo;
        var distance;
        for( var key in _this.markerLayerGroup.popup ){
          distance = ev.latlng.distanceTo(_this.markerLayerGroup.popup[key].getLatLng());
          //console.log("....."+distance);
          if(minDistance == -1){
            minDistance = distance;
            minDistancePopup = _this.markerLayerGroup.popup[key];
            markerInfo = _this.markerLayerGroup.markerInfo[key];
            continue;
          }
          if(minDistance > distance ){
            minDistancePopup = _this.markerLayerGroup.popup[key]
            markerInfo = _this.markerLayerGroup.markerInfo[key];
            minDistance = distance;
          }

        }
        if(minDistancePopup){
          var pointDistace = ev.layerPoint.distanceTo(map.latLngToLayerPoint(minDistancePopup.getLatLng()));
          var maxPointDistace = Math.max(markerInfo.markerWidth,markerInfo.markerHeigth)/2;

          if(pointDistace <= maxPointDistace){
            markerClick && markerClick({markerInfo:})
            // minDistancePopup.openOn(map);
          }
        }*/

      },
    };
    window.map.on(this.eventMap);
    this.shapeGroup = L.featureGroup().addTo(window.map);
  },
  onRemove: function (map) {
    window.map.off(this.eventMap);
    if(this.mouseoverObj){
      this.mouseoverObj.closePopup();
      this.mouseoverObj.unbindPopup();
      this.mouseoverObj = null;
    }
    this.shapeGroup.clearLayers();
    this.shapeGroup.off();
    map.removeLayer(this.shapeGroup);
    L.TileLayer.WMTS.prototype.onRemove.call(this, map);

  },
  // @method createTile(coords: Object, done?: Function): HTMLElement
  // Called only internally, overrides GridLayer's [`createTile()`](#gridlayer-createtile)
  // to return an `<img>` HTML element with the appropiate image URL given `coords`. The `done`
  // callback is called when the tile has been loaded.
  createTile: function (coords, done) {

    var tile = document.createElement('img');

    L.DomEvent.on(tile, 'load', L.bind(this._tileOnLoad, this, done, tile));
    L.DomEvent.on(tile, 'error', L.bind(this._tileOnError, this, done, tile));

    if (this.options.crossOrigin) {
      tile.crossOrigin = '';
    }

    /*
     Alt tag is set to empty string to keep screen readers from reading URL and for compliance reasons
     http://www.w3.org/TR/WCAG20-TECHS/H67
    */
    tile.alt = '';

    /*
     Set role="presentation" to force screen readers to ignore this
     https://www.w3.org/TR/wai-aria/roles#textalternativecomputation
    */
    tile.setAttribute('role', 'presentation');

    tile.src = this.getTileUrl(coords);
    var _this = this;
    if(this._jsonUrl && this.options.loadShape ){
      setTimeout(function(){
        _this.loadShape(coords);
      },100);
    }

    return tile;
  },

  loadShape: function(coords){
    if (!this._jsonUrl) {
      return "";
    }
    console.log(this.shapeGroup.getLayers().length)
    var url = L.Util.template(this._jsonUrl, {});
    var param = L.extend({}, this.wmtsParams);
    param.format = "json";
    param.size = 100;
    url += this.getParamString(param, this._jsonUrl)
      + "&tilematrix=" + (coords.z) + "&tilerow=" + coords.y +"&tilecol=" + coords.x;
    // this.shapeGroup.clearLayers();
    let _this = this;
    this.doXHR(url, function (data) {
      if( data && data.resultList && data.resultList.length > 0 ){
        let item,geometry;
        let shapes = [];
        let attributes = [];
        for( var i in data.resultList ){
          item = data.resultList[i];
          if(item && item.geoShapeType
            && item.geoShapeType.toLocaleLowerCase() != "point"
            && item.shape ){
            if(item.id in _this.shapeIds){
              continue;
            }else{
              _this.shapeIds[item.id] = 0;
            }
            geometry = omnivore.wkt.parse(item.shape );
            geometry.attribute = {name:item.name, pname:item.layerCnName}
            console.log(geometry)
            _this.shapeGroup.addLayer(geometry);
            // shapes.push(geometry);
          }
        }
        _this.shapeGroupOn();

      }
    });

  },

  shapeGroupOn:function(){
    this.shapeGroup.setStyle( {dashArray :'12',weight:1,color :'#172d58',fill:false});
    let _this = this;
    this.shapeGroup.eachLayer(function(layer){
      layer.unbindPopup().bindPopup(layer.attribute.name,{closeButton:false})
      layer.off().on("mousemove",function(e){
        this.openPopup();
        if(  _this.mouseoverObj &&  _this.mouseoverObj != this ){
          setTimeout(function(handle){
            handle.setStyle( {dashArray :'12',weight:1,color :'#172d58',fill:false});
          },1000,_this.mouseoverObj)
        }
        _this.mouseoverObj = this.setStyle( {dashArray :null,weight:3,color :'#3388ff',fill:false});
      });

    });
  },

  getTileUrl: function (coords) { // (Point, Number) -> String
    //小于14层级，不显示具体图标，并且不能看详情
    if (this.options.layer === 'xs_cb_cbyj' && coords.z < this.options.showLabellevel) {
      this._url =  window.EASYMAP_CONFIG['poihost'] + '/poiwmts/color/getTile'
      this.options.showTitle = false
    }else if(this.options.layer === 'xs_cb_cbyj' && coords.z >= this.options.showLabellevel){
      this._url =  window.EASYMAP_CONFIG['poihost'] + '/poiwmts/aggMarker/getTile'
      this.options.showTitle = true
    }
    var url = L.Util.template(this._url, { s: this._getSubdomain(coords) });
    //argis版本的要-1
    url += this.getParamString(this.wmtsParams, url) + "&tilematrix=" + (coords.z) + "&tilerow=" + coords.y + "&tilecol=" + coords.x + "&sessionToken=" + window.sessionToken;
    if (this.wmtsParams.hnjhpt_rid) {
      var date = new Date();
      var time = date.getTime();
      var message = this.wmtsParams.hnjhpt_sid + this.wmtsParams.hnjhpt_rid + time;
      var hash = CryptoJS.HmacSHA256(message, this.wmtsParams.secret);
      var hashInBase64 = CryptoJS.enc.Base64.stringify(hash);
      url += "&hnjhpt_sign=" + encodeURIComponent(hashInBase64) + "&hnjhpt_rtime=" + time
    }
    return url;
  },
  getJsonUrl: function (bbox) { // (Point, Number) -> String
    if (!this._jsonUrl) {
      return "";
    }
    var url = L.Util.template(this._jsonUrl, {});
    var param = L.extend({}, this.wmtsParams);
    param.format = "json";
    param.size = 1;
    // lat: 17.9736328125
    // lng: 108.973388671875

    param.bbox = bbox;
    url += this.getParamString(param, this._jsonUrl);
    //+ "&tilematrix=" + (coords.z) + "&tilerow=" + coords.y +"&tilecol=" + coords.x;
    /*if (this.wmtsParams.hnjhpt_rid) {
        var date = new Date();
        var time = date.getTime();
        var message = this.wmtsParams.hnjhpt_sid + this.wmtsParams.hnjhpt_rid + time;
        var hash = CryptoJS.HmacSHA256(message, this.wmtsParams.secret);
        var hashInBase64 = CryptoJS.enc.Base64.stringify(hash);
        url += "&hnjhpt_sign=" + encodeURIComponent(hashInBase64) + "&hnjhpt_rtime=" + time
    }*/
    return url;
  },
  getClickPointBBoxJsonMarker: function (bbox, callback) {
    //判断图标是否可以点击显示详情
    if(!this.options.showTitle){
      return;
    }
    var _this = this;
    /*if( !this.markerLayerGroup ){
      this.markerLayerGroup = L.layerGroup().addTo(map);
    }*/
    this.doXHR(this.getJsonUrl(bbox), function (data) {
      if (data && data.resultList && data.resultList.length && data.resultList.length > 0) {
        if (callback) {
          callback({ markerInfo: data.resultList[0] });
        } else {
          L.popup().setLatLng([parseFloat(data.resultList[0].lat)
            , parseFloat(data.resultList[0].lon)])
            .setContent('<p>名称:' + data.resultList[0].name + '<br />'
              + '地址:' + data.resultList[0].dz + '<br />'
              + '经度:' + data.resultList[0].lon + '<br />'
              + '纬度:' + data.resultList[0].lat
              + '</p>').openOn(window.map);;
          //.openOn(map);
        }
        //var i = 0;
        // var layername ,marker;
        // for( var i in data.resultList ){
        /*marker = L.marker([parseFloat(data.resultList[i].lat), parseFloat(data.resultList[i].lon)]
              ,{icon:L.icon({iconUrl:host+data.resultList[i].markerPath})}).bindPopup('<p>名称:'+data.resultList[i].name+'<br />'
              +'地址:'+data.resultList[i].dz
              +'</p>');
        _this.markerLayerGroup.addLayer(marker);
        marker = null;	*/
        /*layername = data.resultList[i].layername;
        if( !_this.markerLayerGroup ){
          _this.markerLayerGroup = {};
        }
        if(!_this.markerLayerGroup.popup){
          _this.markerLayerGroup.popup = {};
        }*/
        /*if(!_this.markerLayerGroup[layername]){
          _this.markerLayerGroup[layername] = {};
        }*/
        /*if(!_this.markerLayerGroup[layername].icon){
          _this.markerLayerGroup[layername].icon = L.icon({iconUrl:host+data.resultList[i].markerPath});
        }*/
        /*if(!_this.markerLayerGroup.markerInfo){
          _this.markerLayerGroup.markerInfo = {};
        }*/
        /*_this.markerLayerGroup.markerInfo[data.resultList[i].id] = data.resultList[i];
        _this.markerLayerGroup.popup[data.resultList[i].id] =  L.popup().setLatLng([parseFloat(data.resultList[i].lat)
        , parseFloat(data.resultList[i].lon)])
        .setContent('<p>名称:'+data.resultList[i].name+'<br />'
              +'地址:'+data.resultList[i].dz
              +'</p>');*/
        //.openOn(map);

        // }
      }

    });
  },
  doXHR: function (url, callback) {
    console.log("window.sessionToken",window.sessionToken)
    var httpXml = this.createXMLHttpRequest();
    httpXml.open('get', url, true);
    httpXml.setRequestHeader("sessionToken",window.sessionToken)
    httpXml.send(null);
    httpXml.onreadystatechange = function () {
      if (httpXml.readyState == 4 && httpXml.status == 200) {
        var data = JSON.parse(httpXml.responseText);
        if (callback) {
          callback(data);
        }
      }
    };
  },
  createXMLHttpRequest: function () {
    var xmlHttp;
    try {
      xmlHttp = new XMLHttpRequest();
    } catch (e) {
      // 适用于IE6
      try {
        xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
        // 适用于IE5.5，以及IE更早版本
        try {
          xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) { }
      }
    }
    return xmlHttp;
  }
});

L.tileLayer.wmts.poi = function (url, jsonUrl, options, markerClick) {
  return new L.TileLayer.WMTS.POI(url, jsonUrl, options, markerClick);
};