ArcGIS API for JavaScript 开发教程.docx
《ArcGIS API for JavaScript 开发教程.docx》由会员分享,可在线阅读,更多相关《ArcGIS API for JavaScript 开发教程.docx(36页珍藏版)》请在冰豆网上搜索。
ArcGISAPIforJavaScript开发教程
ArcGISAPIforJavaScript开发教程
目的:
1.ArcGIS.Server.9.3和ArcGISAPIforJavaScript实现实现点、线、面的buffer分析,这里是通过GeometryServer实现。
准备工作:
1.在ArcGisServer9.3中发布名为usa的MapServer。
2.在ArcGisServer9.3中发布名为Geometry的GeometryServer。
完成后的效果图:
开始
0.关于GeometryServer的介绍,可以看本系列的第九篇。
1.启动vs新建名为BufferSample的ASP.NETWeb应用程序。
其实jsapi是纯客户端的开发了不需要vs也不需要.net了,纯html页面就可以了用记事本都可以开发了。
我这里为了方便了就用vs2008了,毕竟可以调试js脚本了。
2.接着在工程中添加名为javascript的文件夹并且在这个文件夹里新建wabapp.js的文件,这里用来编写我们自己的js代码了,在Default.aspx页面里添加对这个js文件的引用,同时在Default.aspx页面里添加一个id为map的div标签作为地图控件的载体、5个input的功能按钮、2个input的输入框、1个select选择列表:
<%@ Page Language=“C#“ AutoEventWireup=“true“ CodeBehind=“Default.aspx.cs“ Inherits=“BufferSample._Default“ %>
DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
//www.w3.org/1999/xhtml” >
Untitled Page
#Text1
{
width:
54px;
}
3、上面的html代码中主要可以看一下5个input按钮的onclick事件,分别实现了画点、画线、画面、漫游、清楚图形的代码很简单了,还有就是单位选择的select了已经添加了7个常用的单位。
4、切换到wabapp.js编写js代码,本例子的js代码分为3部分功能,第一载入地图进行显示;第二进行画点、线、面操作;第三根据画的点、线、面图形进行buffer分析。
具体的说明看代码注释:
dojo.require(“esri.map“);
dojo.require(“esri.tasks.geometry“);
dojo.require(“esri.toolbars.draw“);
dojo.require(“esri.tasks.query“);
djConfig = { isDebug:
true };
var map,tb,geometryService,queryTask,query;
function init()
{
startExtent = new esri.geometry.Extent(-183.780014745329,16.2975638854873,-61.4068547410964,74.0304580085983, new esri.SpatialReference({wkid:
4269}));
map = new esri.Map(“map“);
//底图Tile图
var imageryPrime = new esri.layers.ArcGISTiledMapServiceLayer(“
map.addLayer(imageryPrime);
var usa = new esri.layers.ArcGISDynamicMapServiceLayer(“http:
//jh-53a435fbc0e8/ArcGIS/rest/services/USA/MapServer“);
//设置要显示的图层
//usa.setVisibleLayers([0]);
//设置图层透明度
usa.setOpacity(0.8);
map.addLayer(usa);
//设置地图视图范围
map.setExtent(startExtent);
geometryService = new esri.tasks.GeometryService(“http:
//jh-53a435fbc0e8/ArcGIS/rest/services/Geometry/GeometryServer“);
tb = new esri.toolbars.Draw(map);
dojo.connect(tb, “onDrawEnd“, doDraw);
}
//画图
function doDraw(geometry)
{
//根据图形的类型定义显示样式
switch (geometry.type)
{
case “point“:
var symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 10, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 1), new dojo.Color([0,255,0,0.25]));
break;
case “polyline“:
var symbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASH, new dojo.Color([255,0,0]), 1);
break;
case “polygon“:
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,0]), 1), new dojo.Color([255,0,0,0.25]));
break;
}
//把绘制的图形添加到map.graphics进行显示
var graphic = new esri.Graphic(geometry, symbol);
map.graphics.add(graphic);
//如果是面需要先进行simplify操作,否则直接进行buffer
if(geometry.type === “polygon“)
{
geometryService.simplify([graphic],doSimplify);
}
else
{
doBuffer([graphic]);
}
}
//simplify结束调用buffer
function doSimplify(graphics)
{
doBuffer(graphics);
}
function doBuffer(graphics)
{
//buffer参数
var params = new esri.tasks.BufferParameters();
//buffer的范围值,从输入框中获取
params.distances = [ dojo.byId("distance").value ];
//空间参考
params.bufferSpatialReference =new esri.SpatialReference({wkid:
dojo.byId(“wkid“).value});
//输出结果的空间参考
params.outSpatialReference = map.spatialReference;
params.features = graphics;
//buffer的单位,从列表框获取
params.unit = eval(“esri.tasks.BufferParameters.“+dojo.byId(“unit“).value);
//buffer操作
geometryService.buffer(params,showBuffer);
}
//显示buffer的结果
function showBuffer(features)
{
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,0.65]), 2),new dojo.Color([255,0,0,0.35]));
for (var j=0;j {
var graphic = new esri.Graphic(features[j].geometry,symbol);
map.graphics.add(graphic);
}
tb.deactivate();
map.showZoomSlider();
}
dojo.addOnLoad(init);
5、这样就完成了buffer的例子。
标签:
arcgisapijavasrcipt、arcgisserver9.3、buffer149Views | 1条评论
ArcGIS.Server.9.3和ArcGISAPIforJavaScript保存自定义图形(十)
2009年09月10日10:
01上午 | 分类:
JavaScript
目的:
1.ArcGIS.Server.9.3和ArcGISAPIforJavaScript实现自定义图形,保存自定义的Graphic图形到服务端的xml文件中,同时也能在地图载入时读入xml中的图形数据显示到地图中。
这里的自定义面的Label是通过GeometryServer的labelPoints实现的。
准备工作:
1.在ArcGisServer9.3中发布名为Geometry的GeometryServer。
完成后的效果图:
开始
0.关于GeometryServer的labelPoints介绍,labelPoints允许在多边形中指定Label显示的位置点,是jsapi1.2才支持的新功能,需要需要ArcGISServer9.3sp1支持。
1.启动vs新建名为SaveGraphics的ASP.NETWeb应用程序。
2.接着在工程中添加名为javascript的文件夹并且在这个文件夹里新建mapfunc.js的文件,这里用来编写我们自己的js代码了,在Default.aspx页面里添加对这个js文件的引用,同时在Default.aspx页面里添加一个id为map的div标签作为地图控件的载体、2个input的功能按钮:
<%@ Page Language=“C#“ AutoEventWireup=“true“ CodeBehind=“saveGraphic.aspx.cs“ Inherits=“LabelingSample.saveGraphic“ %>
DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
//www.w3.org/1999/xhtml” >
Untitled Page