zoukankan      html  css  js  c++  java
  • To Implement ZoomToSelection in Fusion Viewer MapGuide Enterprise 2011

    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>
    

    image

    Happy MapGuiding!

    峻祁连

    作者:峻祁连
    邮箱:junqilian@163.com
    出处:http://junqilian.cnblogs.com
    转载请保留此信息。
  • 相关阅读:
    会跳舞的树(只用HTML+CSS)(转)
    国内UED收录
    HDU 1078 dfs+dp
    HDU 1278
    HDU 4499
    HDU 4597
    POJ2777
    POJ1780 Code
    简单的Fleury算法模板
    POJ 2513 无向欧拉通路+字典树+并查集
  • 原文地址:https://www.cnblogs.com/junqilian/p/1751679.html
Copyright © 2011-2022 走看看