esri_map.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 EsriMap(id, container, formId, wd, ht) {
  this.width = (wd) ? wd : (container && container.style.width) ? EsriUtils.getStyleValue(container.style.width) : 400;
  this.height = (ht) ? ht : (container && container.style.height) ? EsriUtils.getStyleValue(container.style.height) : 400;
  this.inheritsFrom(new EsriControl(id, "Map", 0, 0, this.width, this.height));
  this.formId = formId;
  var self = this;

  this.divId = "MapDiv_" + id;
  this.controlDivId = "MapControlDiv_" + id;
  this.controlDiv = null;

  this.graphics = null;
  this.graphicsId = "MapGraphics_" + id;
  this.graphicsZIndex = 19;
  this.webGraphicsId = "MapWebGraphics_" + id;
  this.webGraphicsZIndex = 20;
  this.isFuseGraphics = false;

  this.loadingId = "MapLoading_" + id;
  this.loadingObject = null;
  this.loadingStyle = "position:absolute; top:5px; right:5px;";
  this.loadingUrl = "images/loading.gif";
  this.loadingZIndex = 99;

  this.imageGridId = "MapGridDiv_" + id;
  this.imageGrid = this.viewBounds = null;
  this.currentToolbar = this.currentTool = null;
  this.panTool = new EsriMapContinuousPan("emcp_" + id, "emcp_" + id);
  this.keyNavigation = new EsriMapKeyNavigation("emkn_" + id, "emkn_" + id);
  this.mouseWheelTool = new EsriMapMouseWheel("emmw_" + id, "emmw_" + id);
  this.mapSources = [];
  this.mapSourceNames = [];

  this.scaleBarId = "ScaleBar_" + id
  this.scaleBarDiv = null;
  this.scaleBar = null;
  this.scaleBarTypeNames = ["Alternating", "SteppedScaleLine", "SingleDivision", "DoubleAlternating"];
  this.scaleBarTypes = [];
  this.scaleBarTypes["Alternating"] = "EsriAlternatingScaleBarRenderer";
  this.scaleBarTypes["SteppedScaleLine"] = "EsriSteppedScaleLineRenderer";
  this.scaleBarTypes["SingleDivision"] = "EsriSingleDivisionScaleBar";
  this.scaleBarTypes["DoubleAlternating"] = "EsriDoubleAlternatingScaleBarRenderer";

  this.init = function(container) {
    if (! this.width || ! this.height) {
      var size = EsriUtils.getElementPageBounds(container);
      if (size.width && size.height) {
        this.width = size.width;
        this.height = size.height;
      }
    }
    this.bounds = new EsriRectangle(0, 0, this.width, this.height);
    this.viewBounds = new EsriRectangle(0, 0, this.width, this.height);

    this.divObject = container.appendChild(document.createElement("div"));
    this.divObject.id = this.divId;
    EsriUtils.setElementStyle(this.divObject, "width:" + this.width + "px; height:" + this.height + "px; overflow:hidden;");

    this.controlDiv = this.divObject.appendChild(document.createElement("div"));
    this.controlDiv.id = this.controlDivId;
    EsriUtils.setElementStyle(this.controlDiv, "position:relative; width:" + this.width + "px; height:" + this.height + "px; overflow:hidden;");

    this.imageGrid = this.controlDiv.appendChild(document.createElement("div"));
    this.imageGrid.id = this.imageGridId;
    EsriUtils.setElementStyle(this.imageGrid, "position:absolute; left:0px; top:0px; width:" + this.width + "px; height:" + this.height + "px;");

    this.graphics = EsriUtils.createGraphicsElement(this.graphicsId, this.imageGrid);
    EsriUtils.setElementStyle(this.graphics.gc, "z-index:" + this.graphicsZIndex + ";");

    this.divObject.onmouseover = function() { self.panTool.activate(); };
    this.divObject.onmouseout = function() { self.panTool.deactivate(); };

    this.loadingObject = this.controlDiv.appendChild(document.createElement("img"));
    this.loadingObject.id = this.loadingId;
    this.loadingObject.src = this.loadingUrl;
    EsriUtils.setElementStyle(this.loadingObject, this.loadingStyle + "; display:none; z-index:" + this.loadingZIndex + ";");

    for (var i=0;i<this.mapSourceNames.length;i++) {
      this.mapSources[this.mapSourceNames[i]].update(this);
      this.mapSources[this.mapSourceNames[i]].updateImages(this.viewBounds);
      if (! this.isFuseGraphics) this.mapSources[this.mapSourceNames[i]].updateWebGraphics(this.id);
    }

    this.panTool.control = this.keyNavigation.control = this.mouseWheelTool.control = this;
    this.panTool.element = this.imageGrid;
    this.keyNavigation.element = this.mouseWheelTool.element = this.divObject;

    this.panTool.activate();
    this.keyNavigation.activate();
    this.mouseWheelTool.activate();

    EsriControls.addPostBackTagHandler("map", EsriControls.maps[self.id].updateAsync);
  }

  this.resize = function(wd, ht) { for (var i=0;i<this.mapSourceNames.length;i++) this.mapSources[this.mapSourceNames[i]].resizeMap(wd, ht); }

  this.updateAsync = function(xml, eventSources) {
    var idTag = xml.getElementsByTagName("id").item(0);
    if (idTag.firstChild.nodeValue == self.id) {
      self.width = parseInt(xml.getElementsByTagName("width").item(0).firstChild.nodeValue);
      self.height = parseInt(xml.getElementsByTagName("height").item(0).firstChild.nodeValue);
      self.bounds.reshape(0, 0, self.width, self.height);
      self.viewBounds.reshape(0, 0, self.width, self.height);

      EsriUtils.setElementStyle(self.divObject, "width:" + self.width + "px; height:" + self.height + "px; overflow:hidden;");
      EsriUtils.setElementStyle(self.controlDiv, "position:relative; width:" + self.width + "px; height:" + self.height + "px; overflow:hidden;");
      EsriUtils.setElementStyle(self.imageGrid, "position:absolute; left:0px; top:0px; width:" + self.width + "px; height:" + self.height + "px;");
      EsriUtils.setElementStyle(self.loadingObject, self.loadingStyle + "; display:none; z-index:" + self.loadingZIndex + ";");

      var tileTags = xml.getElementsByTagName("tile");
      if (tileTags.length > 0) {
        self.imageGrid.innerHTML = "";
        var tileTag = tileTags.item(0);

        if (self.mapSources[self.mapSourceNames[0]].type == "dynamic") {
          self.removeMapSource(self.mapSourceNames[0]);
          self.addMapSource("tileMapSource", new EsriMapSourceTile(tileTag.getElementsByTagName("base-url").item(0).firstChild.nodeValue));
        }

        self.mapSources[self.mapSourceNames[0]].imageWidth = parseInt(tileTag.getElementsByTagName("tile-width").item(0).firstChild.nodeValue);
        self.mapSources[self.mapSourceNames[0]].imageHeight = parseInt(tileTag.getElementsByTagName("tile-height").item(0).firstChild.nodeValue);
        self.mapSources[self.mapSourceNames[0]].numLevels = parseInt(tileTag.getElementsByTagName("levels-count").item(0).firstChild.nodeValue);
        self.mapSources[self.mapSourceNames[0]].level = parseInt(tileTag.getElementsByTagName("level").item(0).firstChild.nodeValue);
        self.mapSources[self.mapSourceNames[0]].startColumn = parseInt(tileTag.getElementsByTagName("start-column").item(0).firstChild.nodeValue);
        self.mapSources[self.mapSourceNames[0]].endColumn = parseInt(tileTag.getElementsByTagName("end-column").item(0).firstChild.nodeValue);
        self.mapSources[self.mapSourceNames[0]].column = parseInt(tileTag.getElementsByTagName("column").item(0).firstChild.nodeValue);
        self.mapSources[self.mapSourceNames[0]].startRow = parseInt(tileTag.getElementsByTagName("start-row").item(0).firstChild.nodeValue);
        self.mapSources[self.mapSourceNames[0]].endRow = parseInt(tileTag.getElementsByTagName("end-row").item(0).firstChild.nodeValue);
        self.mapSources[self.mapSourceNames[0]].row = parseInt(tileTag.getElementsByTagName("row").item(0).firstChild.nodeValue);
        self.mapSources[self.mapSourceNames[0]].offsetX = parseInt(tileTag.getElementsByTagName("offsetx").item(0).firstChild.nodeValue);
        self.mapSources[self.mapSourceNames[0]].offsetY = parseInt(tileTag.getElementsByTagName("offsety").item(0).firstChild.nodeValue);
      }
      else {
        if (self.mapSources[self.mapSourceNames[0]].type == "tile") {
          self.removeMapSource(self.mapSourceNames[0]);
          self.addMapSource("dynamicMapSource", new EsriMapSourceDynamic());
        }

        self.mapSources[self.mapSourceNames[0]].imageWidth = self.width;
        self.mapSources[self.mapSourceNames[0]].imageHeight = self.height;
        self.setMapImage(xml.getElementsByTagName("image-url").item(0).firstChild.nodeValue);
      }

      self.graphics.destroy();
      self.graphics = EsriUtils.createGraphicsElement(self.graphicsId, self.imageGrid);
      EsriUtils.setElementStyle(self.graphics.gc, "z-index:" + self.graphicsZIndex + ";");

      for (var i=0;i<self.mapSourceNames.length;i++) {
        self.mapSources[self.mapSourceNames[i]].update(self);
        self.mapSources[self.mapSourceNames[i]].updateImages(self.viewBounds);
      }

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

      for (var i=0;i<self.updateListenerNames.length;i++) self.updateListeners[self.updateListenerNames[i]](self);

      self.reactivateCurrentToolItem();

      EsriUtils.removeFormElement(self.formId, self.id);
      EsriUtils.removeFormElement(self.formId, self.id + "_mode");
      EsriUtils.removeFormElement(self.formId, self.id + "_minx");
      EsriUtils.removeFormElement(self.formId, self.id + "_miny");
      EsriUtils.removeFormElement(self.formId, self.id + "_maxx");
      EsriUtils.removeFormElement(self.formId, self.id + "_maxy");
      EsriUtils.removeFormElement(self.formId, self.id + "_coords");
      EsriUtils.removeFormElement(self.formId, self.id + "_value");
    }
  }

  EsriControls.mapIds.push(this.id);
  EsriControls.maps[this.id] = this;
  if (container) this.init(container);
}

