ArcGIS API for JavaScript开发环境搭建与发布以及基本功能实现

1、背景介绍

ArcGIS API for JavaScript 咱这就不介绍了，具体可看ESRI中国的介绍：http://support.esrichina.com.cn/2011/0223/960.html

以前在ESRI中国还能下载到 ArcGIS API for JavaScript 各版本的Library和SDK，不过最近是一直下载不了，可能官方更推荐引用在线的样式与脚本库吧；

我比较过在线引用与本地部署两种不同方式，在线引用的话，加载速度毕竟还是没有本地部署快（而且感觉还比较明显），特别是第一次加载的时候，需要完全下载。

所以最后我采用的还是本地部署的方式，我用的是 ArcGIS API for JavaScript 3.9的版本，我们的项目需求都能满足，4.x的版本我没有测试。

ArcGIS API for JavaScript 3.9  Library & SDK 下载地址：http://download.csdn.net/download/xiaosy1021/10215796

2、开发环境搭建

①将 arcgis_js_v39_api 与 arcgis_js_v39_sdk下载下来后，解压

②确保本地已安装了IIS，打开C:\Inetpub\wwwroot文件夹。

③将arcgis_js_v39_sdk文件夹直接拷贝到C:\Inetpub\wwwroot下，变成C:\Inetpub\wwwroot\arcgis_js_v39_sdk，如下图所示（以下部分图片引用自网络）：

④将arcgis_js_v39_api\arcgis_js_api目录下的library文件夹拷贝到

C:\inetpub\wwwroot\arcgis_js_v39_sdk\arcgis_js_api下，变成

C:\inetpub\wwwroot\arcgis_js_v39_sdk\arcgis_js_api\library，如下图所示：

⑤打开IIS，如下图所示，浏览install.htm,如下图所示，说明初步部署成功：

⑥找到C:\inetpub\wwwroot\arcgis_js_v39_sdk\arcgis_js_api\library\3.9\3.9\init.js文件，利用记事本或EditPlus打开；Ctrl+F组合键查找[HOSTNAME_AND_PATH_TO_JSAPI]，并替换为<myserver>/arcgis_js_v39_sdk/arcgis_js_api/library/3.9/3.9/，其中<myserver>为机器名称或者机器IP，注意没有http前缀。可以是localhost或者192.168.11.195，这里我使用的是localhost，如下图所示：

⑦ 找到C:\inetpub\wwwroot\arcgis_js_v39_sdk\arcgis_js_api\library\3.9\3.9\js\dojo\dojo\dojo.js文件，利用记事本或者EditPlus打开，Ctrl+F组合键查找[HOSTNAME_AND_PATH_TO_JSAPI],并替换为<myserver>/arcgis_js_v39_sdk/arcgis_js_api/library/3.9/3.9/，其中<myserver>为机器名称或者机器IP，没有http前缀。可以是localhost或者192.168.11.195，这里我使用的是localhost，如下图所示：

⑧如下图所示，找到3.9compact文件夹，接下来9）、10）步骤的操作和6）、7）完全相同，只是9）、10）操作针对3.9compact文件夹，而6）、7）操作针对3.9文件夹，如下图所示：

⑨ C:\inetpub\wwwroot\arcgis_js_v39_sdk\arcgis_js_api\library\3.9\3.9compact\init.js文件，利用记事本或者EditPlus打开；Ctrl+F组合键查找[HOSTNAME_AND_PATH_TO_JSAPI]，并替换为<myserver>/arcgis_js_v39_sdk/arcgis_js_api/library/3.9/3.9compact/，其中<myserver>为机器名称或者机器IP，注意没有http前缀。可以是localhost或者192.168.11.195，这里我使用的是localhost，如下图所示：

⑩ 找到C:\inetpub\wwwroot\arcgis_js_v39_sdk\arcgis_js_api\library\3.9\3.9compact\js\dojo\dojo\dojo.js文件，利用记事本或者EditPlus打开，Ctrl+F组合键查找[HOSTNAME_AND_PATH_TO_JSAPI],并替换为<myserver>/ arcgis_js_v39_sdk/arcgis_js_api/library/3.9/ 3.9compact/,其中<myserver>为机器名称或者机器IP，没有http前缀。可以是localhost或者192.168.11.195，这里我使用的是localhost，如下图所示：

经过上面10个步骤，我们就完成了ArcGIS  API for JavaScript的本地部署。

3、示例demo

我是在ASP.Net MVC环境下搭建的，也可以直接写纯html页面。部分CSS样式，还有一些悬浮div等我去掉了，重要的代码都放上来了，咱主要关注功能实现。

