ArcGIS API for Silverlight 解决众多密集点分层显示

简介: 问题提出:        在实际中通常会遇到这样的情况,如果地图范围小,而且需要在地图上展示的元素又比较多的时候(在展现元素符号的同时,还展示元素名称或其他属性值等),这样如果在首次加载地图的时候一次性全部显示,必然会出现严重的重叠现象,怎么解决?解决思路:      我想大家首先想到的就是分层显示,不错,其实这就是一个方便可行的思路。

问题提出:

        在实际中通常会遇到这样的情况,如果地图范围小,而且需要在地图上展示的元素又比较多的时候(在展现元素符号的同时,还展示元素名称或其他属性值等),这样如果在首次加载地图的时候一次性全部显示,必然会出现严重的重叠现象,怎么解决?


解决思路:

      我想大家首先想到的就是分层显示,不错,其实这就是一个方便可行的思路。为数据库表中增加一个显示层次的字段,比如叫ShowLevel,默认是0-第一层显示,1-第二层显示...,然后在Map的Layers中添加多个Graphics,有几层就设置多少个,然后在后台程序中通过判断元素是ShowLevel属性,将元素添加到各自不同的Graphics当中去,最后处理Map的ExtendChanged事件,找到一个显示的边界值,然后通过判断当前的缩放比例是否达到了这个边界值,如果达到了,就显示第二层,如果没有达到就隐藏。


具体实现及部分代码如下:

 1、首先数据库中增加一个字段,ShowLevel,默认值为0

     

2、在MainPage.xaml中多增加几个Graphics

       

  <esri:Map.Layers>
                <esri:GraphicsLayer ID="MyGraphicsLayer">
                </esri:GraphicsLayer>
                <esri:GraphicsLayer ID="MyGraphicsLayer3">
                </esri:GraphicsLayer>
                <!--站点名称-->
                <esri:GraphicsLayer ID="GraphicsLayer1">
                </esri:GraphicsLayer>
                <esri:GraphicsLayer ID="GraphicsLayer11">
                </esri:GraphicsLayer>
                <!--站点数据-->
                <esri:GraphicsLayer ID="GraphicsLayer2">
                </esri:GraphicsLayer>
                <esri:GraphicsLayer ID="GraphicsLayer22">
                </esri:GraphicsLayer>
                <!--站点编码-->
                <esri:GraphicsLayer ID="GraphicsLayer3">
                </esri:GraphicsLayer>
                <esri:GraphicsLayer ID="GraphicsLayer33">
   </esri:Map.Layers>


