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 ,如需转载请自行联系原作者
相关文章
|
13天前
|
人工智能 自然语言处理 API
Multimodal Live API:谷歌推出新的 AI 接口,支持多模态交互和低延迟实时互动
谷歌推出的Multimodal Live API是一个支持多模态交互、低延迟实时互动的AI接口,能够处理文本、音频和视频输入,提供自然流畅的对话体验,适用于多种应用场景。
62 3
Multimodal Live API:谷歌推出新的 AI 接口,支持多模态交互和低延迟实时互动
|
8天前
|
前端开发 API 数据库
Next 编写接口api
Next 编写接口api
|
14天前
|
XML JSON 缓存
阿里巴巴商品详情数据接口(alibaba.item_get) 丨阿里巴巴 API 实时接口指南
阿里巴巴商品详情数据接口(alibaba.item_get)允许商家通过API获取商品的详细信息,包括标题、描述、价格、销量、评价等。主要参数为商品ID(num_iid),支持多种返回数据格式,如json、xml等,便于开发者根据需求选择。使用前需注册并获得App Key与App Secret,注意遵守使用规范。
|
13天前
|
JSON API 开发者
淘宝买家秀数据接口(taobao.item_review_show)丨淘宝 API 实时接口指南
淘宝买家秀数据接口(taobao.item_review_show)可获取买家上传的图片、视频、评论等“买家秀”内容,为潜在买家提供真实参考,帮助商家优化产品和营销策略。使用前需注册开发者账号,构建请求URL并发送GET请求,解析响应数据。调用时需遵守平台规定,保护用户隐私,确保内容真实性。