ArcGIS api for JavaScript+EasyUI+Spring 構建平臺框架
阿新 • • 發佈：2019-01-05
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網站上都能找到學習的資源。
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>