arcgis for javascript api4.26 本地tomcat部署,以及解决跨域访问问题

news2024/11/15 15:28:26

一、配置java_jdk以及tomcat

arcgis for javascript api 部署到本地服务器,可以是iis,也可以是tomcat,我这里是部署到tomcat,所以就介绍一下tomcat上部署的步骤
如果电脑上有本地服务器的,可以跳过这一章,直接从第二章开始看 下载arcgis for javascript API
要部署到tomcat,咱得有tomcat,而tomcat运行又得有java_jdk环境,所以第一步咱先下载安装配置好java运行环境。
tomcat版本和java_jdk运行版本如下:
在这里插入图片描述
上面红色框是我安装的版本,tomcat是10.1的,对应的java_jdk就得是11及以上。

1. 下载安装配置java环境

下载java_jdk官网地址:https://www.oracle.com/
来到官网,当然得先注册登录一下,这个就不介绍了,找到product -> softwart-> java
在这里插入图片描述
然后根据对应的系统下载对应jdk就行了
在这里插入图片描述
如果你下载的是zip的直接解压就行了,
如果是exe的就双击运行然后傻瓜式的点下一步,就行了
在这里插入图片描述

这一步是安装位置,默认是c盘,建议大家搞到其他磁盘,点击更改就行了
在这里插入图片描述
安装完成之后,需要去配置java环境变量
这里介绍的是win10的配置方法,其他系统的也差不多,不会的大家可以搜搜教程
找到我的电脑,右击->属性->高级系统设置->环境变量
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
点击新建JAVA_HOME变量
在这里插入图片描述
变量值是你安装的java位置,如图我的在d盘
在这里插入图片描述
确定之后找到path变量,配置一下JAVA_HOME执行目录
在这里插入图片描述
点击编辑,将%JAVA_HOME%\bin加到path里面即可
在这里插入图片描述
然后我们win+R调起终端,输入javac
在这里插入图片描述
看到如图所示,代表你的java运行环境安装配置完成了。

2. 下载安装配置tomcat运行环境

tomcat下载官网:https://tomcat.apache.org/download-10.cgi
找到download,点击进去下载你需要的版本就好了
在这里插入图片描述
下载的zip文件,解压到你想安装的位置,如图我就直接将它放在d盘
在这里插入图片描述

完成之后,和java一样,这玩意也需要配置环境变量,同样的找到我的电脑->属性->高级系统设置->环境变量
新建CATLINA_HOME变量,变量值就是你的tomcat安装目录
在这里插入图片描述
同样的将这个执行目录配置到path中
在这里插入图片描述
然后确定之后,找到D:\apache-tomcat-10.1.9\bin目录下的startup.bat文件,双击运行
在这里插入图片描述
顺利的话,会有一个窗口如图所示
在这里插入图片描述
保持这个窗口打开,去浏览器中输入localhost:8080,看到如图所示界面,代表你的tomcat启动成功了
在这里插入图片描述
什么?你的窗口闪一下就没了?哈哈哈,恭喜你启动失败
这种情况很正常,不要慌,首先还是我开头强调的,排查下你安装的java_jdk版本和你的tomcat版本是否对应,对应关系我再附一遍图:
在这里插入图片描述
如果版本没问题,你的java环境也没问题,那就可能是你的tomcat环境变量配置的不对,如果你按照我上面的配置了没有问题,还是闪退,那就试一下,在配置两个变量,变量值都是你的tomcat安装路径,如图:
在这里插入图片描述
在这里插入图片描述
同样的将这两个变量执行目录加入到path变量中
在这里插入图片描述
然后找到D:\apache-tomcat-10.1.9\bin目录下的startup.bat, shutdown.bat这两个文件,
在这里插入图片描述
右键编辑:
在这里插入图片描述
加上我红色框出的这两句,当然后面的变量值都是你自己的安装目录哦
shutdown.bat文件也一样也加上这两句话

编辑完成之后,我们在双击startup.bat文件,运行tomcat

到这里如果还是闪退,那就再改一下startup.bat文件
在这里插入图片描述
改完之后,保存,双击它, 如果黑框还是闪退,!!!!
那么我也无能为力,我知道的和踩过的坑就这么多,都在上面记录,
建议问问chatGPT,哈哈哈哈,狗头.jpg

好了说了这么多,步入今天的正题吧,本地部署arcgis for javascript API

二、下载部署arcgis for javascript API

官网地址:https://developers.arcgis.com/dashboard/
在这里插入图片描述
点击downLoads
在这里插入图片描述
在左侧点击ArcGIS Maps SDK for javascript
在这里插入图片描述
右侧就有对应的api 版本号,下载你想要的版本就行了。
下载解压完了之后,找到arcgis_js_api目录,点进去
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
找到这个版本号目录,将其拷贝到tomcat的webapps下,如图:
在这里插入图片描述
然后我们启动tomcat,在浏览器中访问http://localhost:8080/4.26/init.js 如图表示部署成功了:
在这里插入图片描述
然后我们直接去官网拉个例子下来,将里面的官网地址换成我们的本地地址
在这里插入图片描述
将这两个链接

    <link rel="stylesheet" href="https://js.arcgis.com/4.26/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.26/"></script>

换成本地链接

    <link rel="stylesheet" href="http://localhost:8080/4.26/esri/themes/light/main.css" />
    <script src="http://localhost:8080/4.26/init.js"></script>

完整代码如下:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>Intro to MapView - Create a 2D map</title>
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>
    <link rel="stylesheet" href="http://localhost:8080/4.26/esri/themes/light/main.css" />
    <script src="http://localhost:8080/4.26/init.js"></script>
    <script>
      require(["esri/Map", "esri/views/MapView"], (Map, MapView) => {
        const map = new Map({
          basemap: "topo-vector"
        });
        const view = new MapView({
          container: "viewDiv", // Reference to the view div created in step 5
          map: map, // Reference to the map object created before the view
          zoom: 4, // Sets zoom level based on level of detail (LOD)
          center: [15, 65] // Sets center point of view using longitude,latitude
        });
      });
    </script>
  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>

如果你运行起来能看到2d地图,则代表本地部署的api可以用,如图:
在这里插入图片描述
当然如果你的tomcat没有配置跨域访问的话,一般情况下到这一步是显示不出来的地图的,会报跨域访问的错误,如图:
在这里插入图片描述
这时候就需要我们去配置tomcat跨域了,找到tomcat中的config下的web.xml,
在这里插入图片描述
在<wab-app></wab-app>标签中加上如下配置即可:

    <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>
    </filter>
    <filter-mapping>
        <filter-name>CorsFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

在这里插入图片描述
然后重启tomcat地图应该就可以加载出来啦。

当然我这里下载的arcgis for javascript api 是4.26 版本,所以下载下来部署之后配置个跨域就能访问了,如果你下载的版本在4.17一下,包括4.17,需要找到版本号之后的init.js文件和dojo/dojo.js文件
在这里插入图片描述
将里面的 HOSTNAME_AND_PATH_TO_JSAPI替换成对应的localhost/4.xx版本号我以4.14为例如图:
在这里插入图片描述
在这里插入图片描述
换完之后按照上面测试4.26的方式一样,去官方拉个例子,将官方网址换成本地对应的服务版本,如果能正确加载出地图,表示本地部署配置成功。

好啦以上就是关于arcgis for javascript api 本地部署的全部内容,本人也是菜鸡刚接触arcgis欢迎留言讨论

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/605644.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

1绪论_1.1数据结构的基本概念+1.2算法和算法评价

1.1.1基本概念和术语 数据 数据是信息的载体&#xff0c;是描述客观事物属性的数、字符及所有能输入到计算机中并被计算机程序识别和处理的符号的集合。数据是计算机程序加工的原料。 数据元素 数据元素是数据的基本单位&#xff0c;通常作为一个整体进行考虑和处理。一个数…

探索iOS自定义ijkplayer画中画播放

iOS提供AVPictureInPictureController用于画中画播放控制&#xff0c;但是只能绑定AVPlayer使用&#xff0c;对于开发者来说挺头痛的。在iOS 15.0后呼之欲出&#xff0c;支持SampleBufferDisplayLayer自定义数据源显示图层&#xff0c;意味着我们可以自定义第三方播放器实现画中…

内网安全:代理技术详解

目录 代理技术实验所用网络拓扑图及说明 代理技术 SOCK协议 使用代理技术的原因 正向代理与反向代理 实战一&#xff1a;MSF代理通讯 实验原理说明 一. Meterpreter建立路由 二. MSF建立节点 三. 建立代理到MSF上 实战二&#xff1a;CS代理通讯 实验原理说明 一. …

OpenGl之摄像机

文章目录 摄像机/观察空间摄像机位置摄像机方向右轴上轴 Look At自由移动移动速度鼠标输入缩放摄像机源码 OpenGL本身没有摄像机(Camera)的概念&#xff0c;但我们可以通过把场景中的所有物体往相反方向移动的方式来模拟出摄像机&#xff0c;产生一种我们在移动的感觉&#xff…

并发专栏-队列同步器 AQS 以及 Reentrantlock 应用

队列同步器 AQS 以及 Reentrantlock 应用 Java 中的大部分同步类都是基于AbstractQueuedSynchronizer&#xff08;简称为AQS&#xff09;实现的。 ReentrantLock、ReentrantReadWriteLock、Semaphore(信号量)、CountDownLatch、公平锁、非公平锁、 ThreadPoolExecutor 都和 AQS…

《C和指针》读书笔记(第九章 字符串、字符和字节)

目录 0 简介1 字符串基础2 字符串长度3 不受限制的字符串函数3.1 复制字符串3.2 连接字符串3.3 函数的返回值3.4 字符串比较 4 长度受限的字符串函数5 字符串查找基础5.1 查找一个字符串5.2 查找任何几个字符5.3 查找一个子串 6 高级字符串查找6.1 查找一个字符串前缀6.2 查找标…

饿补基础_1 |进位制、R进制之间转换及十进制编码

目录 数值数据的表示一.进位计数制理解1.你需要了解的概念2. 晦涩难懂的官方定义3 一看就会的例子4 值得收藏的进制对照表(二、八、十、十六进制)5 计算机为什么主要使用二进制 二.不同数制之间的转换1. 为什么会出现进制转换2. 各数制转十进制3. 十进制转二进制4. 二进制与八进…

java企业级信息系统开发学习笔记12 基于配置文件整合SSM框架实现用户登录

文章目录 一、学习目标&#xff08;一&#xff09;采用MVC架构 二、基于XML配置方式整合SSM框架实现用户登录&#xff08;一&#xff09;创建表&#xff08;二&#xff09;创建项目&#xff08;三&#xff09;添加相关依赖&#xff08;四&#xff09;创建日志属性文件&#xff…

leetcode51. N 皇后 (java)

leetcode 51 N 皇后 leetcode 51 N 皇后题目描述解题思路 代码演示leetcode52 N 皇后II leetcode 51 N 皇后 原题链接: https://leetcode.cn/problems/n-queens/ 题目描述 按照国际象棋的规则&#xff0c;皇后可以攻击与之处在同一行或同一列或同一斜线上的棋子。 n 皇后问题 研…

2023 华为 Datacom-HCIE 真题题库 07/12--含解析

