WebGIS Information System-System Implementation

Main interface basic module

(1) Panning: Click the button to place the mouse in the panning state, which can be used to clear the state of the current graphics operation tool.
(2) Zoom in: Click the button to zoom in on the map (or press the middle mouse button).
(3) Zoom out: Click the button to zoom out the map (or use the middle mouse button).
(4) Full image: Click the button to display the full image.
(5) Save: Click the button to update the changed map data to the database.
(6) Delete: Click the button to delete the map element.
(7) Add: Add to draw new roads.
(8) Attribute: Click to view the attribute information of the road segment.
(9) Cut: Select to cut the road.
(10) United: United different paths.
(11) Undo: Undo the previous operation.
(12) Restore: Restore the previous operation.
The key implementation codes for importing ArcGIS related library files and functions are as follows:

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/

Map Basic Management Module

Basic GIS graphics operation functions include multi-layer display, zoom in, zoom out, full map display, eagle eye navigation and layer control
functions, 1. Initialization
The key codes for map initialization are as follows:

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. Map browsing
   Map browsing includes map zoom in, zoom out, layer control, eagle eye navigation, full map display, and latitude and longitude display. The key codes are as follows:

／／地图初始化
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();

map properties

The attribute viewing function is used to view specific road attribute information. The use case diagram of

the mobile positioning module and mobile positioning APP in the road attribute window interface is shown in the figure. The main functions include map browsing, location search, route query, mobile positioning, and route navigation.

Main interface outline view

Open the project file, expand the folder directory res/layout in turn, click on the layout folder, create a new xml file, and name it main.xml. An outline view of the interface is shown in the figure.
Through the graphical layout view, you can see the effect of the interface as follows:

As shown, a positioning button is set in the upper left corner, and a label control is set next to it to display the latitude and longitude information of the location. The navigation bar at the bottom of the interface is composed of 3 button controls. Above the navigation bar is the zoom in and zoom out buttons of the map. The empty area in is used to load the electronic map Map View control. Design other secondary interfaces in the same way.

The blank area is the map loading area. It should be noted that the starting point input box will be loaded in the form of Dialog box instead of Activity when it is running.

Create a new Java source file in the package com.esri.arcgis.android.samples.helloworld under the src folder and name it MainActivity.iava. As the main interface of the program, the following functions need to be realized: Map loading, realization Positioning, switch between different types of maps through the menu, start the secondary interface through the button control, etc. To implement the option menu to switch between different types of maps, you need to declare the map switching option in the properties of the class, the code is as follows:

／／菜单的地图切换选项
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);

Implement Create Options Menu

Implement the method onCrea teOptionsMenu to create the option menu, the code is as follows:

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;

Add click event

Add a click event to the menu item of the options menu, so that the function of switching the map type can be realized by using the menu. The specific code is as follows:

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”/>

Implement loading of basemap layers and positioning layers

Add the following code in this type of file to load the basemap layer and positioning layer, by instantiating

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

Complete this class file

After realizing the positioning function, this class file needs to be further improved. Since it is the main class of the program, we need to add the population and functions for calling other secondary interfaces. Three calls have been added to the main interface layout file main.xml button, so in the MainActivity.java file, you need to find the button through the control id, and then bind the corresponding event. It should be noted that the call between activities uses a message passing class like Int e nt, and the specific code is as follows:

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