EsriMap.prototype.setMapImage = function(url) {
  this.clearImages();
  for (var i=0;i<this.mapSourceNames.length;i++) {
    var mapSource = this.mapSources[this.mapSourceNames[i]]
    mapSource.addImage(0, 0, mapSource.generateTileId(0, 0), url);
  }
}

EsriMap.prototype.setCurrentToolItem = function(toolItem, toolbarId) {
  if (! toolItem) return;
  if (this.currentTool && this.currentTool.id == toolItem.id) {
    this.reactivateCurrentToolItem();
    return;
  }

  if (toolItem.isCommand) {
    if (this.currentTool && this.currentToolbar) EsriControls.toolbars[this.currentToolbar].setToolItemInactive(this.currentTool.id);
    if (toolbarId) EsriControls.toolbars[toolbarId].setToolItemActive(toolItem.id);
    toolItem.control = this;
    toolItem.element = this.imageGrid;
    toolItem.activate();
    toolItem.deactivate();
    if (toolbarId) EsriControls.toolbars[toolbarId].setToolItemInactive(toolItem.id);
    if (this.currentTool && this.currentToolbar) EsriControls.toolbars[this.currentToolbar].setToolItemActive(this.currentTool.id);
    return;
  }

  if (this.currentTool) {
    if (this.currentToolbar) EsriControls.toolbars[this.currentToolbar].setToolItemInactive(this.currentTool.id);
    this.currentTool.deactivate();
  }

  this.currentToolbar = toolbarId;
  this.currentTool = toolItem;
  this.currentTool.control = this;
  this.currentTool.element = this.imageGrid;
  if (this.currentToolbar) EsriControls.toolbars[this.currentToolbar].setToolItemActive(this.currentTool.id);
  this.currentTool.activate();
}

