esri_edit.js

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

    return false;
  }

  function processMouseMove(e) {
    if (! bounds) bounds = EsriUtils.getElementPageBounds(element);
    currPt = EsriUtils.getXY(e).offset(-bounds.left, -bounds.top);
    if (startPt) {
      if (lineGraphic) gr.remove(lineGraphic);
      lineGraphic = gr.drawLine(startPt, currPt, self.symbol);
    }
    if (tGr) {
      self.clearSnapGraphics();
      if(circleGraphic) tGr.remove(circleGraphic);
      circleGraphic = tGr.drawCircle(currPt, self.snapDistance, self.symbol);
      restartTimer();
    }
    EsriUtils.stopEvent(e);
    return false;
  }

  function processMouseUp(e) {
    clearTimeout(timer);
    var sPt = startPt;
    startPt = null;
    if(lineGraphic) gr.remove(lineGraphic);
    element.onmouseup = gr.gc.onmouseup = null;
    element.onmousedown = gr.gc.onmousedown = processMouseDown;
    if (tGr) {
      self.clearSnapGraphics();
      if(circleGraphic) tGr.remove(circleGraphic);
      tGr.gc.onmouseup = self.snapGraphics.gc.onmouseup = null;
      tGr.gc.onmousedown = self.snapGraphics.gc.onmousedown = processMouseDown;
    }
    callback(sPt, getPoint(e));
    EsriUtils.stopEvent(e);
    return false;
  }

  function restartTimer() {
    if (timer) clearTimeout(timer);
    var pt = currPt;
    timer = setTimeout(function() {if(self.snapGraphics) self.clearSnapGraphics();self.snappedPoint = null; contCallback(pt); }, callbackTimeout);
  }
}

