WebGIS——部署ArcGIS API for JavaScript 4.11

部署ArcGIS API for JavaScript 4.11

!建议安3.20版本,新版的,目前实在是做不动但是安装过程类似
链接:https://pan.baidu.com/s/1AZTxIsEk7KeI1GHLSlMqHQ
提取码:8f72
复制这段内容后打开百度网盘手机App,操作更方便哦
本文介绍如何将ArcGIS API for JavaScript 4.11下载并部署到本机IIS上,系统WIN10 64位
参考文章:http://www.cnblogs.com/jerry-liuyu/p/10283714.html

一、下载并开启ISS服务

官网链接:https://developers.arcgis.com/

  1. 右上角sign in登录并进入下载(须注册账号或直接使用谷歌账号登录)

  2. 下载到本地即可:不想下的这里提供网盘链接:https://pan.baidu.com/s/1VJb3cO2TBYOm2G1dRZhzlQ
    提取码:ry1b
    复制这段内容后打开百度网盘手机App,操作更方便哦

在这里插入图片描述

  1. 解压到某文件夹

  2. 开启IIS服务,勾选即可

在这里插入图片描述

二、配置

IIS服务启动后,C盘会出现一个名为inetpub的文件夹——进入C:\inetpub\wwwroot

  1. 将解压后arcgis_js_api下的library和sdkarcgis_js_v411_sdk\arcgis_js_api下的sdk,这两个文件夹复制到C:\inetpub\wwwroot中去,如下图

1556716112630

  1. 分别打开这两个js文件:①C:\inetpub\wwwroot\arcgis_js_api\library\4.11\init.jsC:\inetpub\wwwroot\arcgis_js_api\library\4.11\dojo\dojo.js

  2. 找到以下内容(Ctrl+F查找)并替换:[HOSTNAME_AND_PATH_TO_JSAPI],并替换为http://localhost/arcgis_js_api/library/4.11/dojo,如下:

  3. 测试以下是否可以顺利打开,打开浏览器输入:<http://localhost/arcgis_js_api/library/4.11/init.js>显示如下页面则说明正确:

在这里插入图片描述

三、测试运行

在这里插入图片描述

新建html文件运行粘贴以下代码:浏览器打开运行,若出现上图,说明已ok,(不显示可以关闭浏览器重新打开试试,前述步骤没出错就应该没问题),有问题一起交流。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>Intro to MapView - Create a 2D map - 4.11</title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>

​```
<link rel="stylesheet" href="http://localhost/arcgis_js_api/library/4.11/esri/css/main.css">
<script src="http://localhost/arcgis_js_api/library/4.11/dojo/dojo.js"></script>
​```

​```
<script>
    require([
        "esri/Map",
        "esri/views/MapView"
    ], function (Map, MapView) {

        var map = new Map({
            basemap: "streets"
        });

        var view = new MapView({
            container: "viewDiv",
            map: map,
            zoom: 4,
            center: [15, 65] // longitude, latitude
        });

    });
</script>
​```

</head>

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

猜你喜欢

转载自blog.csdn.net/m0_37768631/article/details/89740814
今日推荐