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、 实例效果为:
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>