tomcat 部署本地Arcgis Api

在办公室我听着歌静悄悄的写着代码,当我还沉浸音乐中。

“小肖啊,后面有个项目有用到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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容