EsriMap.prototype.deactivateCurrentToolItem = function() { if (this.currentTool) this.currentTool.deactivate(); }
EsriMap.prototype.activateCurrentToolItem = function() { if (this.currentTool) this.currentTool.activate(); }

EsriMap.prototype.reactivateCurrentToolItem = function() {
  if (this.currentTool) {
    this.deactivateCurrentToolItem();
    this.activateCurrentToolItem();
  }
}

EsriMap.prototype.clearCurrentToolItem = function() {
  if (this.currentTool) {
    if (this.currentToolbar) EsriControls.toolbars[this.currentToolbar].setToolItemInactive(this.currentTool.id);
    this.currentTool.deactivate();
    this.currentTool = this.currentToolbar = null;
  }
}

EsriMap.prototype.createCurrentToolItem = function(id, eId, clientAction, sl, pb, lc, lw, def, hov, sel, dis) {
  var toolItem = eval("new " + clientAction + "(id, id);");
  toolItem.showLoading = sl;
  toolItem.clientPostBack = pb;
  if (lc) toolItem.action.lineColor = lc;
  if (lw) toolItem.action.lineWidth = lw;

  var elementId = eId;
  var e = document.getElementById(elementId);
  var fMouseOver = e.onmouseover;
  var fMouseOut = e.onmouseout;
  var type = ("src" in e) ? "IMAGE" : "TEXT";
  var de = def;
  var ho = hov;
  var se = sel;
  var di = dis;

  toolItem.origActivate = toolItem.activate;
  toolItem.origDeactivate = toolItem.deactivate;

  toolItem.activate = function() {
    var e = document.getElementById(elementId);
    if (e) {
      if (type == "IMAGE") EsriUtils.setImageSrc(e, se);
      else e.className = se;
      e.onmouseover = e.onmouseout = null;
      toolItem.origActivate();
    }
  }

  toolItem.deactivate = function() {
    var e = document.getElementById(elementId);
    if (e) {
      if (type == "IMAGE") EsriUtils.setImageSrc(e, de);
      else e.className = de;
      e.onmouseover = fMouseOver;
      e.onmouseout = fMouseOut;
    }
    toolItem.origDeactivate();
  }

  this.setCurrentToolItem(toolItem);
  return toolItem;
}

