本地部署Arcgis API for Javascript

最新推荐文章于 2024-09-22 00:47:43 发布

胡祺GISer

最新推荐文章于 2024-09-22 00:47:43 发布

阅读量1.3k

点赞数 3

文章标签： javascript arcgis

本文链接：https://blog.youkuaiyun.com/weixin_38858443/article/details/106676584

版权

本地部署Arcgis API for Javascript

1.获得JS API

Arcgis API for Javascript 或其他Arcgis开发相关API都可以在esri developer官网下载。网站链接：

https://developers.arcgis.com/downloads/

未登录的会提示登录，根据步骤注册一个Arcgis Online账号登录即可。

下拉框中选择Arcgis API for Javascript，出现所有版本，选择一个版本下载。

在这里插入图片描述

右边API指下载API,Documentation指下载说明文档。

2.开启Internet Information Services (IIS)

打开控制面板，进入程序与功能

在这里插入图片描述

点击启动或关闭windows功能

在Internet Information Services下，勾选✔所有IIS开头的item.

在这里插入图片描述

点击万维网服务的所属的方框，其子项目默认选择。

我之前没选这个，导致IIS管理器中不能浏览.js文件内容。

在这里插入图片描述

确认后等待安装，当C盘根目录出现文件夹在这里插入图片描述，则成功！

3、导入JS API

打开已经下载好的API包，将在这里插入图片描述复制到inetpub文件夹下的wwwroot下。

（我这里是4.15版本API，所以文件夹名是4.15），该文件位置可参考下图层次。

在这里插入图片描述

4、修改原始文件变量

打开IIS文件管理器。

在Cortana中搜索比较快

在这里插入图片描述

获得路径

右键点击dojo.js文件浏览，自动弹出html页面，如果步骤2中没有选择万维网服务则不会弹出。如下图所示：

在这里插入图片描述

这一步主要是获得网络路径，我这里是localhost/4.15/dojo复制下来。

更改默认路径变量

修改init.js 和dojo.js

不知道文件在哪的可以看我截图中的路径名

在这里插入图片描述

修改两个文件的步骤都一样，用文本编辑器打开（我用的是 vs code ），查找[HOSTNAME_AND_PATH_TO_JSAPI]将https://[HOSTNAME_AND_PATH_TO_JSAPI]dojo全部替换成http://localhost/4.15/dojo【注意是 http 不是 https 】

测试

用浏览器直接打开http://localhost/4.15/dojo/dojo.js，如果可以看到代码，则配置成功。

让我们来尝试一个HelloWord,运行一下代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <title>Intro to SceneView - Create a 3D map</title>
    <style type="text/css">
        html, body, #viewDiv { padding: 0;
    margin: 0;height: 100%; width: 100%; }

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

      #layerToggle {
        top: 20px;
        right: 20px;
        position: absolute;
        z-index: 99;
        background-color: white;
        border-radius: 8px;
        padding: 10px;
        opacity: 0.75;
      }
    </style>
    <script type="text/javascript">
       
    </script>
    <link rel="stylesheet" href="http://localhost/4.15/esri/css/main.css">
    <script type="text/javascript" src="http://localhost/4.15/init.js"></script>
    <!-- 本地部署必须精确到init.js -->
    <script>
        require([
                "esri/Map",
                "esri/views/SceneView",
                "esri/layers/TileLayer",
                "dojo/domReady!"
            ], function (Map, SceneView, TileLayer) {

                var transportationLayer = new TileLayer({
                    url: "https://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Transportation/MapServer",
                    id: "streets",
                    opacity: 0.7
                });

                var housingLayer = new TileLayer({
                    url: "https://tiles.arcgis.com/tiles/nGt4QxSblgDfeJn9/arcgis/rest/services/New_York_Housing_Density/MapServer",
                    id: "ny-housing"
                });


                var map = new Map({
                    "basemap": "oceans",
                    "ground": "world-elevation",
                    "layers": housingLayer
                });
                map.layers.add(transportationLayer);
                var view = new SceneView({
                    "map": map,
                    "container": "viewDiv",
                    "center": [15, 65]
                });

                /*****************************************************************
                     * All code previously written in the steps above should be placed
                     * before the following code
                     *******************************************************************/

                    // Create a variable referencing the checkbox node
                    var streetsLayerToggle = document.getElementById("streetsLayer");

                    // Listen to the change event for the checkbox
                    streetsLayerToggle.addEventListener("change", function () {
                        // When the checkbox is checked (true), set the layer's visibility to true
                        transportationLayer.visible = streetsLayerToggle.checked;})

            });


    </script>
</head>
<body>
<div id="viewDiv"></div>
<span id="layerToggle" class="esri-widget"> <input type="checkbox" id="streetsLayer" checked /> Transportation </span>
</body>
</html>

效果

```

效果

在这里插入图片描述