esri_map.js

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

  var posStyle;
  if (position == "none") this.scaleBarDiv.className = "esriScaleBar";
  else {
    var pa = position.split("-");
    posStyle = "position:absolute; " + pa[0] + ":10px; " + pa[1] + ":10px; z-index:99;";
  }

  if (url) {
    this.scaleBar = this.scaleBarDiv.appendChild(document.createElement("img"));
    this.scaleBar.id = this.scaleBarId;
    this.scaleBar.src = url;
    if (posStyle) EsriUtils.setElementStyle(this.scaleBar, posStyle);
  }
  else {
    var renderer = eval("window." + this.scaleBarTypes[(type) ? type : this.scaleBarTypeNames[0]]);
    this.scaleBar = new EsriScaleBar(this.scaleBarId, this.scaleBarDiv, width, height, new renderer());
    if (posStyle) EsriUtils.setElementStyle(this.scaleBar.divObject, posStyle);
    this.scaleBar.renderer.render(sDist, mDist, units);
  }
}

function EsriMapSource(type) {
  this.type = type;
  this.map = this.formUrl = null;
  this.doTileCleanUp = true;
  this.imageList = new Array();
  this.zoomStep = 1;
  this.imageZIndex = 0;
  this.offsetX = this.offsetY = this.imageWidth = this.imageHeight = this.row = this.column = 0;
  var self = this;

  this.update = function(m) {
    this.map = m;
    this.formUrl = EsriUtils.getServerUrl(this.map.formId);
    this.imageList = new Array();
    self = this;
  }

  this.addImage = function(oX, oY, imageId) {}
  this.generateTileId = function(row, col) { return "MapTile_" + this.map.id + "_" + row + "_" + col; }

  this.updateImages = function(inRect) {
    var rect = inRect.offset(this.offsetX, this.offsetY);
    var sC = Math.floor(rect.left / this.imageWidth);
    var sR = Math.floor(rect.top / this.imageHeight);
    var eC = Math.ceil((rect.left + rect.width) / this.imageWidth);
    var eR = Math.ceil((rect.top + rect.height) / this.imageHeight);
    for (var c=sC;c<eC;c++) {
      for (var r=sR;r<eR;r++) {
        var id = this.generateTileId(r, c);
        if (this.imageList.indexOf(id) == -1) {
          this.imageList.push(id);
          this.addImage(this.row + r, this.column + c, id);
        }
      }
    }

    if (this.doTileCleanUp) {
      var scaledRect = rect.scale(2);
      var startCol = Math.floor(scaledRect.left / this.imageWidth);
      var startRow = Math.floor(scaledRect.top / this.imageHeight);
      var endCol = Math.ceil((scaledRect.left + scaledRect.width) / this.imageWidth);
      var endRow = Math.ceil((scaledRect.top + scaledRect.height) / this.imageHeight);
      var tempList = new Array();
      for (var c=startCol;c<endCol;c++) { for (var r=startRow;r<endRow;r++) tempList.push(this.generateTileId(r, c)); }

      for (var l=this.imageList.length-1;l>=0;l--) {
        if (tempList.indexOf(this.imageList[l]) == -1) {
          var obj = document.getElementById(this.imageList.splice(l, 1)[0]);
          if (obj) obj.parentNode.removeChild(obj);
        }
      }
    }
  }

  this.updateWebGraphics = function(mapId) {
    var map = EsriControls.maps[mapId];
    if (! map.isFuseGraphics) {
      var wgImg = document.getElementById(map.webGraphicsId);
      var redisplay = wgImg == null;
      if (wgImg) EsriUtils.setElementStyle(wgImg, "width:0px; height:0px;");
      var params = "__ADFPostBack__=true&getWebGraphics=getWebGraphics&formId=" + map.formId + "&mapId=" + mapId + "&redisplay=" + redisplay;
      var xh = EsriUtils.sendAjaxRequest(self.formUrl, params, true, function() { process_updateWebGraphicsResponse(xh, mapId); });
    }
  }

  function process_updateWebGraphicsResponse(xh, mapId) {
    if (xh != null && xh.readyState == 4 && xh.status == 200) {
      var map = EsriControls.maps[mapId];
      var vb = map.viewBounds;
      var xml = xh.responseXML;
      var changed = xml.getElementsByTagName("changed").item(0).firstChild.nodeValue == "true";

      var wgImg = document.getElementById(map.webGraphicsId);
      if (changed) {
        if (wgImg) {
          wgImg = map.imageGrid.removeChild(wgImg);
          if (EsriUtils.isIE && ! EsriUtils.isIE7) wgImg.style.filter = wgImg.runtimeStyle.filter = "";
          wgImg = null;
        }

        var imageTags = xml.getElementsByTagName("image-url");
        if (imageTags.length > 0) {
          var img = map.imageGrid.appendChild(EsriUtils.createImage(imageTags.item(0).firstChild.nodeValue, vb.width + "px", vb.height + "px"));
          img.id = map.webGraphicsId;
          EsriUtils.setElementStyle(img, "position:absolute; left:" + vb.left + "px; top:" + vb.top + "px; z-index:" + map.webGraphicsZIndex + ";");
        }
      }
      else if (wgImg) EsriUtils.setElementStyle(wgImg, "position:absolute; left:" + vb.left + "px; top:" + vb.top + "px; width:" + vb.width + "px; height:" + vb.height + "px; z-index:" + map.webGraphicsZIndex + ";");
    }
  }

  this.centerAt = function(x, y) {
    var params = "__ADFPostBack__=true&doContinuousPan=doContinuousPan&centerAt=centerAt&source=" + this.type + "&formId=" + this.map.formId + "&mapId=" + this.map.id + "&centerx=" + x + "&centery=" + y;
    var mapId = this.map.id;
    var xh = EsriUtils.sendAjaxRequest(this.formUrl, params, true, function() { process_centerAtResponse(xh, mapId); });
  }

  function process_centerAtResponse(xh, mapId) {
    if (xh != null && xh.readyState == 4 && xh.status == 200) {
      self.updateWebGraphics(mapId);

      var xml = xh.responseXML;
      var ovTags = xml.getElementsByTagName("overview");
      for (var i=0;i<ovTags.length;i++) {
        var ovId = ovTags.item(i).getElementsByTagName("id").item(0).firstChild.nodeValue;
        EsriControls.overviews[ovId].updateAsync(ovTags.item(i));
      }

      var mapTags = xml.getElementsByTagName("map");
      for (var i=0;i<mapTags.length;i++) {
        var mapTag = mapTags.item(i);
        var mapId = mapTag.getElementsByTagName("id").item(0).firstChild.nodeValue;
        var map = EsriControls.maps[mapId];

        var scalebarTags = mapTag.getElementsByTagName("scalebar");
        if (scalebarTags.length > 0 && map.scaleBar) {
          var scalebarTag = scalebarTags.item(0);
          var imageUrlTags = scalebarTag.getElementsByTagName("image-url");
          if (imageUrlTags.length > 0) map.scaleBar.src = imageUrlTags.item(0).firstChild.nodeValue;
          else map.scaleBar.renderer.render(parseInt(scalebarTag.getElementsByTagName("screen-distance").item(0).firstChild.nodeValue), parseInt(scalebarTag.getElementsByTagName("map-distance").item(0).firstChild.nodeValue), scalebarTag.getElementsByTagName("units").item(0).firstChild.nodeValue);
        }

        for (var j=0;j<map.updateListenerNames.length;j++) map.updateListeners[map.updateListenerNames[j]](map);
      }
    }
  }

  this.changeLevel = function(newLevel) {
    this.map.showLoading();
    var params = "__ADFPostBack__=true&doContinuousPan=doContinuousPan&changeLevel=changeLevel&source=" + this.type + "&formId=" + this.map.formId + "&mapId=" + this.map.id + "&level=" + newLevel + "&factor=" + (1.0 + (this.zoomStep * newLevel));
    var xh = EsriUtils.sendAjaxRequest(this.formUrl, params, true, function() { EsriControls.processPostBack(xh); });
  }

  this.resizeMap = function(width, height) {
    this.map.showLoading();
    var params = "_ADFPostBack=true&doContinuousPan=doContinuousPan&resizeMap=resizeMap&source=" + this.type + "&formId=" + this.map.formId + "&mapId=" + this.map.id + "&width=" + width + "&height=" + height;
    var xh = EsriUtils.sendAjaxRequest(this.formUrl, params, true, function() { EsriControls.processPostBack(xh); });
  }
}

