mapviewer.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]
*/


var ieBuffer = 0;
var ieContentStyle = "left:0px;";
if(window.navigator.appName.toLowerCase().indexOf("microsoft")>=0) {
  ieBuffer = 3;
  ieContentStyle = "left: -" + ieBuffer + "px;";
}

var taskBox = null;
var formId = "mapForm";
var taskDetailsHeader;

var toolbarId = "toolbar";
var layoutSliderId = "layoutSlider";
var headerId = "header";
var contentId = "content";
var pageId = "page";
var panelId = "panel";
var statusId = "statusDiv";

var mapMargin = 10;
var mapBorder = 1;
var resizeCounter = 1;
var scaleBar, northArrowImg;
var toc1, ov1;

function initLayout() {
  toc1 = EsriControls.tocs["toc1"];
  ov1 = EsriControls.overviews["ov1"];

  loadTaskCenter();
  //resizeMap();

  EsriControls.addPostBackTagHandler("task-result", taskResultHandler);
  EsriControls.addPostBackTagHandler("mapviewer-elements", mapViewerElementsHandler);
  EsriControls.tocs["resultsToc"].addUpdateListener("resultsDivShowHide", resultsDivShowHide);
  if (ov1)
    ov1.isContinuousPan = true;

  if (toc1) {
    toc1.bounds.width = 300;
    toc1.bounds.height = 400;
  }

  closeTaskWindows();
  initNavAndSlider();
  initNorthArrow();
  window.onresize = handleResize;
}

function loadTaskCenter() {	
  var cont = document.getElementById("taskCenterPanel");
  taskBox = new TaskBox(cont, formId + ":taskWindows");
  taskBox.windowForm = document.getElementById(formId);
  if (ov1)
    taskBox.overviewId = ov1.id;

  if(document.getElementById("taskPanelContent").innerHTML.trim().length > 0)
    taskBox.addPanel(document.getElementById("taskPanelContent"), "工具", false);
  taskBox.addPanel(document.getElementById("resultsPanelContent"), "查询结果", false);
  taskBox.addPanel(document.getElementById("resultDetailsPanelContent"), "详细结果", true, formId);
  if(toc1)
    taskBox.addPanel(document.getElementById("tocPanelContent"), "图层管理", true, formId, toc1.bounds);
  taskBox.addPanel(document.getElementById("navPanelContent"), "导航", true, formId);
  //if(ov1)
    //taskBox.addPanel(document.getElementById("overviewPanelContent"), "鹰眼", true, formId, ov1.bounds);
	taskBox.closePanels();

  cont = document.getElementById("taskCenterPanel2");
    taskBox2 = new TaskBox(cont, formId + ":taskWindows");
    taskBox2.windowForm = document.getElementById(formId);
    if (ov1)
      taskBox2.overviewId = ov1.id;
    
    if(ov1)
      taskBox2.addPanel(document.getElementById("overviewPanelContent"), "鹰眼", true, formId, ov1.bounds);
}

function togglePanel() {
  EsriUtils.toggleElement(document.getElementById(panelId));
  EsriUtils.toggleElement(document.getElementById("panel2"));
  resizeMap();
}

function handleResize(e) {
  resizeCounter++;
  resizeLayout();
  setTimeout('throttleResize(' + resizeCounter + ')', 250);
}

function resizeMap() {
  var dimensions = resizeLayout();
  var map = EsriControls.maps['map1'];
  if (dimensions[0] != map.bounds.width || dimensions[1] != map.bounds.height)
    map.resize(dimensions[0], dimensions[1]);
}

function resizeLayout() {
  var hdr = document.getElementById(headerId);
  var layout = document.getElementById(pageId);
  var panel = document.getElementById(panelId);
  var content = document.getElementById(contentId);
  var slider = document.getElementById(layoutSliderId);
  
  var layoutBounds = EsriUtils.getElementPageBounds(layout);
  var panelBounds = EsriUtils.getElementPageBounds(panel);
  var sliderBounds = EsriUtils.getElementPageBounds(slider);
  var hdrBounds = EsriUtils.getElementPageBounds(hdr);
  var bounds = EsriUtils.getPageBounds();
  
  if(panel.style.display == "none")  //ie doesn't get 0 width when panel is collapsed
    panelBounds.width = 0;

  var bottomHeight = bounds.height - hdrBounds.height;
  var contentWidth = bounds.width - (sliderBounds.width + sliderBounds.left) - ieBuffer;
  var newContentH = ((bottomHeight > 0) ? bottomHeight : 0);
  var newContentW = ((contentWidth > 0) ? contentWidth : 0);
  var contentClass = EsriUtils.getStyleByClassName("#content");
  var newContentStyle = "position:relative; width:" + newContentW + "px; height: " + newContentH + "px; top:0px; " + ieContentStyle;
  var newLayoutStyle = "height: " + bounds.height + "px;";
  var newPanelStyle = "height: " + (bounds.height - hdrBounds.height) + "px;";
  EsriUtils.setElementStyle(layout, newLayoutStyle);
  EsriUtils.setElementStyle(panel, newPanelStyle);
  EsriUtils.setElementStyle(slider, newPanelStyle);
  EsriUtils.setElementStyle(content, newContentStyle);
  return [newContentW, newContentH];
}

function throttleResize(val) {
  if(val != resizeCounter)
    return true;
  resizeMap();
  return true;
}

function setStatus(s) {
  document.getElementById(statusId).innerHTML = s + "<br/>" + document.getElementById(statusId).innerHTML;
}

function resultsDivShowHide(toc) {
  if (toc.nodes.length == 0)
    taskBox.hidePanel("resultsPanelContent");
  else
    taskBox.showPanel("resultsPanelContent");
}

