html中如何创建arcgis地图,Arcgis Javascript API 学习（二）创建一个地图

前面，我们引用了arcgis javascript的api。下面，就可以通过这可js库来创建我们第一个地图。

接下来我们创建一个地图(Home键、卫星图切换、鹰眼图)。

Map

html, body, #map {

height: 100%;

width: 100%;

margin: 0;

padding: 0;

overflow-x: hidden;

}

#BasemapToggle {

position: absolute;

top: 20px;

right: 20px;

z-index: 50;

}

#HomeButton {

position: absolute;

top: 95px;

left: 20px;

z-index: 50;

}

//引入需要的类

dojo.require("esri.map");

dojo.require("esri.dijit.BasemapToggle");

dojo.require("esri.dijit.HomeButton");

dojo.require("esri.dijit.OverviewMap");

//定义全局变量

var map;

//准备初始化

dojo.ready(init);

//初始化方法

function init(){

//创建地图

map = new esri.Map("map", {

center: [121.48, 31.25],

zoom: 8,

basemap: "streets"

});

//卫星图切换

var toggle = new esri.dijit.BasemapToggle({

map: map,

basemap: "satellite"

}, "BasemapToggle");

toggle.startup();

//HOME按钮

var home = new esri.dijit.HomeButton({

map: map

}, "HomeButton");

home.startup();

//小地图

var overviewMap = new esri.dijit.OverviewMap({

map: map,

visible: true, // 初始化可见，默认为false

attachTo: "bottom-right", // 默认右上角

width: 250, // 默认值是地图高度的 1/4th

height: 150, // 默认值是地图高度的 1/4th

opacity: 0.5, // 透明度 默认0.5

maximizeButton: true, // 最大化,最小化按钮，默认false

expandFactor: 2, //概览地图和总览图上显示的程度矩形的大小之间的比例。默认值是2，这意味着概览地图将至少是两倍的大小的程度矩形。

color: "#000000" // 默认颜色为#000000

});

overviewMap.startup();

}