前期做地图开发用的API 是SILVERLIGHT 项目需要,学习下JS API
首先从官方下载最新的API包 3.2一共有2个压缩包API:arcgis_js_v32_api.zip和arcgis_js_v32_sdk.zip
解压arcgis_js_v32_api,在library文件夹下可以看到安装说明文件install.htm
下一步 根据安装说明进行配置。
部署步骤1:将解压缩后的文件目录拷贝到web服务器网站根目录下,这里使用IIS。根目录。C:\Inetpub\wwwroot
拷贝后的文件目录结构为
C:\Inetpub\wwwroot\arcgis_js_api\library
部署步骤2:修改全局变量[HOSTNAME_AND_PATH_TO_JSAPI] ,EditPlus或则DW都可以 查找替换为localhost/library/3.2/jsapi 和localhost/library/3.2/jsapicompact
如果端口不是80 需要加上端口号 (localhost:端口)
Configuration options for normal build:
- Open C:\Inetpub\wwwroot\arcgis_js_api\library\3.2\jsapi\init.js in a text editor and search for the text
'[HOSTNAME_AND_PATH_TO_JSAPI]'
, and replace this text with"<myserver>/arcgis_js_api/library/3.2/jsapi/"
- Open C:\Inetpub\wwwroot\arcgis_js_api\library\3.2\jsapi\js\dojo\dojo\dojo.js in a text editor and search for the text
'[HOSTNAME_AND_PATH_TO_JSAPI]'
, and replace this text with"<myserver>/arcgis_js_api/library/3.2/jsapi/"
Configuration options for compact build:
- Open C:\Inetpub\wwwroot\arcgis_js_api\library\3.2\jsapicompact\init.js in a text editor and search for the text
'[HOSTNAME_AND_PATH_TO_JSAPI]'
, and replace each instance of this text with"<myserver>/arcgis_js_api/library/3.2/jsapicompact/"
- Open C:\Inetpub\wwwroot\arcgis_js_api\library\3.2\jsapicompact\js\dojo\dojo\dojo.js in a text editor and search for the text
'[HOSTNAME_AND_PATH_TO_JSAPI]'
, and replace this text with"<myserver>/arcgis_js_api/library/3.2/jsapicompact/"
步骤3: 测试是否发布成功,官方的安装说明文件中给出了完成的测试代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Simple Map</title>
<link rel="stylesheet" type="text/css" href="http://<myserver>/arcgis_js_api/library/3.2/jsapi/js/dojo/dijit/themes/tundra/tundra.css"/>
<link rel="stylesheet" type="text/css" href="http://<myserver>/arcgis_js_api/library/3.2/jsapi/js/esri/css/esri.css" />
<script type="text/javascript" src="http://<myserver>/arcgis_js_api/library/3.2/jsapi/init.js"></script>
<script type="text/javascript"> dojo.require("esri.map");
function init() {
var myMap = new esri.Map("mapDiv");
//note that if you do not have public Internet access then you will need to point this url to your own locally accessible cached service.
var myTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/NGS_Topo_US_2D/MapServer"); myMap.addLayer(myTiledMapServiceLayer); }
dojo.addOnLoad(init);
</script>
</head>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Simple Map</title>
<link rel="stylesheet" type="text/css" href="http://<myserver>/arcgis_js_api/library/3.2/jsapi/js/dojo/dijit/themes/tundra/tundra.css"/>
<link rel="stylesheet" type="text/css" href="http://<myserver>/arcgis_js_api/library/3.2/jsapi/js/esri/css/esri.css" />
<script type="text/javascript" src="http://<myserver>/arcgis_js_api/library/3.2/jsapi/init.js"></script>
<script type="text/javascript"> dojo.require("esri.map");
function init() {
var myMap = new esri.Map("mapDiv");
//note that if you do not have public Internet access then you will need to point this url to your own locally accessible cached service.
var myTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/NGS_Topo_US_2D/MapServer"); myMap.addLayer(myTiledMapServiceLayer); }
dojo.addOnLoad(init);
</script>
</head>
<body class="tundra">
<div id="mapDiv" style="900px; height:600px; border:1px solid #000;"></div>
<div id="mapDiv" style="900px; height:600px; border:1px solid #000;"></div>
</body>
</html>
</html>
放到IIS目录里运行下试试,如果地图可以正常显示 则表示部署成功 。
注意:官方测试代码给出的地图服务是缓存地图,如果地图服务是动态地图话需要使用动态图层ArcGISDynamicMapServiceLayer才能显示。
API 3.16 测试地图demo
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/> <title>Simple Map</title> <link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css"> <style> html, body, #map { height: 100%; margin: 0; padding: 0; } </style> <script src="https://js.arcgis.com/3.16/"></script> <script type="text/javascript"> var map; var smarkerlayer; require(["esri/map", "esri/geometry/Point", "esri/graphic", "dojo/domReady!"], function (Map) { map = new Map("map"); var dynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/china2012shp/MapServer"); map.addLayer(dynamicMapServiceLayer); smarkerlayer = new esri.layers.GraphicsLayer(); map.addLayer(smarkerlayer); dojo.connect(map, "onLoad", function () { dojo.connect(map, "onMouseMove", showCoordinates); dojo.connect(map, "onMouseDrag", showCoordinates); }); dojo.connect(map, "onClick", clicktoaddMarker); //创建一个标注 var pt = new esri.geometry.Point(117.0605760000, 35.8424320000, map.spatialReference); addmarker(pt); }); function addmarker(point) { var pt = point; var symbol = new esri.symbol.PictureMarkerSymbol("logo.png", 25, 25); var attr = { "address": "这只是一个测试数据(⊙o⊙)哦" }; //创建模版 var infoTemplate = new esri.InfoTemplate("标题测试", "地址:${address}"); //创建图像 var graphic = new esri.Graphic(pt, symbol, attr, infoTemplate); //把图像添加到刚才创建的图层上 smarkerlayer.add(graphic); } function showCoordinates(evt) { //get mapPoint from event var mp = evt.mapPoint; //display mouse coordinates dojo.byId("info").innerHTML = mp.x + ", " + mp.y; var markerSymbol = new SimpleMarkerSymbol(); } //测试单击事件动态创建标注 function clicktoaddMarker(evt) { var mp = evt.mapPoint; var pt = new esri.geometry.Point(mp.x, mp.y, map.spatialReference); addmarker(pt); } </script> </head> <body> <div id="map"></div> <span id="info" style="position:absolute; right:25px; bottom:5px; color:#000; z-index:50;"></span> </body> </html>