function taskResultHandler(xml, eventSources) {
  var table = document.getElementById("task-result-table");
  while (table.hasChildNodes())
    table.removeChild(table.firstChild);

  var tbody = table.appendChild(document.createElement("tbody"));
  var actions = xml.getElementsByTagName("action");
  if (actions.length > 0) {
    var actionsTd = tbody.appendChild(document.createElement("tr")).appendChild(document.createElement("td"));
    actionsTd.colSpan = "2";

    var span = actionsTd.appendChild(document.createElement("span"));
    span.appendChild(document.createTextNode("Actions:  "));
    span.className = "med";
    EsriUtils.setElementStyle(span, "color:#000; font-weight:bold;");

    for (var i=0;i<actions.length;i++) {
      var a = actionsTd.appendChild(document.createElement("a"));
      a.href = "#";
      a.className = "med";
      EsriUtils.setElementStyle(a, "color:#000;");
      var action = actions.item(i).firstChild.nodeValue;
      a.setAttribute("onclick", "return requestTaskDetailsAction('" + action + "');");
      a.appendChild(document.createTextNode(action));
      actionsTd.innerHTML += "&nbsp;&nbsp;";
    }
  }

  if (! taskDetailsHeader) {
    taskDetailsHeader = document.createElement("tr");
    var nameTd = taskDetailsHeader.appendChild(document.createElement("td"));
    nameTd.className = "med";
    EsriUtils.setElementStyle(nameTd, "color:#000000; font-weight:bold;");
    nameTd.appendChild(document.createTextNode("Name"));
    var valueTd = taskDetailsHeader.appendChild(document.createElement("td"));
    valueTd.className = "med";
    EsriUtils.setElementStyle(valueTd, "color:#000000; font-weight:bold;");
    valueTd.appendChild(document.createTextNode("Value"));
  }
  tbody.appendChild(taskDetailsHeader);

  var details = xml.getElementsByTagName("detail");
  for (var i=0;i<details.length;i++) {
    var detail = details.item(i);
    var tr = tbody.appendChild(document.createElement("tr"));
    var key = tr.appendChild(document.createElement("td"));
    key.appendChild(document.createTextNode(detail.getAttribute("key")));
    key.className = "med";
    EsriUtils.setElementStyle(key, "color:#000000;");

    var value = tr.appendChild(document.createElement("td"));
    value.appendChild(document.createTextNode(detail.getAttribute("value")));
    value.className = "med";
    EsriUtils.setElementStyle(value, "color:#000000;");
  }

  taskBox.showPanel("resultDetailsPanelContent");
}

function requestTaskDetailsAction(action) {
  //add form elements
  EsriUtils.addFormElement(formId, "mapViewerAjax", "mapViewerAjax");
  EsriUtils.addFormElement(formId, "formId", formId);
  document.getElementById(formId + ":an").value = action;
  document.getElementById(formId + ":pa").value= formId + ":pa";

  //submit form
  EsriUtils.submitForm(formId, true, EsriControls.processPostBack);

  //cleanup form elements
  EsriUtils.removeFormElement(formId, "mapViewerAjax");
  EsriUtils.removeFormElement(formId, "formId");
  document.getElementById(formId + ":an").value = "";
  document.getElementById(formId + ":pa").value = "";
  return false;
}

function toggleWindow(id) {
  if(taskWindowManager && taskWindowManager.windows[id])
    taskWindowManager.windows[id].toggleVisibility();
}

function closeTaskWindows() {
  var props = taskWindowManager.getProperties();
  for (var i=0;i<taskWindowManager.windowIds.length;i++) {
    var id = taskWindowManager.windowIds[i];
    if (props.indexOf(id) == -1) {
      var win = taskWindowManager.windows[id];
      win.center();
      win.hide();
    }
  }
}

function initNavAndSlider() {
  var map = EsriControls.maps["map1"];
  var navi = new EsriMapNavigator("navi", null, map.id);
  navi.image_map_move_shape = navi.image_map_move_shape = null;
  navi.init(document.getElementById("nav-container"));
  for (var i=0; i < map.mapSourceNames.length; i++) {
    if (map.mapSources[map.mapSourceNames[i]].type == "tile") {
      var slider = new EsriMapSlider("slider", null, map.id, (map.mapSources[map.mapSourceNames[i]].numLevels) ? (map.mapSources[map.mapSourceNames[i]].numLevels - 1) : 10, (map.mapSources[map.mapSourceNames[i]].level) ? map.mapSources[map.mapSourceNames[i]].level : 0);
      slider.init(document.getElementById("slider-container"));
      break;
    }
  }
}

function initNorthArrow() {
  var northarrowDiv = document.getElementById("northarrow");
  if (northarrowDiv) {
    northArrowImg = northarrowDiv.appendChild(EsriUtils.createImage(document.getElementById(formId + ":northarrowHid").value, "100px", "100px"));
    northArrowImg.id = "northArrowImg";
  }
}

function mapViewerElementsHandler(xml, eventSources) {
  var northarrowTags = xml.getElementsByTagName("north-arrow-url");
  if (northArrowImg && northarrowTags.length > 0 && northarrowTags.item(0).hasChildNodes()) {
    var src = northarrowTags.item(0).firstChild.nodeValue;
    if (EsriUtils.isIE) {
      var img = EsriUtils.createImage(src, "100px", "100px");
      img.id = northArrowImg.id;
      northArrowImg.parentNode.replaceChild(img, northArrowImg);
      northArrowImg = img;
    }
    else
      northArrowImg.src = src;
  }
}