[TOC]

1. 初始化

function initMap(){
    //地图初始化参数
    map = new esri.Map("map", {
        logo : false,//禁用logo
        center: [107.55, 24.22],//地图中心点坐标
        slider:false,
        nav:false,
        isZoomSlider:true,
        autoResize : true,
        smartNavigation : false,
        force3DTransforms : true,
        isKeyboardNavigation : false,
        sliderStyle : "large",
        showInfoWindowOnClick : true,
        isDoubleClickZoom : false,
    });
    //比例尺
    var scalebar = new esri.dijit.Scalebar({
        map : map,
        scalebarStyle : "ruler",
        scalebarUnit : "metric",
        attachTo : "top-left",
    });
    //缩略图
    var overViewMap = new esri.dijit.OverviewMap({
        map:map,
        attachTo: "bottom-left",
        visible:true,
        opacity: .40,
        width : 300,
        height : 150,
    });
    overViewMap.startup();
}

2. 指定地图中心点

//初始化点    
    var point =  new Point(107.55, 24.22, new SpatialReference({ wkid: 4326 }));
    //var point =  new Point(lon, lat, map.spatialReference);
    map.centerAndZoom(point,2);
    map.centerAt(point);

3. 加载地图

index.jsp页面上需要添加

String esriPath = request.getServerName() + ":" +
request.getServerPort() + path + "/";

<script type="text/javascript">
    var arcgis_js_api_home = "<%=esriPath%>";
    var dojoConfig = {
        has : {
            "dojo-firebug" : true
        },
        async : true,
        paths : {
            "js" : "/../js"
        },
    };
</script>

再引入claro.css，esri.css，init.js，index.js。

index.js中添加

require(["esri/map"
     ,"esri/layers/ArcGISDynamicMapServiceLayer"
     ,"esri/SpatialReference"
     ],function(){
var map = new esri.Map("arcgisDiv",{
    logo : false,
    center: [107.55, 24.22],
    slider:true,
});
var baseUrl = "http://192.168.1.139:6080/arcgis/rest/services/";
var mapNames ={
        "dt":"dt" //底图
        ,"dw":"dw"//电网
    };
var dtLayer = new esri.layers.ArcGISDynamicMapServiceLayer(baseUrl+mapNames.dt+"/MapServer",{id:"dt"});
//    var layer1 = new esri.layers.ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/WGS_84/MapServer");
var dwLayer = new esri.layers.ArcGISDynamicMapServiceLayer(baseUrl+mapNames.dw+"/MapServer",{id:"dw"});
map.addLayers([dtLayer,dwLayer]);
//    map.addLayer(layer);
map.setZoom(8);
});

4. infoWindow

<script>
require([
  "dojo/dom",
  "dojo/dom-construct",
  "esri/map", 
  "myModules/InfoWindow",
  "esri/layers/FeatureLayer",
  "esri/InfoTemplate",
  "dojo/string",
  "dojo/domReady!"
], function(
   dom,
   domConstruct,
   Map,
   InfoWindow,
   FeatureLayer,
   InfoTemplate,
   string
) {
  //create the custom info window specifying any input options
   var infoWindow = new  InfoWindow({
      domNode: domConstruct.create("div", null, dom.byId("mapDiv"))
   });
  var map = new Map("map", {
      basemap: "gray",
      center: [-98.57, 39.82],
      zoom: 4,
      infoWindow: infoWindow
    });

  var template = new PopupTemplate({
      title: "Boston Marathon 2013",
      description: "{Percent_Fi} of starters from {STATE_NAME} finished",
      fieldInfos: [{ //define field infos so we can specify an alias
        fieldName: "Number_Ent",
        label: "Entrants"
      },{
        fieldName: "Number_Sta",
        label: "Starters"
      },{
        fieldName: "Number_Fin",
        label: "Finishers"
      }]
    });

   var featureLayer = new FeatureLayer("http://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Boston_Marathon/FeatureServer/0",{
      mode: FeatureLayer.MODE_ONDEMAND,
      outFields: ["*"],
      infoTemplate:template
    });

    map.addLayer(featureLayer);  
  //resize the info window 
  map.infoWindow.resize(400, 200);
});
</script>