arcgis javascript app学習5
66480 ワード
混雑していますが、走ることができるコードの一部は、試験田と略称されています.
<%
@ Page Language
=
"
C#
"
AutoEventWireup
=
"
true
"
CodeFile
=
"
Default2.aspx.cs
"
Inherits
=
"
Default2
"
%>
<!
DOCTYPE html PUBLIC
"
-//W3C//DTD XHTML 1.0 Transitional//EN
"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
"
>
<
html xmlns
=
"
http://www.w3.org/1999/xhtml
"
>
<
head runat
=
"
server
"
>
<
title
>
Simple Map
</
title
>
<
link rel
=
"
stylesheet
"
type
=
"
text/css
"
href
=
"
http://localhost/arcgis_js_api/library/2.0/arcgis/js/dojo/dijit/themes/tundra/tundra.css
"
/>
<
script type
=
"
text/javascript
"
src
=
"
http://localhost/arcgis_js_api/library/2.0/arcgis/
"
></
script
>
<
script type
=
"
text/javascript
"
>
dojo.require(
"
esri.map
"
);
dojo.require(
"
esri.toolbars.draw
"
);
dojo.require(
"
esri.graphic
"
);
dojo.require(
"
esri.layers.graphics
"
);
dojo.require(
"
esri.tasks.query
"
);
dojo.require(
"
esri.tasks.geometry
"
);
var map;
var tb;
function Init() {
map
=
new
esri.Map(
"
map
"
);
dojo.connect(map,
"
onLoad
"
, initToolbar);
//
map "onLoad" Fires when the first or base layer has been successfully added to the map.
dojo.connect(map,
"
onClick
"
, myClickHandler);
//
map "onClick"
var layer
=
new
esri.layers.ArcGISDynamicMapServiceLayer(
"
http://localhost/ArcGIS/rest/services/zhyxk/MapServer
"
);
map.addLayer(layer);
//
dojo.connect(map.graphics, "onClick", myGraphicsClickHandler);
}
function myClickHandler(
event
) {
//
alert("User clicked at " + event.screenPoint.x + ", " + event.screenPoint.y + " on the screen. The map coordinate at this point is " + event.mapPoint.x + ", " + event.mapPoint.y);
}
function myGraphicsClickHandler(evt) {
//
alert("User clicked on " + evt.graphic);
//
alert(evt.mapPoint.x);
var symbol
=
new
esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID,
new
esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,
new
dojo.Color([
255
,
255
,
0
]),
2
),
new
dojo.Color([
255
,
0
,
0
,
0.25
]));
evt.graphic.setSymbol(symbol)
}
function initToolbar(map){
tb
=
new
esri.toolbars.Draw(map);
dojo.connect(tb,
"
onDrawEnd
"
, addGraphic);
//
tb "onDrawEnd" Fires when drawing is complete.
dojo.connect(map.graphics,
"
onClick
"
, myGraphicsClickHandler);
//
map.graphics, "onClick"
// map.graphics map.onload ， map.onLoad //added by zhangjun at 2011-02-21
}
function addGraphic(geometry) {
//
spatialQuery(geometry);
//
map.graphics.clear();
var symbol
=
new
esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID,
new
esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,
new
dojo.Color([
0
,
255
,
0
]),
2
),
new
dojo.Color([
255
,
255
,
0
,
0.25
]));
var graphic
=
new
esri.Graphic(geometry, symbol);
map.graphics.add(graphic);
}
function clearGraphic() {
map.graphics.clear();
}
function addSearchedGraphic() {
var geo
=
"
<%=str%>
"
;
//
C#
alert(geo);
var a
=
geo.split(
"
,
"
);
var symbol
=
new
esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID,
new
esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,
new
dojo.Color([
255
,
0
,
0
]),
2
),
new
dojo.Color([
255
,
255
,
0
,
0.25
]));
var extent
=
new
esri.geometry.Extent(a[
0
], a[
1
], a[
2
], a[
3
],
new
esri.SpatialReference({ wkid:
4326
}));
var graphic
=
new
esri.Graphic(extent, symbol);
map.graphics.add(graphic);
}
//
result
function updatepage(result){
alert(result);
}
var myReq
=
new
XMLHttpRequest();
function xmlhttprequest() {
if
(window.XMLHttpRequest)
{
var url
=
"
http://localhost/xmlhttprequest/simple.xml
"
;
myReq.open(
"
GET
"
, url,
false
);
myReq.send();
//
alert("here");
alert(myReq.responseXML);
alert(myReq.responseXML.xml);
}
}
function callWSMethod1() {
if
(window.XMLHttpRequest) {
var url
=
"
http://localhost/testjs2.0services/DBService.asmx?op=HelloWorld
"
;
myReq.onreadystatechange
=
CheckStatus1;
//
true indicates asynchronous request
myReq.open(
"
GET
"
,url,
true
);
myReq.send();
//
TextArea1.value = myReq.responseText;
}
}
function CheckStatus1() {
if
(myReq.readyState
==
4
)
//
Completed operation
{
myReq.open(
"
POST
"
,
"
http://localhost/testjs2.0services/DBService.asmx/HelloWorld
"
,
false
);
myReq.send();
//
form1.TextArea1.value = oReq.responseText;
TextArea1.value
=
myReq.responseXML.xml;
}
}
function callWSMethod2() {
if
(window.XMLHttpRequest) {
var url
=
"
http://localhost/testjs2.0services/DBService.asmx/HelloWorld2?str=
"
;
url
+=
"
222222
"
;
myReq.onreadystatechange
=
CheckStatus2;
myReq.open(
"
GET
"
, url,
true
);
}
}
function CheckStatus2() {
if
(myReq.readyState
==
4
) {
TextArea1.value
=
myReq.responseXML.xml;
}
}
function spatialSuccess(featureSet)
{
//
map.graphics.clear();
var showXBExtent;
var symbol
=
new
esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID,
new
esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,
new
dojo.Color([
0
,
0
,
255
,
0.35
]),
1
),
new
dojo.Color([
255
,
0
,
0
,
0.35
]));
//
QueryTask returns a featureSet. Loop through features in the featureSet and add them to the map.
for
(var i
=
0
, il
=
featureSet.features.length; i
<
il; i
++
) {
//
Get the current feature from the featureSet.
//
Feature is a graphic
var graphic
=
featureSet.features[i];
graphic.setSymbol(symbol);
//
graphic.setInfoTemplate(infoTemplate);
//
Add graphic to the map graphics layer.
map.graphics.add(graphic);
if
(i
==
0
) {
showXBExtent
=
graphic.geometry.getExtent().union(map.graphics.graphics[
0
].geometry.getExtent());
//
}
else
{
showXBExtent
=
showXBExtent.union(graphic.geometry.getExtent());
}
}
map.setExtent(showXBExtent.expand(
1.5
));
}
function spatialError(err) {
alert(err.name
+
"
:
"
+
err.message);
}
function spatialQuery() {
//
build query task
var queryTask
=
new
esri.tasks.QueryTask(
"
http://localhost/ArcGIS/rest/services/newfeatureclass/MapServer/0
"
);
//
build query filter
query
=
new
esri.tasks.Query();
query.returnGeometry
=
true
;
query.outFields
=
[
"
NAME
"
];
var geo
=
map.graphics.graphics[
0
].geometry;
//
geo.setSpatialReference({ "spatialReference": { "wkid": 4326} });
//
var extent = new esri.geometry.Extent({ "xmin": 100, "ymin": 30, "xmax": 110, "ymax": 40, "spatialReference": { "wkid": 4326} });
query.geometry
=
geo;
query.spatialRelationship
=
esri.tasks.Query.SPATIAL_REL_INTERSECTS;
//
, //added by zhangjun at 2011-02-21
//
alert(query.geometry.getExtent().xmax);
//
， geometry, javascript
dojo.connect(queryTask,
"
onComplete
"
, spatialSuccess);
dojo.connect(queryTask,
"
onError
"
, spatialError);
queryTask.execute(query);
}
function attQuery() {
//
build query task
var queryTask
=
new
esri.tasks.QueryTask(
"
http://localhost/ArcGIS/rest/services/newfeatureclass/MapServer/0
"
);
//
build query filter
query
=
new
esri.tasks.Query();
query.returnGeometry
=
true
;
query.outFields
=
[
"
NAME
"
];
var qstr
=
document.getElementById(
"
AttText1
"
).value;
query.
where
=
"
NAME Like '%
"
+
qstr
+
"
%'
"
;
dojo.connect(queryTask,
"
onComplete
"
, function(featureSet) {
map.graphics.clear();
var showXBExtent
var symbol
=
new
esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID,
new
esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,
new
dojo.Color([
0
,
0
,
255
,
0.35
]),
1
),
new
dojo.Color([
255
,
0
,
0
,
0.35
]));
//
QueryTask returns a featureSet. Loop through features in the featureSet and add them to the map.
for
(var i
=
0
, il
=
featureSet.features.length; i
<
il; i
++
) {
//
Get the current feature from the featureSet.
//
Feature is a graphic
var graphic
=
featureSet.features[i];
graphic.setSymbol(symbol);
//
graphic.setInfoTemplate(infoTemplate);
//
Add graphic to the map graphics layer.
map.graphics.add(graphic);
if
(i
==
0
) {
showXBExtent
=
graphic.geometry.getExtent().union(map.graphics.graphics[
0
].geometry.getExtent());
//
//
}
else
{
showXBExtent
=
showXBExtent.union(graphic.geometry.getExtent());
}
}
map.setExtent(showXBExtent.expand(
1.5
));
});
queryTask.execute(query);
}
dojo.addOnLoad(Init);
</
script
>
<
style type
=
"
text/css
"
>
#Button2
{
width: 101px;
}
#Button3
{
width: 119px;
}
#Button4
{
width: 97px;
}
#Button6
{
width: 111px;
}
#TextArea1
{
height: 48px;
width: 371px;
}
#Button11
{
width: 91px;
}
#Button12
{
width: 114px;
}
</
style
>
</
head
>
<
body
>
<
form id
=
"
form1
"
runat
=
"
server
"
>
<
div id
=
"
map
"
style
=
"
width:694px; height:383px; border:1px solid #000;
"
>
</
div
>
<
div
>
<
asp:Label ID
=
"
Label1
"
runat
=
"
server
"
Text
=
"
"
></
asp:Label
>
<
asp:TextBox ID
=
"
TextBoxSearch
"
runat
=
"
server
"
Width
=
"
258px
"
></
asp:TextBox
>
<
asp:Button ID
=
"
ButtonSearch
"
runat
=
"
server
"
Text
=
"
"
onclick
=
"
ButtonSearch_Click
"
Width
=
"
82px
"
/>
<
asp:ListBox ID
=
"
ListBox1
"
runat
=
"
server
"
Height
=
"
88px
"
Width
=
"
275px
"
>
</
asp:ListBox
>
</
div
>
<
input id
=
"
Button1
"
type
=
"
button
"
value
=
"
"
onclick
=
"
tb.activate(esri.toolbars.Draw.EXTENT)
"
/>
<
input id
=
"
Button9
"
type
=
"
button
"
value
=
"
"
onclick
=
"
tb.deactivate()
"
/>
<
input id
=
"
Button2
"
type
=
"
button
"
value
=
"
"
onclick
=
"
clearGraphic()
"
/>
<
input id
=
"
Button12
"
type
=
"
button
"
value
=
"
"
onclick
=
"
spatialQuery()
"
/>
<
asp:Label ID
=
"
Label2
"
runat
=
"
server
"
Text
=
"
NAME:
"
></
asp:Label
>
<
input id
=
"
AttText1
"
type
=
"
text
"
/>
<
input id
=
"
Button11
"
type
=
"
button
"
value
=
"
"
onclick
=
"
attQuery()
"
/><
p
>
<
input id
=
"
Button3
"
type
=
"
button
"
value
=
"
"
onclick
=
"
addSearchedGraphic()
"
/>
<
input id
=
"
Button4
"
type
=
"
button
"
value
=
"
"
onclick
=
"
clearGraphic()
"
/>
</
p
>
<
asp:ScriptManager ID
=
"
ScriptManager1
"
runat
=
"
server
"
>
<
Services
>
<
asp:ServiceReference Path
=
"
http://zhyxkserver/testjs2.0servicevs2005/DBService.asmx
"
/>
</
Services
>
</
asp:ScriptManager
>
<
asp:PlaceHolder ID
=
"
PlaceHolder1
"
runat
=
"
server
"
Visible
=
"
False
"
>
<
asp:HiddenField ID
=
"
HiddenField1
"
runat
=
"
server
"
Visible
=
"
False
"
/>
</
asp:PlaceHolder
>
<
p
>
<
asp:Button ID
=
"
Button5
"
runat
=
"
server
"
onclick
=
"
Button5_Click
"
Text
=
"
hiddedvalue
"
Width
=
"
114px
"
/>
</
p
>
</
form
>
<
p
>
<
input id
=
"
Button6
"
type
=
"
button
"
value
=
"
xmlhttprequest
"
onclick
=
"
xmlhttprequest()
"
/>
<
input id
=
"
Button7
"
type
=
"
button
"
value
=
"
xmlhttprequest2
"
onclick
=
"
callWSMethod1()
"
/>
<
input id
=
"
Button8
"
type
=
"
button
"
value
=
"
xmlhttprequest3
"
onclick
=
"
callWSMethod2()
"
/>
<
textarea id
=
"
TextArea1
"
name
=
"
S1
"
cols
=
"
1
"
rows
=
"
1
"
></
textarea
>
</
p
>
</
body
>
</
html
>