SL API 与 JS API的交互

最新推荐文章于 2019-08-02 09:37:48 发布

Esri中国

最新推荐文章于 2019-08-02 09:37:48 发布

阅读量1.7k

点赞数

分类专栏： Web开发

本文链接：https://blog.csdn.net/arcgis_all/article/details/8202653

版权

Web开发专栏收录该内容

32 篇文章 6 订阅

订阅专栏

我们知道，Siverlight 作为浏览器的一个插件，就相当于程序的容器，那么我们怎样和Html 中的JS 代码交互呢，其实微软给我们了解决方案. 参考文章http://www.cnblogs.com/HellenTian/archive/2010/11/11/1874711.html

1.Silverlight 来调用Javascript 。比如我想显示两个Map 一个Map 是Silverlight API 来写，另一个Map 用 JS API来写.实现两个Map的联动效果。当我 SL中的Map的Extent的发生变化时，JS中MAP 相应也变化到相同的Extent。

我们可以在JS 文件里写一个 jssetextent 函数来来对MAP的Extent进行设置，在SIlverlight中进行调用。首先我在我的HTMl页面如下：

[html] view plain copy

<span style="font-size:18px;"><!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>
<title>JSANDSLAPI</title>
<style type="text/css">
html, body
{
height: 100%;
overflow: auto;
}
body
{
padding: 0;
margin: 0;
}
#silverlightControlHost
{
height: 100%;
text-align: center;
}
#jsdiv
{
height: 80%;
width: 45%;
float: left;
background-color: #3FC;
}
</style>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/dojo/dijit/themes/claro/claro.css"/>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/esri/css/esri.css" />
<script type="text/javascript" src="Silverlight.js"></script>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript"> var djConfig = { parseOnLoad: true };</script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.2"></script>
<script type="text/javascript">
function onSilverlightError(sender, args) {
var appSource = "";
if (sender != null && sender != 0) {
appSource = sender.getHost().Source;
}
var errorType = args.ErrorType;
var iErrorCode = args.ErrorCode;
if (errorType == "ImageError" || errorType == "MediaError") {
return;
}
var errMsg = "Unhandled Error in Silverlight Application " + appSource + "\n";
errMsg += "Code: " + iErrorCode + " \n";
errMsg += "Category: " + errorType + " \n";
errMsg += "Message: " + args.ErrorMessage + " \n";
if (errorType == "ParserError") {
errMsg += "File: " + args.xamlFile + " \n";
errMsg += "Line: " + args.lineNumber + " \n";
errMsg += "Position: " + args.charPosition + " \n";
}
else if (errorType == "RuntimeError") {
if (args.lineNumber != 0) {
errMsg += "Line: " + args.lineNumber + " \n";
errMsg += "Position: " + args.charPosition + " \n";
}
errMsg += "MethodName: " + args.methodName + " \n";
}
throw new Error(errMsg);
}
</script>
<script type="text/javascript">
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("esri.map");
var map; function init() {
var initExtent = new esri.geometry.Extent({ "xmin": -27141257.7092732, "ymin": -31127629.9353227, "xmax": 27141257.7092732, "ymax": 31127629.9353228, "spatialReference": { "wkid": 102100} });
map = new esri.Map("jsdiv", {
extent: esri.geometry.geographicToWebMercator(initExtent)
});
var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
map.addLayer(basemap);
dojo.connect(map, 'onLoad', function (theMap) {
dojo.connect(dijit.byId('map'), 'resize', map, map.resize);
});
} dojo.addOnLoad(init);
function jssetextent(xmin, xmax, ymin, ymax) {
var myextent = new esri.geometry.Extent({ "xmin": parseFloat(xmin), "ymin": parseFloat(ymin), "xmax": parseFloat(xmax), "ymax": parseFloat(ymax), "spatialReference": { "wkid": 102100} });
map.setExtent(myextent);
}
</script>
</head>
<body>
<div style="float: left; height: 80%; width: 50%; background-color: #036">
<form id="form1" runat="server" style="height: 100%; width: 100%; background-color: #036">
<div id="silverlightControlHost">
<object id="SLContainer" data="data:application/x-silverlight-2," type="application/x-silverlight-2"
width="100%" height="100%">
<param name="source" value="ClientBin/JSANDSLAPI.xap" />
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="5.0.61118.0" />
<param name="autoUpgrade" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=5.0.61118.0" style="text-decoration: none">
<img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight"
style="border-style: none" />
</a>
</object>
<iframe id="_sl_historyFrame" style="visibility: hidden; height: 0px; width: 0px;
border: 0px"></iframe>
</div>
</form>
</div>
<div id="jsdiv">
</div>
</body>
</html>
</span>

