ArcGisArcGIS API for JavaScript开发环境搭建及第一个实例demo-睿恒知识库

文档版本（1）
文档附件（4）

作者:李豪山于 2017年06月23日 发布在分类 / 开发技术 / GIS 下,并于 2017年06月23日编辑

ArcGisArcGIS API for JavaScript开发环境搭建及第一个实例demo

480

0

前言：

4.x版本和3.x版本的目录结构和文件名称都有一些变化，网上基本上都是3.x的示例对4.x是不可以直接使用，4.x版本对底层进行了大的改动，这儿不详细介绍，下面进入我们的开发之旅、这里我用的是4.2版本的，总之，不要低于4.0；

ArcGis For JavaScript 4.2 API网址：

https://developers.arcgis.com/javascript/latest/sample-code/get-started-mapview/index.html

1.下载地址：

链接: https://pan.baidu.com/s/1eSnEme2 密码: r2tb

2.这里以Java Web 工程为例，

在工程WebRoot下创建文件夹 arcgis_js；

3.解压 arcgis_js_v42_api.zip ，拷贝 arcgis_js_v42_api\arcgis_js_api\library\4.2\4.2 下的内容到 WebRoot/arcgis_js目录下；

4.修改arcgis_js\init.js 和 arcgis_js\dojo\dojo.js 两个文件，替换 [HOSTNAME_AND_PATH_TO_JSAPI]为 localhost:8080/ArcgisForJs/arcgis_js/ ，

格式：IP:web服务器端口/工程名/创建的文件夹arcgis_js

5.以上步骤完成后，即可调用ArcGis For JavaScript API；

6.新建jsp页面或者html页面，引用所需js文件及css文件，一般基本的引入如下图所示三个

7.编写一个div块，用于显示地图用的

8.开始编写加载地图的相应JS代码

9.require关键字块是用来加载JS模块，就是JAVA中导包的概念；

function括号中传的是require加载的JS模块类，以便在方法体内实例化对象使用

可通过构造函数的方式修改对象的属性值

10.下面贴出全部html代码：

01<strong><%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
02<%
03String path = request.getContextPath();
04String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
05%>
06 
07<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
08<html>
09  <head>
10    <base href="<%=basePath%>">
11     <title>My fisrt ArcGis Map</title>
12      
13     <link rel="stylesheet" type="text/css" href="arcgis_js/dijit/themes/claro/claro.css"/>
14     <script type="text/javascript" src="arcgis_js/init.js"></script>
15     <link rel="stylesheet" type="text/css" href="arcgis_js/esri/css/main.css" />
16      
17  <style>
18    html,
19    body,
20    #viewDiv {
21      padding: 0;
22      margin: 0;
23      height: 100%;
24      width: 100%;
25    }
26  </style>
27 
28  <script>
29  //全局require（）函数（由Dojo提供）用于加载模块
30    require([
31        "esri/Map",//使用新的地图创建Map，这是从esri/Map模块加载的Map类的引用
32        "esri/views/MapView",//创建2D视图(SceneView为3D视图)
33        "esri/layers/FeatureLayer",
34        "dojo/domReady!"
35      ],
36      function(Map,MapView,FeatureLayer){
37            //可以指定地图属性，例如basemap，将对象传递给Map构造函数
38            var map = new Map({
39                basemap: "osm"
40            });
41            var view = new MapView({
42              container: "viewDiv",//显示地图的div块
43              map: map,
44              zoom: 4,  //缩放比例
45              center: [116, 35] //地图显示中心点坐标
46            });
47            var featureLayer = new FeatureLayer({
48              //已发布的地图服务    
49              url: "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer"
50            });
51            map.add(featureLayer);
52             
53      });
54  </script>
55</head>
56 
57<body>
58  <div id="viewDiv"></div>
59</body>
60 
61</html></strong>

最后运行效果、如下图：

访问权限

创建人	李豪山
文档编辑权限	创建者私有
文档阅读权限	来自分类
分类阅读权限	所有人
分类编辑权限	所有人
分类审核权限	无

标签

arcgis arcgis_js 地图文件加载版本 require 模块创建 request

历史版本

修改日期	修改人	备注
2017-06-23 10:10:03[当前版本]	李豪山	CREAT

附件

PNG

480

0

2017年06月23日 10:10:03 [版本]