“Sharing Position with Friends” in MGE based Web GIS Application

最新推荐文章于 2020-12-23 09:34:39 发布

zlxzlxzlxzlxzlx

最新推荐文章于 2020-12-23 09:34:39 发布

阅读量764

点赞数

分类专栏： MapGuide 文章标签： application web parameters layout url session

MapGuide 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

What will you do when you want to tell your friends where your favorite restaurant is? Tell them the address? Yes, good, but how about to point it out on map? In this topic, we will discuss how to implement sharing position functionality in MapGuide based Web GIS application, which is running as public service, just like Google Maps or Bing Maps.

当你要告诉您的朋友您最喜欢的餐馆在哪里的时候，你会怎么做？告诉他们地址？是的，很好，但怎么样在地图上指出来呢？在这一主题中，我们将讨论如何实现基于 MapGuide Web GIS 应用的地图共享功能，这是作为公共服务来运行，就像谷歌。

Firstly we find the restaurant on the map, and generate the link of current view, the link can be send to friends by email or IM tools, and of cause we can also embed the map into any page. Secondly, when we receive such a link and open it in browser, it should zoom to the specified view port automatically.

首先，我们在地图上找到餐厅位置，并产生当前视图的链接，该链接可以通过电子邮件或即时通讯工具发送给朋友，当然我们也可以将此地图嵌入到任何网页上。然后，我们将收到这样一个链接并在浏览器打开，它将自动放大到指定的视图位置。

I prefer to use Fusion viewer in this topic. Fusion is a web mapping application development framework. It allows web designers and developers to build rich mapping applications quickly and easily. Using "widgets" that provide the interface functionality within Fusion's modular architecture; developers are able to add, remove, or modify functionality using standard-compliant HTML and CSS. We need to create webpage and edit the flexible web layout in MapGuide Studio to add it to Task Pane:

在这个主题中我更喜欢使用Fusion Viewer。Fusion是一个Web地图应用开发框架。它允许Web设计和开发人员容易并快速地构建丰富的地图应用。在 Fusion 的模块化体系结构中使用“小窗件”以提供界面接口功能；使用符合标准的HTML和CSS允许开发者具有添加，删除或修改的功能。我们需要创建网页并在MapGuide Studio中编辑灵活网络布局同时将它添加到任务窗格：

MapGuide Fusion Viewer provides many widgets, which implemented using JavaScript. We can get the center of map and current scale by Fusion Viewer API, and then pass these parameters to home page of MapGuide web application.

MapGuide的Fusion Viewer提供了许多“小窗件”，这些“小窗件”使用JavaScript实现。我们可以利用Fusion Viewer API获取当前地图的中心坐标及比例，然后通过这些参数传递到MapGuide Web应用程序主页面。

<title>Send to friends</title>

// <!CDATA[

var mapWidgetId = 'Map';

var serverUrl = "http://ServerName/SharePosition/default.aspx";

function Generate_onclick() {

var Fusion = window.top.Fusion;

var mapWidget = Fusion.getWidgetById(mapWidgetId);

//Get the parameters of current view

var centerX = mapWidget.getCurrentCenter().x;

var centerY = mapWidget.getCurrentCenter().y;

var scale = mapWidget.getScale()

//Generate the URL

var gotoUrl = serverUrl + "?x=" + centerX + "&y=" + centerY + "&scale=" + scale;

document.getElementById("url").innerHTML = gotoUrl;

}

// ]]>

</script>

</head>

<body>

<div>

</div>

</form>

</body>

</html>

Now, let's make the home page. To avoid MapGuide authentication login dialogue, we create a MapGuide connection and generate the session string, then pass it to the viewer path.

现在，让我们产生主页面。为了避免MapGuide的身份验证登录对话框，我们创建一个MapGuide的连接并生成会话字符串，然后将它传递给浏览者的路径。

In the web application home page, we will try to get view port parameters from the URL. If such parameters are attached in URL, it maybe a URL received from friends, the map should jump the specified view port; otherwise map should load the initial view port.

在Web应用程序的主页，我们将尝试从网址获取视图位置参数。如果这些参数在所附的网址里，它可能是来自朋友的网址，地图将跳到指定的视图位置，否则地图应程序加载初始视图位置。

protected void Page_Load(object sender, EventArgs e)

{

// default flexible weblayout

string webLayout = @"Library://Samples/Sheboygan/FlexibleLayouts/Slate.ApplicationDefinition";

string viewerPathSchema =@"http://ServerName/mapguide2010/fusion/templates/mapguide/slate/index.html?ApplicationDefinition={1}&SESSION={0}";

string defaultUser = "Administrator";

string defaultPassword = "admin";

Utility utility = new Utility();

utility.InitializeWebTier(Request);

MgUserInformation userInfo = new MgUserInformation(defaultUser, defaultPassword);

MgSiteConnection siteConnection = new MgSiteConnection();

siteConnection.Open(userInfo);

MgSite site = siteConnection.GetSite();

string sessionId = site.CreateSession();

//store in session for further use

Session["sessionId"] = sessionId;

if (Request["X"] != null && Request["Y"] != null && Request["scale"] != null)

{

string centerX = Request["X"].ToString();

string centerY = Request["Y"].ToString();

string scale = Request["scale"].ToString();

//Generate the new weblayout resource identifier

webLayout = utility.ChangeInitialViewInWebLayout(webLayout, sessionId, centerX, centerY, scale);

}

string viewerPath = string.Format(viewerPathSchema, sessionId, Server.UrlEncode(webLayout));

Response.Redirect(viewerPath);

}

