基于ArcGIS API 4.12 for JS 的开发实践（一）——部署

最新推荐文章于 2022-03-09 10:59:53 发布

原创最新推荐文章于 2022-03-09 10:59:53 发布 · 2.7k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#ArcGIS API #JavaScript API

ArcGIS API for JavaScript 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了如何使用ESRI账号下载ArcGIS API 4.12，并在Windows 7环境下通过IIS进行部署，包括MIME类型和HTTP响应标头的设置，以及ArcGIS API的安装和验证过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、下载ArcGIS API 4.12

首先你要有一个ESRI的账号，没有的话注册一个好了，然后到地址https://developers.arcgis.com/downloads/apis-and-sdks这里选择下载的API，我们这里选择的是ArcGIS API for JavaScript 4.12。下载完成后得到一个压缩包，解压后里面包含了一个名为“arcgis_js_api”的文件夹，这个就是主要的代码。

2、部署环境IIS的准备

我的开发环境是Windows7，我自行下载了IIS7.5并安装，然后在控制面板的“打开或关闭Windows功能”窗口里，添加IIS服务。完成后就可以在计算机管理中看的安装好的IIS。如下图所示。

安装完成后，要测试一下IIS是否正常。如下图所示。打开IIS默认网页。

当打开的网页出现下面图中所示的情况，即表示IIS安装成功。

注意，这里记得要添加一些MIME类型，因为ArcGIS API 4.12 for JS 用到了一些特殊的文件，必须把这些类型让IIS能够解析。并且，这几个MIMI类型最好直接添加到根节点上去，这样后面你建的网站会自动继承这些MIMI类型。

MIMI添加
扩展名	MIMI类型
.svg	image/svg+xml
.woff	application/x-font-woff
.woff2	application/x-font-woff
.wsv	application/octet-stream
.ttf	application/octet-stream
.wasm	application/wasm

再注意，添加完MIMIE类型，还要添加HTTP响应标头，这个是涉及到后面跨域访问的问题，强烈建议这里在根节点的HTTP响应标头里面添加以下内容：

HTTP响应标头名称	标头值
Access-Control-Allow-Credentials	true
Access-Control-Allow-Headers	origin,x-requested-with,content-type
Access-Control-Allow-Methods	POST,GET,OPTIONS
Access-Control-Allow-Origin	*

到这里，IIS这边的任务就完成了。

3、ArcGIS API 4.12的安装

把第一步总解压后的“arcgis_js_api”这个文件夹拷贝到“C:\inetpub\wwwroot”目录下面（IIS的根目录），记住是解压文件夹里面的“arcgis_js_api”这个文件夹，而不是解压后的文件夹。这个文件夹的目录结构如下：

第二步，修改“C:\inetpub\wwwroot\arcgis_js_api\library\4.12”这个目录下的“init.js”这个文件，把里面的[HOSTNAME_AND_PATH_TO_JSAPI]，替换为你自己的IP或者用localhost也可以。如下图：

同理，继续修改“C:\inetpub\wwwroot\arcgis_js_api\library\4.12\dojo”这个目录下的“dojo.js”这个文件，把里面的[HOSTNAME_AND_PATH_TO_JSAPI]，替换为你自己的IP或者用localhost也可以。如下图：

再次注意：原“dojo.js”、“init.js”这两个JS文件里的“baseUrl”用的是https方式的安全链接，ESRI官方文档上也是建议你用这种链接方式，但是这个方式会带来认证证书的问题，以及跨域访问的问题，虽然也是可以。我第一次部署就是用的这种链接方式，相对应，你在IIS上也必须部署为https这种方式的连接。成功之后，如果用chrome浏览器，会在地址栏提示你证书问题，很烦，如果省事，就直接用http这种链接方式吧。

另外，有同学认为这种手动修改源文件的方式太low太容易出错了吧，有没有一键快速替换的办法？你别说，ESRI官网还真有，就是利用Visual Studio Code 和Node.js这两个工具，可以实现快捷部署，我们下次专门讲一下这个吧,，详情请点击：基于ArcGIS API 4.12 for JS 的开发实践（二）——Visual Studio Code和NodeJs实现快捷部署。

4、验证及演示

ArcGIS API 4.12的安装经过第三步，就基本上成功了，为了确保演示成功，我们最后验证一下我们安装是否成功，方法很简单就是在地址栏输入“http://localhost/arcgis_js_api/library/4.12/dojo/dojo.js”来看看浏览器是不是能成功加载js。成功则如下图所示。

最后用一个小程序来演示下效果，其实ESRI官方已经有这个例子了，我就直接抄过来了，首先创建一个HTML文件，并拷入以下代码：

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>ArcGIS API for JavaScript Hello World App</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/4.12/esri/css/main.css">
  <script src="http://localhost/arcgis_js_api/library/4.12/"></script>

  <script>
    require([
      "esri/Map",
      "esri/views/MapView"
    ], function(Map, MapView) {

      var map = new Map({
        basemap: "topo-vector"
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-118.71511,34.09042],
        zoom: 11
      });

    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

注意，上图中的两个URL链接，就是要替换为你自己的链接，一个是css样式，另外一个是dojo.js，这儿两个都必须加载。不出什么问题，在浏览器中代码将成功执行：