前言
为什么离线部署?主要解决访问的性能。
部署方法
- 将下载好的library解压,得到arcgis_js_v338_api文件夹
- 打开\arcgis_js_api\library\3.38\3.38\init.js,找到其中的 “https://[HOSTNAME_AND_PATH_TO_JSAPI]” ,替换为“myserver/arcgis_js_api/library/3.38/3.38/”
- 打开\arcgis_js_api\library\3.38\3.38\dojo\dojo.js,找到其中的 “https://[HOSTNAME_AND_PATH_TO_JSAPI]” ,替换为"myserver/arcgis_js_api/library/3.38/3.38/"
(上面的myserver代表服务器地址,如http://localhost:8092,一定是对外提供API的地址)
部署方法
1.程序静态目录下部署,打包比较慢,不利于管理
按照部署方法替换,这时myserver直接是不用写的,为空字符串即可。然后直接将成果拷贝至开发环境的public下,按照如下方法使用即可。
<link rel="stylesheet" href="/arcgis_js_api/library/3.38/3.38/esri/css/esri.css">
<script src="/arcgis_js_api/library/3.38/3.38/init.js"></script>
2.Nginx部署
- 按照部署方法替换,myserver为对外提供API的地址,端口与下面Nginx配置的端口保持一致,如http://www.map.cn:8092(示例而已),然后将API文件拷贝至Nginx的html目录下。
- nginx.conf文件修改
server{
listen 8092;
server_name localhost;
location / {
add_header Access-Control-Allow-Origin * always;
add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
if ($request_method = 'OPTIONS') {
return 204;
}
alias html/api/;#磁盘的目录路径,还可以是 html/api/
autoindex on; #是否开启目录浏览.生产环境为on,部署环境建议为off
}
}
-
访问
-
使用方法
<link rel="stylesheet" href="http://www.map.cn:8092/arcgis_js_api/library/3.38/3.38/esri/css/esri.css">
<script src="http://www.map.cn:8092/arcgis_js_api/library/3.38/3.38/init.js"></script>
测试代码
测试一:
http://localhost:端口号/arcgis_js_api/library/3.38/3.38/init.js
测试二:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple Map</title>
<link rel="stylesheet" type="text/css"
href="http://localhost:8092/arcgis_js_api/library/3.38/3.38/esri/css/esri.css" />
<script type="text/javascript" src="http://localhost:8092/arcgis_js_api/library/3.38/3.38/init.js"></script>
</head>
<div id="mapDiv" style="width:900px; height:600px; border:1px solid #000;" />
<script>
dojo.require("esri.map");
function init() {
const myMap = new esri.Map("mapDiv");
const myTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("https://server.arcgisonline.com/arcgis/rest/services/Elevation/World_Hillshade_Dark/MapServer");
myMap.addLayer(myTiledMapServiceLayer);
}
dojo.addOnLoad(init);
</script>
</body>
</html>