ArcGIS API for JavaScript 本地部署 | Nginx 服务器

本文链接：https://blog.youkuaiyun.com/qq_18625805/article/details/107210503

本文详细介绍如何在Nginx服务器上本地部署ArcGIS API for JavaScript，包括下载ArcGIS API和Nginx，配置Nginx，以及通过示例代码验证部署是否成功。

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

ArcGIS API for JavaScript 是ESRI根据 JavaScript 技术实现的调用 ArcGIS Server REST API 接口的一组脚本,提供在线版API ,但是访问速度不稳定。本文记录在 Nginx 服务器上对 API 进行本地化部署的过程。

一、准备

1、ArcGIS API for JavaScript 4.10 下载

打开网址 https://developers.arcgis.com/javascript/ → 点击 Get the API → 点击 Download API → 点击 ArcGIS API for JavaScript download page → 选择 4.10 版本下载即可。

注：需要注册 ESRI 账户才可以下载。

2、nginx下载

打开网址 http://nginx.org/en/download.html，选择版本下载即可，此处用的是 1.18.0 版本。

3、解压

将ArcGIS API for JavaScript 4.10和nginx分别解压

二、本地部署

————参考 ArcGIS API 包里的 install.html 文件————

1、启动 nginx

方法一：双击 nginx 安装目录下的 nginx.exe 文件；
方法二：在 nginx 目录下打开命令行（因为未配置环境变量，所以要在目录下打开），输入 nginx 。

2、配置 nginx

在站点根目录下新建文件夹（此处为 lib），把 arcgis_js_v410_api\arcgis_js_api\library\4.10 文件夹中的所有内容拷贝到 nginx\html\lib 中。

修改 nginx 配置文件：打开 nginx 安装目录下 conf 文件夹里的 nginx.conf 文件，修改服务器监听端口，配置站点根目录；修改完配置文件，要输入 nginx -s reload 命令重新加载 nginx配置。

    server{
        listen  80; //监听窗口
        charset utf-8;
        location / {
            root  D:/nginx/html; //站点根目录，可以放在nginx默认的文件夹 html，也可以自定义
        }
    }

3、测试

在 nginx\html 下新建info.html ，写入示例代码；
在浏览器中输入 http://127.0.0.1/info.html （根目录下的文件地址），网页中显示地图即为部署成功！

<!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>Test Map</title>
    <link rel="stylesheet" href="http://127.0.0.1/lib/dijit/themes/claro/claro.css" /> //修改为站点根目录下的链接库
    <link rel="stylesheet" href="http://127.0.0.1/lib/esri/css/main.css" /> //修改为站点根目录下的链接库
    <style>
      html,
      body,
      #viewDiv {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
      }
    </style>
    <script src="http://127.0.0.1/lib/dojo/dojo.js"></script> //修改为站点根目录下的链接库
    <script>
      var myMap, view;
      require([
        "esri/Basemap",
        "esri/layers/TileLayer",
        "esri/Map",
        "esri/views/MapView"
      ], function (Basemap, TileLayer, Map, MapView){
        // --------------------------------------------------------------------
        // If you do not have public Internet access then use the Basemap class
        // and point this URL to your own locally accessible cached service.
        //
        // Otherwise you can just use one of the named hosted ArcGIS services.
        // https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer
        // --------------------------------------------------------------------
        var layer = new TileLayer({
          url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"
        });
        var customBasemap = new Basemap({
          baseLayers: [layer],
          title: "Custom Basemap",
          id: "myBasemap"
        });
        myMap = new Map({
          basemap: customBasemap
        });
        view = new MapView({
          center: [-111.87, 40.57], // long, lat
          container: "viewDiv",
          map: myMap,
          zoom: 6
        });
      });
    </script>
  </head>
  <body class="claro">
    <div id="viewDiv"></div>
  </body>
</html>