3、MainPage.xaml.cs中根据ShowLevel字段值,分别添加到各自的Graphics中

            ESRI.ArcGIS.Client.Projection.WebMercator mercator = new ESRI.ArcGIS.Client.Projection.WebMercator();
            //每次加载时先清空地图上数据
            GraphicsLayer graphicsLayer = myMap.Layers["MyGraphicsLayer"] as GraphicsLayer;
            graphicsLayer.ClearGraphics();
            GraphicsLayer graphicsLayer0 = myMap.Layers["MyGraphicsLayer3"] as GraphicsLayer;
            graphicsLayer0.ClearGraphics();


            GraphicsLayer graphicsLayer1 = myMap.Layers["GraphicsLayer1"] as GraphicsLayer;
            graphicsLayer1.ClearGraphics();
            GraphicsLayer graphicsLayer2 = myMap.Layers["GraphicsLayer2"] as GraphicsLayer;
            graphicsLayer2.ClearGraphics();
            GraphicsLayer graphicsLayer3 = myMap.Layers["GraphicsLayer3"] as GraphicsLayer;
            graphicsLayer3.ClearGraphics();


            GraphicsLayer graphicsLayer11 = myMap.Layers["GraphicsLayer11"] as GraphicsLayer;
            graphicsLayer11.ClearGraphics();
            GraphicsLayer graphicsLayer22 = myMap.Layers["GraphicsLayer22"] as GraphicsLayer;
            graphicsLayer22.ClearGraphics();
            GraphicsLayer graphicsLayer33 = myMap.Layers["GraphicsLayer33"] as GraphicsLayer;
            graphicsLayer33.ClearGraphics();


            //获取到所有的山洪雨量点
            ObservableCollection<RainFall> lists = e.Result;


            //从集合中找出最大值对应的经纬度坐标
            RainFall max = lists.OrderByDescending(s => s.YL24).FirstOrDefault();
            //动态添加点到地图上
            Graphic graphic = null; //第一层
            Graphic graphic2 = null; //第二层
            foreach (RainFall item in lists)
            {
                if (!string.IsNullOrEmpty(item.Latitute.ToString()) && !string.IsNullOrEmpty(item.Longitute.ToString()))
                {
                    //有坐标值时,将该监测点添加到地图上去
                    if (max.YLZBM == item.YLZBM)
                    {
                        if (max.YL24 != 0)
                        {
                            //最大值不为0,红点闪烁
                            graphic = new Graphic()
                            {
                                Geometry = mercator.FromGeographic(new MapPoint(double.Parse(item.Latitute.ToString().Trim()), double.Parse(item.Longitute.ToString().Trim()))),
                                Symbol = LayoutRoot.Resources["DefaultMarkerSymbol"] as Symbol
                            };
                        }
                        else
                        {
                            //保持原来的蓝色标记点符号
                            graphic = new Graphic()
                            {
                                Geometry = mercator.FromGeographic(new MapPoint(double.Parse(item.Latitute.ToString().Trim()), double.Parse(item.Longitute.ToString().Trim()))),
                                Symbol = LayoutRoot.Resources["BlueMarkerSymbol"] as Symbol
                            };
                        }
                        //保存属性
                        graphic.Attributes["YLZBM"] = item.YLZBM; //雨量站编码
                        graphic.Attributes["YLZMC"] = item.ZDMC; //雨量站名称
                        graphic.Attributes["YL24"] = item.YL24; //24小时雨量
                        graphic.Attributes["DTNow"] = item.DTNow; //当前时间
                        graphic.Attributes["Latitute"] = item.Latitute; //纬度
                        graphic.Attributes["Longitute"] = item.Longitute; //经度
                        //将该Graphics添加到GraphicsLayer中去
                        graphicsLayer.Graphics.Add(graphic);
                        graphicsLayer.Opacity = 1;


                        //鼠标移入事件
                        graphic.MouseEnter += new MouseEventHandler(sh_graphic_MouseEnter);
                        graphic.MouseLeave += new MouseEventHandler(sh_graphic_MouseLeave);
                        //鼠标点击事件


                        #region 站点名称


                        //动态添加文本
                        TextSymbol textSymbol = new TextSymbol()
                        {
                            FontFamily = new System.Windows.Media.FontFamily("Microsoft YaHei"),
                            Foreground = new System.Windows.Media.SolidColorBrush(Color.FromArgb(255, 117, 20, 99)),
                            FontSize = 12,
                            Text = item.ZDMC,
                            OffsetX = 12,
                            OffsetY = -5
                        };


                        Graphic graphicText1 = new Graphic()
                        {
                            Geometry = mercator.FromGeographic(new MapPoint(double.Parse(item.Latitute.ToString().Trim(), System.Globalization.CultureInfo.InvariantCulture), double.Parse(item.Longitute.ToString().Trim(), System.Globalization.CultureInfo.InvariantCulture))),
                            Symbol = textSymbol
                        };


                        graphicText1.Attributes["TextYLZMC"] = item.ZDMC;
                        graphicsLayer1.Graphics.Add(graphicText1);


                        #endregion


                        #region 水位/雨量 数值


                        if (item.YL24 != 0)
                        {
                            TextSymbol textSymbol2 = new TextSymbol()
                            {
                                FontFamily = new System.Windows.Media.FontFamily("Microsoft YaHei"),
                                Foreground = new System.Windows.Media.SolidColorBrush(Color.FromArgb(255, 255, 0, 0)),
                                FontSize = 14,
                                Text = item.YL24.ToString(),
                                OffsetX = 10,
                                OffsetY = 23
                            };


                            Graphic graphicText2 = new Graphic()
                            {
                                Geometry = mercator.FromGeographic(new MapPoint(double.Parse(item.Latitute.ToString().Trim(), System.Globalization.CultureInfo.InvariantCulture), double.Parse(item.Longitute.ToString().Trim(), System.Globalization.CultureInfo.InvariantCulture))),
                                Symbol = textSymbol2
                            };
                            graphicText2.Attributes["TextYL"] = item.YL24;
                            graphicsLayer2.Graphics.Add(graphicText2);
                        }


                        #endregion


                        #region 站点编码


                        //动态添加站点编码
                        TextSymbol textSymbol3 = new TextSymbol()
                        {
                            FontFamily = new System.Windows.Media.FontFamily("Microsoft YaHei"),
                            Foreground = new System.Windows.Media.SolidColorBrush(Color.FromArgb(255, 0, 0, 0)),
                            FontSize = 12,
                            Text = item.YLZBM,
                            OffsetX = 27,
                            OffsetY = 23
                        };


                        Graphic graphicText3 = new Graphic()
                        {
                            Geometry = mercator.FromGeographic(new MapPoint(double.Parse(item.Latitute.ToString().Trim(), System.Globalization.CultureInfo.InvariantCulture), double.Parse(item.Longitute.ToString().Trim(), System.Globalization.CultureInfo.InvariantCulture))),
                            Symbol = textSymbol3
                        };


                        graphicText3.Attributes["TextYLZBM"] = item.YLZBM;
                        graphicsLayer3.Graphics.Add(graphicText3);
                        graphicsLayer3.Visible = false;


                        #endregion


                        //左键点击事件
                        graphic.MouseLeftButtonDown += new MouseButtonEventHandler(sh_graphic_MouseLeftButtonDown);
                        graphic.MouseLeftButtonUp += new MouseButtonEventHandler(sh_graphic_MouseLeftButtonUp);
                    }
                    else
                    {
                        //这里判断显示层数
                        if (item.ShowLevel == 0)
                        {
                            #region 显示第一层数据


                            graphic = new Graphic()
                            {
                                Geometry = mercator.FromGeographic(new MapPoint(double.Parse(item.Latitute.ToString().Trim()), double.Parse(item.Longitute.ToString().Trim()))),
                                Symbol = LayoutRoot.Resources["BlueMarkerSymbol"] as Symbol
                            };
                            //保存属性
                            graphic.Attributes["YLZBM"] = item.YLZBM; //雨量站编码
                            graphic.Attributes["YLZMC"] = item.ZDMC; //雨量站名称
                            graphic.Attributes["YL24"] = item.YL24; //24小时雨量
                            graphic.Attributes["DTNow"] = item.DTNow; //当前时间
                            graphic.Attributes["Latitute"] = item.Latitute; //纬度
                            graphic.Attributes["Longitute"] = item.Longitute; //经度
                            //将该Graphics添加到GraphicsLayer中去
                            graphicsLayer.Graphics.Add(graphic);
                            graphicsLayer.Opacity = 1;


                            //鼠标移入事件
                            graphic.MouseEnter += new MouseEventHandler(sh_graphic_MouseEnter);
                            graphic.MouseLeave += new MouseEventHandler(sh_graphic_MouseLeave);
                            //鼠标点击事件


                            #region 站点名称


                            //动态添加文本
                            TextSymbol textSymbol = new TextSymbol()
                            {
                                FontFamily = new System.Windows.Media.FontFamily("Microsoft YaHei"),
                                Foreground = new System.Windows.Media.SolidColorBrush(Color.FromArgb(255, 117, 20, 99)),
                                FontSize = 12,
                                Text = item.ZDMC,
                                OffsetX = 12,
                                OffsetY = -5
                            };


                            Graphic graphicText1 = new Graphic()
                            {
                                Geometry = mercator.FromGeographic(new MapPoint(double.Parse(item.Latitute.ToString().Trim(), System.Globalization.CultureInfo.InvariantCulture), double.Parse(item.Longitute.ToString().Trim(), System.Globalization.CultureInfo.InvariantCulture))),
                                Symbol = textSymbol
                            };


                            graphicText1.Attributes["TextYLZMC"] = item.ZDMC;
                            graphicsLayer1.Graphics.Add(graphicText1);


                            #endregion


                            #region 水位/雨量 数值


                            if (item.YL24 != 0)
                            {
                                TextSymbol textSymbol2 = new TextSymbol()
                                {
                                    FontFamily = new System.Windows.Media.FontFamily("Microsoft YaHei"),
                                    Foreground = new System.Windows.Media.SolidColorBrush(Color.FromArgb(255, 255, 0, 0)),
                                    FontSize = 14,
                                    Text = item.YL24.ToString(),
                                    OffsetX = 10,
                                    OffsetY = 23
                                };


                                Graphic graphicText2 = new Graphic()
                                {
                                    Geometry = mercator.FromGeographic(new MapPoint(double.Parse(item.Latitute.ToString().Trim(), System.Globalization.CultureInfo.InvariantCulture), double.Parse(item.Longitute.ToString().Trim(), System.Globalization.CultureInfo.InvariantCulture))),
                                    Symbol = textSymbol2
                                };
                                graphicText2.Attributes["TextYL"] = item.YL24;
                                graphicsLayer2.Graphics.Add(graphicText2);
                            }


                            #endregion


                            #region 站点编码


                            //动态添加站点编码
                            TextSymbol textSymbol3 = new TextSymbol()
                            {
                                FontFamily = new System.Windows.Media.FontFamily("Microsoft YaHei"),
                                Foreground = new System.Windows.Media.SolidColorBrush(Color.FromArgb(255, 0, 0, 0)),
                                FontSize = 12,
                                Text = item.YLZBM,
                                OffsetX = 27,
                                OffsetY = 23
                            };


                            Graphic graphicText3 = new Graphic()
                            {
                                Geometry = mercator.FromGeographic(new MapPoint(double.Parse(item.Latitute.ToString().Trim(), System.Globalization.CultureInfo.InvariantCulture), double.Parse(item.Longitute.ToString().Trim(), System.Globalization.CultureInfo.InvariantCulture))),
                                Symbol = textSymbol3
                            };


                            graphicText3.Attributes["TextYLZBM"] = item.YLZBM;
                            graphicsLayer3.Graphics.Add(graphicText3);
                            graphicsLayer3.Visible = false;


                            #endregion


                            //左键点击事件
                            graphic.MouseLeftButtonDown += new MouseButtonEventHandler(sh_graphic_MouseLeftButtonDown);
                            graphic.MouseLeftButtonUp += new MouseButtonEventHandler(sh_graphic_MouseLeftButtonUp);


                            #endregion
                        }
                        else
                        {
                            #region 显示第二层数据


                            graphic2 = new Graphic()
                            {
                                Geometry = mercator.FromGeographic(new MapPoint(double.Parse(item.Latitute.ToString().Trim()), double.Parse(item.Longitute.ToString().Trim()))),
                                Symbol = LayoutRoot.Resources["BlueMarkerSymbol"] as Symbol
                            };
                            //保存属性
                            graphic2.Attributes["YLZBM"] = item.YLZBM; //雨量站编码
                            graphic2.Attributes["YLZMC"] = item.ZDMC; //雨量站名称
                            graphic2.Attributes["YL24"] = item.YL24; //24小时雨量
                            graphic2.Attributes["DTNow"] = item.DTNow; //当前时间
                            graphic2.Attributes["Latitute"] = item.Latitute; //纬度
                            graphic2.Attributes["Longitute"] = item.Longitute; //经度
                            //将该Graphics添加到GraphicsLayer中去
                            graphicsLayer0.Graphics.Add(graphic2);
                            graphicsLayer0.Opacity = 1;
                            if (currentValue > tip_Base.sideValue)
                            {
                                graphicsLayer0.Visible = false;
                            }
                            else
                            {
                                graphicsLayer0.Visible = true;
                            }


                            //鼠标移入事件
                            graphic2.MouseEnter += new MouseEventHandler(sh_graphic_MouseEnter);
                            graphic2.MouseLeave += new MouseEventHandler(sh_graphic_MouseLeave);
                            //鼠标点击事件


                            #region 站点名称


                            //动态添加文本
                            TextSymbol textSymbol = new TextSymbol()
                            {
                                FontFamily = new System.Windows.Media.FontFamily("Microsoft YaHei"),
                                Foreground = new System.Windows.Media.SolidColorBrush(Color.FromArgb(255, 117, 20, 99)),
                                FontSize = 12,
                                Text = item.ZDMC,
                                OffsetX = 12,
                                OffsetY = -5
                            };


                            Graphic graphicText1 = new Graphic()
                            {
                                Geometry = mercator.FromGeographic(new MapPoint(double.Parse(item.Latitute.ToString().Trim(), System.Globalization.CultureInfo.InvariantCulture), double.Parse(item.Longitute.ToString().Trim(), System.Globalization.CultureInfo.InvariantCulture))),
                                Symbol = textSymbol
                            };


                            graphicText1.Attributes["TextYLZMC"] = item.ZDMC;
                            graphicsLayer11.Graphics.Add(graphicText1);
                            if (currentValue > tip_Base.sideValue)
                            {
                                graphicsLayer11.Visible = false;
                            }
                            else
                            {
                                graphicsLayer11.Visible = true;
                            }
                            #endregion


                            #region 水位/雨量 数值


                            if (item.YL24 != 0)
                            {
                                TextSymbol textSymbol2 = new TextSymbol()
                                {
                                    FontFamily = new System.Windows.Media.FontFamily("Microsoft YaHei"),
                                    Foreground = new System.Windows.Media.SolidColorBrush(Color.FromArgb(255, 255, 0, 0)),
                                    FontSize = 14,
                                    Text = item.YL24.ToString(),
                                    OffsetX = 10,
                                    OffsetY = 23
                                };


                                Graphic graphicText2 = new Graphic()
                                {
                                    Geometry = mercator.FromGeographic(new MapPoint(double.Parse(item.Latitute.ToString().Trim(), System.Globalization.CultureInfo.InvariantCulture), double.Parse(item.Longitute.ToString().Trim(), System.Globalization.CultureInfo.InvariantCulture))),
                                    Symbol = textSymbol2
                                };
                                graphicText2.Attributes["TextYL"] = item.YL24;
                                graphicsLayer22.Graphics.Add(graphicText2);
                                if (currentValue > tip_Base.sideValue)
                                {
                                    graphicsLayer22.Visible = false;
                                }
                                else
                                {
                                    graphicsLayer22.Visible = true;
                                }
                            }


                            #endregion


                            #region 站点编码


                            //动态添加站点编码
                            TextSymbol textSymbol3 = new TextSymbol()
                            {
                                FontFamily = new System.Windows.Media.FontFamily("Microsoft YaHei"),
                                Foreground = new System.Windows.Media.SolidColorBrush(Color.FromArgb(255, 0, 0, 0)),
                                FontSize = 12,
                                Text = item.YLZBM,
                                OffsetX = 27,
                                OffsetY = 23
                            };


                            Graphic graphicText3 = new Graphic()
                            {
                                Geometry = mercator.FromGeographic(new MapPoint(double.Parse(item.Latitute.ToString().Trim(), System.Globalization.CultureInfo.InvariantCulture), double.Parse(item.Longitute.ToString().Trim(), System.Globalization.CultureInfo.InvariantCulture))),
                                Symbol = textSymbol3
                            };


                            graphicText3.Attributes["TextYLZBM"] = item.YLZBM;
                            graphicsLayer33.Graphics.Add(graphicText3);
                            graphicsLayer33.Visible = false;


                            #endregion


                            //左键点击事件
                            graphic2.MouseLeftButtonDown += new MouseButtonEventHandler(sh_graphic_MouseLeftButtonDown);
                            graphic2.MouseLeftButtonUp += new MouseButtonEventHandler(sh_graphic_MouseLeftButtonUp);


                            #endregion
                        }
                    }
                }
                else
                {
                    //不做任何处理,不添加任何点信息
                }
            }


