WebGIS 信息系统-系统实现

主界面基本模块

(1 ）平移：单击按钮将鼠标置于平移状态，可用来清除当前图形操作工具的状态。
(2 ）放大： 单击按钮对地图进行放大操作（或者通过鼠标中键进行）。
(3 ）缩小： 单击按钮对地图进行缩小操作（或者通过鼠标中键进行）。
(4 ）全图： 单击按钮显示全图。
(5 ）保存： 单击按钮将发生改变的地图数据更新到数据库。
(6 ）删除： 单击按钮删除地图要素。
(7 ）添加：添加绘制新的道路。
(8 ）属性： 单击查看道路段属性信息。
(9 ）剪切： 选择剪切道路。
(10 ）联合： 联合不同的道路。
(11 ）撤销：撤销之前的操作。
(12 ）恢复：恢复之前的操作。
导人ArcGIS 相关库文件以及功能的关键实现代码如下：

require( [
” esri/urlUtils”,
” esri/map”,
” esri/tasks/GeometryService” ,
” esri/toolbars/edit” ,
” esri/layers/ArcGISTiledMapServiceLayer”,
” esr i/ layers/FeatureLayer",
” esri/graphic”,
” esri/tasks/RouteTask”,
” esri/tasks/RouteParameters” ,
” esri/tasks/FeatureSet”,
dojo/on”,
” di] it/registry”,
” esri/geometry/Extent”,
飞sri/layers/ArcGISDynamicMapServiceLayer ”，
” esri/symbols/PictureMarkerSymbol”,
” dojo/_base/array”,
” dojo/dom”,
” esri/Color”,
” esri/symbols/SimpleMarkerSymbol”,
飞sri/symbols/SimpleLineSymbol ”，
” esri/dijit/editing/Editor",
” esri/dijit/HomeButton”,
” esri/dijit/Measurement”,
” esri/dijit/Directions”,
” esri/dijit/editing/TemplatePicker”,
” esri/config”,
” dojo/i18n!esri/nls/jsapi”,
” dojo/_base/array”,”dojo/parser”,”dojo/keys”,
” dijit/layout/BorderContainer”,”dijit/layout/ContentPane”,
” dijit/TitlePane”,
” dijit/form/CheckBox”,
” di〕it/form/H口rizontalSlider",
” dijit/form/HorizontalRuleLabels”,
” dojo/domReady1 ”
] , function (
urlUtils,
Map, GeometryService, Edit,
ArcGISTiledMapServiceLayer, FeatureLayer,
Graphic,RouteTask, RouteParameters,FeatureSet,on,
registry,Extent,ArcGISDynamicMapServiceLayer,
PictureMarkerSymbol,array,dom,
Color, SimpleMarkerSymbol, SimpleLineSymbol,
Editor, HomeButton,Measurement,Directions,TemplatePicker,
esriConfig, jsapiBundle,
arrayUtils, parser, keys
){
    
    
parser. parse();
／／代理设置
//use a proxy to access the routing service, which requires credits
／ 替urlUtils.addProxyRule({
    
    
urlPref ix ” route.arcgis.com”,
proxyUrl ”/sproxy/

地图基本管理模块

基本GIS 图形操作功能包括多图层显示、放大、缩小、全图显示、鹰眼导航和图层控制
功能，1 .初始化
地图初始化关键代码如下：

map = new Map (”map ”,{
    
    
center: [ 120. 179787 , 30 . 263478],
图8. 4-1 图形操作用例图
zoom : 16,
slider ;”small”,
logo: false,
navigationMode :’classic ’, Extent
( {
    
    xmin: - 20098296, ymin: - 2804413, xmax: 5920428, ym皿： 15813776,
spatia1Reference:{
    
    wkid:S4032}})
var basemap = new esri. layers. ArcGISTiledMapServiceLayer
（” http://cachel. 缸cgisonline.cn/ArcGIS/rest/services/
China1归lineCommunity/MapServer”）；
map.addLayer(bas 四ap);
map.on （勺ayers - add - result”, initEditor);

2. 地图浏览
   地图浏览包括地图放大、缩小、图层控制、鹰眼导航、全图显示、经纬度显示，关键代码如下：

／／地图初始化
function initEditor( evt) {
    
    
map . disableDouble ClickZoom();
／／模版选择器
var templateLayers = arrayUtils. map( evt. layers, function (result) {
    
    
return result. layer;
., ) }
var templatePicker = new TemplatePicker( {
    
    
featureLayers: templateLayers,
grouping: true,
rows. ” auto",
columns : 2
},”templateDiv ”);
templatePicker. startup();
V缸layers = arrayUtils. map( evt. layers, function (result) {
    
    
return {
    
     featureLayer: result. layer } ;
, ) }
var settings = {
    
    
map : map,
templatePicker: templatePicker,
layerlnfos: layers,
toolbarVisible: true,
enableUndoRedo: true,
createOptions : {
    
    
polylineDrawTools : [ Editor. CREA四＿TOOL_FREEl诅ND_POLYLI阻］，
polygonDra旷reals: [
Editor . CREATE＿τ。OL_FREEHAND_POLYGON,
Editor.CREATE TOOL CIRCLE,
Editor.CREATE_TOOL_TRIANGLE,
Editor . CREAτ'E TOOL RECTANGLE
},
toolbarOptions : {
    
    
cutVisible: true,
mergeVisible : true,
reshapeVisible : true
layer Info: {
    
    
showGlobalID : true,
showObjectID: true,
var params = (settings: settings} ;
V缸myEditor = new Editor(p缸ams ，’ editorDiv'};
I I define snapping options
var symbol = new SimpleMarkerSymbol (
SimpleMarkerSymbol. STYLE_ CROSS, 15,
new SimpleLineSymbol(
SimpleLineSymbol. STYLE_ SOLID,
newColor([255, 0, 0, 0 . 5]), 5
null
map. enableSnapping((
snapPointSymbol: symbol,
tolerance : 20,
snapKey : keys . ALT
} ) .,
myEditor. startup();

地图属性

属性查看功能用于查看具体的道路属性信息，道路属性窗口界面

手机定位模块
手机定位APP 的用例图如图
所示，主要功能包括地图浏览、地点搜索、路径查询、手机定位、路径导航。

主界面大纲视图

打开工程文件，依次展开文件夹目录res /layout ，在l ayout 文件夹上有击，新建一个xm l 文件,命名为m a in. xml 。界面的大纲视图如图所示。
通过图形布局视图可以看到界面的效果如

所示，左上角设置了一个定位按钮，旁边设置了一个标签控件用于显示位置的经纬度信息，界面底部是导航条，由3 个按钮控件组成，导航条上方是地图的放大和缩小按钮，布局中的空内区域用于加载电子地图Map Vi ew 控件。用同样的方式来设计其他二级界面.

空白区域为地图加载区。需要注意的是，起始点输入框在运行的时候会以Dialog 对话框的形式加载而不是以Activity 的形式加载。

在src 文件夹下的包com. esri. arcgis. android. samples.helloworld 中新建一个J ava 源文件，命名为Ma i nActivi ty.iava ，作为程序的主界面，需要实现如下功能： 地图加载，实现定位，通过菜单切换不同类型的地图，通过按钮控件启动二级界面等。要实现选项菜单切换不同类型的地图，需要在类的属性中声明地图切换选项，代码如下：

／／菜单的地图切换选项
MenuitemmStreetsMenuitem = null ;
MenuitemmTopoMenuitem = null;
MenuitemmGrayMenultem = null;
MenuitemmOceansMenultem = null ;
MenuitemmHybridMenultem = null;
MenultemmNationalMenuitem = null;
MenuitemmOsmMenuitem = null;
MenuitemmSattliteitem = null;
／／为每种地阁选项创建地图类型
finalMapOptionsmTopoBasemap = newMapOpt ions ( MapType.
TOPO);
finalMa向tionsmStreetsBasemap = newMapOptions ( Map'fype.
STREETS);
finalMapOptionsmGrayBasemap = newMapOptions(MapType. GRAY);
finalMapOptionsmOceansBasemap = newMapOptions(MapType. OCEANS);
finalMapOptionsmHybridBasemap = newMapOptions(MapType. HYBRID);
finalMapOptionsmNationalBasemap = newMapOptions(
MapType.NATIONAL_GE伺RAPHIC);
finalMapOptionsmOsmBasemap = newMapOptions(MapType. OSM);
finalMapOptionsmSattliteBasemap = newMapOptions(MapType. SATELLITE);

实现创建选项菜单

实现创建选项菜单的方法onCrea teOptionsMenu ，代码如下：

public booleanonCreateOptionsMen叫Menu阴阳）｛
getMenuinflater(). inflate(R. menu. basemap_menu,menu);
mStreetsMenuitem = menu. getitem( 0);
mTopoMenuitem = menu. getit四（ 1) i
mGrayMenuitem = menu. getitem(2);
mOceansMenuitem = menu. getitem(3);
mHybr idMenuI tern = menu. get Item ( 4) ;
mNationalMenuitem = m四u . getit四（ 5);
mOsmMenuitem = menu. getrtem(6);
mSattliteitem = menu. getitem(7);
mTopoMenuitem.setChecked(true);
return true;

添加点击事件

为选项菜单的菜单项添加点击事件，这样可以实现用菜单来切换地图类型的功能。具体代码如下：

p由lie booleanonOptionsitemSelected( Mem山emitem) {
    
    
mCurrentMapExtent = mMapView. getExtent();
／／处理菜单选中的事件
switch (item. getitemid()) {
    
    
case R. id. 四orld_Street_Map:
mMapView. setMapOptions(mStreetsBasemap);
mStreetsMenuitem.setChecked(true);
return true;
case R. id. World_Topo:
mMapView. setl:lapOptions(mTopoBasemap);
mTopoMenuitem. setChecked(true);
return true;
case R. id. Gray:
mMapView.setMapOptions(mGrayBasemap);
mGrayMenuitem. setChecked(true);
return true;
case R. id. Ocean_Basemap:
mMapView. setMapOptions(mOceansBasemap);
mOceansMenuitem.setChecked(true);
return true;
case R. id. Hybrid:
mMapView. setMapOptions(mHybridBaserr呻）；
mHybridMenultem. setChecked{
    
    true);
return true;
case R. id. Osm :
mMapView. setMapOptions(mOsmBasemap);
mOsmMenultem.setChecked(true);
return true;
case R. id. National :
mMapView.setMapOptions{
    
    mNationalBasemap);
mNationalMenultem. setChecked(true);
return true;
case R. id. Satellite :
mMapView. setMapOptions(rr臼ttliteBasemap);
mSattliteltem. setChecked(true);
return true;
default :
return super. onOptionsltemSelected( item);

<uses - permissionandroid: name =”android. permission. INTERNET”/>
<uses - permissionandroid : name ＝” android.permission.WR！咀－阻TERNAL_STORAGE”／〉
<uses - permissionandroid: name = ” android.permission.ACCESS_FINE_LOCATION”/>

实现加载底图图层和定位图层

在该类文件中添加如下代码，实现加载底图图层和定位图层，通过实例化

LocationDisplayManager 这个类来调用该类的GPS 定位功能。
MapViewmMapView;
GraphicsLayergLayerGps;
Locationloc;
public void onCreate{
    
    BundlesavedlnstanceState) {
    
    
super.onCreate(savedlnstanceState);
setContentView(R.layout. main);
mMapView = {
    
    MapView) findViewByld(R . id. map);
gLayerGps = newGraphicsLayer();
mMapView.addLayer(gLayerGps);
f i nalLocationDisplayManagerlocdisplayMag;
locdisplayMag = mMapView. getLocationDisplayManager();
locdisplayMag. setLocationListener{
    
    newLocationListener() {
    
    
@Override
public void onStatusChanged( String provider, intstatt冉
Bundleextras) {
    
    

@Override
public void onProviderEnabled(String provider) {
    
    
Toast . makeText(getApplicationContext （），” GPS 己启用． ”，
Toast.LENG四＿ SHORT) . show();
@Override
public void onProviderDisabled(String provider) {
    
    
Toast.makeText(getApplicationContext （），” GPS 未启用， 请开启”，
Toast . LENGTH _SHORT) . show();
@Override
public void onLocationChanged( Locationl) {
    
    
if (1 != null) {
    
    
PointptLatLon = newPoint( 1. getLongitude (), 1
. getLatitude());
Spatia1Referencesr4326 = SpatialRefer enc e . create ( 4326),
PointptMap = (Point) GeometryEngi ne . pr oject( ptLatLon,
sr4326，耐apView.getSpatialReferenc e());
时也pView . centerAt(ptMap, true);
t飞rloc . setText (”Lon :”+ 1. getLongi t ude() + ”, Lat”
+ 1. getLatitude());
／／启动定位服务
locdisplayMag. start();

完善这个类文件

实现了定位功能之后，还需要进一步完善这个类文件，由于是程序的主类， 因此我们需要添加调用其他二级界面的人口和功能，主界面布局文件ma in. xml 中已经添加了3 个调用按钮，因此在MainActivity. java 文件中，需要通过控件id 找到按钮， 然后绑定相应的事件。需要注意的是， Activity 之间的调用使用的是Int e nt 这样一个消息传递类， 具体代码如下：

private Buttonbtnearby ＝口ull;
private Buttonbtrouter = null;
private Buttonbtnavigation = null;
btnearby = (Button) findViewByid(R. id. btnear);
btrouter = (Button) findViewByid(R. id. btrouter) ;
btnavigation = (Button) findViewByid(R. id. btnavigation);
／／为搜索按钮设置按钮监昕器
btnearby. setOnClickListener(newOnClickListener() {
    
    
@Override
public void onClick(Vi ewv) {
    
    
Intentintent = newintent();
intent. setClassName(getApplicationContext(),
” com. esri. arcgis . android. samples . helloworld. PlaceSea r chActivity”),
startActivity(intent);
});
／／ 为路径按钮设置按钮监听器
btrouter. setOnClickListener(newOnClickListener() {
    
    
@Override
public void onClick(Viewv) {
    
    
Intentintent = newintent();
intent.setClassName(getApplicationContext(),
”com.esri.arcgis . android. s四ples.routing.RoutingActivity”）；
startActivity(intent );
}),
／／为导航按钮设置监听事件
btnavigation.setOnClickListener(newOnClickListener() {
    
    
@Override
public void onClick(Viewv) {
    
    
Intentintent = newintent();
intent. setClassName(getApplicationContext(),
”com.esri. arcgis.android.samples.routing.RoutingActivity”);
startActivity(intent);