function EsriEditingDrawPolyShapeAction(isPolygon) {
  this.inheritsFrom(new EsriEditingDrawAction());
  this.name = (isPolygon) ? "EsriEditingDrawPolygonAction" : "EsriEditingDrawPolylineAction";

  var isPgon = isPolygon;
  var element, callback, contCallback, bounds, pts, index, gr, tGr, timer, currPt, lineGraphic, circleGraphic, closePolyGraphic, polyGraphics;;
  var callbackTimeout = 250;
  var createGraphic = true;
  var self = this;

  this.activate = function(elem, cb, ccb, ge) {
    element = elem;
    callback = cb;
    contCallback = ccb;
    pts = [];
    polyGraphics = [];
    
    if (ge) { 
      gr = (tGr = ge);
      createGraphic = false;
    }
    else {
      gr = EsriUtils.createGraphicsElement(element.id + "gr", element);
      EsriUtils.setElementStyle(gr.gc, "z-index:" + this.graphicsZIndex + ";");
      
      tGr = EsriUtils.createGraphicsElement(element.id + "tGr", element);
      EsriUtils.setElementStyle(tGr.gc, "z-index:" + this.graphicsZIndex + ";");
    }

    element.style.cursor = this.cursor;
    element.onmousedown = tGr.gc.onmousedown = processMouseDown;
    element.onmousemove = tGr.gc.onmousemove = processMouseMove;

    if (this.snapping) {
      if(ge) this.snapGraphics = ge;
      else {
        this.snapGraphics = EsriUtils.createGraphicsElement(element.id + "sGr", element);
        EsriUtils.setElementStyle(this.snapGraphics.gc, "z-index:" + (this.graphicsZIndex + 1) + ";");
      }

      this.snapGraphics.gc.onmousedown = processMouseDown;
      this.snapGraphics.gc.onmousemove = processMouseMove;
    }
    index = 0;
  }

  this.deactivate = function() {
    if (element != null) {
      element.onclick = element.ondblclick = element.onmousemove = element.onmouseup = element.onmousedown = null;
      element.style.cursor = "default";
    }
    
    clearGraphics();
    if (createGraphic) {
      if (gr != null) { 
        gr.gc.onclick = gr.gc.ondblclick = gr.gc.onmousemove = gr.gc.onmouseup = gr.gc.onmousedown = null;
        gr.destroy();
      }
      if (tGr != null) {
        tGr.gc.onclick = tGr.gc.ondblclick = tGr.gc.onmousemove = tGr.gc.onmouseup = tGr.gc.onmousedown = null;
        tGr.destroy();
      }
      if (this.snapGraphics) {
        this.snapGraphics.gc.onclick = this.snapGraphics.gc.ondblclick = this.snapGraphics.gc.onmousemove = this.snapGraphics.gc.onmouseup = this.snapGraphics.gc.onmousedown = null;
        this.snapGraphics.destroy();
      }
    }
    else {
      if (gr != null) {
        gr.gc.onclick = gr.gc.ondblclick = gr.gc.onmousemove = gr.gc.onmouseup = gr.gc.onmousedown = null;
      }
    }
    element = bounds = pts = index = gr = tGr = this.snapGraphics = this.snappedPoint = null;
  }
  
  function clearGraphics() {
    self.clearSnapGraphics();
    if (lineGraphic) tGr.remove(lineGraphic);
    if (circleGraphic) tGr.remove(circleGraphic);
    if (isPgon && closePolyGraphic) tGr.remove(closePolyGraphic);
    for (var i=polyGraphics.length - 1; i>=0; i--) gr.remove(polyGraphics[i]);
  }

  this.reactivate = function() {
    var e = element;
    var cb = callback;
    var ccb = contCallback;
    var ge = createGraphic ? null : gr;
    this.deactivate();
    this.activate(e, cb, ccb, ge);
  }

  function getPoint(e) {
    var pt = EsriUtils.getXY(e).offset(-bounds.left, -bounds.top);
    if ((Math.abs(currPt.x - pt.x) <= self.clickTolerance && Math.abs(currPt.y - pt.y) <= self.clickTolerance) && self.snappedPoint) pt = self.snappedPoint;
    return pt;
  }

  function processMouseDown(e) {
    bounds = EsriUtils.getElementPageBounds(element);
    pts.push(getPoint(e));

    element.onmousedown = tGr.gc.onmousedown = null;
    element.onclick = tGr.gc.onclick = processClick;
    element.ondblclick = tGr.gc.ondblclick = processDblClick;
    if (self.snapGraphics) {
      self.snapGraphics.gc.onmousedown = null;
      self.snapGraphics.gc.onclick = processClick;
      self.snapGraphics.gc.ondblclick = processDblClick;
    }

    EsriUtils.stopEvent(e);
    return false;
  }

  function processMouseMove(e) {
    if (! bounds) bounds = EsriUtils.getElementPageBounds(element);
    if (lineGraphic) tGr.remove(lineGraphic);
    if (circleGraphic) tGr.remove(circleGraphic);
    if (isPgon && closePolyGraphic) tGr.remove(closePolyGraphic);
    currPt = EsriUtils.getXY(e).offset(-bounds.left, -bounds.top);
    if (pts.length > 0) {
      lineGraphic = tGr.drawLine(pts[index], currPt, self.symbol);
      if (isPgon) closePolyGraphic = tGr.drawLine(currPt, pts[0], self.symbol);
    }
    if (self.snapping) {
      self.clearSnapGraphics();
      circleGraphic = tGr.drawCircle(currPt, self.snapDistance, self.symbol);
      restartTimer();
    }

    EsriUtils.stopEvent(e);
    return false;
  }

  function processClick(e) {
    pts.push(getPoint(e));
    index++;
    if (index > 0) polyGraphics.push(gr.drawLine(pts[index - 1], pts[index], self.symbol));
    EsriUtils.stopEvent(e);
    return false;
  }

  function processDblClick(e) {
    clearTimeout(timer);
    clearGraphics();
    tGr.gc.onclick = tGr.gc.ondblclick = element.onclick = element.ondblclick = null;
    element.onmousedown = tGr.gc.onmousedown = processMouseDown;
    if (self.snappingGraphics) {
      this.snapGraphics.gc.onclick = this.snapGraphics.gc.ondblclick = null;
      this.snapGraphics.gc.onmousedown = processMouseDown;
    }

    var newPts = [];
    for (var i=1;i<pts.length;i++) { if (pts[i].x != pts[i-1].x || pts[i].y != pts[i-1].y) newPts.push(pts[i-1]); }
    newPts.push(getPoint(e));

    pts = [];
    index = 0;
    currPt = bounds = timer = null;
    EsriUtils.stopEvent(e);
    callback(newPts);
  }

  function restartTimer() {
    if (timer) clearTimeout(timer);
    var pt = currPt;
    timer = setTimeout(function() {if(self.snapGraphics) self.clearSnapGraphics();self.snappedPoint = null; contCallback(pt); }, callbackTimeout);
  }
}