function EsriMapSourceDynamic(imgWd, imgHt) {
  this.inheritsFrom(new EsriMapSource("dynamic"));
  this.imageWidth = imgWd;
  this.imageHeight = imgHt;
  this.doTileCleanUp = false;
  var self = this;

  this.addImage = function(oY, oX, id, url) {
    if (url) {
      var img = this.map.imageGrid.appendChild(document.createElement("img"));
      img.src = url;
      img.id = id;
      this.imageList.push(id);
      EsriUtils.setElementStyle(img, "position:absolute; left:" + (this.map.width * oX) + "px; top:" + (this.map.height * oY) + "px; width:" + this.map.width + "px; height:" + this.map.height + "px; margin:0px; padding:0px; border:0px none; z-index:" + this.imageZIndex + ";");
    }
    else if (! (oY == 0 && oX == 0)) {
      var b = this.map.bounds;
      var v = this.map.viewBounds;
      var params = "__ADFPostBack__=true&doContinuousPan=doContinuousPan&getImage=getImage&source=" + this.type + "&formId=" + this.map.formId + "&mapId=" + this.map.id + "&centerx=" + (b.center.x + (b.center.x - v.center.x + (this.map.width * oX))) + "&centery=" + (b.center.y + (b.center.y - v.center.y + (this.map.height * oY)));
      var xh = EsriUtils.sendAjaxRequest(this.formUrl, params, true, function() { process_getImageResponse(xh, oX, oY, id); });
    }
  }

  function process_getImageResponse(xh, oX, oY, id) {
    if (xh != null && xh.readyState == 4 && xh.status == 200) {
      var xml = xh.responseXML;
      var img = self.map.imageGrid.appendChild(document.createElement("img"));
      img.src = xml.getElementsByTagName("image-url").item(0).firstChild.nodeValue;
      img.className = "esriMapImage";
      img.id = id;
      EsriUtils.setElementStyle(img, "left:" + (self.map.width * oX) + "px; top:" + (self.map.height * oY) + "px; width:" + self.map.width + "px; height:" + self.map.height + "px; z-index:" + self.imageZIndex + ";");
    }
  }
}