4、在Map的ExtendChanged事件中处理

      

 private void myMap_ExtentChanged(object sender, ExtentEventArgs e)
{
      currentValue = (e.NewExtent.XMax - e.NewExtent.XMin) / (myMap.Layers.GetFullExtent().XMax - myMap.Layers.GetFullExtent().XMin);
      ShowSiteByGrade();
}

        /// <summary>
        /// 判断是在第一层还是第二层显示
        /// </summary>
        private void ShowSiteByGrade()
        {
            if (currentValue >= tip_Base.sideValue)
            {
                GraphicsLayer graphicsLayer0 = myMap.Layers["MyGraphicsLayer3"] as GraphicsLayer;
                graphicsLayer0.Visible = false;
                GraphicsLayer graphicsLayer2 = myMap.Layers["GraphicsLayer11"] as GraphicsLayer;
                graphicsLayer2.Visible = false;
                GraphicsLayer graphicsLayer3 = myMap.Layers["GraphicsLayer22"] as GraphicsLayer;
                graphicsLayer3.Visible = false;
                GraphicsLayer graphicsLayer4 = myMap.Layers["GraphicsLayer33"] as GraphicsLayer;
                graphicsLayer4.Visible = false;
            }
            else
            {
                GraphicsLayer graphicsLayer = myMap.Layers["MyGraphicsLayer3"] as GraphicsLayer;
                graphicsLayer.Visible = true;
                GraphicsLayer graphicsLayer2 = myMap.Layers["GraphicsLayer11"] as GraphicsLayer;
                graphicsLayer2.Visible = true;
                GraphicsLayer graphicsLayer3 = myMap.Layers["GraphicsLayer22"] as GraphicsLayer;
                graphicsLayer3.Visible = true;
                GraphicsLayer graphicsLayer4 = myMap.Layers["GraphicsLayer33"] as GraphicsLayer;
                graphicsLayer4.Visible = false;
            }
        }
     

