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="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="900px; height:600px; border:1px solid #000;"></div> </form> </body> </html>