平台:Vs 2010,Blend 4,Silverlight 4
调用API: ArcGis for Silverligth API(ESRI.ArcGIS.Client)
OK,今天又有空来写点啦,这个例子自己不想拉的太长了,所以这节多写点东西,我尽量把东西都介绍全面,有不懂的可以留言~
有空大家共同讨论。
好进入正题,如今天标题所示,我们先来看画点,线,圆吧!
04 |
/// <param name="myMap"></param> |
05 |
/// <param name="point"></param> |
06 |
/// <param name="pointLine"></param> |
07 |
public void DrawAnimationCompleted(Map myMap, List<Graphic> point,ESRI.ArcGIS.Client.Geometry.PointCollection pointLine) |
09 |
GraphicsLayer gPointLayer = new GraphicsLayer(); |
10 |
GraphicsLayer lineLayer = new GraphicsLayer(); |
11 |
SimpleLineSymbol lineSymbol = new SimpleLineSymbol(); |
12 |
lineSymbol.Color = new SolidColorBrush(Colors.Brown); |
14 |
lineSymbol.Style = SimpleLineSymbol.LineStyle.Solid; |
17 |
GisMap.AddLayersToMap(myMap, new GraphicsLayer[] { lineLayer }); |
18 |
GisLine.DrawLineOnMap(pointLine, lineLayer, lineSymbol); |
20 |
GisMap.DrawAllLayers(myMap, new GraphicsLayer[] { gPointLayer }, point); |
21 |
GisMap.AddLayersToMap(myMap, new GraphicsLayer[] { gPointLayer }); |
好,看一下如何画圆吧。
04 |
/// <param name="myMap">地图</param> |
05 |
/// <param name="container">绘制容器</param> |
06 |
/// <param name="pt">要绘制的点</param> |
07 |
/// <param name="drawCircleLayer"></param> |
08 |
/// <param name="circleKm">直径</param> |
09 |
/// <param name="color">填充色</param> |
10 |
/// <param name="ellipseStroke">边框色</param> |
11 |
public void DrawEllipse(Map myMap, Canvas container, MapPoint pt, ref ElementLayer drawCircleLayer, double circleKm,Color color,Color ellipseStroke) |
13 |
if (!drawCircleLayer.Children.Contains(container)) |
15 |
drawCircleLayer.Children.Add(container); |
16 |
container.Opacity = 0.5; |
17 |
container.SetValue(ElementLayer.EnvelopeProperty, new Envelope(myMap.Extent.XMax, myMap.Extent.YMax, myMap.Extent.XMin, myMap.Extent.YMin)); |
20 |
Point ptFirst = myMap.MapToScreen( new MapPoint(Convert.ToDouble(pt.X), |
21 |
Convert.ToDouble(pt.Y))); |
23 |
Point pt7 = myMap.MapToScreen( new MapPoint((Convert.ToDouble(pt.X) + circleKm * kmToEN), |
24 |
Convert.ToDouble(pt.Y))); |
26 |
Ellipse ellipse7 = new Ellipse(); |
27 |
ellipse7.Width = (pt7.X - ptFirst.X) * 2; |
28 |
ellipse7.Height = ellipse7.Width; |
29 |
ellipse7.StrokeThickness = 1; |
30 |
ellipse7.Stroke = new SolidColorBrush(ellipseStroke); |
31 |
ellipse7.Fill = new SolidColorBrush(color); |
32 |
Canvas.SetLeft(ellipse7, ptFirst.X - ellipse7.Width / 2); |
33 |
Canvas.SetTop(ellipse7, ptFirst.Y - ellipse7.Width / 2); |
34 |
ellipse7.Opacity = 0.5; |
36 |
container.Children.Add(ellipse7); |
37 |
container.IsHitTestVisible = false ; |
38 |
container.SetValue(Canvas.ZIndexProperty, -10); |
这是一个画圆的方法,需要地图类,点,Canvas容器,Gis 的地图层ElementLayer和color
我前台是这样调用的
/// <param name="myMap"></param> |
/// <param name="sender"></param> |
public void DrawEllipse7And10WindCircle(Map myMap, object sender) |
if (GisMap.LayerExist(myMap, "WindCircleLayer" )) |
{ GisMap.DeleteLayersToMap(myMap, "WindCircleLayer" ); } |
ElementLayer circleLayer = new ElementLayer(); |
circleLayer.ID = "WindCircleLayer" ; |
Canvas circleCanvas = new Canvas(); |
Graphic tipGraphic = sender as Graphic; |
if (Convert.ToDouble(tipGraphic.Attributes[ "WindCircle7" ]) != 0) |
Color color = new Color(); |
DrawEllipse(myMap, circleCanvas, new MapPoint(Convert.ToDouble(tipGraphic.Attributes[ "Longitude" ]), |
Convert.ToDouble(tipGraphic.Attributes[ "Latitude" ])), ref circleLayer, |
Convert.ToDouble(300), color, Colors.Blue); |
if (Convert.ToDouble(tipGraphic.Attributes[ "WindCircle10" ]) != 0) |
Color color = new Color(); |
this .DrawEllipse(myMap, circleCanvas, new MapPoint(Convert.ToDouble(tipGraphic.Attributes[ "Longitude" ]), |
Convert.ToDouble(tipGraphic.Attributes[ "Latitude" ])), ref circleLayer, |
Convert.ToDouble(tipGraphic.Attributes[ "WindCircle10" ]), color, Colors.Blue); |
GisMap.AddLayersToMap(myMap, new ElementLayer[] { circleLayer }); |
这里的sender是一个Gis元素 Graphic,根据我的WebService 取到的实体后我把这个点加上了Attributes,一系列属性,所以在上面的代码可以看到tipGraphic.Attributes["WindCircle10"],
下面的代码就是在我从WebService取到实体后做添加点的代码:
/// <param name="model"></param> |
/// <param name="i"></param> |
private void AddPointToGraphic(TyphoonModel model, int i, List<Graphic> pointParam) |
SimpleMarkerSymbol symbol = new SimpleMarkerSymbol(); |
Color color = new Color(); |
if (Convert.ToDouble(model.WS) <= 17.1) |
symbol.Color = new SolidColorBrush(color); |
else if (Convert.ToDouble(model.WS) > 17.1 && Convert.ToDouble(model.WS) <= 24.4) |
symbol.Color = new SolidColorBrush(color); |
else if (Convert.ToDouble(model.WS) > 24.4 && Convert.ToDouble(model.WS) <= 32.6) |
symbol.Color = new SolidColorBrush(color); |
else if (Convert.ToDouble(model.WS) > 32.6 && Convert.ToDouble(model.WS) <= 41.4) |
color.B = 4; symbol.Color = new SolidColorBrush(color); |
else if (Convert.ToDouble(model.WS) > 41.4 && Convert.ToDouble(model.WS) <= 50.9) |
color.B = 163; symbol.Color = new SolidColorBrush(color); |
else if (Convert.ToDouble(model.WS) > 50.9) |
color.B = 217; symbol.Color = new SolidColorBrush(color); |
symbol.Style = SimpleMarkerSymbol.SimpleMarkerStyle.Square; |
symbol.Style = SimpleMarkerSymbol.SimpleMarkerStyle.Circle; |
pointParam.Add( new Graphic() |
Geometry = new MapPoint(model.Longitude, model.Latitude), |
pointParam[i].Attributes.Add( "TyphoonID" , model.TyphoonID); |
pointParam[i].Attributes.Add( "TyphoonNo" , model.TyphoonNo); |
pointParam[i].Attributes.Add( "TyphoonName" , model.TyphoonName); |
pointParam[i].Attributes.Add( "WindCircle7" , model.WindCircle7); |
pointParam[i].Attributes.Add( "WindCircle10" , model.WindCircle10); |
pointParam[i].Attributes.Add( "WS" , model.WS); |
pointParam[i].Attributes.Add( "Pressure" , model.Pressure); |
pointParam[i].Attributes.Add( "IssueTime" , model.IssueTime); |
pointParam[i].Attributes.Add( "Future" , model.Future); |
pointParam[i].Attributes.Add( "Latitude" , model.Latitude); |
pointParam[i].Attributes.Add( "Longitude" , model.Longitude); |
信息提示功能如图:

我们先看下Xmal中的代码:
< Canvas x:Name = "typhoonPointInfoCanvas" Visibility = "Visible" Height = "188" HorizontalAlignment = "Left" Margin = "0,-272,0,0" VerticalAlignment = "Top" Width = "360" > |
< Path Stretch = "Fill" Stroke = "Black" Height = "168.5" Width = "328.5" UseLayoutRounding = "False" Canvas.Left = "0.5" Canvas.Top = "-0.5" Data = "M113,25 C113,11.745166 123.74516,1.0000004 137,1.0000004 L304,1.0000004 C317.25482,1.0000004 328,11.745166 328,25 L328,144 C328,157.25484 317.25482,168 304,168 L137,168 C123.74516,168 113,157.25484 113,144 z M112.5,24.499998 L0.5,0.5 L112.5,72.499992 z" Fill = "{StaticResource CommonGradient2}" /> |
< StackPanel Orientation = "Vertical" Height = "168" Width = "176" Canvas.Left = "137" Canvas.Top = "15" > |
< TextBlock x:Name = "typhoonNameTextBlock" Height = "20" Text = "名称:" Foreground = "White" TextWrapping = "Wrap" /> |
< TextBlock x:Name = "typhoonCollectionTimeTextBlock" Height = "20" Text = "时间:" Foreground = "White" TextWrapping = "Wrap" d:LayoutOverrides = "HorizontalAlignment" /> |
< TextBlock x:Name = "typhoonPositionTextBlock" Height = "20" Text = "位置:" Foreground = "White" TextWrapping = "Wrap" d:LayoutOverrides = "HorizontalAlignment" /> |
< TextBlock x:Name = "typhoonWSTextBlock" Height = "20" Text = "最大风速:" Foreground = "White" TextWrapping = "Wrap" d:LayoutOverrides = "HorizontalAlignment" /> |
< TextBlock x:Name = "typhoonPressureTextBlock" Height = "20" Text = "中心气压:" Foreground = "White" TextWrapping = "Wrap" d:LayoutOverrides = "HorizontalAlignment" /> |
< TextBlock x:Name = "typhoonCircle7TextBlock" Height = "20" Text = "7级风圈半径:" Foreground = "White" TextWrapping = "Wrap" d:LayoutOverrides = "HorizontalAlignment" /> |
< TextBlock x:Name = "typhoonCircle10TextBlock" Height = "20" Text = "10级风圈半径:" Foreground = "White" TextWrapping = "Wrap" d:LayoutOverrides = "HorizontalAlignment" /> |
< LinearGradientBrush x:Key = "CommonGradient" StartPoint = "0.5,0" EndPoint = "0.5,1" > < GradientStop Offset = "0" Color = "#ee76a8d3" /> < GradientStop Offset = "0.25" Color = "#ee5b8cb5" /> < GradientStop Offset = "0.75" Color = "#ee4b7ba7" /> </ LinearGradientBrush >< BR > |
看下c# 中的代码:
当我们添加那些点也就是 Graphic 的时候有这样一个事件MouseEventHandler
02 |
mapDraw.DrawLineAndPoint( ref point, myMap, gLayer, ref pointLine, e, length); |
06 |
foreach (Graphic item in point) |
08 |
item.MouseEnter += new MouseEventHandler(MainPage_MouseEnter); |
09 |
item.MouseLeave += new MouseEventHandler(MainPage_DrawLine); |
04 |
/// <param name="point"></param> |
05 |
/// <param name="myMap"></param> |
06 |
/// <param name="gLayer"></param> |
07 |
/// <param name="pointLine"></param> |
08 |
/// <param name="e"></param> |
09 |
/// <param name="length"></param> |
10 |
public void DrawLineAndPoint( ref List<Graphic> point,Map myMap,GraphicsLayer gLayer, |
11 |
ref ESRI.ArcGIS.Client.Geometry.PointCollection pointLine, GetTyphoonsCompletedEventArgs e, int length) |
14 |
point = new List<Graphic>(); |
15 |
for ( int i = 0; i < length; i++) |
17 |
AddPointToGraphic(e.Result[i], i, point); |
22 |
pointLine = new ESRI.ArcGIS.Client.Geometry.PointCollection(); |
23 |
AddLineToMap(e.Result.ToList(), length, pointLine); |
26 |
GisMap.DrawAllLayers(myMap, new GraphicsLayer[] { gLayer }, point); |
27 |
GisMap.AddLayersToMap(myMap, new GraphicsLayer[] { gLayer }); |
1 |
AddPointToGraphic这个方法就是图片上面的那段代码 |
1 |
<SPAN style= "FONT-SIZE: 14px" > item.MouseEnter += new MouseEventHandler(MainPage_MouseEnter); </SPAN> |
1 |
item.MouseLeave += new MouseEventHandler(MainPage_DrawLine); |
1 |
这两段代码就是我们添加鼠标移入和移出事件了,我们看下移入事件: |
01 |
<DIV class =cnblogs_Highlighter><PRE class =csharp> void MainPage_MouseEnter( object sender, MouseEventArgs e) |
03 |
Graphic graphic = sender as Graphic; |
04 |
Cursor = Cursors.Hand; |
06 |
typhoonPointInfoCanvas.Visibility = Visibility.Visible; |
08 |
Point pt = myMap.MapToScreen( new MapPoint(Convert.ToDouble(graphic.Attributes[ "Longitude" ]), Convert.ToDouble(graphic.Attributes[ "Latitude" ]))); |
10 |
typhoonPointInfoCanvas.SetValue(Grid.MarginProperty, new Thickness(pt.X, pt.Y, 0, 0)); |
12 |
typhoonNameTextBlock.Text = "台风:" + graphic.Attributes[ "TyphoonName" ].ToString(); |
13 |
typhoonCollectionTimeTextBlock.Text = "时间:" + graphic.Attributes[ "IssueTime" ].ToString(); |
14 |
typhoonPositionTextBlock.Text = "位置:" + graphic.Attributes[ "Longitude" ].ToString() + "°E," + graphic.Attributes[ "Latitude" ].ToString() + "°N" ; |
15 |
typhoonWSTextBlock.Text = "最大风速:" + graphic.Attributes[ "WS" ].ToString() + " m/s" ; |
16 |
typhoonPressureTextBlock.Text = "中心气压:" + graphic.Attributes[ "Pressure" ].ToString() + " hPa" ; |
17 |
typhoonCircle7TextBlock.Text = "7级风圈半径:" + graphic.Attributes[ "WindCircle7" ].ToString() + " km" ; |
18 |
typhoonCircle10TextBlock.Text = "10级风圈半径:" + graphic.Attributes[ "WindCircle10" ].ToString() + " km" ; |
20 |
circle.DrawEllipse7And10WindCircle(myMap, sender); |
21 |
selectedGarphic = sender as Graphic; |
1 |
我们看到在显示信息的同时我们又把圆画了上去<SPAN style= "FONT-SIZE: 14px" >DrawEllipse7And10WindCircle()这个函数</SPAN> |
GisMap是个静态类,以下是他的代码
03 |
/// 动态加载、显示隐藏层数据、加载层上的点等 |
07 |
public static class GisMap |
13 |
/// <param name="glayer"></param> |
14 |
/// <param name="cacheGraphic"></param> |
15 |
public static void DrawSymbol(GraphicsLayer glayer, List<Graphic> cacheGraphic) |
19 |
int graphicCount = cacheGraphic.Count; |
20 |
for ( int i = 0; i < graphicCount; i++) |
22 |
glayer.Graphics.Add(cacheGraphic[i]); |
007 |
/// <param name="map">ArcGis 地图变量</param> |
008 |
/// <param name="layers">GraphicLayer 层数组</param> |
009 |
/// <param name="graphicParam">Graphic 点数组</param> |
010 |
public static void DrawLayers(Map map, GraphicsLayer[] layers, params List<Graphic>[] graphicParam) |
015 |
int length = layers.Length; |
016 |
for ( int i = 0; i < length; i++) |
018 |
if (layers[i] == null ) |
020 |
layers[i] = new GraphicsLayer(); |
022 |
DynamicDrawSymbol(layers[i], graphicParam[i], map); |
034 |
/// <param name="map">ArcGis 地图变量</param> |
035 |
/// <param name="layers">GraphicLayer 层数组</param> |
036 |
/// <param name="graphicParam">Graphic 点数组</param> |
037 |
public static void DrawAllLayers(Map map, GraphicsLayer[] layers, params List<Graphic>[] graphicParam) |
042 |
int length = layers.Length; |
043 |
for ( int i = 0; i < length; i++) |
045 |
if (layers[i] == null ) |
047 |
layers[i] = new GraphicsLayer(); |
049 |
DrawAllGraphics(layers[i], graphicParam[i]); |
059 |
/// <param name="show">隐藏或显示</param> |
060 |
/// <param name="layers">层</param> |
061 |
public static void LayersVisibility( bool show, params GraphicsLayer[] layers) |
065 |
foreach (GraphicsLayer item in layers) |
076 |
/// <param name="map">表示一张 ArcGis 地图</param> |
077 |
/// <param name="layers">表示地图层的数组</param> |
078 |
public static void DeleteLayersToMap(Map map, GraphicsLayer[] layers) |
081 |
foreach (GraphicsLayer item in layers) |
083 |
map.Layers.Remove(item); |
090 |
/// <param name="map"></param> |
091 |
/// <param name="ID"></param> |
092 |
/// <returns></returns> |
093 |
public static void DeleteLayersToMap(Map map, string [] ID) |
095 |
int length = ID.Length; |
097 |
for ( int i = 0; i < length; i++) |
099 |
foreach (Layer item in map.Layers) |
101 |
if (item.ID == ID[i]) |
103 |
map.Layers.Remove(item); |
114 |
/// <param name="map">表示一张 ArcGis 地图</param> |
115 |
/// <param name="layers">表示地图层的数组</param> |
116 |
public static void DeleteLayersToMap(Map map, ElementLayer[] layers) |
119 |
foreach (ElementLayer item in layers) |
121 |
map.Layers.Remove(item); |
129 |
/// <param name="myMap"></param> |
130 |
/// <param name="ID">ID号</param> |
131 |
public static void DeleteLayersToMap(Map myMap, string ID) |
133 |
int layers = myMap.Layers.Count; |
134 |
for ( int i = 0; i < layers; i++) |
136 |
if (myMap.Layers[i].ID == ID) |
138 |
myMap.Layers.RemoveAt(i); |
145 |
public static bool LayerExist(Map myMap, string ID) |
147 |
int layers = myMap.Layers.Count; |
148 |
for ( int i = 0; i < layers; i++) |
150 |
if (myMap.Layers[i].ID == ID) |
162 |
/// <param name="map">表示一张 ArcGis 地图</param> |
163 |
/// <param name="layers">表示地图层的数组</param> |
164 |
public static void AddLayersToMap(Map map, GraphicsLayer[] layers) |
167 |
foreach (GraphicsLayer item in layers) |
171 |
map.Layers.Add(item); |
179 |
/// <param name="map">表示一张 ArcGis 地图</param> |
180 |
/// <param name="layers">表示地图层的数组</param> |
181 |
public static void AddLayersToMap(Map map, ElementLayer[] layers) |
184 |
foreach (ElementLayer item in layers) |
186 |
map.Layers.Add(item); |
193 |
/// <param name="eLayer"></param> |
194 |
/// <param name="image"></param> |
195 |
public static void AddImageToElementLayer(ElementLayer eLayer, List<Image> image) |
199 |
foreach (Image item in image) |
201 |
eLayer.Children.Add(item); |
209 |
/// <param name="show">隐藏或显示</param> |
210 |
/// <param name="layers">层</param> |
211 |
public static void LayersVisibility( bool show, params ElementLayer[] layers) |
215 |
foreach (ElementLayer item in layers) |
224 |
/// 使用 ElementLayer 层 |
226 |
/// <param name="eLayer"></param> |
227 |
/// <param name="cacheGraphic"></param> |
228 |
/// <param name="map"></param> |
229 |
public static void DynamicDrawElementLayer(ElementLayer eLayer, List<UIElement> cacheElement, Map map) |
234 |
double xMax = map.Extent.XMax + 2; |
235 |
double xMin = map.Extent.XMin - 2; |
236 |
double yMax = map.Extent.YMax + 2; |
237 |
double yMin = map.Extent.YMin - 2; |
242 |
int graphicCount = eLayer.Children.Count; |
243 |
for ( int i = 0; i < graphicCount; i++) |
245 |
UIElement element = eLayer.Children[i]; |
248 |
if (!(((element.GetValue(ElementLayer.EnvelopeProperty) as Envelope).Extent.XMax < xMax && (element.GetValue(ElementLayer.EnvelopeProperty) as Envelope).Extent.XMax > xMin) |
249 |
&& ((element.GetValue(ElementLayer.EnvelopeProperty) as Envelope).Extent.YMax < yMax && (element.GetValue(ElementLayer.EnvelopeProperty) as Envelope).Extent.YMax > yMin))) |
252 |
cacheElement.Add(eLayer.Children[i]); |
253 |
eLayer.Children.Remove(eLayer.Children[i]); |
261 |
if (cacheElement != null ) |
263 |
int count = cacheElement.Count; |
264 |
for ( int i = 0; i < count; i++) |
267 |
if (((cacheElement[i].GetValue(ElementLayer.EnvelopeProperty) as Envelope).Extent.XMax < xMax && (cacheElement[i].GetValue(ElementLayer.EnvelopeProperty) as Envelope).Extent.XMax > xMin) |
268 |
&& ((cacheElement[i].GetValue(ElementLayer.EnvelopeProperty) as Envelope).Extent.YMax < yMax && (cacheElement[i].GetValue(ElementLayer.EnvelopeProperty) as Envelope).Extent.YMax > yMin)) |
271 |
eLayer.Children.Add(cacheElement[i]); |
272 |
cacheElement.Remove(cacheElement[i]); |
284 |
/// <param name="eLayer"></param> |
285 |
/// <param name="cacheElement"></param> |
286 |
public static void DrawAllUIElement(ElementLayer eLayer, List<UIElement> cacheElement) |
290 |
foreach (UIElement item in cacheElement) |
292 |
eLayer.Children.Add(item); |
299 |
/// 当然地图移动到相应的坐标后绘制(保留原来的点,绘制新的数据) |
302 |
/// <param name="glayer">表示地图上的层</param> |
303 |
/// <param name="cacheGraphic">存放 Graphics 的缓存</param> |
304 |
/// <param name="map">表示一张 ArcGis 地图</param> |
305 |
private static void DynamicDrawSymbol(GraphicsLayer glayer, List<Graphic> cacheGraphic, Map map) |
310 |
double xMax = map.Extent.XMax + 2; |
311 |
double xMin = map.Extent.XMin - 2; |
312 |
double yMax = map.Extent.YMax + 2; |
313 |
double yMin = map.Extent.YMin - 2; |
318 |
int graphicCount = glayer.Graphics.Count; |
319 |
for ( int i = 0; i < graphicCount; i++) |
322 |
if (!((glayer.Graphics[i].Geometry.Extent.XMax < xMax && glayer.Graphics[i].Geometry.Extent.XMax > xMin) |
323 |
&& (glayer.Graphics[i].Geometry.Extent.YMax < yMax && glayer.Graphics[i].Geometry.Extent.YMax > yMin))) |
326 |
cacheGraphic.Add(glayer.Graphics[i]); |
327 |
glayer.Graphics.Remove(glayer.Graphics[i]); |
335 |
if (cacheGraphic != null ) |
337 |
int count = cacheGraphic.Count; |
338 |
for ( int i = 0; i < count; i++) |
341 |
if ((cacheGraphic[i].Geometry.Extent.XMax < xMax && cacheGraphic[i].Geometry.Extent.XMax > xMin) |
342 |
&& (cacheGraphic[i].Geometry.Extent.YMax < yMax && cacheGraphic[i].Geometry.Extent.YMax > yMin)) |
345 |
glayer.Graphics.Add(cacheGraphic[i]); |
346 |
cacheGraphic.Remove(cacheGraphic[i]); |
358 |
/// <param name="eLayer"></param> |
359 |
/// <param name="cacheElement"></param> |
360 |
private static void DrawAllGraphics(GraphicsLayer eLayer, List<Graphic> cacheGraphic) |
364 |
foreach (Graphic item in cacheGraphic) |
366 |
eLayer.Graphics.Add(item); |
今天把 GisMap 这个类都写出来了也为了我写下一篇文章做准备吧!后面会写一篇动态加载数据点的文章!因为当大批量点(2000)左右加载到地图上的时候,
就会非常的卡,基本都动不了,所以我们要动态去加载这些点。