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>
时间： 2024-12-25 03:00:38