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 ,如需转载请自行联系原作者
相关文章
|
1天前
|
XML JSON 缓存
阿里巴巴商品详情数据接口(alibaba.item_get) 丨阿里巴巴 API 实时接口指南
阿里巴巴商品详情数据接口(alibaba.item_get)允许商家通过API获取商品的详细信息,包括标题、描述、价格、销量、评价等。主要参数为商品ID(num_iid),支持多种返回数据格式,如json、xml等,便于开发者根据需求选择。使用前需注册并获得App Key与App Secret,注意遵守使用规范。
|
10天前
|
JSON API 开发工具
淘宝实时 API 接口丨淘宝商品详情接口(Taobao.item_get)
淘宝商品详情接口(Taobao.item_get)允许开发者获取商品的详细信息,包括基本信息、描述、卖家资料、图片、属性及销售情况等。开发者需注册账号、创建应用并获取API密钥,通过构建请求获取JSON格式数据,注意遵守平台规则,合理使用接口,确保数据准确性和时效性。
|
11天前
|
JSON 安全 API
Python调用API接口的方法
Python调用API接口的方法
53 5
|
11天前
|
JSON 缓存 监控
淘宝商品详情接口(Taobao.item_get)丨淘宝API接口指南
淘宝商品详情接口(Taobao.item_get)允许开发者通过HTTP GET方法获取淘宝商品的详细信息,包括商品ID、价格、库存等。请求需包含key、secret、num_iid等必选参数,支持缓存及多种返回格式。此接口广泛应用于电商数据分析、商品选品、价格监控等领域,提升商家运营效率。