@{
    ViewBag.Title = "GIS地图";

    <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_v39_sdk/arcgis_js_api/library/3.9/3.9/js/dojo/dijit/themes/tundra/tundra.css" />
    <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_v39_sdk/arcgis_js_api/library/3.9/3.9/js/esri/css/esri.css" />
    <script type="text/javascript" src="http://localhost/arcgis_js_v39_sdk/arcgis_js_api/library/3.9/3.9/init.js"></script>
}

<div style="padding-left: 1px; padding-top: 1px;">
    <div id="mapDiv" style="width: 1180px; min-height: 800px; "></div>

    <div id="controls">
        <a id="ctrl-waring-info">预警信息</a>
    </div>

</div>

<script type="text/javascript">

    require(["esri/map",
        "dojo/dom",
        "dojo/on",
        "dojo/colors",

        "esri/layers/ArcGISTiledMapServiceLayer",
        "esri/layers/GraphicsLayer",
        "esri/geometry/Point",
        "esri/SpatialReference",

        "esri/symbols/SimpleMarkerSymbol",

        "dojo/domReady!"],
        function (Map, dom, on, Color,
            ArcGISTiledMapServiceLayer,
            GraphicsLayer,
            Point, SpatialReference,

            SimpleMarkerSymbol

            ) {
            var map = new Map("mapDiv", {
                logo: false,
                //basemap: "streets",
                center: [120.6168, 31.42],
                slider: false,
                zoom: 9,
                showLabels: true,
            });

            //定位中心点
            var centerPnt = new Point(120.6168, 31.42, new SpatialReference({ wkid: 4490 }));
            map.centerAndZoom(centerPnt, 9);

            //==========以下为加载江苏水利地图与相城区边界============

            var bgLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://218.94.6.92:6080/arcgis/rest/services/jssl_vector_L3_L17/MapServer");
            map.addLayer(bgLayer);

            //======== 地图中添加绘制层 =======
            var gl = new GraphicsLayer({ id: "bound" });
            map.addLayer(gl);

            var gl_pnt = new GraphicsLayer({ id: "gl_point" });
            map.addLayer(gl_pnt);

            //======== 添加边界线 =======
            var line = new esri.geometry.Polyline({
                "paths": [[
                    [120.614, 31.553],
                    [120.623, 31.5407],
                    [120.7507, 31.531],
                    [120.8113, 31.436]
                ]],
                "spatialReference": { "wkid": 4490 }
            });
            var lineSymbol = new esri.symbol.CartographicLineSymbol(
              esri.symbol.CartographicLineSymbol.STYLE_SOLID,
              new dojo.Color("#0000FF"), 2,
              esri.symbol.CartographicLineSymbol.CAP_ROUND,
              esri.symbol.CartographicLineSymbol.JOIN_MITER, 5
            );
            var polyline = new esri.Graphic(line, lineSymbol);

            gl.add(polyline);

            //给按钮绑定click事件
            on(dom.byId("ctrl-waring-info"), "click", function () {
                console.log("点击了预警按钮了！");

                //========= 添加 点 ========
                //定义点符号l
                var pSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 20, lineSymbol, new Color([255, 0, 0]));

                var pnt1 = new Point(120.6168, 31.42, new SpatialReference({ wkid: 4490 }));
                var polypoint = new esri.Graphic(pnt1, pSymbol);

                gl_pnt.add(polypoint);
            })

            //给按钮绑定click事件
            on(dom.byId("ctrl-rain-info"), "click", function () {
                console.log("点击了雨情按钮！");

                //========= 清除 点 ========
                gl_pnt.clear();
            })

        })
</script>

运行效果：

4、最后是外网的部署

比如我们要部署在外网地址为222.95.237.125的服务器上的1001端口号上，服务器对应的内网地址为192.168.26.21，

那我们应该如何去部署ArcGIS  API for JavaScript 的API与SDK包呢？

①首先应该把ArcGIS  API for JS 的包放到222.95.237.125:1001（也就是192.168.26.21这太服务器的IIS 1001端口号）对应的基础文件路径下；

②和之前的本地部署类似，但需要将 localhost 改为 222.95.237.125:1001

③当然地图页面引用也需要相应的修改：

@using Drision.Framework.Mvc;
@{
    ViewBag.Title = "GIS地图";

    <link rel="stylesheet" type="text/css" href="http://222.95.237.125:10001/arcgis_js_v39_sdk/arcgis_js_api/library/3.9/3.9/js/dojo/dijit/themes/tundra/tundra.css" />
    <link rel="stylesheet" type="text/css" href="http://222.95.237.125:10001/arcgis_js_v39_sdk/arcgis_js_api/library/3.9/3.9/js/esri/css/esri.css" />
    <script type="text/javascript" src="http://222.95.237.125:10001/arcgis_js_v39_sdk/arcgis_js_api/library/3.9/3.9/init.js"></script>

}

基本的部署就OK了！

之后我会将涉及到的ArcGIS API for JS相关的功能实现代码整理贴出来，等待下一篇文章吧~