Arcgis api for javascript学习笔记(4.5版本) - 本地部署及代理配置

在开发过程中,由于api的文件比较多,没必要每个项目都将api加入到解决方案中。况且在VS中如果将api加入解决方案,在编写css或js代码时,由于智能提示需要扫描脚本等文件,会导致VS很卡。所以个人比较喜欢将各个版本的api发布到服务器上。本次记录以本机为例。

步骤1:将各版本arcgis api for javascript在IIS中发布。

api部署目录结构( 端口:8001; 应用程序池:集成模式 + V4.0 ):

Arcgis api for javascript学习笔记(4.5版本) - 本地部署及代理配置

步骤2:编写代码,引入步骤1中发布的某个api。

引入本地部署的 arcgis_js_v45_api

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Intro to SceneView - Create a 3D map</title>
<style type="text/css">
html, body, #viewDiv { height: 100%; width: 100%; }
</style>
<script type="text/javascript">
dojoConfig = {
baseUrl: "http://localhost:8001/arcgis_js_v45_api/dojo"
};
</script>
<link rel="stylesheet" href="http://127.0.0.1:8001/arcgis_js_v45_api/esri/css/main.css">
<script type="text/javascript" src="http://127.0.0.1:8001/arcgis_js_v45_api/init.js"></script>
<script>
require([
"esri/Map",
"esri/views/SceneView",
"dojo/domReady!"
], function (Map, SceneView) {
var map = new Map({
"basemap": "hybrid",
"ground": "world-elevation"
});
var view = new SceneView({
"map": map,
"container": "viewDiv"
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>

运行后界面可以加载地图,但是会出现一下几个问题(这两个问题都是跨域引起的):

a. F12在控制台出现'Access-Control-Allow-Origin'等错误信息

b. 左上角的几个按钮"放到","缩小","切换3D平移或旋转","罗盘仪"等按钮没有图标

Arcgis api for javascript学习笔记(4.5版本) - 本地部署及代理配置

步骤3:在发布部署的api中添加Web.config文件,配置MIME映射和跨域节点。

web.config:

<?xml version="1.0" encoding="utf-8"?>

<!--
有关如何配置 ASP.NET 应用程序的详细信息,请访问
http://go.microsoft.com/fwlink/?LinkId=169433
--> <configuration>
<system.web>
<compilation debug="true" targetFramework="4.5" />
<httpRuntime targetFramework="4.5" />
</system.web>
<system.webServer>
<staticContent>
<remove fileExtension=".lrc" />
<remove fileExtension=".ogg" />
<remove fileExtension=".json" />
<remove fileExtension=".wsv" />
<remove fileExtension=".woff" />
<remove fileExtension=".woff2" />
<mimeMap fileExtension=".lrc" mimeType="text/plain" />
<mimeMap fileExtension=".ogg" mimeType="audio/mpeg" />
<mimeMap fileExtension=".json" mimeType="application/x-javascript" />
<mimeMap fileExtension=".wsv" mimeType="application/octet-stream" />
<mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
<mimeMap fileExtension=".woff2" mimeType="application/x-font-woff" />
</staticContent>
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Methods" value="OPTIONS,POST,GET"/>
<add name="Access-Control-Allow-Headers" value="x-requested-with"/>
<add name="Access-Control-Allow-Origin" value="*" />
</customHeaders>
</httpProtocol>
</system.webServer>
</configuration>

至此 步骤2 中的 a和b 两个问题已经解决。

步骤4.采用官方提供的代理方案。

现在控制台还剩下一个错误提示:“esriConfig.request.proxyUrl is not set,If making a request to a CORS-enabled server, please push the domain into esriConfig.request.corsEnabledServers”。

步骤4.1 下载官方代理源码:resource-proxy-1.1.0

步骤4.2 将DotNet下面四个文件在IIS中部署。

        代理站点部署目录结构(端口:8002; 应用程序池:集成模式 + V4.0)

Arcgis api for javascript学习笔记(4.5版本) - 本地部署及代理配置

步骤4.3 设置 proxyUrl 和 corsDetection 属性。修改后代码如下:

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Intro to SceneView - Create a 3D map</title>
<style type="text/css">
html, body, #viewDiv { height: 100%; width: 100%; }
</style>
<script type="text/javascript">
dojoConfig = {
baseUrl: "http://localhost:8001/arcgis_js_v45_api/dojo"
};
</script>
<link rel="stylesheet" href="http://127.0.0.1:8001/arcgis_js_v45_api/esri/css/main.css">
<script type="text/javascript" src="http://127.0.0.1:8001/arcgis_js_v45_api/init.js"></script>
<script>
require([
"esri/config",
"esri/Map",
"esri/views/SceneView",
"dojo/domReady!"
], function (esriConfig, Map, SceneView) {
esriConfig.request.proxyUrl = "http://127.0.0.1:8002/proxy.ashx";
esriConfig.request.corsDetection = true;
var map = new Map({
"basemap": "hybrid",
"ground": "world-elevation"
});
var view = new SceneView({
"map": map,
"container": "viewDiv"
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>

步骤4.4 刷新页面后发现还会出现某些文件无法请求到:

此问题解决很容易,从上面错误信息就可以看出来,请求的wsv文件被禁止访问。所以只需要在代理文件中的 proxy.config 配置文件中添加该Url地址匹配就行了。如下所示:

控制台错误信息

Arcgis api for javascript学习笔记(4.5版本) - 本地部署及代理配置

         proxy.config:

         Arcgis api for javascript学习笔记(4.5版本) - 本地部署及代理配置

至此控制台的错误已全部解决

上一篇:网站为什么要做SEO


下一篇:IOS经典的书籍推荐