以上代码中<div id="silverlightControlHost"> 来作为Silverlgiht插件的容器。为 <object id="SLContainer" data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">增加一个id属性，方便JS 获取。<div id='jsdiv'> 来作为我们的JS API 的MAP的容器，并且包含了初始化MAP 并添加了一个缓存图层。红色部分是一个定义好的函数，接受四个参数，主要功能是设置MAP的Extent ，这个函数是在后面的 Siverlight 中来调用的

在 SL中的XAML的代码如下

[html] view plain copy

<span style="font-size:18px;"><Grid x:Name="LayoutRoot" Background="White">
<esri:Map Background="Beige" Name="SLmap" PanDuration="0" ExtentChanged="SLmap_ExtentChanged">
<esri:Map.Layers>
<esri:LayerCollection>
<esri:ArcGISTiledMapServiceLayer Url="http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer" />
</esri:LayerCollection>
</esri:Map.Layers>
</esri:Map>
</Grid></span>

用System.Windows.Brower命名空间下的某些silverlight类，你可以调用一段脚本写的javascript函数。这样就给你的silverlight代码一个很有规律的方式来和页面交互。

[csharp] view plain copy

<span style="font-size:18px;"></span>

[csharp] view plain copy

<span style="font-size:18px;"> private void SLmap_ExtentChanged(object sender, ESRI.ArcGIS.Client.ExtentEventArgs e)
{
// string s=SLmap.Extent
double xmin = SLmap.Extent.XMin;
double xmax = SLmap.Extent.XMax;
double ymin = SLmap.Extent.YMin;
double ymax = SLmap.Extent.YMax;
ScriptObject scriptObjcet = (ScriptObject)HtmlPage.Window.GetProperty("jssetextent");
scriptObjcet.InvokeSelf(xmin, xmax, ymin, ymax);
}</span>

通过 HTml Page .Window .GetProperty 来获取这个函数，剩下的就是就是传递参数然后调用了运行的效果如下,当平移或者缩放左侧的Map时，右侧Map的范围也会发生改变

2,以上已经实现了再 SIlverlight 中调用 JS中的函数，下面开始实现一个在JS代码中来调用 SL中的函数，以实现JS与SL的互操作，我实现在 JS API中MAP中增加一个点，然后把点的坐标传递到SL 里面来，在Sl中MAP的相同位置增加一个点

在javascript中调用silverlight方法，主要有以下步骤:

在silverlight程序中创建一个公开的方法来暴露你想在web页面中用的函数。

在方法上边添加一个ScriptableMember属性。

在包含这个方法的类上添加ScriptableType属性。

调用HtmlPage.RegisterScriptableObject()将这个方法暴露给javascript。

在 Silverlight 的XAML 文件中为MAP添加一个GraphisLayer ，并编写为此Graphicslayer添加点的代码 C#代码如下

[csharp] view plain copy

[ScriptableType]
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
HtmlPage.RegisterScriptableObject("JSOBJ", this);
}
[ScriptableMember]
public void Addpoint(double ptx ,double pty)
{
MapPoint pt = new MapPoint(ptx, pty);
SimpleMarkerSymbol makersymbol = new SimpleMarkerSymbol();
makersymbol.Style = SimpleMarkerSymbol.SimpleMarkerStyle.Square;
makersymbol.Size = 10;
Graphic g = new Graphic();
g.Geometry = pt;
g.Symbol = makersymbol;
GraphicsLayer glayer = SLmap.Layers["MyGraphicslayer"] as GraphicsLayer;
glayer.Graphics.Add(g);
}

为方法所在的类以及该方法增加特性，同时将该方法所在的实例注册为JSOBJ，允许外部的JS代码可以调用 Sl内部的方法。

下面再JS文件里编写代码，在 map的点击事件里为Map 增加一个函数，增加一个graphic 同时获取AddPoint方法并调用，同时把点的坐标传递给Addpoint作为参数。

[javascript] view plain copy

dojo.connect(map, "onClick", function (evt) {
var symbol1 = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 10, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 1), new dojo.Color([0, 255, 0, 0.25]));
var graphic = new esri.Graphic(evt.mapPoint, symbol1);
map.graphics.add(graphic);
var slcontainer = document.getElementById("SLContainer");
slcontainer.content.JSOBJ.Addpoint(evt.mapPoint.x, evt.mapPoint.y);
});