2、Server API for JavaScript简单地图发布

Server API for JavaScript简单地图发布：

1、 新建网站，

2、添加样式引用： <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.2/js/dojo/dijit/themes/tundra/tundra.css">

此样式用来定义body的样式！引用后就可以在body中利用class=“tundra”

3、 添加js引用：此引用必须有，JavaScript API就是依此包完成GIS的功能的！

引用地址为：

<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.2"></script>

4、 添加层div，用来显示地图：

<div id="map" style="width:900px; height:600px; border:1px solid #000;"></div>

其中的ID属性为地图加载的引用依据

5、 添加JavaScript初始化地图，并加载本地图层

<script type="text/javascript"> 

dojo.require("esri.map");//注册map控件 

function init() { 

var map = new esri.Map("map");//实例化map控件，并将之指定给层map 

var dynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://localhost/ArcGIS/rest/services/China/MapServer"); 

map.addLayer(dynamicMapServiceLayer);//加载图层 

} 

dojo.addOnLoad(init);//加载是调用init初始化地图 

</script>

dojo是Server API js的入口，地图组件要通过dojo注册引用！

本例中使用的是“标准动态图层”即：ArcGISDynamicMapServiceLayer

Map的addLayer（）方法用来加载图层！

6、 实例效果为：

clip_image002

7、 例子全部代码为：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="add_map.aspx.cs" Inherits="_Default" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head runat="server"> 

<title>地图服务——简单地图发布</title> 

<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.2/js/dojo/dijit/themes/tundra/tundra.css"> 

<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.2"></script> 

<script type="text/javascript"> 

dojo.require("esri.map");//注册map控件 

function init() { 

var map = new esri.Map("map");//实例化map控件，并将之指定给层map 

var dynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://localhost/ArcGIS/rest/services/China/MapServer"); 

map.addLayer(dynamicMapServiceLayer);//加载图层 

} 

dojo.addOnLoad(init);//加载是调用init初始化地图 

</script> 

</head> 

<body class="tundra"> 

<form id="form1" runat="server"> 

<div id="map" style="width:900px; height:600px; border:1px solid #000;"></div> 

</form> 

</body> 

</html>

 

posted @ 2013-04-27 21:47  沉默的猿  阅读(229)  评论(0)  编辑  收藏  举报
AmazingCounters.com
给我写信