相关文章
|
1月前
|
分布式计算 API 数据处理
Flink【基础知识 01】(简介+核心架构+分层API+集群架构+应用场景+特点优势)(一篇即可大概了解flink)
【2月更文挑战第15天】Flink【基础知识 01】(简介+核心架构+分层API+集群架构+应用场景+特点优势)(一篇即可大概了解flink)
55 1
|
6月前
|
人工智能 数据可视化 API
ArcGIS API for Python
ArcGIS API for Python
33 0
|
10月前
|
JavaScript 前端开发 应用服务中间件
Arcgis api for javascript 详细部署
Arcgis api for javascript 详细部署
|
12月前
|
人工智能 数据可视化 数据管理
ArcGIS API for Python
ArcGIS API for Python
76 0
|
JavaScript 前端开发 定位技术
ArcGIS API For JavaScript官方文档(六)之设置范围
ArcGIS API For JavaScript官方文档(六)之设置范围
|
存储 JSON 前端开发
ArcGIS API For JavaScript官方文档(一)之默认API配置
ArcGIS API For JavaScript官方文档(一)之默认API配置
|
数据可视化 数据管理 API
​​​​​​​ARCGIS API for Python进行城市区域提取
​​​​​​​ARCGIS API for Python进行城市区域提取
​​​​​​​ARCGIS API for Python进行城市区域提取
arcgis api 3.X 修改自带弹窗样式 2022年6月12日
自带的弹窗介绍: arcgis api 3.X 修改自带弹窗样式插图 /*修改原有弹窗的css样式*/ /* 弹窗整体 */ .esriPopup { font-size: 16px; box-shadow: 10px 10px 5px #888888; } .esriPopup .sizer { position: relative; width: 400px; /* 弹窗宽度 */ z-index: 1; } /* 标题部分 */ .esriPopup .titlePane { background-color: rgba(7
|
JSON JavaScript API
geoserver图层属性查询及查询结果转换为arcgis js api能使用的格式
一个项目使用了ArcGIS JS API开发GIS展示层,但GIS服务使用了Geoserver,这时加载Geoserver数据和查询数据就和之前完全不一样了,以下介绍下我使用ArcGIS JS API+Geoserver开发过程中解决Geoserver图层属性查询的一个方案。
1240 0
|
JavaScript 前端开发 数据可视化
ArcGIS API for JavaScript 4.10 重大更新,强势来袭!
ArcGIS API for JavaScript 4.10 版引入了大量新功能,并对原有功能进行了增强: 引入了一种新的建筑图层类型BuildingSceneLayer,用于可视化BIM数据; 新增众多微件,如3D剖切、草图绘制、二维面积和距离测量、改善编辑工作流的FeatureTemplates微件等; 地图中的所有图层均可使用WebGL进行绘制,从而提升渲染性能; 通过更高性能的 WebStyleSymbols增强了3D体验; 还有诸多精彩变化,下文将为您一一呈现。
2549 0