ArcGIS API for JavaScript 4.12 实现windows本地化部署

1.前言：

　　相信很多同学都在使用ESRI官方提供的ArcGIS API for JavaScript进行Web GIS应用的开发，因为它提供了很多强大且易用的接口，极大地方便了我们的开发工作。

　　ArcGIS API for JavaScript是ESRI随ArcGIS 9.3版本一同发布的，是ESRI基于Dojo框架和REST风格实现的一套编程接口，通过JS API可以对ArcGIS for Server进行访问，并将ArcGIS for Server的应用镶嵌如Web应用中。JS API为我们提供了地图展示、图形绘制、符号渲染、查询检索、地理处理、网络分析、在线编辑、影像处理、地图输出等功能接口。程序开发讲究站在巨人的肩膀上继续前进，所以我们应该充分利用这些ESRI官方提供的API，试想如果离开了这些API我们开发GIS应用经会变得异常困难。

　　但是现实中我们调用JS API，往往速度比较慢，这是因为ESRI并没有在国内架设服务器。但是时间很宝贵啊，为了节省时间，我们就有必要实现JS API的本地化部署。

2.所需软件：

TomCat 8.5.41

ArcGIS API for JavaScript 4.12

3.安装

Tomcat

3.1解压Tomcat

　　将下载下来的TomCat 解压至纯英文目录，然后计算机===》属性===》高级系统设置===》环境变量===》新建，变量名： CATALINA_HOME 变量值：解压TomCat的绝对位置，如下图：

3.2启动TomCat

　　进入TomCat 的解压目录的bin目录，找到startup.bat文件，双击即可运行TomCat,默认端口为8080，打开浏览器输入localhost:8080,看到如下页面即为安装Tomcat成功。因为我把端口修改为了80，所以只输入localhost即可，80可以省略。

3.3下载ArcGIS API for JavaScript

　　注意:下载之前，先去ArcGIS Online上注册账号，过程比较简单这里就不演示了。（SDK比较大，下载下来看看也可以，说不定以后也会用上呢）

3.3.1 配置init.js

　　下载好之后，就地解压，进入该目录 arcgis_js_v412_api\arcgis_js_api\library\4.12，找到init.js,使用编辑器打开，将里面的 [HOSTNAME_AND_PATH_TO_JSAPI]，替换为 arcgis_js_api\library\4.12

　　同时把https的s去掉，一会儿解释。如下图：

3.3.2 配置dojo.js

　　进入该目录 arcgis_js_v412_api\arcgis_js_api\library\4.12\dojo，找到dojo.js,使用编辑器打开，将里面的 [HOSTNAME_AND_PATH_TO_JSAPI]，替换为 arcgis_js_api\library\4.12

　　同时也把https的s去掉，如下图：

　　备注：之所以去掉https的s是因为，我们这是在本地搭建的服务，我们确认是安全的调用和浏览服务，但是浏览器不管那么多，它人为没有证书的浏览请求都是耍流氓。所以我们s去掉就可以解决这个问题。这个s就代表security,安全的意思。至于http和https的区别请戳链接细品。

3.4开始测试

　　在桌面新建index.html文件，用编辑器打开，输入如下内容：

<!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://localhost/arcgis_js_api/library/4.12/dijit/themes/claro/claro.css" />
    <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/4.12/esri/themes/light/main.css" />
    <style>
      html,
      body,
      #viewDiv {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
      }
    </style>
    <script src="http://localhost/arcgis_js_api/library/4.12/dojo/dojo.js"></script>
    <script>
      var myMap, view;
      require([
        "esri/Basemap",
        "esri/layers/TileLayer",
        "esri/Map",
        "esri/views/MapView"
      ], function (Basemap, TileLayer, Map, MapView){
        // --------------------------------------------------------------------
        // If you do not have public Internet access then use the Basemap class
        // and point this URL to your own locally accessible cached service.
        //
        // Otherwise you can just use one of the named hosted ArcGIS services.
        // https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer
        // --------------------------------------------------------------------
        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>

　　保存之后，双击该文件后，不出意外的话，会在浏览器展示出一幅地图,如下图：

至此，ArcGIS API for JavaScript部署完毕。

posted @ 2019-08-09 17:59 WongBynn 阅读(588) 评论(0) 收藏举报

刷新页面返回顶部

WongBynn