Learn how to use Bing Maps Silverlight control (6): Customize the eagleeye Map

8 eagleeye Map

In an electronic map, the position of the current window in the full graph is displayed. When the current window is changed, the eagleeye automatically changes accordingly. Eagleeye is roaming. You can change the map display area of the corresponding Main Window by changing the window position in the eagleeye. -- Baidu encyclopedia

The implementation of eagleeye map is actually a small-size Bing Maps control, and uses7. Custom display rangeThe custom map mode in limits the zoom level and display range of the map.

First, you can customize a mode suitable for small-size Map Display. by inheriting and limiting the chinamode zoom level, you can achieve the effect of small map:

/// <Summary> /// map of China's small map mode /// </Summary> public class chinaminimode: chinamode {public chinaminimode () {base. mapzoomrange = new range <double> (4, 4 );}}

Then, add a small map control to the normal map control.

The following is the front-end interface XAML code:

<! -- Master map -->
<C: offlinemap name = "map" animationlevel = "userinput">
<C: offlinemap. Mode>
<! -- Custom map mode --> <
C: chinamode> </C: chinamode>
</C: offlinemap. Mode>
<! -- Small map container --> <canvas X: Name = "cminimap" width = "200" Height = "200" margin =, 5, 0 "horizontalalignment =" right "verticalalignment =" TOP "> <! -- Map --> <C: offlinemap X: name = "minimap" width = "200" Height = "200" navigationvisibility = "Collapsed" scalevisibility = "Collapsed" logovisibility = "Collapsed" copyrightvisibility = "Collapsed" center = "{binding center, elementname = map, mode = twoway} "zoomlevel =" {binding zoomlevel, elementname = map, mode = twoway} "animationlevel =" userinput "mousewheel =" minimap_mousewheel "> <C: offlinemap. mode> <! -- Map mode of a small map --> <C: chinaminimode> </C: offlinemap. Mode> </C: offlinemap> <! -- Rectangular outer ring --> <rectangle width = "200" Height = "200" stroke = "# ffbb00" strokethickness = "4" margin = ","/> <! -- Center dot --> <ellipse Height = "5" width = "5" horizontalalignment = "center" verticalignment = "center" margin = "98,98, 0, 0 "fill =" # ffbb00 "/> </canvas>
</c:OfflineMap>
The minimap is the small size control to be added. The width and height are fixed at X pixels, and all additional layers are hidden, set the animation effects of the two maps to the animation effect (animationlevel) generated when the user inputs it to make the two maps smoother during synchronous movement, at the same time, avoid unnecessary animation effects (and also lose the animation effect when setting the field of view ). When the two maps are synchronized to the field of view, the data is bound to the center and zoomlevel of the two maps.
Because a small map only limits the first-level Scaling, the scroll wheel of the small map is blocked (not blocked and will drift when scrolling ):
// The Wheel private void minimap_mousewheel (Object sender, mousewheeleventargs e) {e. Handled = true;} cannot be used on the small map ;}
The final effect of the eagleeye map is as follows (in the upper right corner ):
(For the above content, refer to: Workshop .)