下载
- 去ArcGIS for Developer ( https://developers.arcgis.com/sign-in) 注册一个帐号,如果提示所属区域无法注册,请准备梯子,再进入注册。
- 进入https://developers.arcgis.com/downloads/apis-and-sdks?product=javascript,会看下如下界面,下载自己想要的版本就可以了,其中API就是离线部署包,Document是离线帮助文档,根据需要下载。
下载列表
3.如果找不到梯子,或其他原因无法下载,可以去我的网盘下载4.11的版本 ,链接:https://pan.baidu.com/s/1zhoRHtrJGIaXkJ9iFSsofw 提取码:9nsi
部署
本文使用IIS为例子进行部署,其他的Web容器部署也类似。
- 在IIS中添加网站,并设置好物理路径。
- 将下载的离线部署包解压,复制其中的arcgis_js_api文件夹到IIS新添加网站的物理路径的文件夹中。
- 分别打开\arcgis_js_api\library\4.11\dojo\dojo.js和\arcgis_js_api\library\4.11\init.js这两个js文件,找打其中的
[HOSTNAME_AND_PATH_TO_JSAPI]将其替换为你的网站路径,比如www.example.com/arcgis_js_api/library/4.11/,注意最后那个斜杆别漏掉了。 - 在IIS中设置站点的MIME类型,将以下几个加入
| 扩展名 | MIME类型 |
|---|---|
| .ttf | application/octet-stream |
| .wasm | application/wasm |
| .woff | application/font-woff |
| .woff2 | application/font-woff2 |
| .wsv | application/octet-stream |
设置站点MIME类型
5.搞定完这些,启动网站。
测试
复制如下代码,并修改其中的引用地址,然后用浏览器打开,如果能看到地图,就表示部署成功了,后续就开心的用自己的部署的api开心的码代码了。
<!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>Test Map</title>
<!-- 将以下引用地址替换为刚才部署的地址-->
< link rel="stylesheet" href="http://www.example.com/arcgis_js_api/library/4.11/esri/themes/light/main.css" />
<link rel="stylesheet" href="https://www.example.com/arcgis_js_api/library/4.11/dijit/themes/claro/claro.css" />
<style>
html, body, #viewDiv {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
</style>
<!-- 将以下引用地址替换为你刚才部署的地址-->
<script src="https://www.example.com/arcgis_js_api/library/4.11/dojo/dojo.js"> </script>
<script>
var myMap, view;
require([ "esri/Basemap",
"esri/layers/TileLayer",
"esri/Map",
"esri/views/MapView" ], function (Basemap, TileLayer, Map, MapView){
var layer = new TileLayer({
url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"
});
var customBasemap = new Basemap({
baseLayers: [layer],
title: "Custom Basemap",
id: "myBasemap"
});
myMap = new Map({
basemap: customBasemap
});
view = new MapView({
center: [-111.87, 40.57], // long, lat
container: "viewDiv",
map: myMap,
zoom: 6
});
});
</script>
</head>
<body class="claro">
<div id="viewDiv"></div>
</body>
</html>
浏览器打开如下地图界面:
测试界面