Example:
HTML代码:
<div id="layout" style="position: relative;height: 100%;width: 100%;overflow:hidden;">
<div id="leftContainer" style="position: absolute;width: 50%;border: 1px solid gray;height: 100%;left: 0;"></div>
<div id="rightContainer" style="position: absolute;width: 50%;border: 1px solid gray;height: 100%;right: 0;"></div>
</div>
JavaScript代码:
//创建多屏视图
multiScreenWidget = new Cesium.GeoMultiScreenWidget({
layoutId: "layout",
viewers:[{
{container:"leftContainer",options:{
timeline: true
}},
{container:"rightContainer",options:{
timeline: false
}}
}]
});
//加载图层
var viewerleft = multiScreenWidget.getViewerById("leftContainer");
var tdt_img_provider = new Cesium.UrlTemplateImageryProvider({
url: "http://{s}.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=e90d56e5a09d1767899ad45846b0cefd",
subdomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7']
});
var tdt_img_note_provider = new Cesium.UrlTemplateImageryProvider({
url: "http://{s}.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=e90d56e5a09d1767899ad45846b0cefd",
subdomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7']
});
var tdt_img_layer = viewerleft.imageryLayers.addImageryProvider(tdt_img_provider);
var tdt_img_note_layer = viewerleft.imageryLayers.addImageryProvider(tdt_img_note_provider);
//加载图层
var viewerright = multiScreenWidget.getViewerById("rightContainer");
var tdt_vec_provider = new Cesium.UrlTemplateImageryProvider({
url: "http://{s}.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=e90d56e5a09d1767899ad45846b0cefd",
subdomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7']
});
var tdt_vec_note_provider = new Cesium.UrlTemplateImageryProvider({
url: "http://{s}.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=e90d56e5a09d1767899ad45846b0cefd",
subdomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7']
});
var tdt_vec_layer = viewerright.imageryLayers.addImageryProvider(tdt_vec_provider);
var tdt_vec_note_layer = viewerright.imageryLayers.addImageryProvider(tdt_vec_note_provider);
//定位
viewerleft.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(114.31, 30.52, 500000.0)
});