1.ArcGIS for JavaScript 4.X离线部署

下载

  1. 去ArcGIS for Developer ( https://developers.arcgis.com/sign-in) 注册一个帐号,如果提示所属区域无法注册,请准备梯子,再进入注册。
  2. 进入https://developers.arcgis.com/downloads/apis-and-sdks?product=javascript,会看下如下界面,下载自己想要的版本就可以了,其中API就是离线部署包,Document是离线帮助文档,根据需要下载。
    下载列表

    3.如果找不到梯子,或其他原因无法下载,可以去我的网盘下载4.11的版本 ,链接:https://pan.baidu.com/s/1zhoRHtrJGIaXkJ9iFSsofw 提取码:9nsi

部署

本文使用IIS为例子进行部署,其他的Web容器部署也类似。

  1. 在IIS中添加网站,并设置好物理路径。
  2. 将下载的离线部署包解压,复制其中的arcgis_js_api文件夹到IIS新添加网站的物理路径的文件夹中。
  3. 分别打开\arcgis_js_api\library\4.11\dojo\dojo.js和\arcgis_js_api\library\4.11\init.js这两个js文件,找打其中的[HOSTNAME_AND_PATH_TO_JSAPI] 将其替换为你的网站路径,比如www.example.com/arcgis_js_api/library/4.11/注意最后那个斜杆别漏掉了
  4. 在IIS中设置站点的MIME类型,将以下几个加入
扩展名 MIME类型
.ttf application/octet-stream
.wasm application/wasm
.woff application/font-woff
.woff2 application/font-woff2
.wsv application/octet-stream
设置站点MIME类型

5.搞定完这些,启动网站。

测试

复制如下代码,并修改其中的引用地址,然后用浏览器打开,如果能看到地图,就表示部署成功了,后续就开心的用自己的部署的api开心的码代码了。


<!DOCTYPE html>
<html> 
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
        <title>Test Map</title> 
      
         <!-- 将以下引用地址替换为刚才部署的地址-->
        < link rel="stylesheet" href="http://www.example.com/arcgis_js_api/library/4.11/esri/themes/light/main.css" />
        <link rel="stylesheet" href="https://www.example.com/arcgis_js_api/library/4.11/dijit/themes/claro/claro.css" />
 
        <style>
            html, body, #viewDiv { 
                 margin: 0; 
                 padding: 0; 
                 width: 100%; 
                 height: 100%;
            } 
        </style>
         <!-- 将以下引用地址替换为你刚才部署的地址-->
       <script src="https://www.example.com/arcgis_js_api/library/4.11/dojo/dojo.js"> </script> 
        <script> 
            var myMap, view; 
            require([ "esri/Basemap", 
            "esri/layers/TileLayer",
            "esri/Map",
            "esri/views/MapView" ], function (Basemap, TileLayer, Map, MapView){ 
                    var layer = new TileLayer({ 
                        url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"
                    });
                    var customBasemap = new Basemap({
                        baseLayers: [layer], 
                        title: "Custom Basemap",
                        id: "myBasemap"
                    }); 
                    myMap = new Map({ 
                          basemap: customBasemap 
                    }); 
                    view = new MapView({ 
                        center: [-111.87, 40.57], // long, lat
                        container: "viewDiv",
                        map: myMap,
                        zoom: 6 
                    });
            }); 
        </script> 
    </head> 
    <body class="claro"> 
        <div id="viewDiv"></div>
    </body> 
</html>

浏览器打开如下地图界面:


测试界面
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容