Arcgis 離線部署api 4.x的兩種本地部署方法!


引言:本文用的是api4.6版本

方法一  拷貝api進去tomcat服務器用絕對地址引用

首先將下載好的api放入Tomcat服務中的Webapp下:

 

1  可以打開下載好的的 api46/arcgis_js_api/library/downloads/install-windows/index.html頁面

注意:這里的www.example.com就是你的本機服務器 通常要加上端口 即是localhost:8080

2 官方的安裝文檔寫的清楚  就是dojo.js和init.js文件里的baseurl的值的替換,目的是為了瀏覽器能夠找到dojo文件夾 ,畢竟這套api是基於dojo框架寫的 ,baseurl相當於入口吧

記住:3.x版本的是http而4.x版本的都變為https了,我們在修改4.x版本的baseUrl路徑的時候,一定要把https改為http,不然會留下大坑的

 

根據自己本機api的位置的設置好。

 

3 引用api文件

當然,前提你要啟動你的Tomcat服務器,要不然請求個毛線啊!

 <link rel="stylesheet" href="http://localhost:8080/api46/arcgis_js_api/library/4.6/esri/css/main.css">
 <script  type="text/javascript"  src="http://localhost:8080/api46/arcgis_js_api/library/4.6/init.js"></script>

注意init.js文件也可以直接引用<script src="http:localhost:8080/arcgis_js_api/library/4.6/dojo/dojo.js"></script>,這起到相同的作用;

 

4 test文件測試是否成功

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>Load a basic WebMap - 4.6</title>

    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>

    <link rel="stylesheet" href="http://localhost:8080/api46/arcgis_js_api/library/4.6/esri/css/main.css">
    <script  type="text/javascript"  src="http://localhost:8080/api46/arcgis_js_api/library/4.6/init.js"></script>

    <script>
        require([
            "esri/views/MapView",
            "esri/WebMap",
            "dojo/domReady!"
        ], function(
            MapView, WebMap
        ) {

            var webmap = new WebMap({
                portalItem: { // autocasts as new PortalItem()
                    id: "f2e9b762544945f390ca4ac3671cfa72"
                }
            });

            var view = new MapView({
                map: webmap,
                container: "viewDiv"
            });
        });
    </script>
</head>

<body>
<div id="viewDiv"></div>
</body>

</html>

 

 如果出現以上的網頁 恭喜你 部署成功!

5 當然 以我的失敗經驗得出 肯定會出錯,比如左上角的控件符號沒有顯示 控制台會打印出以下錯誤:

Access to Font at 'http://localhost:8080/arcgis_js_api/library/4.6/esri/themes/base/icons/fonts/CalciteWebCoreIcons.woff?cu4poq' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

這是顯示你已經跨域請求資源導致資源請求失敗 但是解決辦法是有的 修改Tomcat的web.xml配置文件  打開config/web.xml文件,添加下面的代碼


(如web.xml中有多個filter時要把下面配置放在最前端)

<filter>
 <filter-name>CorsFilter</filter-name>
 <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
 <init-param>
   <param-name>cors.allowed.methods</param-name>
   <param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
 </init-param>
 <init-param>
   <param-name>cors.allowed.headers</param-name>
   <param-value>Access-Control-Allow-Origin,Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value>
 </init-param>
 <async-supported>true</async-supported>
</filter>
<filter-mapping>
 <filter-name>CorsFilter</filter-name>
 <url-pattern>/*</url-pattern>

</filter-mapping>

這樣應該就可以了的


方法二  拷貝api進去進去項目用用相對引用地址

1 將你下載好的api文件全部復制到你新建的jsapi4.6文件夾里  (注意重要:api所在文件夾和html文件應該放在同一文件之下,即是同級)否則會發生錯誤 ,也可能是有別的方法吧

2   同樣修改init.js和dojo.js文件

這里是相對於你html文件的地址

3 引用

<link rel="stylesheet" href="jsapi4.6/dijit/themes/claro/claro.css" />
<link rel="stylesheet" href="jsapi4.6/esri/css/main.css" />
<script src="jsapi4.6/dojo/dojo.js"></script>

這里是相對地址;

4 成功

 

 

兩種方法各有優略  第一次花時間寫着東西也是想給自己留個筆記

如果有更好的方法 希望各位不吝賜教


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM