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

这篇具有很好参考价值的文章主要介绍了arcgis for javascript api4.26 本地tomcat部署,以及解决跨域访问问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、配置java_jdk以及tomcat

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

1. 下载安装配置java环境

下载java_jdk官网地址:https://www.oracle.com/
来到官网,当然得先注册登录一下,这个就不介绍了,找到product -> softwart-> java
arcgis for javascript api4.26 本地tomcat部署,以及解决跨域访问问题
然后根据对应的系统下载对应jdk就行了
arcgis for javascript api4.26 本地tomcat部署,以及解决跨域访问问题
如果你下载的是zip的直接解压就行了,
如果是exe的就双击运行然后傻瓜式的点下一步,就行了
arcgis for javascript api4.26 本地tomcat部署,以及解决跨域访问问题

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

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

tomcat下载官网:https://tomcat.apache.org/download-10.cgi
找到download,点击进去下载你需要的版本就好了
arcgis for javascript api4.26 本地tomcat部署,以及解决跨域访问问题
下载的zip文件,解压到你想安装的位置,如图我就直接将它放在d盘
arcgis for javascript api4.26 本地tomcat部署,以及解决跨域访问问题

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

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

到这里如果还是闪退,那就再改一下startup.bat文件
arcgis for javascript api4.26 本地tomcat部署,以及解决跨域访问问题
改完之后,保存,双击它, 如果黑框还是闪退,!!!!
那么我也无能为力,我知道的和踩过的坑就这么多,都在上面记录,
建议问问chatGPT,哈哈哈哈,狗头.jpg

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

二、下载部署arcgis for javascript API

官网地址:https://developers.arcgis.com/dashboard/
arcgis for javascript api4.26 本地tomcat部署,以及解决跨域访问问题
点击downLoads
arcgis for javascript api4.26 本地tomcat部署,以及解决跨域访问问题
在左侧点击ArcGIS Maps SDK for javascript
arcgis for javascript api4.26 本地tomcat部署,以及解决跨域访问问题
右侧就有对应的api 版本号,下载你想要的版本就行了。
下载解压完了之后,找到arcgis_js_api目录,点进去
arcgis for javascript api4.26 本地tomcat部署,以及解决跨域访问问题

arcgis for javascript api4.26 本地tomcat部署,以及解决跨域访问问题
arcgis for javascript api4.26 本地tomcat部署,以及解决跨域访问问题
找到这个版本号目录,将其拷贝到tomcat的webapps下,如图:
arcgis for javascript api4.26 本地tomcat部署,以及解决跨域访问问题
然后我们启动tomcat,在浏览器中访问http://localhost:8080/4.26/init.js 如图表示部署成功了:
arcgis for javascript api4.26 本地tomcat部署,以及解决跨域访问问题
然后我们直接去官网拉个例子下来,将里面的官网地址换成我们的本地地址
arcgis for javascript api4.26 本地tomcat部署,以及解决跨域访问问题
将这两个链接

    <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可以用,如图:
arcgis for javascript api4.26 本地tomcat部署,以及解决跨域访问问题
当然如果你的tomcat没有配置跨域访问的话,一般情况下到这一步是显示不出来的地图的,会报跨域访问的错误,如图:
arcgis for javascript api4.26 本地tomcat部署,以及解决跨域访问问题
这时候就需要我们去配置tomcat跨域了,找到tomcat中的config下的web.xml,
arcgis for javascript api4.26 本地tomcat部署,以及解决跨域访问问题
在<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>

arcgis for javascript api4.26 本地tomcat部署,以及解决跨域访问问题
然后重启tomcat地图应该就可以加载出来啦。

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

好啦以上就是关于arcgis for javascript api 本地部署的全部内容,本人也是菜鸡刚接触arcgis欢迎留言讨论文章来源地址https://www.toymoban.com/news/detail-470269.html

