ArcGIS.Server.9.3和ArcGIS API for JavaScript保存自定义图形（十）

目的：
1.ArcGIS.Server.9.3和ArcGIS API for JavaScript实现自定义图形，保存自定义的Graphic图形到服务端的xml文件中，同时也能在地图载入时读入xml中的图形数据显示到地图中。 这里的自定义面的Label是通过GeometryServer的labelPoints实现的。
准备工作：
1. 在ArcGis Server9.3中发布名为Geometry的GeometryServer。
完成后的效果图：

开始
0.关于GeometryServer的labelPoints介绍，labelPoints允许在多边形中指定Label显示的位置点,是jsapi1.2才支持的新功能，需要需要ArcGIS Server 9.3 sp1支持。
1.启动vs新建名为SaveGraphics的ASP.NET Web应用程序。
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">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Untitled Page</title>
    <style type="text/css">@import "http://serverapi.arcgisonline.com/jsapi/arcgis/1.2/js/dojo/dijit/themes/tundra/tundra.css";</style>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.2"></script>
    <script type="text/javascript" src="javascript/mapfunc.js">
     
    </script>
</head>
<body class="tundra">
    <form id="form1" runat="server">
    <input id="Button1" type="button" value="画 图" onclick="toolbar.activate(esri.toolbars.Draw.POLYGON);map.hideZoomSlider();" />&nbsp;&nbsp;
    <input id="Button2" type="button" value="漫 游" onclick="toolbar.deactivate();map.showZoomSlider();"  />
    <div id="map" style="width:600px; height:450px; border:1px solid #000;"></div>
    </form>
</body>
</html>
3、上面的html代码很简单主要是2个input的画图、漫游功能按钮。
4、切换到mapfunc.js开始编写js代码，现在从执行顺序来说明代码。
5、首先是初始化地图显示的init()方法：
function init()
{
   map = new esri.Map("map",{extent: new esri.geometry.Extent(-183.780014745329, 16.2975638854873,-61.4068547410964, 74.0304580085983, new esri.SpatialReference({wkid:4269}))}); 
   var usamap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/NGS_Topo_US_2D/MapServer");
   map.addLayer(usamap);
   toolbar = new esri.toolbars.Draw(map);
   dojo.connect(toolbar, "onDrawEnd", doDraw);
   //添加map载入后事件监听，用来从xml中读入自定义的图形在地图上显示
   dojo.connect(map,"onLoad",showGraphic);
   //设置infoWindow的大小
   map.infoWindow.resize(200, 100);
   //设置infoWindow的标题头
   map.infoWindow.setTitle("输入名称");
   //实例化GeometryService
   geometryService = new esri.tasks.GeometryService("http://mypc/ArcGIS/rest/services/Geometry/GeometryServer");

}
6、上面的init()方法中执行了dojo.connect(map,"onLoad",showGraphic);代码，所以接下来是showGraphic()方法代码：
//map载入后事件监听，用来从xml中读入自定义的图形在地图上显示
function showGraphic()
{
   //延迟1秒执行
   setTimeout(loadGraphic,1000); 
}
7、上面的showGraphic()方法调用了loadGraphic()方法，这样方法中用了dojo的ajax功能向服务端请求获取服务端的xmlData/xmlGraphic.xml数据，关于dojo.xhrGet方法可以参考dojo的帮助, 这里首先来看一下xmlGraphic.xml中保存的数据，如下：
  <?xml version="1.0" encoding="gb2312" ?> 
- <Graphics>
- <Graphic>
  <Content>{"geometry":{"rings":[[[-107.3883566182127,25.740182822042797],[-112.9254659932127,25.828073447042797],[-115.7379659932127,31.189401572042797],[-110.8160909932127,31.540964072042797],[-105.5426534932127,28.904245322042797],[-107.3883566182127,25.740182822042797]]],"spatialReference":{"wkid":4269}},"attributes":{"id":"0","title":"广东"},"symbol":{"color":[216,67,48,128],"outline":{"color":[216,67,48,255],"width":0.75,"style":"esriSLSSolid"},"style":"esriSFSSolid"}}</Content> 
  </Graphic>
- <Graphic>
  <Content>{"geometry":{"x":-110.640309743213,"y":28.6224372863286,"spatialReference":{"wkid":4269}},"attributes":{"title":"广东"},"symbol":{"color":[0,0,0,255],"style":"esriTS","angle":0,"xoffset":0,"yoffset":0,"text":"广东","align":"middle","decoration":"none","rotated":false,"kerning":true,"font":{"size":"20px","style":"normal","variant":"normal","weight":"bolder","family":undefined}}}</Content> 
  </Graphic>
