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:\inetpub\wwwroot目錄下。此目錄為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>