ArcGIS JS API 4.10跨域问题(本地切片无法加载)解决办法

时间:2024-03-13 14:32:14

场景:

       使用ArcGIS API for JavaScript 4.10加载服务器发布的切片地图报错跨域,之前用3.x系列一切正常,换成4.10之后不出图,关键是加载官方在线切片服务一切正常。升到4.10后发现加载个切片图层都那么费劲。

报错内容:

ArcGIS JS API 4.10跨域问题(本地切片无法加载)解决办法

解决方法:

       1.下载代理文件,地址:https://github.com/Esri/resource-proxy/releases

提供三种,我这边用的是ASP.NET版本的,要部署到IIS下面。

       2.部署代理文件,将下载的DotNet文件夹拷贝到IIS对应目录下,一般都是inetpub/wwwrooot文件夹下面;打开IIS服务管理器,在DotNet文件夹右键单击,选择转换为应用程序。注意应用池选择v4.0或以上,如下图:

ArcGIS JS API 4.10跨域问题(本地切片无法加载)解决办法

       3.测试代理文件是否部署成功,浏览器输入http://localhost/DotNet/proxy.ashx?http://services.arcgisonline.com/ArcGIS/rest/services/?f=pjson  如果出现下图,说明部署成功 :

ArcGIS JS API 4.10跨域问题(本地切片无法加载)解决办法

      4.修改代理文件,打开DotNet文件夹下的proxy.config,在<serverUrls>中仿照着添加ArcGIS Server 地址,之后一定注意重启IIS服务,否则无效,我的是下图:

ArcGIS JS API 4.10跨域问题(本地切片无法加载)解决办法

之后可以用浏览器访问:http://localhost/DotNet/proxy.ashx?http://[IP地址]:6080/arcgis/rest/services 测试一下

        5.代码中引入 "esri/core/urlUtils"模块,添加代码:

urlUtils.addProxyRule({
     urlPrefix: "http://111.12.111.11:6080",//配置文件proxy.config中的地址,要请求的地址
     proxyUrl: "http://localhost/DotNet/proxy.ashx"//部署的代理文件地址
 });

完整代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>切片地图4.10</title>

    <link rel="stylesheet" href="http://localhost/arcgis_js_v410_api/arcgis_js_api/library/4.10/esri/css/main.css">
    <style>
        html, body, #viewDiv{
            padding: 0;
            margin: 0;
            height: 100%;
        }
    </style>
    <script src="http://localhost/arcgis_js_v410_api/arcgis_js_api/library/4.10/init.js"></script>
</head>
<script>
    require([
        "esri/Map",
        "esri/layers/TileLayer",
        "esri/Basemap",
        "esri/views/MapView",
        "esri/core/urlUtils"
    ], function (Map,TileLayer,Basemap, MapView,urlUtils) {

        urlUtils.addProxyRule({
            urlPrefix: "http://127.0.0.1:6080",
            proxyUrl: "http://localhost/DotNet/proxy.ashx"
        });
        var layer = new TileLayer({
            // url: "https://services.arcgisonline.com/arcgis/rest/services/World_Terrain_Base/MapServer"
            url: "http://127.0.0.1:6080/arcgis/rest/services/HD_TEST/HD_TiledMap/MapServer"
        });
        var basemap = new Basemap({
            baseLayers: [layer]
        });
      var map = new Map({
          basemap: basemap
      });
      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
      });
    });
</script>
<body>
    <div id="viewDiv"></div>
</body>
</html>

参考地址:https://developers.arcgis.com/javascript/latest/guide/proxies/index.html