eclipse搭建ArcGIS_API_JS的maven+mvc运行环境
一、说明
为了学习使用ArcGIS_API_FOR_Javascript，需要将api部署到服务器上。这里虽然是js，但是不同于之前学习HTML可以在本地创建文件夹项目直接使用，这个api需要服务器环境。于是，创建一个web项目，服务器使用tomcat。工具：maven，eclipse。因为用了maven，本地就可以不用装tomcat服务器了，直接用maven里面的tomcat插件。
二、eclipse
在你的电脑上装上一个eclipse,一般你看这篇文的时候你电脑上都会有一个版本不落后的eclipse了。eclipse上集成一下maven
eclipse一个集成的开发环境，在开发过程中用的很广泛，下面看如何在eclipse中使用maven，在eclipse的4.4以上的版本加入了对maven的支持，即不需要安装maven插件，但对4.4以下的版本需要自己安装插件，可以在下面的网址：http://marketplace.eclipse.org/content/maven-integration-eclipse-luna，去了解安装过程，安装完成之后
反正我的eclipse是已经集成maven插件。这样一来，我就能在开发工具中使用maven了。
三、maven
在你的机子上装好一个maven。装好后配置好本地仓库镜像仓库等等一些关键项。maven的安装配置不算太难。网上搜一下安装maven,文章一大堆。加到系统环境变量中，配置本地仓库位置，设置一个镜像仓库，也就这几个比较关键的要点。由于我是在公司里面玩，所以settings.xml里面还要配置一下代理,在proxies里面。
*镜像可要选一个好的。这里推荐阿里云的镜像。我之前使用了很早些时候的配置文件，结果后来包一直下不完整，项目都启不了。在网络问题，代理问题，仓库问题这里面直转圈，结果才定位到是镜像仓库问题。所以镜像仓库就只设这一个就好了，够用的。
<mirror>
<id>alimaven</id>
<name>aliyun maven</name>
<url>http://maven.aliyun.com/nexus/content/groups/public/</url>
<mirrorOf>central</mirrorOf>
</mirror>
四、在eclipse中配置maven
有了maven,eclipse中也有了插件，现在就可以选定自己安装的那个maven了。preferences>>maven>>installations,在这个安装里面呢，我选择自己本地装好的那个maven，不要用它自带的。
完成之后，finish,列表多出了新增的maven，勾选上，Apply。
之后，用户设置里面，配置下仓库的位置。
Global Settings和User settings有什么差我也不是很懂，反正我安装maven就只有一个配置文件，都选它喽。
选完后eclipse会根据配置文件自动读取出本地仓库的位置。
以上步骤，只要不是村里上个月刚通2G网，其实应该大家都会的。
完事后。Apply and Close。结束工具配置。开始创建测试项目。
五、搭建服务器。
搭建服务器，其实就是创建一个web项目啦，web项目部署到tomcat上，我们用maven来创建，tomcat也用maven插件，这样就不用自己本地再安装tomcat了，也不用再添加项目到本地tomcat等等一系列步骤，用一个maven命令就可以直接开启服务器。
1）创建一个maven web 项目
File>>new>>other,搜一下maven,选择创建maven项目，next.
勾选跳过原型，选好项目存放的位置。下一步。
我之前没去掉勾，用原型创建项目，之后是选web app，
然后项目各种问题，又是少这个东西，又是版本什么什么对不上，要这边设置，那边配置，自己晕头转向结果还是没建好。后来看视频maven建web项目，人家老师建项目，勾上这个不用原型，后面自己加个web.xml就好了，思路又清晰，项目也好看，果断采用。
接回来， 勾选跳过原型，进入正经的创建maven项目
自己填好组命（一般是公司域名反写，我这个是自己玩的，跟公司项目没关系），工程命，项目名称，项目描述神马的，有的选填，有的必填，自己搞吧。重点，因为是web项目选打成war包，不要打成jar包。finish。
maven就把项目建出来了，结构又漂亮。这时会有个红叉，porm文件里，说少了web.xml。找个以前做过的web项目，拷个过去。
连同WEB-INF这个文件夹，这样就完整了,porm也没话说了，这时的项目结构就是一个如假包换的web项目了。下面会贴出一个比较干净原始的web.xml,其实要也主要是要项目结构完整，文件里面也只是个文件头重要而已。
项目的java运行环境 jre你也可以自己设置一下，设成1.8（如上图），这样之后你用spring相关的框架时，用4.x版本才不会报错，不然你要是1.7或更低的运行环境，spring要用3.X版本的。自己斟酌着办吧。
方法就是也简单，点着它右击属性，选下你的jdk就好了。
web.xml，看好了。这边是有设置欢迎页面的。
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
<display-name>springmvcfirst</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>
</web-app>
2）创建一个欢迎的 jsp 页面
既然我们已经有了一个web项目，那就创建一个页面访问一下。在web项目的根目录下（webapp），创建一个jsp页面。你可以右击这个文件夹，new>>other… 搜jsp，然后应该就会了吧。
我贴出我的简单的首页，改了下编码为utf-8，内容就一句。
<%@ 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>index</title>
</head>
<body>
This is a index page
</body>
</html>
文件位置如下
3）给maven加入插件
页面也有了，现在将项目部署至tomcat服务器上。在maven中使用tomcat插件，这样本地无需安装了，项目部署的时候也不用指定来指定去的，挺麻烦的。
1、加入maven编译器插件
打开porm.xml，点中任意行，右击，maven>>add plugin,搜compile，选中搜索结果，OK
如果你之前没有用过，本地仓库没有，你可能搜不出来。没关系，你可以把我最后贴出的porm粘进去，反正maven只根据你的porm配置为你管理项目。这边将java编译器版本设置1.8，
完成后更新一下。右击你的项目
，maven>>update project。
是的，你会发现，jre变成java se 1.8,
结果我们之前修改java运行环境为jdk1.8的操作有点多余了。尴尬。
2、加入tomcat插件
同样加入插件的操作跟上面一样，右击，maven>>add plugin,搜tomcat,选中结果，ok
没有的话，还是也可以用我下面的porm。当然你也可以去tomcat的官网找到它的maven插件配置方法，把那段粘进你的porm里面，效果一样的。我这边用的是tomcat7插件。
这里配置一下服务器的端口号为8081（不配置默认为8080），然后是（项目部署）路径，设成/，意味直接放在服务器根目录下，这样以后访问项目就不用再加项目名称，直接访问服务器根目录即可。不设置的话会默认为服务器根目录下的项目名称，也就是说今后访问会是
http://localhost:8080/ArcGIS_API_MVC
.
而设置完成后就可以直接这样访问。（少打几个字嘛）
http://localhost:8081/
下面是我的porm.xml
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.small</groupId>
<artifactId>ArcGIS_API_MVC</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>war</packaging>
<name>ArcGIS_API_MVC</name>
<description>学习ArcGIS_API_FOR_JS创建的运行环境</description>
<build>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.1</version>
<configuration>
<source>1.8</source>
<target>1.8</target>
</configuration>
</plugin>
<plugin>
<groupId>org.apache.tomcat.maven</groupId>
<artifactId>tomcat7-maven-plugin</artifactId>
<version>2.2</version>
<configuration>
<port>8081</port>
<path>/</path>
</configuration>
</plugin>
</plugins>
</build>
</project>
4）访问项目
万事俱备，开启服务器，访问一下试试。
先更新下项目，右击项目，maven>>update project(前面好像说过了)。
运行。右击项目，run as >>4 maven build…。name不理它，命令是 tomcat7:run。然后就可以Run了。以后你可以用3 maven build选择以前执行过的命令（build过2条以上命令的时候）。
控制台执行结果，我们的web项目（如今已经打成war包）运行在这个地方了
前面说过我们给项目设置过欢迎界面，所以直接访问服务器上项目根目录，会跳转至欢迎页面。也就是index.jsp。而我们把项目直接部在服务器根目录上，所以现在直接访问
http://localhost:8081/
就会进到index.jsp了
六、加入springmvc
已经完成了web项目的构建，现在将其变成升级一下，变成mvc模式，这边选择springmvc的框架来帮助我们快速构建这个结构。
1）添加mvc依赖
现在先添加相关依赖，方法是和添加插件相似，只不过这次是添加依赖。
打开porm,点击任意行，右击，maven>>add Dependency, 搜spring-web,选择webmvc那个，我这是4.X版本的。当然，没有的话，我下面给出porm配置的片段，你可以粘进去效果一样。
我们只加了这一个包的配置，保存一下文件，左边项目结构中，maven就会帮我们把该包所有相关依赖全给加进去了。什么bean、core、aop……
2）加入一个Controller
建在src/main/java这个source文件夹下。右击，new>>class
包名类名随意吧。
简单一点，controller过滤demo开头的请求，里面就一个处理index请求的方法。返回的是一个字符串demo，那是对应的view视图的名称。springmvc的内容这边不多说了。默认你是会的。
package com.small.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
@RequestMapping("/demo")
public class DemoController {
@RequestMapping("/index")
public String index(){
return "demo";
}
}
3）配置mvc
springmvc的配置文件就放置在src/main/resources下，名字就叫springmvc.xml。视图的前缀是‘/WEB-INF/view/’，后缀是‘.jsp’,因此，对应我们上面的contoller返回的视图，应该是建在wen-inf下view文件夹下的demo.jsp
<?xml version="1.0" encoding="UTF-8"?>
<!--
- Application context definition for JPetStore's business layer.
- Contains bean references to the transaction manager and to the DAOs in
- dataAccessContext-local/jta.xml (see web.xml's "contextConfigLocation").
-->
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:aop="http://www.springframework.org/schema/aop"
xmlns:tx="http://www.springframework.org/schema/tx"
xsi:schemaLocation="
http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-3.2.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-3.2.xsd
http://www.springframework.org/schema/aop
http://www.springframework.org/schema/aop/spring-aop-3.2.xsd
http://www.springframework.org/schema/tx
http://www.springframework.org/schema/tx/spring-tx-3.2.xsd"
>
<!-- 配置扫描的包 -->
<context:component-scan base-package="com.small.controller" />
<!-- 注册HandlerMapper、HandlerAdapter两个映射类 -->
<mvc:annotation-driven />
<!-- 访问静态资源 -->
<mvc:default-servlet-handler />
<!-- 视图解析器 -->
<bean
class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix" value="/WEB-INF/view/"></property>
<property name="suffix" value=".jsp"></property>
</bean>
</beans>
现在的结构是这样子的。
最后在web.xml配上前端控制器，DispatcherServlet，加载的mvc配置文件上面已经准备好放在resources下，那是个source文件夹，所以我们可以用classpath来定位文件;过滤路径是/，就是把所有请求都交给这个控制器，让它对应将请求交给controller。
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
<display-name>springmvcfirst</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>springmvc</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:springmvc.xml</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>springmvc</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
</web-app>
4）创建视图demo.jsp
根据我们的mvc配置文件，视图都统一放置在wen-inf下的view文件夹里。所以把现在创建一下这个demo.jsp。我直接把index.jsp复制，改了下名和内容。
5）运行测试
都准备好了，可以开启服务器试试一下。建议保存好后，更新一下，maven>>update project.然后run as >> maven build,可以选之前用过的那个命令。run！
在浏览器中访问的是controller可以处理的那个请求，也就是说url现在是
http://localhost:8081/demo/index
七、加入ArcGIS_API_FOR_JAVASCRIPT
做了一通都跟ArcGIS没有关系，不过环境现在准备好了。只要加入一下就可以了。
去下个ArcGIS_API_FOR_JAVASCRIPT。结构应该是这样的。
进到有 init.js 这个文件夹下，我手上这个是3.14版本的。
打开它，搜一下hostname
可以看到，这句话其实是在拼接一个url请求路径的字符串。因为arcgis_api是以dojo为基础的，遇到需要的模块，再发送请求去加载对应的js资源进来，(⊙v⊙)嗯还挺不错的。而这请求，自然是如你所见的http……发去服务器端的，而不是请求你本地磁盘上的资源。那这个 [HOSTNAME_AND_PATH_TO_JSAPI] 替换成什么呢，很简单，要求你换完url后，连同后面的dojo连起来要能进到到上图中的dojo文件夹里去，就这么个规则。
1）部署资源文件到服务器
我把上上图中的资源全复制了，在我的web项目根目录(webapp)下建个resources文件夹，意思是用来放置静态资源文件的，里面再放个ArcGIS_API_JS的文件夹，把拷贝的内容放置进去。
因此想要访问到这个dojo文件夹应该怎么写url呢？简单，它就是项目下的resources下的ArcGIS_API_JS下的dojo。而访问我们的项目就是直接访问服务器根目录就行了。因此，最终的url就是
http://localhost:8081/resources/ArcGIS_API_JS/dojo
知道了就替换吧。最终结果应该是这样的。
保存，init.js替换好了，还有另一个，上面说的那个dojo文件夹下的dojo.js，也是一样，搜hostname，替换类似位置。
2）创建测试视图
资源也都安排上了，测试一下。我这边将前面那个简单的demo.jsp修改一下，内容部分改成一个测试用的sample的内容。引用资源文件的时候可以用下basepath这个变量。
demo.jsp现在是这样的：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My fisrt ArcGis Map</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="<%=basePath%>resources/ArcGIS_JS_API/dijit/themes/tundra/tundra.css"/>
<script type="text/javascript" src="<%=basePath%>resources/ArcGIS_JS_API/init.js"></script>
<link rel="stylesheet" type="text/css" href="<%=basePath%>resources/ArcGIS_JS_API/esri/css/esri.css" />
</head>
<body class="tundra">
This is Demo page
<div class="info"></div>
<div id="arcgisDiv" style="width:900px; height:600px; border:1px solid #000;"></div>
<div id="div1"></div>
<div id="div2"></div>
</body>
<script type="text/javascript">
require(['esri/map', 'dojo/dom'], function(Map, dom){
const myMap = new Map("arcgisDiv",{logo : true,});
const myTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer");
myMap.addLayer(myTiledMapServiceLayer);
myMap.setZoom(4);
const div1 = dom.byId('div1');
const div2 = dom.byId('div2');
dojo.connect(myMap, 'onMouseMove', function(e){
const mp = e.mapPoint;
const sp = e.screenPoint;
div1.innerHTML = mp.x + '/' + sp.x;
div2.innerHTML = mp.x + '/' + sp.x;
});
});
</script>
</html>
3）浏览器访问测试
好，demo.jsp改完后，还是原来用demo/index这个路径来访问测试一下。
没什么问题，以后就可以编辑这个页面来学习api了。当然，你也可以不用这样的方式 经mvc后台处理再转发到这个页面，你完全可以在项目根下建个html或者jsp页面，然后直接访问 http://localhost:8081/xx.html
也是很简单的。
扫一扫
200
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