。。。。。。
上面的xml片段中保存了2条geometry记录，一个是多边形、一个是点，都是以json的格式保存，程序要做的就是读取这些geometry记录显示到地图上。
下面的loadGraphic()方法用ajax的方式请求服务端的getG.aspx页面，getG.aspx页面的cs代码（具体C#代码贴在文章备注中）会读取xmlData/xmlGraphic.xml数据返回给客户端。
//读取服务端的xml文件里保存的自定义图形数据
function loadGraphic()
{
   dojo.xhrGet({url:"getG.aspx",handleAs:"json",preventCache: true,load: dojo.hitch(this,"getEnd")});
}
8、上面的loadGraphic()方法获取服务端xmlData/xmlGraphic.xml文件的数据，完成后执行getEnd(graphics)方法把获取来的图形数据显示在地图上：
//读取ml文件里自定义图形完成后添加到map进行显示
function getEnd(graphics)
{
   for( var i=0;i<graphics.Graphic.length;i++)
   {
      var g=graphics.Graphic[i];
      var graphic =new esri.Graphic(g);
      map.graphics.add(graphic);
   }
}
9、上面是载入xml保存的图形的过程了，接下来讲保存的过程。
10、添加首先是点击地图上的画图按钮然后执行onclick时间，在html代码中可以看到onclick="toolbar.activate(esri.toolbars.Draw.POLYGON);map.hideZoomSlider();"就是把地图状态设置成画POLYGON状态。
11、然后就是在地图上进行画POLYGON画图完成后执行doDraw(geometry)方法，把图形添加到map.graphics中进行显示同时显示infoWindow让用户输入名称进行确认保存，代码如下：
//画图
function doDraw(geometry)
{
   //随机颜色
   var numR = Math.ceil(Math.random()*255);
   var numG = Math.ceil(Math.random()*255);
   var numB = Math.ceil(Math.random()*255);
   //定义样式
   var highlightSymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([numR,numG,numB]), 1), new dojo.Color([numR,numG,numB,0.5]));
   //设置图形显示样式
   var graphic = new esri.Graphic(geometry, highlightSymbol);
   //清除上一次的画图内容
   map.graphics.add(graphic);
   //获取图形的中心点
   var centerPoint=map.toScreen(graphic.geometry.getExtent().getCenter());
   //在图形的中心点显示infoWindow
   map.infoWindow.show(centerPoint,map.getInfoWindowAnchor(centerPoint));
   var index=map.graphics.graphics.length-1;
   //设置infoWindow的显示内容
   var content="<div>名称：</div><div><input type='text' id='nameText' name='nameText' /></div><div><input type='button' name='Submit' value='保 存' onclick=finash('"+index+"') />&nbsp;&nbsp;&nbsp;&nbsp;<input type='button' name='Submit' value='取 消' onclick=cancel('"+index+"') /></div>";
   map.infoWindow.setContent(content);
}
12、上面的代码中infoWindow显示的内容如上面的效果图，一个输入框、一个保存按钮、一个取消按钮。输入名称然后点击保存按钮时保存当前所画的图形，保存代码：
//infoWindow中保存按钮的事件
function finash(index)
{
   //获取输入的名字
   var titleStr= dojo.byId('nameText').value;
   //获取当前所画的图形
   var cgraphic=map.graphics.graphics[index];
   //设置图形的属性，id、title
   cgraphic.attributes = {id:index,title:titleStr};
   tempGraphic=cgraphic;
   //对面图形进行geometryService的simplify操作
   geometryService.simplify([cgraphic],getLabelPoints);
   //获取当前所画图形的json字符串用来保存
   var graphicStr=dojo.toJson(cgraphic.toJson());
   //设置ajax请求的参数
   var params ={graphic:graphicStr}   
   //用dojo的xhrGet的ajax方法把图形的json字符串提交到服务端保存
   dojo.xhrGet({url:"saveG.aspx",handleAs:"text",preventCache: true,content:params,load: dojo.hitch(this,"saveEnd")});
   //隐藏infoWindow
   map.infoWindow.hide();
}
13、上面的finash(index)方法中把当前所画的图形的json字符通过ajax请求服务端的saveG.aspx页面，saveG.aspx页面的cs代码（具体C#代码贴在文章备注中）会把图形的json字符串保存到xmlData/xmlGraphic.xml中。finash方法还调用了geometryService的simplify操作目的是进行接下来的labelPoints操作为图形添加Label显示。
14、labelPoints操作的代码：
function getLabelPoints(graphics)
{
   geometryService.labelPoints(graphics,showLabel);
}

