700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > ArcGIS JS API 4.10跨域问题(本地切片无法加载)解决办法

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

时间:2021-04-21 23:16:59

相关推荐

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

场景:

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

报错内容:

解决方法:

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

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

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

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

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

之后可以用浏览器访问: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: "/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 5map: map, // Reference to the map object created before the scene});});</script><body><div id="viewDiv"></div></body></html>

参考地址:/javascript/latest/guide/proxies/index.html

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。