在办公室我听着歌静悄悄的写着代码，当我还沉浸音乐中。
“小肖啊，后面有个项目有用到arcgis技术，你负责arcgis技术研究，后面的项目也由你来开发”，老板突然走过来慢悠悠的说道。
我当时的心情是这样的：
50ae607878a91f7f5574d4bd2f65ec46.jpg
“arcgis是什么鬼。。。。。。”
我忐忑的赶紧用度娘搜了一下arcgis，终于进了arcgis官网https://developers.arcgis.com/javascript/ ，可等半天页面才加载出来。
参照官网的例子写了一个加载地图的Demo，可我等了半天地图才加载出来，“我都不知道这个过程发生了什么？怎么会这么慢？”
Cgqg11jPNv-AOu9IAABG3wSHAGk838.jpg
后来我用谷歌浏览器的Network查看了一下，才发现是页面引用的两个文件：
<link rel="stylesheet" href="https://js.arcgis.com/3.23/esri/css/esri.css">
<script src="https://js.arcgis.com/3.23/"></script>
这俩货加载耗时太长了，“我突然就好像明白了什么。。。。。。”
1465737118_600x600.png
“这玩意在墙外面呀。。。。。。”
50ae607878a91f7f5574d4bd2f65ec46.jpg
于是我决定我要搭建本地的arcgis Api，光说不练假把式，撸起袖子就开干。
第一步：下载arcgis_js_v320_api.zip与arcgis_js_v320_sdk.zip这个两个文件包。
第二步：在tomcat中的webapps目录下新建文件夹arcgis_js_api。
第三步：将arcgis_js_v320_sdk.zip包中sdk文件夹与arcgis_js_v320_api.zip包中library文件夹复制到步骤二中新建的arcgis_js_api文件夹中。
第四步：打开arcgis_js_api\library\3.20\3.20\init.js将“[HOSTNAME_AND_PATH_TO_JSAPI]”查找替换为localhost:8888/arcgis_js_api/library/3.20/3.20/。
第五步：打开arcgis_js_api\library\3.20\3.20\dojo\dojo.js将“[HOSTNAME_AND_PATH_TO_JSAPI]”查找替换为localhost:8888/arcgis_js_api/library/3.20/3.20/。
注：记得将localhost:8888换成自己的地址
以下是所有的实现代码：
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>arcgis</title>
<link rel="stylesheet" href="http://localhost:8888/arcgis_js_api/library/3.20/3.20/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://localhost:8888/arcgis_js_api/library/3.20/3.20/esri/css/esri.css">
<script src="http://localhost:8888/arcgis_js_api/library/3.20/3.20/init.js"></script>
<script type="text/javascript">
require([
"esri/map",
"esri/layers/ArcGISTiledMapServiceLayer",
"dojo/parser",
"dojo/domReady!"
], function(
Map,ArcGISTiledMapServiceLayer,parser
) {
parser.parse();
var map = new Map("map", {
//去掉logo
logo:false,
center: [116.250766,29.159637],
zoom:10
});
var url ="http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer";
var layer = new ArcGISTiledMapServiceLayer(url);
map.addLayer(layer);
map.on("load", function() {
var center = new Point(116.250766, 29.159637, new SpatialReference({wkid:4326}));
//缩放定位
map.centerAndZoom(center, 10);
});
});
</script>
</head>
<body class="claro">
<div id="map" style="width:100%;height: 400px;border: 1px blue solid;">
</div>
</body>
</html>
出现如下图所示，说明部署成功：
image.png
arcgis Api 3.20版本库下载地址：https://pan.baidu.com/s/1ggX7KA3 提取码：j5vz
网友评论