function EsriEditingToolItem(id, toolName, action) {
  this.inheritsFrom(new EsriMapToolItem(id, toolName, action, false));
  this.taskId = null;

  this.activate = function() {

    var sElem= document.getElementById(snapEnabledId);
    if(sElem){
      this.action.snapping = (sElem.value == "true");
      this.action.snapDistance = parseInt(document.getElementById(snapTolId).value);
      this.action.snapColor = new EsriColor().fromString(document.getElementById(snapColorId).value).toHex();
      this.action.snapWidth = snapWidth;
    }
  
    this.action.activate(this.element, this.postAction, this.continuousAction, this.control.graphics);
    this.isActive = true;
    
  }
}

function EsriEditingPoint(id, toolName) {
  this.inheritsFrom(new EsriEditingToolItem(id, toolName, new EsriEditingDrawPointAction()));
  var self = this;

  this.update = function() { self = this; }

  this.continuousAction = function(point) {
    self.update();
    var map = self.control;
    EsriEditingUtils.snapPointRequestHandler(self.taskId, map.id, point.offset(-map.viewBounds.left, -map.viewBounds.top), self.action);
  }

  this.postAction = function(point) {
    self.update();
    var map = self.control;
    if (self.showLoading) map.showLoading();
    point = point.offset(-map.viewBounds.left, -map.viewBounds.top);

    EsriUtils.addFormElement(map.formId, map.id, map.id);
    EsriUtils.addFormElement(map.formId, map.id + "_mode", self.id);
    EsriUtils.addFormElement(map.formId, map.id + "_minx", point.x);
    EsriUtils.addFormElement(map.formId, map.id + "_miny", point.y);
    if (self.clientPostBack) EsriUtils.addFormElement(map.formId, "doPostBack", "doPostBack");
    EsriUtils.submitForm(map.formId, self.clientPostBack, EsriControls.processPostBack);
  }
}

function EsriEditingLine(id, toolName) {
  this.inheritsFrom(new EsriEditingToolItem(id, toolName, new EsriEditingDrawLineAction()));
  var self = this;

  this.update = function() { self = this; }

  this.continuousAction = function(point) {
    self.update();
    var map = self.control;
    EsriEditingUtils.snapPointRequestHandler(self.taskId, map.id, point.offset(-map.viewBounds.left, -map.viewBounds.top), self.action);
  }

  this.postAction = function(from, to) {
    if (from.x == to.x && from.y == to.y) return;

    self.update();
    var map = self.control;
    if (self.showLoading) map.showLoading();
    from = from.offset(-map.viewBounds.left, -map.viewBounds.top);
    to = to.offset(-map.viewBounds.left, -map.viewBounds.top);

    EsriUtils.addFormElement(map.formId, map.id, map.id);
    EsriUtils.addFormElement(map.formId, map.id + "_mode", self.id);
    EsriUtils.addFormElement(map.formId, map.id + "_coords", from.x + ":" + from.y + "|" + to.x + ":" + to.y);
    if (self.clientPostBack) EsriUtils.addFormElement(map.formId, "doPostBack", "doPostBack");
    EsriUtils.submitForm(map.formId, self.clientPostBack, EsriControls.processPostBack);
  }
}

function EsriEditingPoly(id, toolName, isPgon) {
  this.inheritsFrom(new EsriEditingToolItem(id, toolName, new EsriEditingDrawPolyShapeAction(isPgon)));
  var isPolygon = isPgon;
  var self = this;

  this.update = function() { self = this; }

  this.continuousAction = function(point) {
    self.update();
    var map = self.control;
    EsriEditingUtils.snapPointRequestHandler(self.taskId, map.id, point.offset(-map.viewBounds.left, -map.viewBounds.top), self.action);
  }

  this.postAction = function(points) {
    if (points.length <= 1) return;

    self.update();
    var map = self.control;
    if (self.showLoading) map.showLoading();

    var pts = "";
    var viewLeft = map.viewBounds.left;
    var viewTop = map.viewBounds.top;
    for (var i=0;i<points.length;i++) {
      points[i] = points[i].offset(-viewLeft, -viewTop);
      if (i == 0) pts += points[i].x + ":" + points[i].y;
      else pts += "|" + points[i].x + ":" + points[i].y;
    }
    EsriUtils.addFormElement(map.formId, map.id, map.id);
    EsriUtils.addFormElement(map.formId, map.id + "_mode", self.id);
    EsriUtils.addFormElement(map.formId, map.id + "_coords", pts);
    if (self.clientPostBack) EsriUtils.addFormElement(map.formId, "doPostBack", "doPostBack");
    EsriUtils.submitForm(map.formId, self.clientPostBack, EsriControls.processPostBack);
  }
}

