esri_graphics_ns.js

ARCGIS程序,可以实现查、缩放等功能

/*
COPYRIGHT 1995-2005 ESRI

TRADE SECRETS: ESRI PROPRIETARY AND CONFIDENTIAL
Unpublished material - all rights reserved under the 
Copyright Laws of the United States.

For additional information, contact:
Environmental Systems Research Institute, Inc.
Attn: Contracts Dept
380 New York Street
Redlands, California, USA 92373

email: [e-mail]
*/

function EsriNSGraphicsElement(id, container) {
  this.inheritsFrom(new EsriGraphicsElement(id));

  this.gc = container.appendChild(document.createElement("div"));
  this.gc.id = this.id + "_gc";
  EsriUtils.setElementStyle(this.gc, "position:absolute; left:0px; top:0px; width:" + ((container.style.width) ? EsriUtils.getStyleValue(container.style.width) + "px" : "100%") + "; height:" + ((container.style.height) ? EsriUtils.getStyleValue(container.style.height) + "px" : "100%") + "; border:0px NONE white; background-color:transparent; overflow:visible;");
  var self = this;
  var htmlString = "";

  this.clear = function() {
    this.gc.innerHTML = "";
    elementCount = 0;
  }

  this.destroy = function() {
    this.clear();
    if (this.gc.parentNode) this.gc.parentNode.removeChild(this.gc);
  }

  function draw() {
    self.gc.innerHTML += htmlString;
    htmlString = "";
  }

  function add(left, top, width, height) { htmlString += "<div style=\"position:absolute; left:" + left + "px; top:" + top + "px; width:" + width + "px; height:" + height + "px; overflow:hidden; background-color:" + self.lineColor + ";\"><\/div>"; }
  this.clip = function(rect) { EsriUtils.setElementStyle(this.gc, "clip: rect(" + rect.top + "px, " + (rect.left + rect.width) + "px, " + (rect.top + rect.height) + "px, " + rect.left + "px);"); }
  this.clearClip = function() { EsriUtils.setElementStyle(this.gc, "clip:auto;"); }
  this.drawCircle = function(center, radius) { this.drawOval(new EsriRectangle(center.x - radius, center.y - radius, radius * 2, radius * 2)); }
  this.drawImage = function(src, left, top, width, height) { this.gc.innerHTML += "<img src='" + src + "' style='position:absolute; width:" + width + "px; height:" + height + "px; left:" + left + "px; top:" + top + "px' />"; }

  this.drawPoint = function(point) {
    var size = Math.ceil(this.lineWidth / 2);
    var oldLineWidth = this.lineWidth;
    var oldFillColor = this.fillColor;
    var oldFillOpacity = this.fillOpacity;
    this.lineWidth = 1;
    this.fillColor = this.lineColor;
    this.fillOpacity = this.lineOpacity;
    var elemId = this.drawRectangle(new EsriRectangle(point.x - size, point.y - size, oldLineWidth, oldLineWidth));
    this.lineWidth = oldLineWidth;
    this.fillColor = oldFillColor;
    this.fillOpacity = oldFillOpacity;
  }

  this.drawRectangle = function(rect) {
    var lw = this.lineWidth / 2;
    if (this.fillOpacity > 0) this.gc.innerHTML += "<div style='position:absolute; left:" + (rect.left + lw) + "px; top:" + (rect.top + lw) + "px; width:" + (rect.width + lw) + "px; height:" + (rect.height + lw) + "px; overflow:hidden; background-color:" + this.fillColor + "; -moz-opacity:" + this.fillOpacity + "; opacity:" + this.fillOpacity + ";'></div>" + "<div style='position:absolute; left:" + rect.left + "px; top:" + rect.top + "px; width:" + rect.width + "px; height:" + rect.height + "px; overflow:hidden; border:" + this.lineWidth + "px SOLID " + this.lineColor + "; background-color:transparent;'></div>";
    else this.gc.innerHTML += "<div style='position:absolute; left:" + rect.left + "px; top:" + rect.top + "px; width:" + rect.width + "px; height:" + rect.height + "px; overflow:hidden; border:" + this.lineWidth + "px SOLID " + this.lineColor + ";'></div>";
  }

  function ovalPortion(centerX, centerY, dleft, dright, dtop, dbottom, dwidth, dheight) {
    add(centerX + dleft, centerY + dtop,  dwidth , dheight);
    add(centerX + dright, centerY + dtop, dwidth , dheight);
    add(centerX + dright, centerY + dbottom,  dwidth , dheight);
    add(centerX + dleft, centerY + dbottom,  dwidth , dheight);
  }

  function drawLn(point1, point2) {
    var inX1 = point1.x;
    var inY1 = point1.y;
    var inX2 = point2.x;
    var inY2 = point2.y;

    if (self.lineWidth < 1) self.lineWidth = 1;
    if (inX1 > inX2) {
      var tempX = inX2;
      var tempY = inY2;
      inX2 = inX1;
      inY2 = inY1;
      inX1 = tempX;
      inY1 = tempY;
    }
    var pwidth = inX2 - inX1;
    var pheight = Math.abs(inY2 - inY1);
    var x = inX1;
    var y = inY1;
    var increment = 1;
    if (inY1 > inY2) increment =  -1;
    var xoffset = x;
    var yoffset = y;
    var size = self.lineWidth;
    var flex_size = size;
    var size_adjust = 0;
    var rl1 = pheight * 2;
    var rl2 = rl1 - (pwidth * 2);
    var rl3 = rl1 - pwidth;

    if (pwidth >= pheight) {
      if (size > 1) {
        if (size > 3) {
          flex_size = (size * pwidth * Math.sqrt(1 + pheight * pheight / (pwidth * pwidth)) - pwidth - (size >> 1) * pheight) / pwidth;
          flex_size = (!(size > 4) ? Math.ceil(flex_size) : Math.round(flex_size)) + 1;
        }
        size_adjust = Math.ceil(size / 2);
      }
      while (pwidth > 0) {
        ++x;
        if (rl3 > 0) {
          add(xoffset, y, x - xoffset + size_adjust, flex_size);
          y += increment;
          rl3 += rl2;
          xoffset = x;
        }
        else rl3 += rl1;
        pwidth--;
      }
      add(xoffset, y, inX2 - xoffset + size_adjust + 1, flex_size);
    }
    else	{
      size_adjust = 1;
      if (size > 1) {
        if (size > 3) {
          flex_size = (size * pheight * Math.sqrt(1 + pwidth * pwidth / (pheight * pheight)) - (size >> 1) * pwidth - pheight) / pheight;
          flex_size = (!(size > 4) ? Math.ceil(flex_size) : Math.round(flex_size)) + 1;
        }
        size_adjust = Math.round(size / 2);
      }
      rl1 = pwidth * 2;
      rl2 = rl1 - (pheight * 2);
      rl3 = rl1 - pheight;
      if (inY2 <= inY1) {
        while (pheight > 0) {
          if (rl3 > 0) {
            add(x, y, flex_size, yoffset - y + size_adjust);
            x++;
            y += increment;
            rl3 += rl2;
            yoffset = y;
          } else {
            y += increment;
            rl3 += rl1;
          }
          pheight--;
        }
        add(inX2, inY2, flex_size, yoffset - inY2 + size_adjust);
      }
      else {
        if (size == 1) size_adjust = 0;
        while (pheight > 0) {
          y += increment;
          if (rl3 > 0) {
            add(x, yoffset, flex_size, y - yoffset + size_adjust);
            x++;
            rl3 += rl2;
            yoffset = y;
          }
          else rl3 += rl1;
          pheight--;
        }
        add(inX2, yoffset, flex_size, inY2 - yoffset + size_adjust + 1);
      }
    }
  }

  this.drawLine = function(point1, point2) {
    drawLn(point1, point2);
    draw();
  }

  this.drawOval = function(bounds) {
    if (this.lineWidth < 1) this.lineWidth = 1;
    var size = this.lineWidth;
    var ovwidth = bounds.width + size - 1;
    var ovheight = bounds.height +  size - 1;
    var halfwidth = Math.floor(ovwidth / 2);
    var halfheight = Math.floor(ovheight / 2);
    var ovw = ovwidth & 1; 
    var ovh = (ovheight & 1 ) + 1;
    var centerX = bounds.left + halfwidth;
    var centerY = bounds.top + halfheight;
    var x = 0; 
    var y = halfheight;
    var w;
    var h;
    var xoff = 0;
    var yoff = halfheight;
    var hwsq = (halfwidth * halfwidth) * 2;
    var hhsq = (halfheight * halfheight) * 2;
    var chpoint = Math.floor(hwsq / 2) * (1 - (halfheight * 2)) + hhsq;
    var chpoint2 = Math.floor(hhsq / 2) - hwsq * ((halfheight * 2) - 1);
    if ((size == 1) || (bounds.width <= 1) || (bounds.height - size <= 1)) {
      do {
        if (chpoint < 0) {
          chpoint += hhsq * ((x * 2) + 3);
          x++;
          chpoint2 += (hhsq * 2) * x;
        }
        else if (chpoint2 < 0) {
          chpoint += hhsq * ((x * 2) + 3) - (hwsq * 2) * (y - 1);
          x++;
          chpoint2 += (hhsq * 2) * x - hwsq * ((y * 2) - 3);
          y--;
          w = x - xoff;
          h = yoff - y;
          if (w & 2 && h & 2) {
            ovalPortion(centerX, centerY, -x + 1, xoff + ovw, -yoff, yoff - h + 1 + ovh, w, 1);
            ovalPortion(centerX, centerY, -x + 1, x - 1 + ovw, -y - 1, y + ovh, 1, 1);
          }
          else ovalPortion(centerX, centerY, -x + 1, xoff + ovw, -yoff, yoff - h + ovh, w, h);
          xoff = x;
          yoff = y;
        }
        else {
          chpoint2 -= hwsq * ((y * 2) - 3);
          y--;
          chpoint -= (hwsq * 2) * y;
        }
      } while (y > 0);

      add(centerX - halfwidth, centerY - yoff, halfwidth - xoff + 1, (yoff * 2) + ovh);
      add(centerX + xoff + ovw, centerY - yoff, halfwidth - xoff + 1, (yoff * 2) + ovh);
    }
    else {
      var left_point, top_point, bottom_point, right_point;
      if (size < 3 && ((size > 2) || ovwidth > 33 && ovheight > 33)) {
        do {
          if (chpoint < 0) {
            chpoint += hhsq * ((x * 2) + 3);
            x++;
            chpoint2 += (hhsq * 2) * x;
          }
          else if (chpoint2 < 0) {
            chpoint += hhsq * ((x * 2) + 3) - (hwsq * 2) * (y - 1);
            x++;
            chpoint2 += (hhsq * 2) * x - hwsq * ((y * 2) - 3);
            y--;
            w = x - xoff;
            h = yoff - y;
            if (w - 1) {
              right_point = w + 1 + (size & 1);
              h = size;
            }
            else if (h - 1) {
              right_point = size;
              h += 1 + (size & 1);
            }
            else {
              right_point = size;
              h = size;
            }
            ovalPortion(centerX, centerY, -x + 1, xoff - right_point + w + ovw, -yoff, -h + yoff + ovh, right_point, h);
            xoff = x;
            yoff = y;
          }
          else {
            chpoint2 -= hwsq *((y * 2) - 3);
            y--;
            chpoint -= (hwsq * 2) * y;
          }
        } while (y > 0);

        add(centerX - halfwidth, centerY - yoff, size, (yoff * 2) + ovh);
        add(centerX + halfwidth + ovw - size + 1, centerY - yoff, size, (yoff * 2) + ovh);
      }
      else {
        var hw = Math.floor((ovwidth - ((size - 1) * 2)) /2);
        var hh = Math.floor((ovheight - ((size - 1) * 2)) /2);
        var xx = 0;
        var yy = hh;
        var hwsq2 = (hw * hw) * 2;
        var hhsq2 = (hh * hh) * 2;
        var chpoint3 = Math.floor(hwsq2 / 2) * (1 - (hh * 2)) + hhsq2;
        var chpoint4 = Math.floor(hhsq2 / 2) - hwsq2 * ((hh * 2) - 1);
        left_point = new Array();
        top_point = new Array();
        bottom_point = new Array();
        left_point[0] = 0;
        top_point[0] = halfheight;
        bottom_point[0] = hh - 1;

        do {
          if (chpoint < 0) {
            chpoint += hhsq * ((x * 2) + 3);
            x++;
            chpoint2 += (hhsq * 2) * x;
            left_point[left_point.length] = x;
            top_point[top_point.length] = y;
          }
          else if (chpoint2 < 0) {
            chpoint += hhsq * ((x * 2) + 3) - (hwsq * 2) * (y - 1);
            x++;
            chpoint2 += (hhsq * 2) * x - hwsq * ((y * 2) - 3);
            y--;
            left_point[left_point.length] = x;
            top_point[top_point.length] = y;
          }
          else {
            chpoint2 -= hwsq * ((y * 2) - 3);
            y--;
            chpoint -= (hwsq * 2) * y;
          }
          if (yy > 0) {
            if (chpoint3 < 0) {
              chpoint3 += hhsq2 * ((xx * 2) + 3);
              xx++;
              chpoint4 += (hhsq2 * 2) * xx;
              bottom_point[bottom_point.length] = yy - 1;
            }
            else if (chpoint4 < 0) {
              chpoint3 += hhsq2 * ((xx * 2) + 3) - (hwsq2 * 2) * (yy - 1);
              xx++;
              chpoint4 += (hhsq2 * 2) * xx - hwsq2 * ((yy * 2) - 3);
              yy--;
              bottom_point[bottom_point.length] = yy - 1;
            }
            else {
              chpoint4 -= hwsq2 * ((yy * 2) - 3);
              yy--;
              chpoint3 -= (hwsq2 * 2) * yy;
              bottom_point[bottom_point.length-1]--;
            }
          }
        } while (y > 0);

        var yoff2 = bottom_point[0];
        var l = left_point.length;
        for (var i = 0; i < l; i++) {
          if (bottom_point[i] != null) {
            if (bottom_point[i] < yoff2 || top_point[i] < yoff) {
              x = left_point[i];
              ovalPortion(centerX, centerY, -x + 1, xoff + ovw, -yoff, yoff2 + ovh, x - xoff, yoff - yoff2);
              xoff = x;
              yoff = top_point[i];
              yoff2 = bottom_point[i];
            }
          }
          else {
            x = left_point[i];
            add(centerX - x + 1, centerY - yoff, 1, (yoff * 2) + ovh);
            add(centerX + xoff + ovw, centerY - yoff, 1, (yoff * 2) + ovh);
            xoff = x;
            yoff = top_point[i];
          }
        }
        add(centerX - halfwidth, centerY - yoff, 1, (yoff * 2) + ovh);
        add(centerX + xoff + ovw, centerY - yoff, 1, (yoff * 2) + ovh);
      }
    }
    draw();
  }

  this.drawPolyline = function(points) {
    for (var i=1;i<points.length;i++) drawLn(points[i-1], points[i]);
    draw();
  }

  this.drawPolygon = function(points) {
    for (var i=1;i<points.length;i++) drawLn(points[i-1], points[i]);
    drawLn(points[0], points[points.length - 1]);
    draw();
  }

  this.drawText = function(txt, bounds, fontStyle) {
    txt = txt.replace(/\ /g, "&nbsp;");
    htmlString += "<span style=\"position:absolute; color:" + self.lineColor + "; left:" + bounds.left + "px; top:" + bounds.top + "px; width:" + bounds.width + "px; height:" + bounds.height + "px; overflow:hidden; " + fontStyle + ";\">" + txt + "</span>";
    draw();
  }
}