1、首先要配置GIS 环境
参考资料：看下这些大神的资料：
http://blog.sina.com.cn/s/blog_708bacf90100yddk.html
http://blog.csdn.net/wufeishimeng/article/category/522004
也可以查看官方的例子：
https://developers.arcgis.com/javascript/jssamples/
查看GIS 官方API
https://developers.arcgis.com/javascript/jsapi/
第一步：在arcgis api for javascript 官网下载压缩文件（链接：http://support.esrichina-bj.cn/2011/0223/960.html）；
第二步:解压下载的压缩包，在文件中找到init.js dojo.js以记事本的方式打开,在里面搜索[HOSTNAME_AND_PATH_TO_JSAPI] 将其改为 localhost，然后放在C:inetpubwwwroot目录下。此目录为IIS默认网站的目录，若不适用离线服务，可适用GIS 提供的在线服务，如代码所示
第三步：开始创建第一个程序
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head runat="server"> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <title></title> 5 <%--在此处引用GIS服务，此处为GIS提供的在线服务 --%> 6 <%-- <link rel="stylesheet" href="https://js.arcgis.com/3.15/dijit/themes/tundra/tundra.css"> 7 <link rel="stylesheet" href="https://js.arcgis.com/3.15/esri/css/esri.css"> 8 <script src="https://js.arcgis.com/3.15/"></script>--%> 9 10 <%--此处为我们配置好的离线服务,若出不来地图，仔细检查下你的文件路径是不是对的--%> 11 <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.14/jsapi/dijit/themes/claro/claro.css" /> 12 <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.14/jsapi/esri/css/esri.css" /> 13 <script src="http://localhost/arcgis_js_api/library/3.14/jsapi/init.js" type="text/javascript"></script> 14 15 <script> 16 var map; 17 require(["esri/map"], function (Map) { 18 map = new Map("map", { 19 basemap: "streets", //显示的地图样式 此处为地图，basemap: "satellite", //实景图 20 center: [-80.94, 33.646], //地图加载后，初始位置 21 zoom: 8, //放大级别，值越大放大的比例就越大 22 slider: false, 23 maxZoom: 18,//地图最大缩放级别 24 minZoom: 1, //地图最小缩放级别 25 logo: false //不显示Esri的logo 26 }); 27 28 //加载地图服务 29 var myTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer( 30 "http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"); 31 map.addLayer(myTiledMapServiceLayer);//添加到地图中 32 }); 33 </script> 34 </head> 35 <body> 36 <form id="form1" runat="server"> 37 <div> 38 <%--定义一个div来放地图--%> 39 <div id="map"></div> 40 </div> 41 </form> 42 </body> 43 </html>
下面是在地图上添加图标，并且对图进行一些操作，如点击图片是弹出窗体及其内容
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head runat="server"> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <title></title> 5 <%--在此处引用GIS服务，此处为GIS提供的在线服务 --%> 6 <%-- <link rel="stylesheet" href="https://js.arcgis.com/3.15/dijit/themes/tundra/tundra.css"> 7 <link rel="stylesheet" href="https://js.arcgis.com/3.15/esri/css/esri.css"> 8 <script src="https://js.arcgis.com/3.15/"></script>--%> 9 10 <%--此处为我们配置好的离线服务,若出不来地图，仔细检查下你的文件路径是不是对的--%> 11 <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.14/jsapi/dijit/themes/claro/claro.css" /> 12 <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.14/jsapi/esri/css/esri.css" /> 13 <script src="http://localhost/arcgis_js_api/library/3.14/jsapi/init.js" type="text/javascript"></script> 14 15 <script> 16 var mymap, layer, layer2, state2, upindex, upjd, upwd; 17 require(["esri/map", "esri/toolbars/draw", "esri/symbols/TextSymbol", 18 "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/PictureMarkerSymbol", "esri/geometry/Point", "esri/layers/GraphicsLayer", 19 "esri/symbols/PictureFillSymbol", "esri/symbols/CartographicLineSymbol", "esri/SpatialReference", "esri/InfoTemplate", 20 "esri/graphic", 21 "esri/dijit/Bookmarks", 22 "dojo/_base/Color", "dojo/dom", "dojo/on", "dojo/ready" 23 , "extras/AddTag", "dijit/form/DateTextBox", "dojo/parser"], function (map, Draw, TextSymbol, 24 SimpleMarkerSymbol, SimpleLineSymbol, PictureMarkerSymbol, Point, GraphicsLayer, 25 PictureFillSymbol, CartographicLineSymbol, SpatialReference, InfoTemplate, 26 Graphic, Bookmarks, Color, dom, on, ready, AddTag) { 27 mymap = new map("map", { 28 basemap: "streets", //显示的地图样式 此处为地图，basemap: "satellite", //实景图 29 center: [54.37957701171877, 24.19937270915223], //地图加载后，初始位置 30 zoom: 8, //放大级别，值越大放大的比例就越大 31 slider: false, 32 maxZoom: 18,//地图最大缩放级别 33 minZoom: 1, //地图最小缩放级别 34 logo: false //不显示Esri的logo 35 }); 36 37 //加载地图服务 38 var myTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer( 39 "http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"); 40 mymap.addLayer(myTiledMapServiceLayer);//添加到地图中 41 42 //添加一个图层，用来存放图标 43 layer = new GraphicsLayer(); 44 mymap.addLayer(layer); 45 46 layer2 = new GraphicsLayer(); 47 mymap.addLayer(layer2); 48 //在地图的onload事件内给地图中加图标 49 mymap.on("load", function () { 50 AddImg(); 51 }); 52 53 //添加图标 54 function AddImg() { 55 var jd = 54.37957701171877, wd = 24.19937270915223; //通过经纬度加载图标 56 for (var i = 0; i < 2; i++) { 57 var point = new Point(jd, wd, new SpatialReference({ wkid: 4326 })); //设置加载图标的点 58 59 var picSymbol = new PictureMarkerSymbol("http://localhost/i_pushpin.png", 40, 40);//设置要显示的图片，以及宽度，高度 60 61 var picGraphic = new Graphic(point, picSymbol, { "jd": jd, "wd": wd, "id": i });// "jd": a1, "wd": a2, "id": 1这些为这个点的值，比如你若需要获取某个点的id，可在这里设置 62 63 layer.add(picGraphic);//添加到layer中 64 65 mymap.graphics.add(picGraphic); //添加到地图中 66 67 jd = 55.37957701171877; 68 wd = 25.19937270915223; 69 } 70 } 71 72 //对layer(图标)进行操作 73 //图层layer鼠标移入事件 74 layer.on("mouse-over", function (evt) { 75 var index1 = 0; 76 //获取当前鼠标所在的卡点标识 77 var index = evt.graphic.attributes.id; 78 79 //获取layer2有没有对象 80 var length = layer2.graphics.length; 81 if (length != 0) { 82 for (var i = 0; i < layer2.graphics.length; i++) { 83 if (layer2.graphics[i].attributes.id == upindex) { 84 layer2.graphics[i].hide(); 85 //获取前一个卡点的经度 86 var jds = upjd; 87 //获取前一个卡点的纬度 88 var wds = upwd; 89 //创建一个点坐标 90 var points = new Point(jds, wds, new SpatialReference({ wkid: 4326 })); 91 //创建一个图片 92 photoSymbol = new PictureMarkerSymbol("http://localhost/i_pushpin.png", 40, 40); 93 //创建一个graphic 94 var mygraphic = new Graphic(points, photoSymbol, { "jd": jds, "wd": wds, "id": upindex, "status": state2 }); 95 //添加到layer2图层 96 layer.add(mygraphic); 97 //添加到地图 98 mymap.graphics.add(mygraphic); 99 } 100 } 101 } 102 103 //循环图层layer，找到当前选择的卡点图标 104 for (var i = 0; i < layer.graphics.length; i++) { 105 if (index1 == 0) { 106 if (layer.graphics[i].attributes.id == index) { 107 //隐藏当前的图标 108 layer.graphics[i].hide(); 109 //获取设备状态 110 var state = evt.graphic.attributes.status; 111 state2 = state; 112 upindex = index; 113 //获取当前卡点的经度 114 var jds = evt.graphic.attributes.jd; 115 upjd = jds; 116 //获取当前卡点的纬度 117 var wds = evt.graphic.attributes.wd; 118 upwd = wds; 119 //创建一个点坐标 120 var points = new Point(jds, wds, new SpatialReference({ wkid: 4326 })); 121 //创建一个图片 122 var photoSymbol = new PictureMarkerSymbol("http://localhost/bz_red.png", 40, 45); 123 //创建一个graphic 124 var mygraphic = new Graphic(points, photoSymbol, { "jd": jds, "wd": wds, "id": index, "status": state }); 125 //添加到layer2图层 126 layer2.add(mygraphic); 127 //点击弹出窗体 128 var str = "<table class='table' borderColor=#000000 height=40 cellPadding=1 width=150 align=center border=0>"; 129 //var czname = "实时过车"; 130 str += "<tr><td><a href='#' style='text-decoration: none;color:#000000' onclick='TrafficQuery(" + index + ")'>Traffic Query</a></td></tr>"; 131 str += "<tr><td><a href='#' style='text-decoration: none;color:#000000' onclick='RealTimeCar(" + jds + "," + wds + "," + index + ")'>Real Time Traffic</a></td></tr>"; 132 str += "</table>"; 133 //实例化一个窗体 134 var infoTemplate = new InfoTemplate(); 135 //设置窗体的宽高 136 mymap.infoWindow.resize(200, 300); 137 //设置标题 138 infoTemplate.setTitle("TestWindows"); 139 //设置内容 140 infoTemplate.setContent(str); 141 //绑定到mygraphic 142 mygraphic.setInfoTemplate(infoTemplate); 143 //添加到地图 144 mymap.graphics.add(mygraphic); 145 } 146 } 147 } 148 }); 149 }); 150 </script> 151 </head> 152 <body> 153 <form id="form1" runat="server"> 154 <div> 155 <%--定义一个div来放地图--%> 156 <div id="map"></div> 157 </div> 158 </form> 159 </body> 160 </html>