ArcGIS API for JS 4.x 离线部署（https）

在离线部署查资料的过程中，基本全部都是部署在“Default Web Site”下面，部署在这个下面的默认是 http 方式请求的。并且不能修改。

但是系统中请求的都是 https，这样导致请求不到JS文件。

下面就介绍部署为 https 的方式。

1、下载 ArcGIS API SDK 文件

到官网上下载，要下载前必须要登录才能看到下载列表，注册一个也挺方便。

ArcGIS JS SDK 下载地址

下载对应的版本即可。

2、部署API

把下载的文件解压放到要部署的位置，打开 IIS 管理器。

右键“网站”=》添加网站，出现如下界面

“物理路径”选择解压的文件夹下的API文件，如我的4.10 “arcgis_js_v410_api\arcgis_js_api\library\4.10”。

“类型”选择 https。

“IP地址”选择 “全部未分配”，这样可以用 localhost 访问

点击确定离线就部署好。

3、配置文件

这里要修改两个文件：init.js、dojo\dojo.js，把 [HOSTNAME_AND_PATH_TO_JSAPI] 替换为你发布的站点地址（因为上面IIS的配置，可以localhost访问，可以用localhost），如下：

到这里部署全部完成。在浏览器打开部署下的文件正常即可。

4、样式图标不显示

 打开部署的离线站点“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：*

5、简单示例代码

复制代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <link rel="stylesheet" href="https://192.168.1.216:8083//esri/css/main.css">
  <script src="https://192.168.1.216:8083/init.js"></script>
  <script>
    require([
      "esri/Map",
      "esri/views/MapView"
    ], function (Map, MapView) {
      var map = new Map({
        basemap: "streets"
      });
      var view = new MapView({
        container: "viewDiv", // Reference to the scene div created in step 5
        map: map, // Reference to the map object created before the scene
        zoom: 4, // Sets zoom level based on level of detail (LOD)
        center: [15, 65] // Sets center point of view using longitude,latitude
      });
    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>

</html>
View Code
复制代码

注意：

1、由于是自己发布的在第一次打开会提升不安全的网站，继续访问即可；

2、在清理缓存后还会提升不安全网站；

3、题外话，天地图的key，虽然服务端和web端都有访问切片权限，ArcGIS API JS下只能用web端；

posted @   漠里  阅读(1416)  评论(3)  编辑  收藏  举报
编辑推荐：
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试？测试工程师会被淘汰吗？
· 使用C#创建一个MCP客户端
点击右上角即可分享
微信分享提示
AI IDE Trae