场景:
使用ArcGIS API for JavaScript 4.10加载服务器发布的切片地图报错跨域,之前用3.x系列一切正常,换成4.10之后不出图,关键是加载官方在线切片服务一切正常。升到4.10后发现加载个切片图层都那么费劲。
报错内容:
解决方法:
1.下载代理文件,地址:https://github.com/Esri/resource-proxy/releases
提供三种,我这边用的是ASP.NET版本的,要部署到IIS下面。
2.部署代理文件,将下载的DotNet文件夹拷贝到IIS对应目录下,一般都是inetpub/wwwrooot文件夹下面;打开IIS服务管理器,在DotNet文件夹右键单击,选择转换为应用程序。注意应用池选择v4.0或以上,如下图:
3.测试代理文件是否部署成功,浏览器输入http://localhost/DotNet/proxy.ashx?http://services.arcgisonline.com/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: "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