function EsriMapSourceTile(tileUrl, tileWd, tileHt, numLevels, level, startCol, endCol, col, startRow, endRow, row, offX, offY) {
  this.inheritsFrom(new EsriMapSource("tile"));
  this.tileUrl = tileUrl;
  this.filesys = false;
  this.imageWidth = tileWd;
  this.imageHeight = tileHt;
  this.numLevels = numLevels;
  this.level = level;
  this.startColumn = startCol;
  this.endColumn = endCol;
  this.column = col;
  this.startRow = startRow;
  this.endRow = endRow;
  this.row = row;
  this.offsetX = offX;
  this.offsetY = offY;

  this.showNoData = true;
  this.noDataLabel = "No Data";
  var self = this;

  function prependZeros(s, len) {
    var delta = len - s.length;
    for (var i=1;i<=delta;i++) s = "0" + s;
    return s;
  }

  function generateUrl(url, level, row, col) {
    if (self.filesys) {
      var l = "L" + prependZeros(new String(level), 2);
      var r = "R" + prependZeros(EsriUtils.toHex(row), 8);
      var c = "C" + prependZeros(EsriUtils.toHex(col), 8);
      return ((url.endsWith("/")) ? url : url + "/") + l + "/" + r + "/" + c + ".png";
    }
    else return url + "&level=" + level + "&row=" + row + "&column=" + col;
  }

  this.addImage = function(row, col, id) {
    var left = (this.imageWidth * (col - this.column)) - this.offsetX;
    var top = (this.imageHeight * (row - this.row)) - this.offsetY;
    if (this.startRow <= row && row <= this.endRow && this.startColumn <= col && col <= this.endColumn) {
      var img = this.map.imageGrid.appendChild(document.createElement("img"));
      img.id = id;
      img.src = generateUrl(this.tileUrl, this.level, row, col);
      img.className = "esriMapImage";
      EsriUtils.setElementStyle(img, "left:" + left + "px; top:" + top + "px; width:" + this.imageWidth + "px; height:" + this.imageHeight + "px; z-index:" + this.imageZIndex + ";");
    }
    else if (this.showNoData) {
      var table = this.map.imageGrid.appendChild(document.createElement("table"));
      table.id = id;
      table.className = "esriMapNoData";
      EsriUtils.setElementStyle(table, "left:" + left + "px; top:" + top + "px; width:" + this.imageWidth + "px; height:" + this.imageHeight + "px; z-index:" + this.imageZIndex + ";");
      var cell = table.appendChild(document.createElement("tbody")).appendChild(document.createElement("tr")).appendChild(document.createElement("td"));
      cell.vAlign = "middle";
      cell.align = "center";
      cell.appendChild(document.createTextNode(this.noDataLabel));
    }
  }
}

