ArcGIS API for JavaScript 各个版本的SDK下载和发布 ,ArcGIS Runtime SDK for Android、ArcGIS Runtime SDK for Java等

ArcGIS API for JS 官网地址:https://developers.arcgis.com/javascript/
ArcGIS API for JavaScript 各个版本的SDK下载和发布 和ArcGIS Runtime SDK for Android、ArcGIS Runtime SDK for Java等等的下载

一、百度 ArcGIS API for js,搜索官网。这里有路径:https://developers.arcgis.com/javascript/
二、注册、登录
三、点击 仪表盘
ArcGIS API for JavaScript 各个版本的SDK下载和发布 ,ArcGIS Runtime SDK for Android、ArcGIS Runtime SDK for Java等_第1张图片
四、点击 Download API & SDKs
ArcGIS API for JavaScript 各个版本的SDK下载和发布 ,ArcGIS Runtime SDK for Android、ArcGIS Runtime SDK for Java等_第2张图片

五、点击需要的API后面的All versions

ArcGIS API for JavaScript 各个版本的SDK下载和发布 ,ArcGIS Runtime SDK for Android、ArcGIS Runtime SDK for Java等_第3张图片
六、选择相应的版本,可以点击后面的API下载SDK或者Documentation下载文档。

ArcGIS API for JavaScript 各个版本的SDK下载和发布 ,ArcGIS Runtime SDK for Android、ArcGIS Runtime SDK for Java等_第4张图片
七、开始发布,首先安装java环境和配置tomcat环境,这个百度。
八、解压下载的API的压缩包,把 4.14文件夹或4,16文件夹(具体看你下载的版本)复制到tomcat的webapps文件夹下,
ArcGIS API for JavaScript 各个版本的SDK下载和发布 ,ArcGIS Runtime SDK for Android、ArcGIS Runtime SDK for Java等_第5张图片
ArcGIS API for JavaScript 各个版本的SDK下载和发布 ,ArcGIS Runtime SDK for Android、ArcGIS Runtime SDK for Java等_第6张图片
九、打开tomcat的webapps文件夹下对应版本SDK(我的是4.16),再打开4.16下的init.js文件,进行配置,
ArcGIS API for JavaScript 各个版本的SDK下载和发布 ,ArcGIS Runtime SDK for Android、ArcGIS Runtime SDK for Java等_第7张图片

十、打开init.js,搜索 baseUrl,可以看到下图红框内容。由于有多个baseUrl,还是搜索
async:1,baseUrl更快点。

ArcGIS API for JavaScript 各个版本的SDK下载和发布 ,ArcGIS Runtime SDK for Android、ArcGIS Runtime SDK for Java等_第8张图片
然后配置成下图这样既可:

ArcGIS API for JavaScript 各个版本的SDK下载和发布 ,ArcGIS Runtime SDK for Android、ArcGIS Runtime SDK for Java等_第9张图片
8080是你的tomcat端口号,4.13是你的版本号,即4.13就是你前面放在tomcat的webapp文件夹下的文件夹名字。你的可能是4.14或4.16.
之后,在init.js同级文件夹内找到dojo文件夹,打开,找到dojo.js,进行和init.js相同的配置。

十一、点击tomcat bin目录下的startup.bat启动tomcat

ArcGIS API for JavaScript 各个版本的SDK下载和发布 ,ArcGIS Runtime SDK for Android、ArcGIS Runtime SDK for Java等_第10张图片
十二、在浏览器访问init.js,有如下内容即可(注意版本号,对应着你的文件夹,即路径)

http://localhost:8080/4.14/init.js
http://localhost:8080/4.14/esri/themes/light/main.css

ArcGIS API for JavaScript 各个版本的SDK下载和发布 ,ArcGIS Runtime SDK for Android、ArcGIS Runtime SDK for Java等_第11张图片
十三、前端像下面两图一样引用js和css即可
在vue的mounted里
在这里插入图片描述

在vue的在这里插入图片描述
或者直接在vue 的mounted里

    loadScript({ url: 'http://localhost:8080/4.14/init.js' }) // 本地服务
    loadCss('http://localhost:8080/4.14/esri/themes/light/main.css') // 本地服务

如果想引用在线的

 loadScript({ url: 'https://js.arcgis.com/4.14/' }) // 都支持
 或loadScript({ version: '4.14' }) // "esri-loader": "^1.7.0", 版本不支持   2.15.0 版本不支持
loadCss('https://js.arcgis.com/4.14/esri/themes/light/main.css') // "esri-loader": "^1.7.0", 版本不支持    2.15.0 版本不支持

发布后,或发现,如果调用Sketch小组件,发现都是小方框,这是因为跨域了
ArcGIS API for JavaScript 各个版本的SDK下载和发布 ,ArcGIS Runtime SDK for Android、ArcGIS Runtime SDK for Java等_第12张图片

解决办法:
https://jingyan.baidu.com/article/066074d6fe6fd1c3c21cb034.html
或者直接先在tomcat的lib文件夹加上这两个jar包
jar包联系QQ:854138497
在这里插入图片描述

然后在conf文件夹的web.xml里的


        
	CORS        
	com.thetransactioncompany.cors.CORSFilter   
		           
			 cors.allowOrigin     
			 *    
		      
		            
			 cors.supportedMethods         
			 GET,POST,HEAD,PUT,DELETE    
		      
		             
			 cors.supportedHeaders        
			 Accept,Origin,X-Requested-With,Content-Type,Last-Modified      
		         
			        
			 cors.exposedHeaders      
			 Set-Cookie      
			        
		             
			 cors.supportsCredentials        
			 true   
		    
   
      
	CORS   
	/*


注意标签的层级
ArcGIS API for JavaScript 各个版本的SDK下载和发布 ,ArcGIS Runtime SDK for Android、ArcGIS Runtime SDK for Java等_第13张图片

你可能感兴趣的:(vue,arcgis,api,GIS服务)