关于Arcgis for JavaScript API 4.5本地配置与相关变化的探索
最近由于学习需求对于Arcgis JavaScript API需要一定的运用。翻看了一下官方网站的版本,已经更新到4.7版本。为了方便前端的开发,对4.5的版本进行了一番研究。
首先,我们要运行一个简单的网页地图,必须获得Arcgis JavaScript API,这里分为两个方面:
(1)直接从网站获取API,这样的方法较为方便快捷,而且出错几率也小(相对于本地部署要手动配置),但是这种方法的弊端也很明显:加载过于缓慢,如果网好一点还可以,网速要是有点差,加载时间就能让人崩溃。(本人参加过一个比赛,其中的网页前端调用的就是官方的API,导致加载缓慢,现场一度尴尬。。。。)对于这种方法,便于我们前期上手操作,但是到最后还是要归结到本地部署。
(2)另一方面就是上面提到的本地部署,对于本地部署,我们首先获取Arcgis JavaScript API的官方包,这个易于获取,只需要登录到https://developers.arcgis.com/javascript/这个官方网址。根据里面的相关引导就可以下载官方包。下载下来之后就是本地部署环节了。首先解压出来之后的情况:
我们只需要其中arcgis_js_api这个文件夹。一路打开之后会看见:
只取其中的4.5文件夹,将其单独拿出来,之后就是对这个文件的操作了。关于本地部署首先要有服务器,此处以Tomcat作为示例进行介绍,这个是我的Tomcat服务器路径
接着打开其中的webapps文件夹,新建一个JSAPI的目录,并且将上文提到的4.5文件夹复制到其中,最终的结果如图:
此时我们就已经完成了一半了。接下来对于4.5文件夹中文件进行修改,修改的文件:
①4.5/init.js ②4.5/dojo/dojo.js
此处本人使用Notepad++对这两个文件进行打开:
此时发现这两个文件中都包含 红框所示的一个地址,对于这两个地址就是我们要修改的地方。根据我们JSAPI文件放置的路径将其改为(注意其中的Http与Https的区别!!!!!):
这样就完成了路径的配置了,接下来进行代码测试。首先启动服务器,找到Tomcat中的启动程序,进行启动服务:
看见红框中启动信息,说明JSAPI文件进行被启动。然后展示我的测试文件代码(HTML):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>我的图层</title>
<link rel="stylesheet" href="http://localhost:8080/JSAPI/4.5/dijit/themes/claro/claro.css"/>
<link rel="stylesheet" href="http://localhost:8080/JSAPI/4.5/esri/css/main.css" />
<style>
html,
body,
#map{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
position: absolute;}
</style>
<script src="http://localhost:8080/JSAPI/4.5/dojo/dojo.js"></script>
<script>
var map,view;
require([
"esri/Map",
"esri/views/MapView",
"esri/Graphic",
"esri/geometry/Point",
"dojo/domReady!"
], function(Map,MapView,Graphic,Point){
map = new Map({
basemap:"osm",
});
view=new MapView({
map:map,
container:"map",
zoom:15,
center:[121.1773281357, 31.8902227586],
sliderStyle: "small"
});
view.on("click",function(event){
var markerSymbol = {
type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
color: [226, 119, 40],
outline: { // autocasts as new SimpleLineSymbol()
color: [255, 255, 255],
width: 2
}
};
var pointGraphic = new Graphic({
geometry: new Point(event.mapPoint),
symbol: markerSymbol
});
view.graphics.add(pointGraphic);
});
});
</script>
</head>
<body class="claro">
<div id="map" ></div>
</body>
</html>
这样就完成了,一个简易的WEB GIS的页面了。
如果你还遇到了其他问题可以加我qq1242229486进行询问。感谢你的观看。