ArcGIS API for JavaScript离线Tomcat部署

ArcGIS API for JavaScript离线Tomcat部署

博客地址:https://blog.csdn.net/YaoChiZaoFan

使用Tomcat离线部署ArcGIS API for JavaScript资源
Tomcat下载地址:https://tomcat.apache.org/download-10.cgi
ArcGIS API for JavaScript 资源地址:https://developers.arcgis.com/downloads/apis-and-sdks?product=javascript
版本Tomcat-10 ArcGIS API for JavaScript-4.15 下载ArcGIS API for JavaScript时需要注册登录
ArcGIS API for JavaScript-4.15 官方api地址:https://developers.arcgis.com/javascript/latest/api-reference/
ArcGIS API for JavaScript-4.15 官方示例地址:https://developers.arcgis.com/javascript/latest/sample-code/

下载资源后解压 将ArcGIS API for JavaScript-4.15解压后的核心目录放入tomcat—webapps目录下
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

将ArcGIS API for JavaScrip离线包放入tomcat目录后找到其下arcgis_js_api\library\4.15的init.js文件和arcgis_js_api\library\4.15\dojo目录下的dojo.js文件
ctrl+F找到将两个文件中的[HOSTNAME_AND_PATH_TO_JSAPI]改成tomcat本地地址
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

找到tomcat的bin目录下的startup.bat启动tomcat 在浏览器访问资源验证部署
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

样例demo 代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>Create map</title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
    <link rel="stylesheet" href="http://localhost:8080/arcgis_js_api/library/4.15/esri/css/main.css">
    <script src="http://localhost:8080/arcgis_js_api/library/4.15/init.js"></script>
    <script>
        require([//引入对应模块
            "esri/Map",
            "esri/views/MapView",
            "esri/layers/MapImageLayer",
            "dojo/domReady!"//dom所有都加载完才执行function中代码
        ], function(Map, MapView,MapImageLayer) {
            var map = new Map({
                basemap: "streets"
            });

            var view = new MapView({
                container: "viewDiv",  // map div id
                map: map,              // 绑定map对象
                zoom: 4,  // 初始化缩放级别
                center: [15, 65]  // 初始化中心点
            });
        });
    </script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>

在这里插入图片描述
浏览器控制台可能会出现跨域问题 在tomcat下的conf下的web.xml加入以下代码解决 /*全局配置不是注释

<filter>
  <filter-name>CorsFilter</filter-name>
  <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
  <init-param>
    <param-name>cors.allowed.origins</param-name>
    <param-value>*</param-value>
  </init-param>
  <init-param>
    <param-name>cors.allowed.methods</param-name>
    <param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
  </init-param>
  <init-param>
    <param-name>cors.allowed.headers</param-name>
    <param-value>Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value>
  </init-param>
  <init-param>
    <param-name>cors.exposed.headers</param-name>
    <param-value>Access-Control-Allow-Origin,Access-Control-Allow-Credentials</param-value>
  </init-param>
  <!-- <init-param> -->
    <!-- <param-name>cors.support.credentials</param-name> -->
    <!-- <param-value>true</param-value> -->
  <!-- </init-param> -->
  <init-param>
    <param-name>cors.preflight.maxage</param-name>
    <param-value>10</param-value>
  </init-param>
</filter>
<filter-mapping>
  <filter-name>CorsFilter</filter-name>
  <url-pattern>/*</url-pattern>
</filter-mapping>

除了tomcat离线部署之外 还有多种方法 iis等…

小白编写 不喜勿喷 欢迎纠错 有用点赞

相关推荐
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页