function EsriMapToolItem(id, tn, act, isM) {
  this.inheritsFrom(new EsriToolItem(id, tn, act, isM));

  this.activate = function() {
    if (this.action) this.action.activate(this.element, this.postAction);
    this.isActive = true;
  }

  this.deactivate = function() {
    if (this.action) this.action.deactivate();
    this.isActive = false;
  }
}

function EsriMapRectangle(id, toolName, isMarkerTool) {
	this.inheritsFrom(new EsriMapToolItem(id, toolName, new EsriDrawRectangleAction(), isMarkerTool));
  var self = this;

  this.update = function() { self = this; }
	this.postAction = function(rect) {
    if (rect.width == 0 && rect.height == 0) return;

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

    if (self.isMarker) map.graphics.drawRectangle(rect);
    else {
      if (self.showLoading) map.showLoading();
      rect = rect.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", rect.left);
      EsriUtils.addFormElement(map.formId, map.id + "_miny", rect.top);
      EsriUtils.addFormElement(map.formId, map.id + "_maxx", rect.left + rect.width);
      EsriUtils.addFormElement(map.formId, map.id + "_maxy", rect.top + rect.height);
      if (self.clientPostBack) EsriUtils.addFormElement(map.formId, "doPostBack", "doPostBack");
      EsriUtils.submitForm(map.formId, self.clientPostBack, EsriControls.processPostBack);
    }
	}
}

function EsriMapPan(id, toolName) {
	this.inheritsFrom(new EsriMapToolItem(id, toolName, new EsriDragElementAction()));
  var self = this;
  this.updateOverview = false;

  this.update = function() { self = this; }
	this.postAction = function(x, y) {
    if (x == 0 && y == 0) return;

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

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

function EsriMapContinuousPan(id, toolName) {
  this.inheritsFrom(new EsriMapToolItem(id, toolName, new EsriDragElementAction(true)));
  var self = this;
  var map, overview;
  var ovBox, mapToOvRatioWd, mapToOvRatioHt;
  this.updateOverview = true;

  this.update = function() {
    self = this;
    map = this.control;
    if (! overview) {
      for (var i=0;i<EsriControls.overviewIds.length;i++) {
        if (EsriControls.overviews[EsriControls.overviewIds[i]].mapId == map.id) {
          overview = EsriControls.overviews[EsriControls.overviewIds[i]];
          break;
        }
      }
    }
    if (overview) {
      ovBox = new EsriRectangle(overview.box.left, overview.box.top, overview.box.width, overview.box.height);
      mapToOvRatioWd = ovBox.width / map.width;
      mapToOvRatioHt = ovBox.height / map.height;
    }
  }

  this.activate = function() {
    this.action.activate(this.element, this.postAction, this.continuousAction);
    this.isActive = true;