ArcGIS API for Silverlight實現地圖測距功能
問題:如何實現地圖測距功能?
地圖工具欄
<Grid x:Name="gToolMenu" Height="100" VerticalAlignment="Top" Opacity="0.8" HorizontalAlignment="Right" Width="467">
<Rectangle Fill="#22919191" RadiusX="10" RadiusY="10" Margin="0,0,0,6" >
<Rectangle.Effect>
<DropShadowEffect/>
</Rectangle.Effect>
</Rectangle>
<Rectangle Fill="#CCFFFFFF" Stroke="DarkGray" RadiusX="5" RadiusY="5" Margin="5,10,5,10" />
<StackPanel Orientation="Vertical">
<esri:Toolbar x:Name="MyToolbar" MaxItemHeight="80" MaxItemWidth="80"
VerticalAlignment="Top" HorizontalAlignment="Center"
Loaded="MyToolbar_Loaded"
ToolbarItemClicked="MyToolbar_ToolbarItemClicked"
Width="458" Height="80">
<esri:Toolbar.Items>
<esri:ToolbarItemCollection>
<esri:ToolbarItem Text="Zoom In">
<esri:ToolbarItem.Content>
<Image Source="Images/i_zoomin.png" Stretch="Uniform" Margin="5" />
</esri:ToolbarItem.Content>
</esri:ToolbarItem>
<esri:ToolbarItem Text="Zoom Out">
<esri:ToolbarItem.Content>
<Image Source="Images/i_zoomout.png" Stretch="Uniform" Margin="5" />
</esri:ToolbarItem.Content>
</esri:ToolbarItem>
<esri:ToolbarItem Text="Pan">
<esri:ToolbarItem.Content>
<Image Source="Images/i_pan.png" Stretch="Uniform" Margin="5" />
</esri:ToolbarItem.Content>
</esri:ToolbarItem>
<esri:ToolbarItem Text="Measure Length">
<esri:ToolbarItem.Content>
<Image Source="Images/i_measure.png" Margin="5">
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseLeftButtonDown">
<esri:MeasureAction TargetName="myMap" AreaUnit="SquareMeters" MeasureMode="Polyline" DistanceUnit="Kilometers" FillSymbol="{StaticResource DefaultFillSymbol}"
DisplayTotals="True" MapUnits="Kilometers"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Image>
</esri:ToolbarItem.Content>
</esri:ToolbarItem>
<esri:ToolbarItem Text="Previous Extent" >
<esri:ToolbarItem.Content>
<Image Source="Images/i_previous.png" IsHitTestVisible="False" Opacity="0.3" Stretch="Uniform" Margin="5"/>
</esri:ToolbarItem.Content>
</esri:ToolbarItem>
<esri:ToolbarItem Text="Next Extent">
<esri:ToolbarItem.Content>
<Image Source="Images/i_next.png" IsHitTestVisible="False" Opacity="0.3" Stretch="Uniform" Margin="5"/>
</esri:ToolbarItem.Content>
</esri:ToolbarItem>
<esri:ToolbarItem Text="Full Extent">
<esri:ToolbarItem.Content>
<Image Source="Images/i_globe.png" Stretch="Uniform" Margin="5" />
</esri:ToolbarItem.Content>
</esri:ToolbarItem>
<esri:ToolbarItem Text="Full Screen">
<esri:ToolbarItem.Content>
<Image Source="Images/i_widget.png" Stretch="Uniform" Margin="5" />
</esri:ToolbarItem.Content>
</esri:ToolbarItem>
</esri:ToolbarItemCollection>
</esri:Toolbar.Items>
</esri:Toolbar>
</StackPanel>
</Grid>
上面是工具欄程式碼,測距的xaml程式碼從中抽取如下:
<esri:ToolbarItem Text="Measure Length">
<esri:ToolbarItem.Content>
<Image Source="Images/i_measure.png" Margin="5">
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseLeftButtonDown">
<esri:MeasureAction TargetName="myMap" AreaUnit="SquareMeters" MeasureMode="Polyline" DistanceUnit="Kilometers" FillSymbol="{StaticResource DefaultFillSymbol}"
DisplayTotals="True" MapUnits="Kilometers"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Image>
</esri:ToolbarItem.Content>
</esri:ToolbarItem>
程式碼分析:
為圖片Image新增Triggers,監聽Image的滑鼠左鍵按下事件,然後執行MeasureAction,目標是myMap地圖,測量方式是Polyline,單位是千米(Kilometers),符號使用的是一個靜態資源。
<esri:ToolbarItem Text="Measure Length">
<esri:ToolbarItem.Content>
<Image Source="Images/i_measure.png" Margin="5">
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseLeftButtonDown">
<esri:MeasureAction TargetName="myMap" AreaUnit="SquareMeters" MeasureMode="Polyline" DistanceUnit="Kilometers" FillSymbol="{StaticResource DefaultFillSymbol}"
DisplayTotals="True" MapUnits="Kilometers"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Image>
</esri:ToolbarItem.Content>
</esri:ToolbarItem>
當按下測距按鈕時,可以在地圖上畫線測距了,效果如下圖:
注:其它要注意引用的地方
xmlns:esri="http://schemas.esri.com/arcgis/client/2009"
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
<Grid.Resources>
<esri:SimpleFillSymbol x:Key="DefaultFillSymbol" BorderBrush="Red" BorderThickness="1"/>
</Grid.Resources>
===========================================================================
如果覺得對您有幫助,微信掃一掃支援一下:
相關文章
- ArcGIS API for Silverlight 載入google地圖APIGo地圖
- 百度API實現地圖示點並測距API地圖
- ArcGIS API for Silverlight載入google地圖(後續篇)APIGo地圖
- ArcGIS API for Silverlight載入BingMap遙感地圖API地圖
- ArcGIS API for Silverlight 實現修改地圖上的工程點位置API地圖
- ArcGIS API for Silverlight 點選地圖彈出自定義窗體API地圖
- ArcGIS API for Silverlight動態標繪的實現API
- ArcGIS API for Silverlight 地圖載入進度條類之MapProgressBarAPI地圖APP
- ArcGIS API for Silverlight 中根據座標點在地圖上打標記API地圖
- ArcGIS API for Silverlight 地圖中解決點眾多的簇解決方法API地圖
- ArcGIS API for Silverlight中載入Google地形圖(瓦片圖)APIGo
- ArcGIS API for Silverlight 滑鼠移入移出地圖要素彈出視窗(優化處理)API地圖優化
- 解決ArcGIS API for Silverlight 載入地圖的內外網訪問問題API地圖
- ArcGIS API for Silverlight 地圖元素點閃爍,線流動顯示的處理方式API地圖
- ArcGIS API for Silverlight 點選地圖上的要素,彈出視窗(使用Telerik RadWindow)API地圖
- 騰訊地圖實現地圖找房功能地圖
- ArcGis api配合vue開發入門系列(一)引入arcgis api以及載入地圖APIVue地圖
- ArcGIS API for Silverlight地圖載入眾多點時,使用Clusterer解決重疊問題API地圖
- 基於ArcGIS API for Javascript的地圖編輯工具APIJavaScript地圖
- ArcGIS API for Silverlight 學習筆記API筆記
- ArcGIS API for Silverlight 呼叫GP服務載入等值線圖層API
- ArcGIS API for Silverlight之ElementLayer使用注意點API
- ArcGIS API for Silverlight之配準JPG圖片地圖文字傾斜解決方案API地圖
- ArcGIS API for Silverlight 繪製降雨路徑動畫API動畫
- ArcGIS API for Silverlight程式碼中使用Template模板API
- ArcGIS API for Silverlight開發入門準備API
- 建立第一個ArcGIS API for Silverlight應用API
- 高德地圖-地理圍欄功能實現地圖
- ArcGIS API for Silverlight 動態圖層(ArcGISDynamicMapServiceLayer)的顯示與隱藏API
- ArcGIS API for Silverlight 查詢點閃爍顯示API
- 百度地圖開發-實現離線地圖功能 05地圖
- ArcGIS API for Silverlight 當DataGrid選中項時,地圖聚焦彈出視窗,並可以播放音訊檔案API地圖音訊
- ArcGIS API for Silverlight 呼叫GP服務準備---GP模型建立、釋出、測試API模型
- ArcGis api配合vue開發入門系列(二)距離以及面積的測量APIVue
- 百度地圖API功能演示地圖API
- 利用百度地圖實現支付寶 “到位” 功能(地圖模式)地圖模式
- ArcGIS API for Silverlight 呼叫GP服務繪製等值面API
- ArcGIS API for Silverlight 之ElementLayer使用及TextSymbol的模板使用APISymbol