ArcGIS API for JavaScript 4.x 在本地Tomcat上的配置

最新推荐文章于 2024-03-25 09:52:09 发布

GIS小猪

最新推荐文章于 2024-03-25 09:52:09 发布

阅读量757

点赞数

分类专栏： ArcGIS API for JavaScript 学习心得文章标签： arcgis api tomcat

本文链接：https://blog.csdn.net/qq_43066675/article/details/108259808

版权

ArcGIS API for JavaScript 学习心得专栏收录该内容

1 篇文章 0 订阅

订阅专栏

ArcGIS API for JavaScript 4.x 在本地Tomcat上的配置

这次先说一说ArcGIS API for JavaScript 4.x 在本地Tomcat上如何来进行配置

文章目录

ArcGIS API for JavaScript 4.x 在本地Tomcat上的配置
前言
一、环境准备
二、配置流程

前言

ArcGIS API for JavaScript是ESRI根据JavaScript技术实现的调用ArcGIS Server REST API接口的一组脚本。当前的最新版本是Version 4.16。通过ArcGIS API for JavaScript可以将ArcGIS Server提供的地图资源和其它资源(ArcGIS Online)嵌入到Web应用中。那么我们在本地学习或开发如何来配置呢，以下就是配置流程。

一、环境准备

首先是安装Tomcat,我用的Tomcat7，关于安装Tomcat7可以借鉴Tomcat7.0安装及配置教程
下载ArcGIS API for JavaScript 4.14包，可以去官网下载，也可以下载我准备的API

在这里插入图片描述

二、配置流程

1.将开发包放在Tomcat目录的webapps下
在这里插入图片描述

2.用记事本打开文件下library>4.14>init.js
在这里插入图片描述

3.修改baseUrl,用文本编辑器打开init.js，搜索[HOSTNAME_AND_PATH_TO_JSAPI]
在这里插入图片描述

4.将[HOSTNAME_AND_PATH_TO_JSAPI]替换成localhost:9999/arcgis_js_v414_api/library/4.14/（这里9999是我的Tomcat端口）将https修改为http
在这里插入图片描述

5.配置dojo.js,步骤与修改内容与配置init.js一模一样，即参考3、4步
在这里插入图片描述

在这里插入图片描述

6.配置完成，启动Tomcat服务器，在浏览器地址栏输入地址，查看是否配置成功，查看init.js，输入http://localhost:9999/arcgis_js_v414_api/library/4.14/init.js，如果出现下面的画面即init.js配置成功。
在这里插入图片描述

7.查看dojo.js，输入http://localhost:9999/arcgis_js_v414_api/library/4.14/dojo/dojo.js，如果出现下面的画面即dojo.js配置成功。
在这里插入图片描述
8.前端测试，新建html页面,测试代码为test.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>api配置测试-4.14</title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
    <link rel="stylesheet" href="http://localhost:9999/arcgis_js_v414_api/library/4.14/esri/css/main.css">
    <script type="text/javascript" src="http://localhost:9999/arcgis_js_v414_api/library/4.14/init.js"></script>
    <script>
        require([
            "esri/views/MapView",
            "esri/WebMap",
            "dojo/domReady!"
        ], function(
            MapView, WebMap
        ) {
            var webmap = new WebMap({
                portalItem: { // autocasts as new PortalItem()
                    id: "f2e9b762544945f390ca4ac3671cfa72"
                }
            });
            var view = new MapView({
                map: webmap,
                container: "viewDiv"
            });
        });
    </script>
</head>
<body>
    <div id="viewDiv"></div>
</body>
</html>