ArcGIS api for JavaScript+EasyUI+Spring 构建平台框架
背景
工作了7、8年，之前一直在上海从事GIS方面工作，后因家庭原因离开了上海。目前在家里一家想引入GIS业务的测绘公司工作。我本人做数据处理出身、后转项目管理，唯独不能进行开发，结合现有情况感觉公司目前必须有一套成型GIS软件框架。自此立贴准备做GIS软件框架（无编程基础，有GIS思维，不要笑我）。
预期
框架分两大块，包括业务部分和地图部分。
业务部分主要实现功能目录菜单，点击菜单能进入各个模块。各个模块能进行带条件的查询，查询结果以图表方式展现。
图形部分主要是地图的常用功能，包括地图的浏览、图层列表查看控制、图例等常用空间加载。地图和业务部分的关联联动等。
准备
咨询了一圈同事基本把框架确定下来了，此处是最初的想法也决定了后续努力的方向，所以还是比较慎重的问了之前的同事。
业务部分采用 spring（后端）+ easyui（前端）
地图部分 arcgis api for js
因为地图部分功能较为简单所以没有采用前后端分离的方式，等老板招开发人员了再考虑做前后端分离。
业务部分嘛，采用的平台据说也不是最好的，但是上手快，对于我这样的菜鸟更容易应对。
操作思路
循序渐进的学习方式能打下很好的基础，但并不能以最快的速度得到结果。我是以结果为导向的方式进行扩展学习。以地图前端开发为例，我是先看arcgis api for js的样例代码，看的一头雾水后进而去找出为什么看不懂，例如不知道html、css、dom等是什么、js的语法规则等。一顿恶补后再回来看直到能看懂并且能改写代码为止。
学习资源
ArcGIS api for JavaScript
样例代码：https://developers.arcgis.com/javascript/latest/sample-code/index.html
API:https://developers.arcgis.com/javascript/latest/api-reference/index.html
地图上的东西这里都有，直接调用就能实现，只要搞清楚怎么用就OK。
JavaScript
http://www.w3school.com.cn/js/index.asp
中文版，英文版都有。像html css这些在 W3C网站上都能找到学习的资源。
扫描二维码关注公众号，回复：
4784516 查看本文章
EasyUI
看别人帖子，git上下载别人代码看。
Spring
对我来说是最难的，只能一点一点来。找了别人代码死活运行不起来，而且看不懂，各种问题。最后放弃去看别人代码，直接翻书去了，从机制看起。
目前实现的代码
开发工具使用的ide,拼凑起来的代码，都是前端的，需要easyui运行环境
<!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://localhost/arcgis_js_api/library/4.6/dijit/themes/claro/claro.css" />
<link rel="stylesheet" href="http://localhost/arcgis_js_api/library/4.6/esri/css/main.css" />
<script src="http://localhost/arcgis_js_api/library/4.6/dojo/dojo.js"></script>
<meta charset="UTF-8">
<title>EasyUI入门——创建EasyUI的Dialog</title>
<!-- 引入JQuery -->
<script type="text/javascript" src="./jquery-easyui-1.7.0/jquery.min.js"></script>
<!-- 引入EasyUI -->
<script type="text/javascript" src="./jquery-easyui-1.7.0/jquery.easyui.min.js"></script>
<!-- 引入EasyUI的中文国际化js，让EasyUI支持中文 -->
<script type="text/javascript" src="./jquery-easyui-1.7.0/locale/easyui-lang-zh_CN.js"></script>
<!-- 引入EasyUI的样式文件-->
<link rel="stylesheet" href="./jquery-easyui-1.7.0/themes/default/easyui.css" type="text/css"/>
<!-- 引入EasyUI的图标样式文件-->
<link rel="stylesheet" href="./jquery-easyui-1.7.0/themes/icon.css" type="text/css"/>
<script type="text/javascript">
function showcontent(language){
$('#content').html('Introduction to ' + language + ' language');
}
</script>
</head>
<body>
<div style="margin:0px 0;"></div>
<div class="easyui-layout" data-options="fit:true";>
<div data-options="region:'south',split:true" style="height:50px;"></div>
<div id="viewDiv"data-options="region:'east',split:true" title="地图" style="width:900px;">
<ul class="easyui-tree" data-options="url:'tree_data1.json',method:'get',animate:true,dnd:true"></ul>
</div>
<div data-options="region:'west',split:true" title="功能菜单" style="width:200px;">
<div class="easyui-accordion" data-options="fit:true,border:false">
<div title="功能1" style="padding:10px;">
content1
</div>
<div title="功能1" data-options="selected:true" style="padding:10px;">
content2
</div>
<div title="功能1" style="padding:10px">
content3
</div>
</div>
</div>
<div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">
<div class="easyui-tabs" data-options="fit:true,border:false,plain:true">
<div title="About" data-options="href:'_content.html'" style="padding:10px"></div>
<div title="DataGrid" style="padding:5px">
<table class="easyui-datagrid"
data-options="url:'datagrid_data1.json',method:'get',singleSelect:true,fit:true,fitColumns:true">
<thead>
<tr>
<th data-options="field:'itemid'" width="80">序号</th>
<th data-options="field:'productid'" width="100">产品编号</th>
<th data-options="field:'listprice',align:'right'" width="80">产品名称</th>
<th data-options="field:'unitcost',align:'right'" width="80">产品价格</th>
<th data-options="field:'attr1'" width="150">产品属性</th>
<th data-options="field:'status',align:'center'" width="50">状态</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
<script>
var myMap, view,mytoggle,yx,emap,mycompass,mylegend,myGroupLayer,myscalebar;
require([
"esri/Basemap",
"esri/layers/TileLayer",
"esri/Map",
"esri/views/MapView",
"esri/widgets/BasemapToggle",
"esri/widgets/Compass",
"esri/widgets/Legend",
"esri/widgets/ScaleBar",
"dojo/domReady!"
], function (Basemap, TileLayer, Map, MapView,BasemapToggle,Compass,Legend,ScaleBar){
// --------------------------------------------------------------------
// 添加底图服务，并添加底图切换功能,指南针,图例以及比例尺
// --------------------------------------------------------------------
var raster = new TileLayer({
url: "http://192.168.0.223:6080/arcgis/rest/services/YX/raster/MapServer"
});
yx = new Basemap({
baseLayers: [raster],
title: "Custom Basemap",
id: "myBasemap"
});
myMap = new Map({
basemap: yx
});
view = new MapView({
center: [-111.87, 40.57], // long, lat
container: "viewDiv",
map: myMap,
zoom: 6
});
var dzdt = new TileLayer({
url: "http://192.168.0.223:6080/arcgis/rest/services/BaseMap/MapServer"
});
emap = new Basemap({
baseLayers: [dzdt],
title: "Custom Basemap1",
id: "myBasemap1"
});
mytoggle = new BasemapToggle({
// 2 - Set properties
view: view, // view that provides access to the map's 'topo' basemap
nextBasemap: emap // allows for toggling to the 'hybrid' basemap
});
// Add widget to the top right corner of the view
view.ui.add(mytoggle, "bottom-right");
mycompass = new Compass({
view: view
});
view.ui.add(mycompass, "top-left");
mylegend = new Legend({
view: view
});
view.ui.add(mylegend, "bottom-left");
myscalebar = new ScaleBar({
view: view,
unit: "dual" // The scale bar displays both metric and non-metric units.
});
// Add the widget to the bottom left corner of the view
view.ui.add(myscalebar, {
position: "bottom-left"
});
});
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/GroupLayer",
"esri/layers/MapImageLayer",
"esri/widgets/LayerList"
], function(
Map, MapView, GroupLayer, MapImageLayer, LayerList
) {
// --------------------------------------------------------------------
// 添加图层目录树
// --------------------------------------------------------------------
// Create layer showing sample data of the United States.
var FFT = new MapImageLayer({
url: "http://192.168.0.223:6080/arcgis/rest/services/JCDL/FFT/MapServer",
title: "分幅图"
});
// Create layer showing sample census data of the United States.
// Set visibility to false so it's not visible on startup.
var ZHGX = new MapImageLayer({
url: "http://192.168.0.223:6080/arcgis/rest/services/ZHGX/ZHGX/MapServer",
title: "综合管线",
visible: false
});
// Create GroupLayer with the two MapImageLayers created above
// as children layers.
myGroupLayer = new GroupLayer({
title: "图层列表",
visible: true,
visibilityMode: "exclusive",
layers: [ZHGX, FFT],
opacity: 0.75
});
// Create a map and add the group layer to it
myMap.layers = [myGroupLayer];
// Add the map to a MapView
// Creates actions in the LayerList.
function defineActions(event) {
// The event object contains an item property.
// is is a ListItem referencing the associated layer
// and other properties. You can control the visibility of the
// item, its title, and actions using this object.
var item = event.item;
if (item.title === "图层列表") {
// An array of objects defining actions to place in the LayerList.
// By making this array two-dimensional, you can separate similar
// actions into separate groups with a breaking line.
item.actionsSections = [
[{
title: "全景视图",
className: "esri-icon-zoom-out-fixed",
id: "full-extent"
}, {
title: "地图服务信息",
className: "esri-icon-description",
id: "information"
}],
[{
title: "Increase opacity",
className: "esri-icon-up",
id: "increase-opacity"
}, {
title: "Decrease opacity",
className: "esri-icon-down",
id: "decrease-opacity"
}]
];
}
}
view.when(function() {
// Create the LayerList widget with the associated actions
// and add it to the top-right corner of the view.
var layerList = new LayerList({
view: view,
// executes for each ListItem in the LayerList
listItemCreatedFunction: defineActions
});
// Event listener that fires each time an action is triggered
layerList.on("trigger-action", function(event) {
// The layer visible in the view at the time of the trigger.
var visibleLayer = ZHGX.visible ?
ZHGX : FFT;
// Capture the action id.
var id = event.action.id;
if (id === "full-extent") {
// if the full-extent action is triggered then navigate
// to the full extent of the visible layer
view.goTo(visibleLayer.fullExtent);
} else if (id === "information") {
// if the information action is triggered, then
// open the item details page of the service layer
window.open(visibleLayer.url);
} else if (id === "increase-opacity") {
// if the increase-opacity action is triggered, then
// increase the opacity of the GroupLayer by 0.25
if (myGroupLayer.opacity < 1) {
myGroupLayer.opacity += 0.25;
}
} else if (id === "decrease-opacity") {
// if the decrease-opacity action is triggered, then
// decrease the opacity of the GroupLayer by 0.25
if (myGroupLayer.opacity > 0) {
myGroupLayer.opacity -= 0.25;
}
}
});
// Add widget to the top right corner of the view
view.ui.add(layerList, "top-right");
});
});
</script>
</body>
</html>