As we discussed in previous blog about Fusion Viewer API, we can zoom to specified view port by calling ZoomToView. But it would be great if there is an API by which we can zoom to the current selection. OK, let’s do it ourselves.
To make it part of our public Fuion viewer API, we can edit the MapGuideViewerApi.js file, which locates at C:\Program Files\Autodesk\MapGuideEnterprise2011\WebServerExtensions\www\fusion\layers\MapGuide by default. Here is the JavaScript code, you can copy and paste it into MapGuideViewerApi.js
function ZoomToSelection(){ var mapWidget = Fusion.getWidgetById(mgApiMapWidgetId); if (mapWidget && mapWidget.hasSelection()) { mapWidget.getSelection(_zoomtoselection_handler) } else { alert('No selection, please select some features first.'); } } //private function function _zoomtoselection_handler(multiSelection){ var mapWidget = Fusion.getWidgetById(mgApiMapWidgetId); var selection = multiSelection[mapWidget.getMapName()]; var lowerLeftCoord = selection.getLowerLeftCoord(); var upperRightCoord= selection.getUpperRightCoord(); var centerX = upperRightCoord.x - (upperRightCoord.x - lowerLeftCoord.x)/2; var centerY = upperRightCoord.y - (upperRightCoord.y - lowerLeftCoord.y)/2; var scale = mapWidget.getScale(); ZoomToView(centerX,centerY,scale,true); }
If you don’t want to muss up the source code of the product, you can only add it to your project (your page), just a little modification needed. code as below:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="FusionViewerAPIDemo.aspx.cs" Inherits="FusionViewerAPIDemo" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <%--reference the fusion viewer API javascript file--%> <script type="text/javascript" language="javascript" src="../mapguide2011/fusion/layers/MapGuide/MapGuideViewerApi.js"></script> <script type="text/javascript"> function OnZoomToSelection() { var Fusion = window.top.Fusion; //this page are supposedto be shown in Task pane //var Fusion = opener.top.Fusion; //this page are suppose to be shown in new window var mgApiMapWidgetId = 'Map'; var mapWidget = Fusion.getWidgetById(mgApiMapWidgetId); if (mapWidget && mapWidget.hasSelection()) { mapWidget.getSelection(_zoomtoselection_handler) } else { alert('No selection, please select some features first.'); } } function _zoomtoselection_handler(multiSelection) { var Fusion = window.top.Fusion; var mgApiMapWidgetId = 'Map'; var mapWidget = Fusion.getWidgetById(mgApiMapWidgetId); var selection = multiSelection[mapWidget.getMapName()]; var lowerLeftCoord = selection.getLowerLeftCoord(); var upperRightCoord = selection.getUpperRightCoord(); var centerX = upperRightCoord.x - (upperRightCoord.x - lowerLeftCoord.x) / 2; var centerY = upperRightCoord.y - (upperRightCoord.y - lowerLeftCoord.y) / 2; var scale = mapWidget.getScale(); ZoomToView(centerX, centerY, scale, true); } </script> </head> <body> <form id="form1" runat="server"> <div> <input type="button" name="" value="zoomToSelection" class="Ctrl" id="zoomToSelButton" onclick="OnZoomToSelection()" style=" 30%" /> </div> </form> </body> </html>
Happy MapGuiding!
峻祁连