平台: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=likecs_Highlighter><PRE class=brush: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)左右加载到地图上的时候,
就会非常的卡,基本都动不了,所以我们要动态去加载这些点。