ArcGIS API for JavaScript 本地部署至Tomcat 和 IIS

首先,我们要明白部署的目的是为了使我们的开发变得更加简便快捷。众所周知,Arcgis api for JavaScript开发包里面的js文件非常多,而且js文件之间还存在着依赖关系。如果像之前我们做其他web开发一样,把全部的js文件直接放到工程目录下,势必带来很多不便。所以,对api进行本地部署是十分必要的。

如果不想部署,可以使用在线的esri官网的js文件:

<link rel="stylesheet" href="https://js.arcgis.com/3.23/esri/css/esri.css">
<script src="https://js.arcgis.com/3.23/"></script>

把上面两行代码放入html中也可以实现js文件的引入。不过,这样的话会造成页面卡顿,影响体验效果,因为每一次访问都需要在线从esri官网下载js文件,耗费浏览器资源。

部署至Tomcat

首先大家要去下载一个tomcat服务器,这个请自行百度下载。
第一步:把下载好的api文件夹全部拷贝至tomcat安装或解压目录下的webapps文件夹下。

例如,我的tomcat放到了D盘,我就把arcgis_js_api拷贝至了D:\apache-tomcat-7.0.82\webapps下

第二步,修改D:\apache-tomcat-7.0.82\webapps\arcgis_js_api\library\3.23\3.23目录下的init.js

用记事本或其他文本编辑器打开init.js, 按Ctrl + F5搜索[HOSTNAME_AND_PATH_TO_JSAPI]

把[HOSTNAME_AND_PATH_TO_JSAPI]更改为localhost:8080/arcgis_js_api/library/3.23/3.23/


其中localhost:8080是tomcat的IP地址和端口号,arcgis_js_api/library/3.23/3.23/是init.js在webapps目录下的路径,注意/不要写错。这是我的文件夹放置情况,可根据自己的进行修改。

第三步,修改D:\apache-tomcat-7.0.82\webapps\arcgis_js_api\library\3.23\3.23\dojo目录下的dojo.js


用记事本或其他文本编辑器打开dojo.js, 按Ctrl + F5搜索[HOSTNAME_AND_PATH_TO_JSAPI],把[HOSTNAME_AND_PATH_TO_JSAPI]改成与上一步修改成的init.js同样的内容。


第四步,启动tomcat,进行测试

测试代码如下:

<!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://localhost:8080/arcgis_js_api/library/3.23/3.23/dijit/themes/tundra/tundra.css"/>
    <link rel="stylesheet" href="https://localhost:8080/arcgis_js_api/library/3.23/3.23/esri/css/esri.css">
    <script src="https://localhost:8080/arcgis_js_api/library/3.23/3.23/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="width:900px; height:600px; border:1px solid #000;"></div>

</body>

</html>
如果出现效果如下,则代表配置成功

这里写图片描述

部署至IIS

首先我们要启动windows操作系统自带的IIS服务器,具体方法请自行百度。
第一步,把下载好的api文件夹全部拷贝至IIS的wwwroot文件夹下面,默认是C:\inetpub\wwwroot


第二步,修改C:\inetpub\wwwroot\arcgis_js_api\library\3.23\3.23目录下的init.js

用记事本或其他文本编辑器打开init.js, 按Ctrl + F5搜索[HOSTNAME_AND_PATH_TO_JSAPI] 

注意:由于权限原因,最好以管理员身份运行文本编辑器打开js文件,否则有可能无法保存修改


把[HOSTNAME_AND_PATH_TO_JSAPI]更改为localhost/arcgis_js_api/library/3.23/3.23/


其中localhost是IIS的IP地址和端口号(IIS默认端口号80,80可省略),arcgis_js_api/library/3.23/3.23/是init.js在webapps目录下的路径,注意/不要写错。这是我的文件夹放置情况,可根据自己的进行修改。

第三步,修改C:\inetpub\wwwroot\arcgis_js_api\library\3.23\3.23\dojo目录下的dojo.js

用记事本或其他文本编辑器打开dojo.js, 按Ctrl + F5搜索[HOSTNAME_AND_PATH_TO_JSAPI],把[HOSTNAME_AND_PATH_TO_JSAPI]改成与上一步修改成的init.js同样的内容。


第四步,进行测试

测试代码

<!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://localhost/arcgis_js_api/library/3.23/3.23/dijit/themes/tundra/tundra.css"/>
    <link rel="stylesheet" href="https://localhost/arcgis_js_api/library/3.23/3.23/esri/css/esri.css">
    <script src="https://localhost/arcgis_js_api/library/3.23/3.23/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="width:900px; height:600px; border:1px solid #000;"></div>

</body>

</html>

如果出现效果如下,则代表配置成功
这里写图片描述

猜你喜欢

转载自blog.csdn.net/qq_37796475/article/details/79349223