Now, we will discuss how to make the map jump to specified view port when it is loaded. In Autodesk MapGuide Studio, we can edit the flexible web layout using web layout editor. The default setting for "Initial view of map" is "use map's initial view"; it also can be specified value as below:

现在，我们将讨论以上页面被加载时如何使查看地图跳转到指定的视图位置。在Autodesk MapGuide Studio中，我们可以使用网络布局编辑器编辑灵活网页布局。默认的 “地图初始视图” 设置为“使用地图的初始视图”；你还可以指定为以下值：

The application definition xml would be changed as below when it is saved, you can get the xml by Maestro conveniently, please pay attention to the <Initial View> section marked as bold.

当以上设置保存时该应用程序的XML定义改变如下，你可以通过Maestro方便地获取该XML，请注意标记为粗体部分的<Initial View>。

<InitialView>

<CenterX>-87.730254250934</CenterX>

<CenterY>43.744459064634</CenterY>

<Scale>22324609.319122165</Scale>

</InitialView>

<Map>

…

</Map>

</MapGroup>

OK, as we have known the mechanism, let's implement it in code. We will add the <Initial View> section for the web layout. But there is another thing we need to care about, we are not going to change the web layout stored in library repository, because it will affect all the users. In order not to confuse other users, we need to create a temporary web layout based the current session. Code goes as below:

好了，正如我们所知道的原理，让我们用代码来实现。我们将为网络布局添加<Initial View>节点。但还有另一件事情我们必须关注，我们并没有改变在库仓储中网页的布局，因为它会影响所有用户。为了不混淆其他的用户，我们需要创建一个临时的基于当前会话的网络布局。代码如下：

public string ChangeInitialViewInWebLayout(string webLayoutTemplate, string sessionId, stringcenterX, string centerY, string scale)

{

if (siteConnection == null)

{

MgUserInformation userInfo = new MgUserInformation(sessionId);

siteConnection = new MgSiteConnection();

siteConnection.Open(userInfo);

}

MgResourceIdentifier layoutResId = new MgResourceIdentifier(webLayoutTemplate);

MgResourceService resSvc = siteConnection.CreateService(MgServiceType.ResourceService) asMgResourceService;

MgByteReader reader = resSvc.GetResourceContent(layoutResId);

System.IO.MemoryStream ms = new System.IO.MemoryStream();

byte[] buf = new byte[8 * 1024];

int read = 1;

while (read != 0)

{

read = reader.Read(buf, buf.Length);

ms.Write(buf, 0, read);

}

string layoutXml = GetStringFromMemoryStream(ms);

XmlDocument doc = new XmlDocument();

doc.LoadXml(layoutXml);

// if using custom view in web layout defintion, change the custom view port

if (doc.GetElementsByTagName("InitialView").Count > 0)

{

XmlNode nodeCenterX = doc.GetElementsByTagName("CenterX").Item(0);

nodeCenterX.InnerText = centerX;

XmlNode nodeCenterY = doc.GetElementsByTagName("CenterY").Item(0);

nodeCenterY.InnerText = centerY;

XmlNode scaleNode = doc.GetElementsByTagName("Scale").Item(0);

scaleNode.InnerText = scale;

}

else // using the map's initial view, we need to add a custom view port ourselves.

{

//Add <InitialView> tag for the web layout(application definition)

XmlNode initialViewNode = doc.CreateNode(XmlNodeType.Element, "InitialView", null);

XmlNode centerXNode = doc.CreateElement("CenterX");

centerXNode.InnerText = centerX;

XmlNode centerYNode = doc.CreateElement("CenterY");

centerYNode.InnerText = centerY;

XmlNode scaleNode = doc.CreateElement("Scale");

scaleNode.InnerText = scale;

initialViewNode.AppendChild(centerXNode);

initialViewNode.AppendChild(centerYNode);

initialViewNode.AppendChild(scaleNode);

//insert before the <Map> tag

doc.GetElementsByTagName("MapGroup")[0].InsertBefore(initialViewNode, doc.GetElementsByTagName("Map")[0]);

}

MgByteSource byteSource = ByteSourceFromXMLDoc(doc);

string sessionLayoutName = layoutResId.GetName();

string sessionLayout = "Session:" + sessionId + @"//" + sessionLayoutName +".ApplicationDefinition";

MgResourceIdentifier sessionLayoutResId = new MgResourceIdentifier(sessionLayout);

resSvc.SetResource(sessionLayoutResId, byteSource.GetReader(), null);

return sessionLayout;

}

Here is the test result, zoom you map to something you are interested in and want to share, press the "Generate Current View URL", an URL like http://serverName/SharePosition/default.aspx?x=-87.699801035788&y=43.751721697876&scale=3200.000005286838 will be generated. You can copy the follow URL

and send it to friends by mail or IM tools. When they open the URL, the map will jump to the same view port as yours. Enjoy!

下面是测试结果，缩放你的地图到你感兴趣并希望共享的地方，按“Generate Current View URL”按钮，一个像http://serverName/SharePosition/default.aspx?x=-87.699801035788&y=43.751721697876&scale=3200.000005286838将会生成。你可以复制该URL网址并通过Email或即时通讯工具发送给朋友。当他们打开此网址，地图就会跳到跟你一样的视图位置。试一下吧！

You are also welcome to discuss MapGuide related issue at http://www.newmgdn.com.

同时也欢迎您通过 http://www.newmgdn.com 讨论 MapGuide 中的有关问题。

zlxzlxzlxzlxzlx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
“Sharing Position with Friends” in MGE based Web GIS Application

What will you do when you want totell your friends where your favorite restaurant is? Tell them the address?Yes, good, but how about to point it out on map? In this topic, we will discusshow t
复制链接

扫一扫