关于Arcgis for JavaScript API 4.5本地配置与相关变化的探索

最新推荐文章于 2022-12-12 15:59:48 发布

FanrenCLI

最新推荐文章于 2022-12-12 15:59:48 发布

阅读量315

点赞数

文章标签： Arcgis JS API Web GIS 4.5版本

本文链接：https://blog.csdn.net/Void_FR_LJ/article/details/80697852

版权

最近由于学习需求对于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进行询问。感谢你的观看。

FanrenCLI

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于Arcgis for JavaScript API 4.5本地配置与相关变化的探索

最近由于学习需求对于Arcgis JavaScript API需要一定的运用。翻看了一下官方网站的版本，已经更新到4.7版本。为了方便前端的开发，对4.5的版本进行了一番研究。首先，我们要运行一个简单的网页地图，必须获得Arcgis JavaScript API，这里分为两个方面：（1）直接从网站获取API,这样的方法较为方便快捷，而且出错几率也小（相对于本...
复制链接

扫一扫