function EsriEditingPolyline(id, toolName) { return new EsriEditingPoly(id, toolName, false); }
function EsriEditingPolygon(id, toolName) { return new EsriEditingPoly(id, toolName, true); }

var EsriEditingUtils = new function() {
  var ccWin;
  var fontSize = 12;
  var snapPoint, snapText, txtSymbol, ptSymbol;
  var fontStyle = "font-size:" + fontSize + "px; font-stretch:narrower;background-color:#fff";
  this.showColorChooser = function(title, fieldId, butId) {
    var cs = document.getElementById(fieldId).value.split(",");
    var initColor;
    if (cs.length == 3) initColor = new EsriColor(parseInt(cs[0]), parseInt(cs[1]), parseInt(cs[2]));

    var cc = new EsriColorChooser("cc", document.body, function(color) { ccWin.hide();document.getElementById(fieldId).value = color.red + "," + color.green + "," + color.blue; document.getElementById(fieldId).onclick(); EsriUtils.setElementStyle(document.getElementById(butId), "background-color:rgb(" + color.red + "," + color.green + "," + color.blue + ");"); }, initColor);
    var ccWin = new EsriWindow(new Date().getTime(), title, cc);
    ccWin.movable = true;
    ccWin.collapsable = false;
    ccWin.resizable = false;
    ccWin.init();
    ccWin.fit();
    ccWin.center();
    ccWin.toFront();
  }

  this.snapPointRequestHandler = function(taskId, mapId, point, action) {
    var map = EsriControls.maps[mapId];
    var url = EsriUtils.getServerUrl(map.formId);
    var params = "EditBean=EditBean&ajaxServerAction=snapPoint&formId=" + map.formId + "&x=" + point.x + "&y=" + point.y + "&" + EsriUtils.buildRequestParams(map.formId);
    EsriUtils.sendAjaxRequest(url, params, false, function(xh) { EsriEditingUtils.snapPointResponseHandler(xh, mapId, action); });
  }

  this.snapPointResponseHandler = function(xh, mapId, action) {
    if (xh != null && xh.readyState == 4 && xh.status == 200) {
      var xml = EsriUtils.getXmlDocument(xh);
      var error = EsriUtils.getErrorFromDocument(xml);
      var map = EsriControls.maps[mapId];
      txtSymbol = new EsriGraphicsSymbol(action.snapColor,1.0,1.1,action.snapColor,1.0);
      ptSymbol = new EsriGraphicsSymbol(action.snapColor,1.0,3,action.snapColor,1.0);
      
      if (error) {
        alert(error);
        return;
      }

      var pointTags = xml.getElementsByTagName("point");
      var point;
      if (pointTags.length > 0) {
        var pointTag = pointTags.item(0);
        var x = parseInt(pointTag.getElementsByTagName("x").item(0).firstChild.nodeValue);
        var y = parseInt(pointTag.getElementsByTagName("y").item(0).firstChild.nodeValue);
        point = new EsriPoint(x, y);
      }

      var sg = action.snapGraphics;
      if (sg) {
        action.clearSnapGraphics();
        if (point) {
          var mvr = map.viewBounds;
          point = point.offset(mvr.left, mvr.top);
          action.snapPoint = sg.drawPoint(point, ptSymbol);

          action.snappedPoint = point;
          var label = pointTag.getElementsByTagName("label").item(0).firstChild.nodeValue;
          var lblWd = Math.round(label.length * fontSize * 0.667);
          var lblHt = fontSize + 4;
 
          var rect = new EsriRectangle(point.x - Math.round(lblWd / 2), point.y - (2 * lblHt), lblWd, lblHt);
          action.snapText = sg.drawText(label, rect, fontStyle, txtSymbol);
        }
      }
    }
  }
}