还在为arcgis api for js离线部署烦恼吗?来吧,看这边文章就对啦。
一、离线部署好处
首先我们说一下为什么明明可以在线调用arcgis api 为什么要离线部署呢。
1.离线部署可以在没有网络的时候使用(但是你要加载在线地图服务的话就必须要连接网络啦)。
2.离线部署相比在线调用速度更快,因为只需从本地加载不需要经过网络。
二、本文方法和部署到服务器方法对比
1.说起arcgis api for js 的离线部署,一般都会将api文件部署到IIS或者Tomcat服务器上,这样做的最大好处是你的网页文件可以存放在任何位置,不需要和api接口文件放在一起,但是坏处就是需要先安装服务器,还需要一些配置,对于新手来说不太友好,且过程较为繁琐。如果你想看部署到服务器的过程的话请进去看吧,嘻嘻,我师兄的文章(https://blog.csdn.net/yy284872497/article/details/78878435)
2.本文方法的一个小坏处就是需要将api文件和你的网页文件放在一个目录下(其实这个没什么影响啦),最大的好处就是简单、简单、简单!简单啊朋友们,心动嘛?好的嘛 ,开始啦!
三、api文件下载
1.首先先到百度搜索 arcgis api for js,进入官网。
2.找到Get the api按钮,如图所示:
3.找到下载页面,选择你想要的版本进行下载,如图所示:(注意下载的时候需要有arcgis的账号,按照提示注册即可)
四、离线配置
1、首先将你现在的文件解压,然后进去找到以你的api版本号命名的文件夹,我的版本是4.1.0,所以我打开4.1.0这个文件夹,文件夹里面的内容如下:
2.将4.1.0这个文件夹拷贝出来(也可以不拷贝出来,就在原位置操作),随便放在一个位置,然后把文件夹名字改成你想要的名字(不改也可以),这里我将文件夹名字改成“whe”。
3.打开whe文件夹,找到并打开init.js文件和dojo文件夹下的dojo.js文件,crtl+f搜索找到[HOSTNAME_AND_PATH_TO_JSAPI]这串文字,然后将包含这串文字的引号里面里的内容用"你修改的文件夹名字/dojo"替换,这里我用"whe/dojo"替换,好啦,大功告成了,让我们来测试一下吧!
五、Test
本文测试的是没有使用dojo的情况,如果要使用Dojo的话,请将你的网页在IDEA中打开,因为IDEA为自动建立一个站点,其实IIS和Tomcat都是建立了一个站点。
1.首先在whe文件夹的同一目录中新建一个名为test的txt文件,然后打开api官网,在Sample code选项卡中点击Intro to SceneView,然后将里面的代码复制到你的txt文件中,然后把下图一的内容用下图二中的内容代替,注意里面的whe内容用你修改的文件夹的名字代替哦。然后就可以运行试一试啦。
2.这是我的代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Intro to SceneView - Create a 3D map</title>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="whe/esri/css/main.css">
<script src="whe/init.js"></script>
<script>
require([
"esri/Map",
"esri/views/SceneView"
], function(Map, SceneView){
var map = new Map({
basemap: "streets",
ground: "world-elevation"
});
var view = new SceneView({
container: "viewDiv", // Reference to the scene div created in step 5
map: map, // Reference to the map object created before the scene
scale: 50000000, // Sets the initial scale to 1:50,000,000
center: [-101.17, 21.78] // Sets the center point of view with lon/lat
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
3.效果图