Digitize using Fusion Viewer API in MapGuide Enterprise 2011

简介:


As you know, we have viewer API for AjaxViewer (Basic Web Layout) to digitize point, rectangle or polygon, but how about Fusion Viewer, is there any similar API for fusion viewer? Yes, we do.

You can refer to the MapGuideViewerApi.js, which locates at C:\Program Files\Autodesk\MapGuideEnterprise2011\WebServerExtensions\www\fusion\layers\MapGuide by default. MapGuideViewerApi mermicking the basic weblayout viewer API, including:

function DigitizePoint(handler)

function DigitizeLine(handler)

function DigitizeLineString(handler)

function DigitizeRectangle(handler)

function DigitizePolygon(handler)

function ClearDigitization()

function Refresh()

function SetSelectionXML(selectionXml)

function ZoomToView(x, y, scale, refresh)

 

In this artical, we will show you how to use digitizing.

Firstly, we need add a custom command to invoke an URL in flexible weblayout and add it to fusion viewer. Open MapGuide Studion and create a flexible weblayout, select one template, I choose Slate here, and then create a new component based on a master type, select “Invoke URL” as master type. This new component will invoke to your page(FusionViewerAPIDemo.aspx for example) when activated. Remember to add it to the Task Pane or other containner to display it.

image

 

Now, let’s go the page FusionViewerAPIDemo.aspx. The code goes like 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 showCoordniate(geomText) {
            document.getElementById('coordResult').innerHTML = geomText;
        }

        function OnDigitizePoint() {
            //ClearDigitization();
            DigitizePoint(OnPointDigitized)
        }

        function OnPointDigitized(point) {
            var geomText = point.X + "," + point.Y;
            showCoordniate(geomText);
        }

        function OnDigitizeRectangle() {
            //ClearDigitization();
            DigitizeRectangle(OnRectangleDigitized);
        }

        function OnRectangleDigitized(rectangle) {
            var geomText = "5,"
                + rectangle.Point1.X + "," + rectangle.Point1.Y + ","
                + rectangle.Point2.X + "," + rectangle.Point1.Y + ","
                + rectangle.Point2.X + "," + rectangle.Point2.Y + ","
                + rectangle.Point1.X + "," + rectangle.Point2.Y + ","
                + rectangle.Point1.X + "," + rectangle.Point1.Y;

            showCoordniate(geomText);

        }

        function OnDigitizePolygon() {
            //ClearDigitization();
            DigitizePolygon(OnPolyonDigitized);
        }

        function OnPolyonDigitized(polygon) {
            var geomText = polygon.Count;
            for (var i = 0; i < polygon.Count; i++) {
                geomText += "," + polygon.Point(i).X + "," + polygon.Point(i).Y;
            }

            showCoordniate(geomText);

        }

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input type="button" name="" value="point" class="Ctrl" id="pntButton" onclick="OnDigitizePoint()"
            style="width: 30%" />
        <input type="button" name="" value="rectangle" class="Ctrl" id="rectButton" onclick="OnDigitizeRectangle()"
            style="width: 30%" />
        <input type="button" name="" value="polygon" class="Ctrl" id="polyButtton" onclick="OnDigitizePolygon()"
            style="width: 30%" />
        <input type="button" name="" value="clear" class="Ctrl" id="clearButton" onclick="ClearDigitization()"
            style="width: 30%" />
        <hr />
        Coordinate Result:<br />
        <div id="coordResult" style="height: 50; width: 100; overflow: scroll; color: InfoText">
            Coordinate Result shows here...</div>
    </div>
    </form>
</body>
</html>

 

Run it the application and play with it, it should work now!

image

 

Happy MapGuiding!

峻祁连

作者: 峻祁连
邮箱:junqilian@163.com 
出处: http://junqilian.cnblogs.com 
转载请保留此信息。


本文转自峻祁连. Moving to Cloud/Mobile博客园博客,原文链接:http://www.cnblogs.com/junqilian/archive/2010/06/04/1751563.html ,如需转载请自行联系原作者
目录
打赏
0
0
0
0
23
分享
相关文章
速卖通商品详情接口(速卖通API系列)
速卖通(AliExpress)是阿里巴巴旗下的跨境电商平台,提供丰富的商品数据。通过速卖通开放平台(AliExpress Open API),开发者可获取商品详情、订单管理等数据。主要功能包括商品搜索、商品详情、订单管理和数据报告。商品详情接口aliexpress.affiliate.productdetail.get用于获取商品标题、价格、图片等详细信息。开发者需注册账号并创建应用以获取App Key和App Secret,使用PHP等语言调用API。该接口支持多种请求参数和返回字段,方便集成到各类电商应用中。
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
56 5
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
淘宝拍立淘按图搜索API接口系列的应用与数据解析
淘宝拍立淘按图搜索API接口是阿里巴巴旗下淘宝平台提供的一项基于图像识别技术的创新服务。以下是对该接口系列的应用与数据解析的详细分析
亚马逊商品详情接口(亚马逊 API 系列)
亚马逊作为全球最大的电商平台之一,提供了丰富的商品资源。开发者和电商从业者可通过亚马逊商品详情接口获取商品的描述、价格、评论、排名等数据,对市场分析、竞品研究、价格监控及业务优化具有重要价值。接口基于MWS服务,支持HTTP/HTTPS协议,需注册并获得API权限。Python示例展示了如何使用mws库调用接口获取商品详情。应用场景包括价格监控、市场调研、智能选品、用户推荐和库存管理等,助力电商运营和决策。
89 23

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等