arxgis api 4.x 加载本地切片TileLayer跨域解决方案

深碍√TFBOYSˉ_ 2021-07-24 20:56 508阅读 0赞

**问题描述**

使用arcgis api 3.x加载本地切片，不会有问题，使用4.X时候就会报错，提示跨域。

**解决办法**

**1、下载代理文件。**

地址：[https://github.com/Esri/resource-proxy/releases][https_github.com_Esri_resource-proxy_releases]

ESRI提供了三种，.net（IIS环境）、java（tomcat）、PHP。根据部署的环境，找到对应的代理文件，本文使用IIS

**2、部署代理文件**

将下载的DotNet文件夹拷贝到IIS对应目录下，最好放在默认的路径下，防止二次跨域。一般都是inetpub/wwwrooot文件夹下面；打开IIS服务管理器，在DotNet文件夹右键单击，选择转换为应用程序。注意应用池选择v4.0或以上。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcHB5ODE5OTc_size_16_color_FFFFFF_t_70][]

**3、测试代理文件**

浏览器输入[http://localhost/DotNet/proxy.ashx?http://services.arcgisonline.com/ArcGIS/rest/services/?f=pjson][http_localhost_DotNet_proxy.ashx_http_services.arcgisonline.com_ArcGIS_rest_services_f_pjson]  如果出现下图，说明部署成功。这个就是测试arcgis online上已经存在的地图服务的。

**4、修改代理文件**

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

<?xml version="1.0" encoding="utf-8" ?>
    <ProxyConfig allowedReferers="*"
                 mustMatch="true">
        <serverUrls>
            <serverUrl url="http://services.arcgisonline.com"
                       matchAll="true"/>
            <serverUrl url="http://12x.1x.4x.10x:6080"   //这个地址就是跨越的tileLayer服务的地址
                       matchAll="true"/>
        </serverUrls>
    </ProxyConfig>

照样可以用浏览器访问：http://localhost/DotNet/proxy.ashx?http://\[IP地址\]:6080/arcgis/rest/services 测试一下，能否打开在这个地址端口下发布的所有数据，可以获取表示是通的，代理成功。

**5、使用代理**

**5.1 HTML页面中：**

**5.2 VUE页面中**

先导入：

import urlUtils from 'esri/core/urlUtils';

2、vue文件中，不能直接使用urlUtils.addProxyRule();，会报出 addProxyRule没这个属性（目前还不知道为啥，明明是个方法，咋会说属性）。但是有解决办法，流程如下：

export default {
        name: 'mainapp',
        data () {
            return {
                urlUtils: require("esri/core/urlUtils"),  //在data里面先require进来
            }
    }

mouted()钩子函数中：

this.urlUtils.addProxyRule({
                urlPrefix: "http://192.168.1x.5x:6080",  //切片服务地址
                proxyUrl: "http://12x.1x.4x.10x:8081/DotNet/proxy.ashx"   //代理部署地址
            });

[https_github.com_Esri_resource-proxy_releases]: https://github.com/Esri/resource-proxy/releases
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcHB5ODE5OTc_size_16_color_FFFFFF_t_70]: /images/20210724/55f97e7581bc4d29b84846699d6daa3d.png
[http_localhost_DotNet_proxy.ashx_http_services.arcgisonline.com_ArcGIS_rest_services_f_pjson]: http://localhost/DotNet/proxy.ashx?http://services.arcgisonline.com/ArcGIS/rest/services/?f=pjson