到了这里,关于arcgis for javascript api4.26 本地tomcat部署,以及解决跨域访问问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • ArcGIS API for JavaScript Map与地图控件

    目录 添加网页 引用接口 添加模块与模块实例 获取API密钥 创建地图 创建地图视图 添加图形图层 在底图之间切换 在图库中选择底图 默认底图视图(Home)控件 图层列表(Layerlist)控件 图例(Legend)控件 比例尺(ScaleBar)控件 指北针(Compass)控件 查看我的位置(Locate)控件

    2024年02月12日
    浏览(38)
  • ArcGIS API for JavaScript 4.x 实现动态脉冲效果

    主要通过定时刷新,每一次的脉冲渲染圈不停的放大,并且透明度缩小,直到达到一定的大小再退回0。 这个文件拿去可以直接使用,下面是引入的方式: 然后可以调用提供的方法实现动态点的添加,动画的暂停和启动。

    2024年02月09日
    浏览(33)
  • ArcGIS API for JavaScript 3.44 地图Demo示例合集

    用于JavaScript的ArcGIS API是在web应用程序中嵌入地图和任务的轻量级方法。您可以从ArcGIS Online、您自己的ArcGIS Server或其他服务器获取这些地图。 描述 此示例演示如何创建一个完整的页面映射应用程序。此示例创建一个以旧金山市为中心的新地图,并将其中一个预定义的基本地

    2024年02月13日
    浏览(34)
  • ArcGIS API for JavaScript 4.x 教程(二)切换基础地图图层

    了解如何更改地图中的基础地图图层。 基础地图图层: 基础地图层是用于访问和显示来自基础地图层服务的数据的层。它为地图或场景提供视觉和地理上下文,通常包含具有管理边界和地名的全局数据。 基本地图图层服务提供了许多基本地图图层样式,例如地形、街道和图

    2024年02月14日
    浏览(23)
  • ArcGIS API for JavaScript 4.x 教程(一) 显示一张地图

    了解如何创建和显示带有基本地图图层的地图。 地图包含地理数据层。地图包含一个基本地图层,以及一个或多个数据层(可选)。可以使用地图视图显示地图的特定区域,并设置位置和缩放级别。 本教程将向您展示如何使用地形底图层创建和显示加利福尼亚州圣莫尼卡山

    2024年02月14日
    浏览(31)
  • ArcGIS API for JavaScript 4.x 教程(四) 添加点、线和多边形

    了解如何在地图中显示点、线和多边形图形。 图形是用于在地图或场景中显示点、线、多边形和文本的视觉元素。图形由几何图形、符号和属性组成,单击时可以显示弹出窗口。您通常使用图形来显示未连接到数据库(即GPS位置)的地理数据。 在本教程中,您将学习如何将

    2024年02月13日
    浏览(32)
  • ArcGIS JSAPI 学习教程 - 初识 ArcGIS Maps SDK for JavaScript

    近期由于工作需要,开始接触 ArcGIS Maps SDK for JavaScript (以下简称 JSAPI ),为了更好的系统的学习,准备开设专栏,作为学习记录。 本文作为第一篇,首先介绍一下 JSAPI 的概览、官方示例以及官方 API。 然后完成 JSAPI 的 helloworld 以及注意事项。 最后简述一下 JSAPI 的优势劣势

    2024年01月19日
    浏览(35)
  • ArcGIS Maps SDK for JavaScript系列之一:在Vue3中加载ArcGIS地图

    ArcGIS Maps SDK for JavaScript 是由 Esri 公司开发的一款用于构建交互式地图应用程序的 JavaScript 库。它提供了丰富的地图显示、分析和可视化功能,适用于各种场景。 目前,ArcGIS Maps SDK for JavaScript 提供两个主要版本:3.x 和 4.x。 ArcGIS Maps SDK for JavaScript 3.x 版本: 3.x 版本是 ArcGIS

    2024年02月13日
    浏览(34)
  • ArcGIS Maps SDK for JavaScript系列之二:认识Map和MapView

    在 ArcGIS Maps SDK for JavaScript 中,Map 和 MapView 是两个重要的概念,用于创建和展示地图应用程序。 Map 表示一个地图对象,它是地图应用程序的基础。Map 可以包含一个或多个图层(Layer),可以是基础底图图层、矢量图层、栅格图层或者任何其他类型的图层。Map 也可以包含地图

    2024年02月12日
    浏览(27)
  • ArcGIS Runtime API for Android--如何从Geometry中获取闭合区域面积?

    使用草图编辑器可以很方便的在底图上进行点线面的绘制,但是绘制完的图形,如何获取值呢?我查了很多资料都没说到关键点,可能默认大家都会,但是我比较菜,还是需要详细说明的。通过官方文档最终实现了面积数据的提取(文档终于看明白了)。 目录  效果 1.Geome

    2024年02月15日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包