ArcGIS for JavaScript 4.8 离线API部署&入门demo

最新推荐文章于 2024-10-12 15:36:14 发布

西伯利亚狼-GM

最新推荐文章于 2024-10-12 15:36:14 发布

阅读量8.8k

点赞数 2

分类专栏： GIS 文章标签： arcgis for javascript

本文链接：https://blog.csdn.net/u013148287/article/details/81779494

版权

GIS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一：离线部署

1.1 下载ArcGIS for JavaScript 4.8

https://developers.arcgis.com/downloads/apis-and-sdks

下载解压得到arcgis_js_v48_api和arcgis_js_v48_sdk两个文件夹

1.2 文件移动

1.2.3 移动arcgis_js_v48_sdk

将arcgis_js_v48_sdk 文件夹拷贝到 C:\inetpub\wwwroot下

1.2.4 移动library文件夹

再将\arcgis_js_v48_api\arcgis_js_api\下的library文件夹拷贝到 C:\inetpub\wwwroot\arcgis_js_v48_sdk\arcgis_js_api

打开IIS管理器，查看部署信息

1.3 文件配置（init.js、dojo.js）

1.3.1 init.js配置

打开C:\inetpub\wwwroot\arcgis_js_v48_sdk\arcgis_js_api\library\4.8\init.js文件,查找[HOSTNAME_AND_PATH_TO_JSAPI]

★ https 协议修改为 http

★ [HOSTNAME_AND_PATH_TO_JSAPI] 修改为192.168.81.77/arcgis_js_v48_sdk/arcgis_js_api/library/4.8/

说明：192.168.81.77 为本机ip 或者将192.168.81.77 修改成localhost也可以。

即： localhost/arcgis_js_v48_sdk/arcgis_js_api/library/4.8/

建议使用本机ip,这样在同一个局域网下，其他电脑也可引用离线API。使用localhost则在只能本机引用本机部署的离线API.

修改前：

修改后如下图:

1.3.2 dojo.js配置

打开C:\inetpub\wwwroot\arcgis_js_v48_sdk\arcgis_js_api\library\4.8\dojo\dojo.js文件

修改跟init.js操作一摸一样。

修改前：

修改后：

1.4 部署验证

浏览器输入 http://192.168.81.77/arcgis_js_v48_sdk/arcgis_js_api/library/4.8/init.js 如果能访问到文件信息，则说明离线api部署成功。（192.169.81.77 替换成你本机的ip）

目录下 C:\inetpub\wwwroot\arcgis_js_v48_sdk\arcgis_js_api\library\4.8\**** 任何文件

通过 http://192.168.81.77/arcgis_js_v48_sdk/arcgis_js_api/library/4.8/***** 都能在浏览器中访问

二：创建第一个arcgis demo

新建index.html文件

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>第一个js GIS地图</title>
    <style>
        html, body, #mapDiv
        {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }
        body
        {
            background-color: #FFF;
            overflow: hidden;
            font-family: "Trebuchet MS";
        }
    </style>
    <!--<link rel="stylesheet" href="http://192.168.81.77/arcgis_js_v48_sdk/arcgis_js_api/library/4.8/dijit/themes/claro/claro.css" />
    <link rel="stylesheet" href="http://192.168.81.77/arcgis_js_v48_sdk/arcgis_js_api/library/4.8/dijit/themes/tundra/tundra.css" />-->
    <link rel="stylesheet" type="text/css" href="http://192.168.81.77/arcgis_js_v48_sdk/arcgis_js_api/library/4.8/esri/css/main.css" />
    <!--<script type="text/javascript" src="http://192.168.81.77/arcgis_js_v48_sdk/arcgis_js_api/library/4.8/dojo/dojo.js"></script>-->
    <script type="text/javascript" src="http://192.168.81.77/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: 10,//放大量，数字越大则为地图放大多少倍
                center: [117.196646,31.827314] //设置初始经纬度
            });
        });
    </script>
</head>
<body class="">
    <div id="mapDiv"></div>
</body>
</html>

注意：引入离线部署的文件时，ip要换成你部署机器的ip

<link rel="stylesheet" type="text/css" href="http://192.168.81.77/arcgis_js_v48_sdk/arcgis_js_api/library/4.8/esri/css/main.css" />
<script type="text/javascript" src="http://192.168.81.77/arcgis_js_v48_sdk/arcgis_js_api/library/4.8/init.js"></script>

浏览器打开index.html文件，能看到地图，恭喜你成功了！