esri_maptip.js

esri的ArcGIS Server超级学习模板程序（for java）

    else {
      oldImg.src = feature.symbol.highlightMarker;
      img.src = feature.symbol.marker;
    }
    oldImg = getMarkerSize(oldImg);
    oldOffsets = getMarkerOffsets(oldImg);
    img = getMarkerSize(img);
    offsets = getMarkerOffsets(img);
    offsets.top=  oldOffsets.top-offsets.top;
    offsets.left= oldOffsets.left-offsets.left;
    gsymbol.src = img.src;
    gsymbol.height = img.height;
    gsymbol.width = img.width;
    if(EsriUtils.isIE) {
      gsymbol.top = parseInt(EsriUtils.getStyleValue(element.style.top)) + offsets.left;
      gsymbol.left = parseInt(EsriUtils.getStyleValue(element.style.left)) + offsets.top;
    }
    else {
      gsymbol.top = parseInt(element.getAttribute("x"))+ offsets.top;
      gsymbol.left = parseInt(element.getAttribute("y"))+ offsets.left;
      }
  }

  function handleFeatureMouseOver(e) {
    if(eventsEnabled===false) return;
    EsriUtils.stopEvent(e);
    var el = EsriUtils.getEventSource(e);
      el.onmouseout = handleFeatureMouseOut;
    if(mapTipFeatures[el.name].isCallout) { 
      el.onmousemove = handleMouseMoveOverMaptip;
      if(calloutNode.sourceElement) {
        calloutNode.sourceElement.onmouseover = handleFeatureMouseOver;
      }
      calloutNode.sourceElement = el;
      if(!map.callOut.isVisible()) {
       calloutNode.feature = {};
      }
      if(mapTipFeatures[el.name] == calloutNode.feature) {
        if(!map.callOut._collapsed) {
          el.onmouseout = null;
          calloutNode.feature = mapTipFeatures[el.name];
          mapTipTimer = window.setTimeout(map.mapTip.showCallOut,500);
        }
        if(!map.callOut.isVisible())
          map.callOut.collapse();
      }
      else {
        if(calloutNode.feature) {
          if(!map.callOut.isCollapsed())
            unHighlightFeatures(calloutNode.feature);
          if(self.onFeatureBlur)
            self.onFeatureBlur(calloutNode.feature);
        }
        map.callOut.hide();
        map.callOut.collapse();
        calloutNode.feature = mapTipFeatures[el.name];
        mapTipTimer = window.setTimeout(map.mapTip.showCallOut, 500);
      }
    }
    highlightFeatures(mapTipFeatures[el.name]);
    if(self.onFeatureFocus)
      self.onFeatureFocus(mapTipFeatures[el.name]);
  }
  
  function getCalloutOffsets() {
    var offsets = {top:0,left:0};
    if (map.callOut.anchorPosition == 'upperleft') {
      offsets.top = -1;
      offsets.left = -1;
    }
    else if (map.callOut.anchorPosition == 'upperright') {
      offsets.top = -1;
      offsets.left = 1;
    }
    else if (map.callOut.anchorPosition == 'lowerleft') {
      offsets.top = 1;
      offsets.left = -1;
    }
    else if (map.callOut.anchorPosition == 'lowerright'){
      offsets.top = 1;
      offsets.left = 1;
    }
    return offsets;
  }

  function handleMouseMoveOverMaptip(e) {
    if(eventsEnabled===false) return;
    var el = EsriUtils.getEventSource(e);
    var offsets = getCalloutOffsets();
    calloutNode.pt = EsriUtils.getXY(e).offset(offsets.left, offsets.top);
    clearTimeout(mapTipTimer);
    mapTipTimer = null;
    mapTipTimer = window.setTimeout(map.mapTip.showCallOut,100);
  }

  function handleFeatureMouseOut(e) {
    if(eventsEnabled===false) return;
    EsriUtils.stopEvent(e);
    var el = EsriUtils.getEventSource(e);
    el.onmousemove = null;
    el.onmouseout = null;
    el.onmouseover = handleFeatureMouseOver;
    if(mapTipFeatures[el.name].isCallout) {
      clearTimeout(mapTipTimer);
      mapTipTimer = null;
      window.setTimeout(map.mapTip.hideCallout,100);
    }
    if(self.onFeatureBlur)
      self.onFeatureBlur(mapTipFeatures[el.name]);
    unHighlightFeatures(mapTipFeatures[el.name]);
  }

  this.showCallOut = function() {
    var mapBounds = EsriUtils.getElementPageBounds(map.callOut._container);
    var el = calloutNode.sourceElement;
    var feature = calloutNode.feature;
    if(calloutNode.pt) {
    map.callOut.moveTo(calloutNode.pt.x - mapBounds.left, calloutNode.pt.y - mapBounds.top);
    map.callOut.setContent({header: feature.header, content: feature.content,footer: feature.footer  });
    map.callOut.show();
    }
  }

  this.hideCallout = function() {
    map.callOut.hide();
  }

  function mapTipHandler(xh) {
    if (xh != null && xh.readyState == 4 && xh.status == 200) {
      var xml = EsriUtils.getXmlDocument(xh);
      var layerList = xml.getElementsByTagName("layer");
      if(layerList.length > 0) {
        var g = map.graphics;
        if(!g) return;
        var pgons = new Array();
        var plines = new Array();
        var points = new Array();
        for (var i=0, il=layerList.length; i<il; i++) {
          var layer = layerList.item(i);
          var callout,text,header, body,footer;
          var isDefaultCallout = false;
          if(layer.getElementsByTagName("infowindow-cdata-content").length > 0) {
            callout=layer.getElementsByTagName("infowindow-cdata-content").item(0);
            text = callout.childNodes[0].nodeValue;
            if(text.trim()=="default") isDefaultCallout = true;
          }//callout present
          var symEl = null;
          //storing the symbol information of the layer
          if(layer.getElementsByTagName("symbol").length > 0) {
            symEl = layer.getElementsByTagName("symbol").item(0);
          }
          var featureList  = layer.getElementsByTagName("feature");
          if(featureList.length > 0) {
            for(var j=0, jl=featureList.length; j<jl; j++) {
              var featureNode = featureList[j];
              var feature={}; // object for storing the feature information for maptip rendering
              feature.isCallout = false;
              if(layer.getElementsByTagName("infowindow-cdata-content").length > 0) {
                var calloutContent, attributes;
                if(featureNode.getElementsByTagName("attributes").length > 0) {
                  attributes = featureNode.getElementsByTagName("attributes").item(0);
                  if(attributes.getElementsByTagName("attribute").length > 0) {
                    feature.isCallout = true;
                    var attributesArray = getAttributesAsArray(attributes);
                    if(isDefaultCallout) calloutContent = map.mapTip.transform(attributesArray,text);
                    else {
                      var template= {};
                      template.templateString = text;
                      calloutContent = map.mapTip.transform(attributesArray,template);
                    }
                    feature.header = calloutContent.header;
                    feature.content = calloutContent.content;
                    feature.footer = calloutContent.footer;
                  }
                }
              }//when callout is present apply transform
              //symbol
              if(symEl!=null) feature.symbol = {};
              feature.id = featureNode.getAttribute("id");
              // geometry of each feature
              var geometry =featureNode.getElementsByTagName("geometry").item(0);
              feature.type = geometry.getAttribute("type");
              if(feature.type == "Polyline") {
                if(feature.symbol) {
                  if(symEl.getElementsByTagName("line-color").length > 0)
                  feature.symbol.lineColor = getColorString(EsriUtils.getXmlText(symEl.getElementsByTagName("line-color").item(0)));
                  if(symEl.getElementsByTagName("line-opacity").length > 0)
                  feature.symbol.lineOpacity = parseFloat(EsriUtils.getXmlText(symEl.getElementsByTagName("line-opacity").item(0)));
                  if(symEl.getElementsByTagName("line-width").length > 0)
                  feature.symbol.lineWidth = parseInt(EsriUtils.getXmlText(symEl.getElementsByTagName("line-width").item(0)));
                  if(symEl.getElementsByTagName("highlight-line-color").length > 0)
                  feature.symbol.highlightLineColor = getColorString(EsriUtils.getXmlText(symEl.getElementsByTagName("highlight-line-color").item(0)));
                  if(symEl.getElementsByTagName("highlight-line-opacity").length > 0)
                  feature.symbol.highlightLineOpacity = parseFloat(EsriUtils.getXmlText(symEl.getElementsByTagName("highlight-line-opacity").item(0)));
                  if(symEl.getElementsByTagName("highlight-width").length > 0)
                  feature.symbol.highlightLineWidth = parseInt(EsriUtils.getXmlText(symEl.getElementsByTagName("highlight-width").item(0)));
                }
                feature.geometry = getPolylinePointsFromXml(geometry);
                plines.push(feature);
              }
              else if(feature.type == "Polygon"){
                if(feature.symbol) {
                  if(symEl.getElementsByTagName("line-color").length > 0)
                  feature.symbol.lineColor = getColorString(EsriUtils.getXmlText(symEl.getElementsByTagName("line-color").item(0)));
                  if(symEl.getElementsByTagName("line-opacity").length > 0)
                  feature.symbol.lineOpacity = parseFloat(EsriUtils.getXmlText(symEl.getElementsByTagName("line-opacity").item(0)));
                  if(symEl.getElementsByTagName("line-width").length > 0)
                  feature.symbol.lineWidth = parseInt(EsriUtils.getXmlText(symEl.getElementsByTagName("line-width").item(0)));
                  feature.symbol.fillColor = getColorString(EsriUtils.getXmlText(symEl.getElementsByTagName("fill-color").item(0)));
                  feature.symbol.fillOpacity = parseFloat(EsriUtils.getXmlText(symEl.getElementsByTagName("fill-opacity").item(0)));
                  if(symEl.getElementsByTagName("highlight-line-color").length > 0)
                  feature.symbol.highlightLineColor = getColorString(EsriUtils.getXmlText(symEl.getElementsByTagName("highlight-line-color").item(0)));
                  if(symEl.getElementsByTagName("highlight-line-opacity").length > 0)
                  feature.symbol.highlightLineOpacity = parseFloat(EsriUtils.getXmlText(symEl.getElementsByTagName("highlight-line-opacity").item(0)));
                  if(symEl.getElementsByTagName("highlight-width").length > 0)
                  feature.symbol.highlightLineWidth = parseInt(EsriUtils.getXmlText(symEl.getElementsByTagName("highlight-width").item(0)));
                  if(symEl.getElementsByTagName("highlight-fill-color").length > 0)
                  feature.symbol.highlightFillColor = getColorString(EsriUtils.getXmlText(symEl.getElementsByTagName("highlight-fill-color").item(0)));
                  if(symEl.getElementsByTagName("highlight-fill-opacity").length > 0)
                  feature.symbol.highlightFillOpacity = parseFloat(EsriUtils.getXmlText(symEl.getElementsByTagName("highlight-fill-opacity").item(0)));
                }
                feature.geometry = getPolygonPointsFromXml(geometry);
                pgons.push(feature);
              }
              else if(feature.type == "Point") {
                if(feature.symbol) {
                  feature.symbol.marker = EsriUtils.getXmlText(symEl.getElementsByTagName("marker").item(0));
                  if(symEl.getElementsByTagName("highlight-marker").length > 0)
                  feature.symbol.highlightMarker = EsriUtils.getXmlText(symEl.getElementsByTagName("highlight-marker").item(0));
                }
                feature.geometry = getPointFromXml(geometry);
                points.push(feature);
              }
              mapTipFeatures[feature.id] = feature; // adding to features array
            }//for loop for features in every layer
          }//if features > 0
        }//for loop for layerList
        drawPolygons(g, pgons);
        drawPolylines(g, plines);
        drawPoints(g, points);
      }//if layerlist > 0
    }
  }
 
  function drawPoints(g, features) {
    for (var i = 0; i < features.length; i++) {
      var f = features[i];
      var img;
      var imgSrc;
      if(f.symbol) {
        img = new Image();
        img.src = f.symbol.marker;
      }
      else {
        img = blankImage;
        img.height=img.width=16;
        offsets.top = img.height/2
        offsets.left = img.width/2;
      }
      if(!mapTipsVisibility[f.id]) {
        mapTipsVisibility[f.id]={visibility:true};
      }
      if(mapTipsVisibility[f.id].visibility) {
        img = getMarkerSize(img);            
        offsets = getMarkerOffsets(img);
        var el = g.drawImage(img.src,(f.geometry.x - offsets.top),(f.geometry.y - offsets.left), img.width, img.height);
        el.name = f.id;