ArcGIS API for js 4.8 本地部署

时间:2024-03-13 16:26:46

一. 下载ArcGIS API for js 4.8

  1. 下载地址:https://developers.arcgis.com/downloads/apis-and-sdks
    ArcGIS API for js 4.8 本地部署
    两个都要下载,一个是API,一个是SDK。
  2. 得到两个压缩文件包,解压缩就好。

二. 部署准备

  1. 打开“打开或关闭Windows功能”窗口,如图,划线部分√上。ArcGIS API for js 4.8 本地部署
  2. 安装IIS,并检测MIME类型。打开IIS管理器的MIME类型。
    ArcGIS API for js 4.8 本地部署
    看一下有没有以下几种类型,没有就添加。鼠标右键即可添加。
扩展名 MIME类型
.ttf application/octet-stream
.wasm application/wasm
.woff application/font-woff
.woff2 application/font-woff2
.wsv application/octet-stream
  1. 将SDK拷贝到C:\inetpub\wwwroot目录下面。
    ArcGIS API for js 4.8 本地部署
  2. 将arcgis_js_api文件夹里面的library文件夹拷贝到C:\inetpub\wwwroot\arcgis_js_v48_sdk\arcgis_js_api目录下。
    ArcGIS API for js 4.8 本地部署
  3. 修改 C:\inetpub\wwwroot\arcgis_js_v48_sdk\arcgis_js_api\library\4.8 路径下的init.js和dojo/dojo.js这两个js文件。修改内容和方法是一样的。
    打开init.js文件,查找 https://[HOSTNAME_AND_PATH_TO_JSAPI] ,如图。
    ArcGIS API for js 4.8 本地部署
    修改为:http://localhost/arcgis_js_v48_sdk/arcgis_js_api/library/4.8/dojo ,https要换成http,其他变为文件夹路径。localhost也可以是你的电脑ip。
    ArcGIS API for js 4.8 本地部署
    同理,dojo/js也是这样修改的。

三. 验证以及一个小demo

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>demo</title>
    <style>
        html, body, #mapDiv
        {
            height: 100%;
            width: 100%;
        }
        body
        {
            background-color: #FFF;
            overflow: hidden;
        }
    </style>
   
    <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_v48_sdk/arcgis_js_api/library/4.8/esri/css/main.css" />   
    <script type="text/javascript" src="http://localhost/arcgis_js_v48_sdk/arcgis_js_api/library/4.8/init.js"></script>
    <script>
        var map;
        require(["esri/map",
                 "esri/views/MapView",
                 "dojo/domReady!"
            ], function (Map,MapView) {
            map = new Map({
                basemap: "topo",
            });
 
            var view = new MapView({
                container: "mapDiv",
                map: map,
                zoom: 17,
                center: [120.505352,36.167816] 
            });
        });
    </script>
</head>
<body class="">
    <div id="mapDiv"></div>
</body>
</html>