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);

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

／／地图初始化
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 的用例图如图 8 . 6-3
所示，主要功能包括地图浏览、地点搜索、路径查询、手机定位、路径导航。

主界面大纲视图

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

所示，左上角设置了一个定位按钮，旁边设置了一个标签控件用于显示位置的经纬度信息，界面底部是导航条，由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);