//显示Label，同时保存Label点到服务端的xml
function showLabel(labelPoints)
{
   //定义字体
   var font = new esri.symbol.Font("20px", esri.symbol.Font.STYLE_NORMAL, esri.symbol.Font.VARIANT_NORMAL, esri.symbol.Font.WEIGHT_BOLDER);
   for (var i=0;i< labelPoints.length;i++)
   {
      //获取输入框输入的内容
      var labelstr=dojo.byId('nameText').value;
      //定义样式
      var textSymbol = new esri.symbol.TextSymbol(labelstr,font, new dojo.Color([0, 0, 0]));
      //设置样式
      labelPoints[i].setSymbol(textSymbol);
      //设置属性
      labelPoints[i].attributes = {title:labelstr};
      //添加到地图上显示
      map.graphics.add(labelPoints[i]);
      //获取Label点的json字符串内容
      var graphicStr=dojo.toJson(labelPoints[i].toJson());
      //提交到服务端进行保存
      var params ={graphic:graphicStr}   
      dojo.xhrGet({url:"saveG.aspx",handleAs:"text",preventCache: true,content:params});
   }

}
15、保存结束的提示方法，上面的代码中有用到。
//保存结束进行提示
function saveEnd(text)
{
   alert(text);
}
16、通过上面的代码我们把画的图形和Label的点的json内容保存到的xml中。
17、取消按钮代码：
//infoWindow中取消按钮的事件
function cancel(index)
{
   for(var i=0;i<map.graphics.graphics.length;i++)
   {
      var cgraphic=map.graphics.graphics[index];
      map.graphics.remove(cgraphic);
   }
   map.infoWindow.hide();
}
18、取消按钮的代码就是不保存当前所画的图形，同时删除在map上的显示。
19、初始化调用。
dojo.addOnLoad(init);
20、这样就完成了自定义图层的保存和读取显示。
备注：
getG.aspx页面的html代码为空，cs代码如下：
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Xml;
using System.IO;
using System.Xml.XPath;
using System.Text;

namespace LabelingSample
{
    public partial class getG : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            string filepath = "xmlData/xmlGraphic.xml";
            FileInfo TheFile = new FileInfo(Server.MapPath(filepath));
            if (TheFile.Exists)
            {
                //XmlDocument xmldoc = new XmlDocument();
                //xmldoc.Load(Server.MapPath(filepath));
                string json=toJson(Server.MapPath(filepath));
                Response.Write(json);
            }
            else
            {
                Response.Write("nodata");
            }
        }

        private string toJson(string path)
        {
            StringBuilder json = new StringBuilder();
            json.Append("{\"Graphic\":["); 
            XPathDocument xpdoc = new XPathDocument(path);
            XPathNavigator navigator = xpdoc.CreateNavigator();
            XPathNodeIterator myXPathNodeIterator = navigator.Select("Graphics/Graphic/Content");
            while (myXPathNodeIterator.MoveNext())
            {
                
                string tempStr=myXPathNodeIterator.Current.Value;
                //string tempStr = "1";
                if (myXPathNodeIterator.CurrentPosition == 1)
                {
                    json.AppendFormat("{0}",tempStr);
                }
                else
                {
                    json.AppendFormat("{0}",(" , "+tempStr));
                }
            }
            json.Append("]}"); 
            return json.ToString();
        }
    }
}
saveG.aspx页面的html代码为空，cs代码如下：
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Xml;
using System.IO;

namespace LabelingSample
{
    public partial class saveG : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            string graphic = Request.Params["graphic"].ToString();
            buildXML(graphic);
            Response.Write("保存成功！");
        }

        private void buildXML(string graphic)
        {
            string filepath = "xmlData/xmlGraphic.xml";
            FileInfo TheFile = new FileInfo(Server.MapPath(filepath)); 
            if(TheFile.Exists)
            {
                XmlDocument xmldoc = new XmlDocument();
                xmldoc.Load(Server.MapPath(filepath));
                XmlNode objNode = xmldoc.SelectSingleNode("Graphics");
                XmlElement xmlelem2 = xmldoc.CreateElement("", "Graphic", "");
                objNode.AppendChild(xmlelem2);
               
                XmlElement xmlelem4 = xmldoc.CreateElement("", "Content", "");
                xmlelem4.InnerText = graphic;
                xmlelem2.AppendChild(xmlelem4);
                xmldoc.Save(Server.MapPath("xmlData/xmlGraphic.xml")); 
            }
            else
            {
                XmlDocument xmldoc = new XmlDocument();
                XmlDeclaration xmldecl;
                xmldecl = xmldoc.CreateXmlDeclaration("1.0", "gb2312", null);
                xmldoc.AppendChild(xmldecl);
                XmlElement xmlelem = xmldoc.CreateElement("", "Graphics", "");
                XmlElement xmlelem2 = xmldoc.CreateElement("", "Graphic", "");
                xmlelem.AppendChild(xmlelem2);
                
                XmlElement xmlelem4 = xmldoc.CreateElement("", "Content", "");
                xmlelem4.InnerText = graphic;
                xmlelem2.AppendChild(xmlelem4);
                xmldoc.AppendChild(xmlelem);
                xmldoc.Save(Server.MapPath("xmlData/xmlGraphic.xml")); 
            }
        }
    }
}
posted @ 2008-12-08 22:08  水的右边  阅读(10897)  评论(3)  编辑  收藏  举报