多项选择题 1.[试题编号&#xff1a;190187] &#xff08;多选题&#xff09;如图所示的拓扑采用了VXLAN分布式网关&#xff0c;SW1上的VBDIF10配置了&#xff1a;arp-proxy local enable命令&#xff0c;则以下描述中正确的有哪些项&#xff1f; A、SW1收到PC1发往PC2的报文&…

【PHP】ThinkPhp6期末速通

目录 一、安装Composer二、设置Composer下载源三、Composer下载&#xff0c;安装TinkPHP6四、安装成功后 目录结构五、运行 ThinkPHP6 起步一、MVC二、单应用模式访问调试 三、安装视图四、模板渲染默认访问指定访问 五、模板变量默认赋值助手函数&#xff08;若不使用默认赋值…

K8s之Deployment控制器入门到深入详解

文章目录 一、Deployment 高级控制器理论1、Deployment控制器介绍2、Deployment工作原理 二、Deployment YAML编写及参数解释1、整体Deployment YAML资源清单内容&#xff1a;2、核心参数解释&#xff1a;3、Deployment更新策略&#xff1a;4、Deployment更新策略百分比方式计算…

内网穿透技术

文章目录 前言1. 安装JAVA2. MCSManager安装3.局域网访问MCSM4.创建我的世界服务器5.局域网联机测试6.安装cpolar内网穿透7. 配置公网访问地址8.远程联机测试9. 配置固定远程联机端口地址9.1 保留一个固定tcp地址9.2 配置固定公网TCP地址9.3 使用固定公网地址远程联机 转载自内…

测试必会 | 通过容器化 Python Web 应用掌握 Docker 容器核心技能

【摘要】 当多个窗口同时 attach 到同一个容器时&#xff0c;所有的窗口都会同步的显示&#xff0c;假如其中的一个窗口发生阻塞时&#xff0c;其它的窗口也会阻塞。attach 必须是登陆到一个已经运行的容器里&#xff0c;如果从这个容器中 exit 退出的话&#xff0c;会导致容器…

HNU-操作系统OS-实验Lab8

OS_Lab8_Experimental report 湖南大学信息科学与工程学院 计科 210X wolf (学号 202108010XXX) 实验目的 通过完成本次实验,希望能达到以下目标 了解基本的文件系统系统调用的实现方法;了解一个基于索引节点组织方式的Simple FS文件系统的设计与实现;了解文件系统抽…

Ace Admin前端框架笔记一概要与布局介绍

简要 Ace Admin官网 Dashboard - Ace Admin Ace Admin Git GitHub - bopoda/ace: Twitter bootstrap 3 admin template 下载地址&#xff1a;https://download.csdn.net/download/ok060/87843670 Ace是一款轻量且功能丰富的管理模板&#xff0c;干净且易于使用。 当前版本…

计组 第二章错题 2.2 运算方法和运算电路

选D 地址寄存器MAR是存储器部件 访存时暂存访存地址 符号位不变 附加位是符号位的扩展 选B A&#xff1a;检查加减 B&#xff1a;对 因为两个符号位一样 D&#xff1a;需要两个 存储单元把信号同时传给两个单元 用双符号位的方法 同0异1 符号相同 0 正 不同 为1 负 逻辑一样 原…

目标检测第三篇:基于SSD的目标检测算法

文章目录 SSD简介网络搭建卷积块下采样块主干网多层特征提起层输出头 数据处理形成训练TXTDatasetDataLoaderAnchors生成先验框匹配先验框位置 offset 损失函数训练代码及参考 SSD简介 SSD&#xff0c;全称Single Shot MultiBox Detector&#xff0c;是Wei Liu在ECCV 2016上提…

软件测试新人害怕不过试用期,教你几招使你安稳度过!!!

对于很多刚步入职场的新人来说&#xff0c;害怕自己试用期过不了&#xff0c;被辞退。别的行业我可能不知道该如何帮大家应对&#xff0c;但在测试行业我希望还是能给大家带俩一点帮助&#xff0c;希望大家能安稳度过试用期&#xff0c;并且成功入行。 保持初心&#xff0c;安稳…

零基础开发小程序第四课-查看功能开发

目录 1 创建页面2 搭建页面3 创建数据4 数据绑定5 页面传参6 预览发布总结 本篇是我们零基础入门课的第四篇&#xff0c;前三篇我们介绍了创建项目、列表功能、新增功能&#xff0c;本篇我们介绍一下查看详情功能的开发。 1 创建页面 打开Zion开发工具&#xff0c;点击已经创建…