jQuery.Rotate插件放到webbrowser里失效？

l657589096 2015-09-10 01:48:34

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple Map</title>
<link rel="stylesheet" href="http://localhost/arcgisjssdk/arcgis_js_api/library/3.3/jsapi/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://localhost/arcgisjssdk/arcgis_js_api/library/3.3/jsapi/js/esri/css/esri.css">
<script src="http://localhost/arcgisjssdk/arcgis_js_api/library/3.3/jsapi/init.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.rotate.min.js"></script>
<script type="text/javascript">
dojo.require("esri.map");
var _map1;
var _map2;
function init() {
defineClassesBeforInitMap();
var myMapLayer1 = new MapLayer();
myMapLayer1.id = "myMapLayer1";
var myMapLayer2 = new MapLayer();
myMapLayer2.id = "myMapLayer2";
var map1 = new esri.Map("mapCanvas1");
map1.addLayer(myMapLayer1);
var map2 = new esri.Map("mapCanvas2");
map2.addLayer(myMapLayer2);
_map2 = map2;
_map1 = map1;
dojo.connect(map1, "onExtentChange", onExtentChange);
}
function onExtentChange(extent) {
_map2.setExtent(extent);
$("mapCanvas1").rotate({ angle: 180 });
$("mapCanvas2").rotate({ angle: 90 });
}
dojo.addOnLoad(init);
function defineClassesBeforInitMap() {
dojo.declare("MapLayer", esri.layers.TiledMapServiceLayer, {
constructor: function () {
this.spatialReference = new esri.SpatialReference({ wkid: 3857 });
this.fullExtent = new esri.geometry.Extent(-180, -90, 180, 90, this.spatialReference);
this.initialExtent = new esri.geometry.Extent(-180, -90, 180, 90, this.spatialReference);
this.tileInfo = new esri.layers.TileInfo({
"rows": 256,
"cols": 256,
"compressionQuality": 90,
"origin": { "x": -180, "y": 90 },
"spatialReference": { "wkid": 3857 },
"lods":
[
{ "level": 0, "resolution": 1.40625, "scale": 400000000 },
{ "level": 1, "resolution": 0.703125, "scale": 295497598.5708346 },
{ "level": 2, "resolution": 0.3515625, "scale": 147748799.285417 },
{ "level": 3, "resolution": 0.17578125, "scale": 73874399.6427087 },
{ "level": 4, "resolution": 0.087890625, "scale": 36937199.8213544 },
{ "level": 5, "resolution": 0.0439453125, "scale": 18468599.9106772 },
{ "level": 6, "resolution": 0.02197265625, "scale": 9234299.95533859 },
{ "level": 7, "resolution": 0.010986328125, "scale": 4617149.97766929 },
{ "level": 8, "resolution": 0.0054931640625, "scale": 2308574.98883465 },
{ "level": 9, "resolution": 0.00274658203125, "scale": 1154287.49441732 },
{ "level": 10, "resolution": 0.001373291015625, "scale": 577143.747208662 },
{ "level": 11, "resolution": 0.0006866455078125, "scale": 288571.873604331 },
{ "level": 12, "resolution": 0.00034332275390625, "scale": 144285.936802165 },
{ "level": 13, "resolution": 0.000171661376953125, "scale": 72142.9684010827 },
{ "level": 14, "resolution": 0.0000858306884765629, "scale": 36071.4842005414 },
{ "level": 15, "resolution": 0.0000429153442382814, "scale": 18035.7421002707 },
{ "level": 16, "resolution": 0.0000214576721191407, "scale": 9017.87105013534 },
{ "level": 17, "resolution": 0.0000107288360595703, "scale": 4508.93552506767 },
{ "level": 18, "resolution": 0.00000536441802978515, "scale": 2254.467762533835 },
{ "level": 19, "resolution": 0.00000268220901489258, "scale": 1127.2338812669175 },
{ "level": 20, "resolution": 0.00000134110450744629, "scale": 563.61694 }
]
});
this.loaded = true;
this.onLoad(this);
},
getTileUrl: function (level, row, col) {
return "http://t" + col % 8 + ".tianditu.com/DataServer?T=img_c&X=" + col + "&Y=" + row + "&L=" + level;
}
});
}
</script>
</head>
<body class="tundra">
<div id="mapCanvas1" style="width:100%; height:300px;"></div>
<div id="mapCanvas2" style="width:100%; height:300px;"></div>
</body>
</html>
上面代码是用arcgis api for javascript来调用天地图的地图数据，我把它放到webbrowser中，为了可以在项目中显示天地图数据。红色字体的代码就是jQuery.Rotate，在浏览器上看的时候可以用，但是在webbrowser中就失效。请教下是不是需要设置什么属性？

...全文