ArcGIS API for JavaScript部署到本地Tomcat

ArcGIS API for  JavaScript 同时被 2 个专栏收录
2 篇文章 0 订阅
2 篇文章 0 订阅

本文主要介绍如何将ArcGIS API for JavaScript部署到本地的Tomcat中。

安装Tomcat软件

甩个链接,官网:https://tomcat.apache.org/download-70.cgi
个人建议下载Tomcat 7,不建议下载最新版本。下载完成之后解压到相应的盘就可以(记住路径)。

下载ArcGIS API for JavaScript

甩个链接:https://developers.arcgis.com/javascript/latest/guide/get-api/index.html#download-api

或者:https://download.csdn.net/download/shengshengshiwo/10291572

修改两个JS文件

  • 在**任意位置解压**ArcGIS API for JavaScript 3.23文件。
  • 进入arcgis_js_v323_api\arcgis_js_api\library\3.23,打开install_api_windows.html页面,找到安装教程,如图所示:

修改如图指示文件。

修改文件一(init.js)

位置:arcgis_js_v323_api\arcgis_js_api\library\3.23\3.23

修改内容:将 [HOSTNAME_AND_PATH_TO_JSAPI] 替换成 localhost:8080/arcgis_js_api/library/3.23/3.23

修改文件二(dojo.js)

位置:arcgis_js_v323_api\arcgis_js_api\library\3.23\3.23\dojo\dojo.js

修改内容:将 [HOSTNAME_AND_PATH_TO_JSAPI] 替换成 localhost:8080/arcgis_js_api/library/3.23/3.23

将修改好的文件放入指定的位置

arcgis_js_api文件夹移动到Tomcat安装目录的webapps目录下,如图所示:

注意:不是arcgis_js_v323_api整个文件夹。

测试ArcGIS API for JavaScript函数库是否安装成功。

打开服务器

找到Tomcat安装目录,我的是:C:\Program Files\Apache Software Foundation\apache-tomcat-7.0.85\bin 找到startup.bat 双击打开。

切记,打开后不要关闭此窗口。

在桌面上新建一个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>Simple Map</title>
    <link rel="stylesheet" href="https://localhost:8080/arcgis_js_api/library/3.23/3.23/esri/css/esri.css">
    <script type="text/javascript" src="https://localhost:8080/arcgis_js_api/library/3.23/3.23/init.js"></script>
    <style>
      html, body, #map {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>

    <script>
      var map;

      require(["esri/map", "dojo/domReady!"], function(Map) {
        map = new Map("map", {
          basemap: "topo",  //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd
          center: [-122.45, 37.75], // longitude, latitude
          zoom: 13
        });
      });
    </script>
  </head>

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

发现网页没有东西有没有??

我们再看一下安装说明

https 修改为 http 就可以了。输入以下代码:

<!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>Simple Map</title>
    <link rel="stylesheet" href="http://localhost:8080/arcgis_js_api/library/3.23/3.23/esri/css/esri.css">
    <script type="text/javascript" src="http://localhost:8080/arcgis_js_api/library/3.23/3.23/init.js"></script>
    <style>
      html, body, #map {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>

    <script>
      var map;

      require(["esri/map", "dojo/domReady!"], function(Map) {
        map = new Map("map", {
          basemap: "topo",  //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd
          center: [-122.45, 37.75], // longitude, latitude
          zoom: 13
        });
      });
    </script>
  </head>

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

如果看到一张地图时,说明安装就成功了。

  • 0
    点赞
  • 2
    评论
  • 8
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

评论 2 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:数字20 设计师:CSDN官方博客 返回首页

打赏作者

极客小生

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值