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/
二、注册、登录
三、点击 仪表盘
四、点击 Download API & SDKs
五、点击需要的API后面的All versions
六、选择相应的版本,可以点击后面的API下载SDK或者Documentation下载文档。
七、开始发布,首先安装java环境和配置tomcat环境,这个百度。
八、解压下载的API的压缩包,把 4.14文件夹或4,16文件夹(具体看你下载的版本)复制到tomcat的webapps文件夹下,
九、打开tomcat的webapps文件夹下对应版本SDK(我的是4.16),再打开4.16下的init.js文件,进行配置,
十、打开init.js,搜索 baseUrl,可以看到下图红框内容。由于有多个baseUrl,还是搜索
async:1,baseUrl更快点。
然后配置成下图这样既可:
8080是你的tomcat端口号,4.13是你的版本号,即4.13就是你前面放在tomcat的webapp文件夹下的文件夹名字。你的可能是4.14或4.16.
之后,在init.js同级文件夹内找到dojo文件夹,打开,找到dojo.js,进行和init.js相同的配置。
十一、点击tomcat bin目录下的startup.bat启动tomcat
十二、在浏览器访问init.js,有如下内容即可(注意版本号,对应着你的文件夹,即路径)
http://localhost:8080/4.14/init.js
http://localhost:8080/4.14/esri/themes/light/main.css
十三、前端像下面两图一样引用js和css即可
在vue的mounted里
在vue的<style里
或者直接在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小组件,发现都是小方框,这是因为跨域了
解决办法:
https://jingyan.baidu.com/article/066074d6fe6fd1c3c21cb034.html 或者直接先在tomcat的lib文件夹加上这两个jar包
jar包联系QQ:854138497
然后在conf文件夹的web.xml里的</web-app标签内直接加上,重启tomcat,使劲刷新浏览器
<filter>
<filter-name>CORS</filter-name>
<filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
<init-param>
<param-name>cors.allowOrigin</param-name>
<param-value>*</param-value>
</init-param>
<init-param>
<param-name>cors.supportedMethods</param-name>
<param-value>GET,POST,HEAD,PUT,DELETE</param-value>
</init-param>
<init-param>
<param-name>cors.supportedHeaders</param-name>
<param-value>Accept,Origin,X-Requested-With,Content-Type,Last-Modified</param-value>
</init-param>
<init-param>
<param-name>cors.exposedHeaders</param-name>
<param-value>Set-Cookie</param-value>
</init-param>
<init-param>
<param-name>cors.supportsCredentials</param-name>
<param-value>true</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>CORS</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
注意标签的层级