EsriMap.prototype.clearImages = function() {
  var childCount = this.imageGrid.childNodes.length;
  for (var i=childCount-1;i>=0;i--) {
    var child = this.imageGrid.childNodes.item(i);
    if (child.tagName.toLowerCase() != "div" && child.id != this.webGraphicsId) this.imageGrid.removeChild(child);
  }
}

EsriMap.prototype.addMapSource = function(name, mapSource) {
  if (this.mapSourceNames.indexOf(name) == -1) this.mapSourceNames.push(name);
  this.mapSources[name] = mapSource;
  mapSource.imageZIndex = this.mapSourceNames.length;

  if (this.divObject) {
    var childCount = this.imageGrid.childNodes.length;
    this.clearImages();

    for (var i=0;i<this.mapSourceNames.length;i++) {
      this.mapSources[this.mapSourceNames[i]].update(this);
      this.mapSources[this.mapSourceNames[i]].updateImages(this.viewBounds);
      if (! this.isFuseGraphics) this.mapSources[this.mapSourceNames[i]].updateWebGraphics(this.id);
    }
  }
}

EsriMap.prototype.removeMapSource = function(name) {
  var index = this.mapSourceNames.indexOf(name);
  if (index != -1) {
    this.mapSourceNames.splice(index, 1);
    this.mapSources[name] = null;
  }

  this.clearImages();
  for (var i=0;i<this.mapSourceNames.length;i++) {
    this.mapSources[this.mapSourceNames[i]].update(this);
    this.mapSources[this.mapSourceNames[i]].updateImages(this.viewBounds);
    if (! this.isFuseGraphics) this.mapSources[this.mapSourceNames[i]].updateWebGraphics(this.id);
  }
}

EsriMap.prototype.showLoading = function() { EsriUtils.showElement(this.loadingObject); }
EsriMap.prototype.hideLoading = function() { EsriUtils.hideElement(this.loadingObject); }

EsriMap.prototype.addScaleBar = function(url, position, width, height, sDist, mDist, units, type) {
  this.scaleBarDiv = this.controlDiv.appendChild(document.createElement("div"));